HTML常用标签

标签

标签（元素）是html语言预定义好的代码学习html就是学习这些标签的使用

标签分类

按形式将标签分为：

双标签 ：开始标签，结束标签

单标签（自结束标签）

标签之间的关系

父子关系

直接包含和被包含的关系

html标签和head标签或html标签和body标签就是父子关系

        -父元素（父标签）直接包含子元素的标签 html标签

        -子元素（子标签）直接被父元素包含的标签 head和body标签

兄弟关系

拥有共同的父元素

head和body就是兄弟关系 head是兄，body是弟

祖先后代关系

直接或间接包含和被包含的关系

html标签和title标签，html标签 祖先元素， title标签 后代元素

head标签也是html的后代元素

常用标签

标题标签<h1-6>

语法：<h1>内容</h1>

默认样式：

        -字体有加粗的效果

        -有行距

        -还独占一行

        -字体h1-h6逐级递减

分类：双标签 块标签

注意：页面当中只可以存在一个h1
        常用h1-h3

段落标签<p>

语法：<p>内容</p>

语义：段落标签用于表示内容中的一个自然段

默认样式：
        -独占一行
        -有行距
分类：双标签 特殊块标签

注意：p元素里不可以嵌套块元素，一般只包裹文字与图片

hgroup标签

语法：<hgroup>内容</hgroup>

语义：将一组相关的标题进行分组

默认样式：独占一行

分类：双标签 块标签

em标签

语法：<em>内容</em>

语义：表示语气语调的强调

默认样式：

        -字体斜体

        -不会独占一行

分类：双标签 行内标签

strong标签

语法：<strong>内容</strong>

语义：表示内容的强调

默认样式：

        -字体加粗

        -不会独占一行

分类：双标签 行内标签

居中效果<center>

语法：<center>内容</center>

语义：只要包裹在center中，都会居中独占一行

默认样式：

        -居中

        -独占一行

分类：双标签 块标签

q标签

语法：<q>内容</q>

语义：表示短引用

默认样式：有双引号

分类：双标签 行内标签

换行标签<br>

语法：<br>

语义：换行

分类：单标签 （块标签）

分割线<hr>

语法：<hr>

语义：分割线

分类：单标签 （块标签）

删除线<del>

语法：<del>内容</del>

语义：表示一个需要删除的内容

默认样式：删除线

分类：双标签 行内标签

div标签

语法：<div>内容</div>

语义：没有语义，表示一个块

默认样式：独占一行

分类：双标签 块标签

span标签

语法：<span>内容</span>

语义：没有语义，表示一个行内

默认样式：不会独占一行

分类：双标签 行内标签

列表标签

有序列表  

语义：ol表示列表，li表示列表项

语法：

<ol>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ol>

默认样式：

        -列表上下有间距，左侧有间距

        -有默认的项目符号，默认是阿拉伯数字

分类：块标签 双标签

无序列表  

语义：uli表示列表，li表示列表项

语法：

<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>

默认样式：

        -列表上下有间距，左侧有间距

        -有默认的项目符号，默认是黑色实心圆

分类：块标签 双标签

定义列表  

语义：定义列表用来对一些词汇或内容进行定义

用dl创建列表，dt下定义，dd对内容进行解释说明

语法：

<dl>

<dt>下定义（小标题）</dt>

<dd>详细内容1</dd>

<dd>详细内容2</dd>

<dd>详细内容3</dd>

</dl>

默认样式：

        -dl列表上下有间距，dd左侧有间距

分类：dl,dt,dd都是块标签 双标签

type属性

有序列表

type属性，可以指定序号的类型

可选值：

        默认值，使用阿拉伯数字

        a/A 采用小写或大写字母作为序号

        i/I 采用小写或大写的罗马数字作为序号

无序列表

type属性，可以修改无序列表的项目符号

可选值：

        disc 默认值，黑色实心的圆点（黑心圆）

        square 实心的方块

        circle 空心的圆

        none 没有项目符号

例：

<ul type="circle">
<li>奶茶</li>
<li>果茶</li>
<li>花茶</li>
</ul>

注意：

-列表之间都可以互相嵌套

