一、标题标签 h1~h6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
二、段落标签 p
<p>湖水这样沉静,这样蓝</p>
<p>一朵洁白的花闪在秋光里很阴暗;</p>
<p>早晨,一个少女来湖边叹气,</p>
<p>十六岁的影子比红宝石美丽。</p
三、换行标签 br
青海省城有一个郡王,可怕的<br>
欲念,象他满腮浓黑的胡须,<br>
他是全城少女悲惨的命运;<br>
四、删除标签 del
原价 <del>19999</del>
现价 999
五、块元素标签 div
<div>
用来布局
</div>
六、span标签, 没有语义,一般用来包裹文字,让文字更好被选中。
<span>
包裹文字
</span>
七、常用的布局标签
header 网页的头部
main 网页的主体部分(一般只有一个)
footer 网页的底部
nav 网页的导航
aside 和主题相关的内容
article 文章之类的
section 独立的块区,上面的标签都不合适,就用这个
div 块元素
八、常用的图片标签 img
一般来说我们都是使用img标签来引入图片,img标签有四个属性
<img src="../image/01" alt="" width="" height="">
1.src属性 引入图片路径 通过./或者…/开头
./ 若引用的图片在同一个目录下
../ 若引用图片不在同一个目录(../到上一级目录,可叠加../../)
2.alt属性 对图片的描述,对图片引用不成功的时候显示文字
3.width属性 设置图片的宽度
属性值里直接写数值或者带单位
4.height属性 设置图片的高度
属性值里直接写数值或者带单位
注意:一般情况 width和height只设置一个,另一个让浏览器按比例缩放。
九、行内元素和块元素
块元素(block element) 常用来布局
特点:
1.块元素会独占一行,从上往下依次排列
2.块元素的宽度是父元素的100%(body是父元素,页面边小随之变小)
3.块元素的高度默认是被内容撑开的
常用块元素:div h1-h6 p header footer nav......
行内元素(inline element)
特点
1.不会独占一行,它是自左向右排列,一行排满再换行
2.行内元素的宽和高,默认是被内容撑开的
常用行内元素:span em strong a i ......
行内块元素
特点
1.兼具块元素和行内元素特点
2.不会独占一行,可自定义宽高
注意:
1.块元素里什么都能放,可以是块元素,行内元素,行内块元素
2.行内元素里一般只放行内元素,如:文字,不能放块元素
3.特殊的块元素p标签它里面一般只放文字或者图片,不能放块元素
4.特殊的行内元素a标签,它里面什么都能放,可以块元素,行内元素,行内块元素,除了a标签它自己不能放进去。
十、背景音乐标签 audio
< audio src=”音乐” autoplay=“autoplay” loop=”loop”/ >
十一、列表标签
1.有序标签 ol
< ol >
< li >列表项< /li >
< li >列表项< /li >
< /ol >
2.无序标签 ul
< ul >
< li >列表项< /li >
< li >列表项< /li >
< /ul >
十二、文本设置标签
1.字体加粗 b
< b > < /b >
2.设置斜体 i
< i > < /i >
3.设置文本下划线 u
< u > < /u >
4.在文本上设置一个删除线 s
< s > < /s >
十三、表格标签 table
<table> //表格标签
<tr> //行标签
<td>需要显示的内容</td> //列标签
</tr>
</table>