html(超文本标记语言)
html代码示例
<!DOCTYPE html><!--声明文档类型为html-->
<html><!--html开始-->
<head><!--头部开始-->
<meta charset="UTF-8"><!--设置编码为UTF-8-->
<title></title><!--标题-->
</head><!--头部结束-->
<body><!--主体开始-->
</body><!--主体结束-->
</html><!--html结束-->
元素(标签)
1.块元素(block)
常用块元素: div,h1-h6,p,ul,li,ol,dt.dl,dd,header,nav,footer,section,article,aside等
- 块元素的特征
1.默认独占一行
2.没有宽度的时候,宽度是auto,撑满一行(宽度就是父级的宽度)
3.支持所有的css命令
2.行内元素(inline)
常用行内元素: a.span,strong,em,mark,img,time等
- 行内元素的特征
1.内容撑开宽高,宽高的值都是auto,只不过选出来的宽高是由内容撑开的
2.不支持设置宽高
3.不支持上下的margin与上下的padding,上下的padding是有问题 虽然把背景撑出来了,这个只是表面现象,它不会对其它的元素有影响
4.所有行内元素都会在一行显示
5.代码换行会被解析成一个空格
3.行内块元素(inline-block)
- display:inline-block; 行内块元素
特征:
1.行内元素支持宽高
2.块元素可以在行中显示
3.不给宽度的话,宽度会有内容撑开,
4.代码换行会被解析成一个空格
5.IE6,7不支持块元素的inline-block,IE6.7不认识inline-block,给行内元素加上这个属性后会触发IE的haslayout特点,会让行内元素具有与inline-block一样的特征,所以它不支持块元素的inline-block
属性
html标签可以拥有属性。属性为HTML元素提供附加信息。
<div id="box" style="width: 100px;"></div>
设置div的id为box,行内样式为宽100px
嵌套规则/语义化
- 标签嵌套规则
2.a标签不能嵌套a标签1.行内标签不能嵌套快标签,快标签可以嵌套行内标签
3.h1-h6,dt这些标签的性质是标题,那里面就不能嵌套块级标签(可以嵌套行内)
4.p标签不能嵌套块标签(可以嵌套行内标签)
5.ul和li,以及ol与li,以及dl和dt,dd他们是固定的嵌套规则- 1.ul个ol下边只能跟li,li的父级只能是ul或者ol
- 2.li中可以嵌套任何标签,升值可以再放一个ul或者ol
- 3.dl和dt.dd可以参考ul和li
- 标签语义化
根据页面里面不同的内容,选择最适合它的标签
1.方便后期添加样式
2.提高代码的可读性
3.内容的可读性比较高
4.利于SEO搜索引擎优化