-列表一般配套使用，一般不要添加其他直接子元素

图片标签

语法

<img src="" alt="" width=""height="">

属性

src：指向图片的地址（路径 ）

        -绝对路径：只要你的地址不出错，就一定能找到该图片

        -相对路径：文件引入的地址与img标签所在的文件有关

                ./ img标签所在文件的位置与你要引入的图片的位置在同一 目录下

                ../ img标签所在文件的位置与你要引入的图片的位置不在同一目录下，需要跳出本级目录来到上一级目录寻找，如果上一级目录还未找到需要再次../跳出该级目录来到该级目录的上一级目录继续寻找，直到找到为止。

注意：相对路径地址不要写太深

alt：可以用来设置在图片不能加载时，对图片的描述

注意：

        -搜索引擎可以通过alt属性来识别不同的图片

        -如果不写alt属性，则搜索引擎不会对img中的图片进行收录

        -语义重，可用于网页优化

width：可以用来修改图片的宽度，单位默认为px

height：可以用来修改图片的高度，单位默认为px

注意：

        -宽度和高度两个属性如果指设置一个，另一个也会同时等比例调整大小如果两个值同时指定则按照你指定的值来设置

        -一般开发中除了自适应的页面，不建议设置width和height大图变小，会多占内存，小图变大会失真

        -pc端，需要多大的图，就裁多大的移动端，进场会对图片进行缩放（大图缩小）

图片格式

JPEG(JPG)
- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
- 一般用来保存照片等颜色丰富的图片

GIF
- GIF支持的颜色少，只支持简单的透明，支持动态图
- 图片颜色单一或者是动态图时可以使用gif

PNG
- PNG支持的颜色多，并且支持复杂的透明，不支持动图
- 可以用来显示颜色复杂的透明的图片
-专为网页而生的

webp
-谷歌新推出的专门用来表示网页的一种格式
-它具有其他图片格式的所有优点，而且文件格式还很小
-缺点：兼容性不好

base64
-讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入
-一般都是需要和网页一起加载的图片才会使用base64（网站图标）

图片的使用原则：

-效果不一致，使用效果好的
-效果一致，使用小的

<a>标签（超链接）

基本语法：

<a herf="" target="">内容</a>

语义：可以被点击跳转的内容

默认样式：

        -字体颜色变化

        -有下划线

分类：双标签 特殊的行内标签（可以包裹任意元素）

功能：

        -从一个页面跳转到另一个页面

        -在当前页面进行跳转（电梯导航）

        -下载

属性：

href：指向链接跳转的目标地址

        -值可以是一个外部的网站的地址    绝对路径

        -可以是一个内部页面的地址       相对路径

target：可以用来指定打开链接的位置

可选值：
          _self：表示在当前窗口中打开（默认值）

        _blank：在新的一个新的页面中打开链接

可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开

锚点功能（页面内的跳转）

定义：所谓锚点 ，就是指当点击链接文本时，跳转到当前页面的指定元素位置

步骤：

将href属性设置为  #目标元素的id属性值

给标签加标记——id属性

空链接

不想使<a>元素生效，在href属性中写入一个#或者是javascript:;，
此时的超链接没有作用，当还没有想好超链接具体跳转位置时，可以当做占位符使用

点击时默认刷新页面

<audio>标签

插入音频

语法： 

<audio src="" controls autoplay loop></audio>

属性：

controls：是否允许用户控制播放，不用给值

autoplay：音频文件是否自动播放  打开页面时，音乐会自动播放

loop：是否循环播放

src：路径

插入视频

语法：<video src="" controls autoplay loop></audio>

属性：

controls：是否允许用户控制播放，不用给值

autoplay：音频文件是否自动播放  打开页面时，音乐会自动播放

loop：是否循环播放

src：路径

注意：

        -audio，video标签是HTML新增的标签

        -兼容到ie10

布局标签（结构化标签）-HTML5新增

    header  网页的头部
    main  网页的主体部分（一般就一个）
    footer 网页的底部
    nav  网页的导航
    aside  和主体相关的内容，侧边栏
    article  文章之类的
    section 独立的区块，上面的标签都不合适，就用这个