html(超文本标记语言)

发表于 | 分类于

html(超文本标记语言)

html代码示例

<!DOCTYPE html><!--声明文档类型为html-->
<html><!--html开始-->
    <head><!--头部开始-->
        <meta charset="UTF-8"><!--设置编码为UTF-8-->
        <title></title><!--标题-->
    </head><!--头部结束-->
    <body><!--主体开始-->
    </body><!--主体结束-->
</html><!--html结束-->

mate标签详解

元素(标签)

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

嵌套规则/语义化

  • 标签嵌套规则
    1.行内标签不能嵌套快标签,快标签可以嵌套行内标签
    2.a标签不能嵌套a标签
    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搜索引擎优化