day01

HTML基础

html 基本语法

html标签

  • 单标签 <img /> <img> 通常用简写

  • 双标签 <html> </html>

属性 属于标签 在标签内部

<img src="图片的地址">  
<table width="100" height="200"></table> 
ps:单双引号都可以，不写也可以，最好用双引号写

语法规范

  • 标签嵌套 用缩进 （看公司具体规范）

  • 标签名不区分大小写 建议小写

  • 属性名也不区分大小写 建议小写

注释

<!--单行-->
<!--
多行
-->

常用HTML实体

  • &nbsp; 一个空格

  • &lt; < 小于号

  • &gt; > 大于号

  • &amp; & 和号

  • &copy; 版权号

  • &yen; 人民币符号

 

2 html 常用标签

主体结构

  • <html></html>

  • <head></head>

  • <body></body>

HEAD 标签

  • <title></title> 网页标题

  • <meta> 指定网页的元信息 字符集、关键字、描述 seo搜索 属性：charset name content

  • <style></style> 最长用来写css代码

  • <link> 属性：herf type rel 作用：导入css或者指定网页图标

  • <script></script> 导入JavaScript

格式排版标签

  • <hn></hn> 1-6 大标题 seo权重有关 比p标签大的多

  • <p></p> 段落 seo权重有关

  • <pre></pre> 原样输出 用于写代码

  • <br> 换行

  • <hr> 分隔

  • <div></div> 布局用的 本身无意义

文本标签

  • <em></em> 强调 表现为斜体

  • <strong></stron> 强调 表现为粗体

  • <mark></mark> H5新增 表示被选择

  • <sup></sup> 上标

  • <sub></sub> 下标

  • <ins></ins> 添加的内容

  • <del></del> 删除的内容

  • <ruby></ruby> <rt></rt> 加拼音 H5新增 配合使用

 

4 CSS基本语法

使用css

  • link 引入外部的css文件

  • <style></style> 在html中写

  • 使用html元素的style属性 尽量不要使用这种

格式

选择器 {
    CSS属性：值;
    CSS属性：值;
}
​
选择器 {CSS属性：值;CSS属性：值}

注释

/**/

 

css长度单位

px 像素
em 默认大小的倍数
百分比 默认大小参照

css颜色单位

colorname: red/green/bue/purple/orange/yellow/pink/skyblue
rgb数字  rgb（34,45，23） rgb（20%，57%，100%）
16进制  #abcdef   #f90 #ccc   推荐使用的

 

5css选择器

1 标签名选择器
tagname {
    
}
​
2 类名
.classname {
    
}
3 id选择器
idname {
    
}
4 全局选择器
* {
    
}
5 组合 后代元素
选择器 选择器
​
6 组合 子元素
选择器>选择器
7 群组
选择器，选择器,...
8 多条件选择器
p.item

 

6 选择器优先级

id > class > tagname > *
组合选择器 数数

 

7 css 常用属性

字体

  • font-family 非衬线字体 ：微软雅黑 sans-serify 衬线字体：宋体 serify

  • font-size: 30px; 字体大小

  • font-weight normal/blod 加粗

  • font-style notmal/italic 倾斜

  • font-variant normal/small-caps 对英文小写才有效 小型大写

  • font 复合属性

    font:[weight|style|variant] size family

 

颜色

  • color

 

文本

  • word-spacing: 30px; 字符间隔 针对英文

  • letter-spacing: 10px; 字符间隔 针对汉字

  • text-align: left/center/right; 字体水平对齐方式：默认左对齐

  • vertical-align: baseline/middle; 顶线、基线、底线 字体都是在顶线和底线之间蹦跶 只有把文字和图片一起写的时候有点用

  • line-height 行高

  • text-decoration: none/overline/underline/line-through 默认none 最常用来处理超链接的下划线

  • text-indent:2em 首行缩进

  • word-wrap:break-word; 对于长链接或长单词自动断行

  • overflow-wrap:break-word 和上面的一样 css3起的别名

  • white-space: pre/pre-wrap; 格式化输出 /保证换行并缩进

  •  

 

posted @ 2018-08-08 15:35  xujinjin  阅读(104)  评论(0)    收藏  举报