HTML常用标签

1. doctype标签

• 声明位于文档中的最前面的位置，处于标签之前，此标签可告知浏览器文档使用哪种HTML或XHTML规范
• 作用：声明文档的解析类型，避免浏览器的怪异模式
• 这个声明属性会被浏览器识别并使用，如果没有声明，默认就是怪异模式
• 解析类型：
  • backcompat:怪异模式，浏览器使用自己的怪异模式解析渲染页面
  • css1compat:标准模式，浏览器使用w3c的标准渲染页面

2. head内常用标签

1. meta介绍

   1. 可提供有关页面的源信息，针对搜索引擎和更新频度的描述关键词
   2. 标签位于文档的头部，不包含任何内容
   3. 提供的信息用户是不可见的

2. meta标签的组成

   1. name属性：

      • 主要是用于描述网页，与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的

      • <meta name="keywords" content="北京汽车网，北京汽车报价，北京车市最新报价， 北京汽车报道，北京易车网，北京汽车团购服务">
        <meta name="description" content="北京汽车网，北京汽车报价，北京车市最新报价，北京汽车报道，北京易车网，北京汽车团购服务">
        

   2. http-equiv 属性：

      • 相当于http 的文件头作用，它可以想浏览器传回一些有用的信息，以帮助正确的显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值

      • <title>meta标签</title>
        
        
        <meta charset="UTF-8">
        <meta http-equiv="content-type" charset="utf8">和上面的是一样的，都是指定编码的
        
        
        <meta http-equiv="refresh" content="2;url=http://www.baidu.com">  <!--两秒之后跳转到百度页面(注意后面的引号，分别在秒数的前面和网址的后面)-->
        <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7">  <!--设定当前网页的兼容模式为IE7(哪怕你用其他版本的浏览器打开，它也是支持IE7版本的)-->
        

   3. 非meta标签

      • <link rel="icon" href="http://www.jd.com/favicon.ico">  <!--设置头部图标，，就像我们打开百度网址上会有百度的小图标-->
        <link rel="stylesheet" href="css.css">    #加载css
        <script src="hello.js"></script>　#加载js
        

        ​

3. body内常用标签

1. #### 基本标签

- ```
'''
: n的取值范围是1~6; 从大到小. 用来表示标题.

: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

: 加粗标签.

: 为文字加上一条中线.

: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.</sub></sup>

:换行.

---

:水平线

特殊字符：
< &gt；&quot；©®
&nbsp:空格
&gt:大于号
&lt:小于号

'''

2. #### /

/

1. div：div只是一个块级元素，并无实际意义，主要通过CSS样式为其赋予不同的表现
2. span：表示了内联行，并无实际意义，主要通过CSS样式为其赋予不同的表现

3. #### 块级标签与内联标签的区别

- 块级标签：就是独占一行，可以自行设置宽高，如div,p,h1-h6，form,hr

可以包含内联标签和某些块级标签，

- 内联标签：不独占一行，不能包含块级标签，只能包含内联标签，如
b,i,u,s,a,img,select,input,span,textarea

- p标签，p标签内部不能包含块级标签和p标签，可以有内联标签，一个段落

4. #### 图形标签

- <img src="1.png" alt="这是个美女..." width="200" height="200" title="美女">

src：要显示图片的路径 alt:图片没有加载成功的提示信息 title：鼠标悬浮时的提示信息 width：图片的宽， height：图片的高

5. #### 超链接标签a

- 所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序

- <a href="" target="_blank">click</a> href属性指定目标网页地址，该地址可以有几种类型 绝对URL:指向另一个站点，href="http://www.jd.com" 相对URL:指向当前站点中确切的路径 href="index.htlm" 锚URL：指向页面中的锚 href="top"

- ```
没有写href属性，即百度 百度显示普通文本
有属性，没有值，百度，有特殊效果，文字有颜色，有下划线，点击会刷新当前页面
有属性，有值：百度，跳转到href属性指定的网址

target="_blank" 新 的标签页打开，默认是在当前标签中打开
target="_self" 默认值，在当前标签页中打开，覆盖原标签页
```

6. #### 列表标签

- ```
'''

: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
: 有序列表

1. :列表中的每一项.

   定义列表

   列表标题
   

   列表项

   '''
   ```

   - 无序列表type对应的值

   - disc：实心圆点，默认值 circle：空心圆点 square：实心方块 non：无样式

   - 有序列表对应的值

   - ```
   有序列表type属性对应的值： start属性是从数字几开始

   1 数字列表，默认值
   A 大写字母
   a 小写字母
   Ⅰ大写罗马
   ⅰ小写罗马
   ```

   - 有序列表和无序列表：type控制显示样式，start控制起始值

   7. #### 表格标签

   - 基本结构

   ```
   

   
   
   
   
   
   
   

   
   
   
   
   
   
   

   标题	标题
   内容	内容

   
   ```

   - 属性

   ```
   '''

   : 表行

   : 表头
   :表数据

   属性:

   border: 表格边框.

   cellpadding: 内边距

   cellspacing: 外边距.

   width: 像素 百分比.（最好通过css来设置长宽）

   rowspan: 单元格竖跨多少行

   ```

   colspan: 单元格横跨多少列（即合并单元格）

   '''