HTML基础标签总结

作者: 西北有高楼lee | 来源:发表于2020-12-11 17:16 被阅读0次

一、HTML基础标签

1、文档声明

（1）`<!DOCTYPE html>`

文档声明，声明当前网页版本
html5的文档声明：<!doctype html>或者<!DOCTYPE HTML>不区分大小写

（2）`<meta>`

meta标签用来设置网页顶端元数据，可以通过meta标签来设置网页的字符集，避免乱码问题
meta主要用于设置网页中的一些元数据，元数据不是给用户看
meta标签有以下属性可以设置：
charset: 指定网页的字符集
name: 指定的数据名称，有两个可选值
keywords: 表示网站的关键字，用于搜索引擎的搜索
description: 用于指定网站的描述
content: 指定数据的内容
可以同时指定多个关键字，关键字间使用，隔开
网站的描述为一两句话，会显示在搜索引擎搜索的结果中
http-equiv:用于网页重定向

<meta charset="UTF-8">

<!-- 京东的meta -->
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,VCD,DV,相机,数码,手表,存储卡,京东" />
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

<!-- 表示网页在3秒后转到百度 -->
<meta http-equiv="refresh" content="3; url=http://www.baidu.com">

（3）`<title>`

title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容。title标签的内容会作为搜索结果的超链接上的文字显示

<title>Document</title>

2、实体

在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格，在html中，有些时候，我们不能直接书写一些特殊符号。比如：多个连续的空格，字母两侧的大于小于号，如果我们需要在网页中书写这些特殊符号，则需要使用html中的实体（转义字符）
实体的用法：
&实体的名字;
 空格
>大于号
<小于号
©版权符号

3、语义化标签

网页中html专门用来负责网页的结构，所以在使用html标签时，用该关注的是标签的语义，而不是它的样式

（1）标题标签

h1~h6一共有六级标题
从h1~h6重要性递减
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
一般情况下标题标签只会使用h1~h3，剩下的很少用
标题标签都是块元素，在页面中独占一行的元素称为块元素（block element）

（2）`<hgroup>`

hgroup标签用来为标签分组，可以将一组相关的标题同时放入到hgroup中

    <hgroup>
        <h1>回乡偶书</h1>
        <h2>其一</h2>
    </hgroup>

（3）`<p>`

p标签表示一个段落，也是一个块元素

    <p>zheshiyige1duna</p>
    <p>zheshidierhe1duanluo1</p>

（4）强调

<em>

em标签用于表示语音语调的一个加重，在页面中不会独占一行，为行内元素（inline element）
所修饰的内容在页面中的表示为斜体显示

<p>今天天气<em>真好</em></p>

<strong>

strong与em都表示强调，但是比em的强调性更强。如果说em标签所修饰的文本表示大声喊叫的话，那strong修的的文本就无异于尖叫了。应尽量减少使用类似的过分强调重要性的标签。
所修饰的内容在页面中的表示为加粗显示

<p>今天必须要完成<strong>作业</strong></p>

（5）引用

<blockquote>

blockquote表示一个长引用，会换行，不自动加引号

鲁迅说：
<blockquote>我没说过</blockquote>
在页面的显示为
鲁迅说：
    我没说过

<q>
q表示一个短引用，不会换行，自动添加引号

子曰：<q>学而时习之，不亦乐乎</q>
在页面的显示为
子曰："学而时习之，不亦乐乎"

（6）布局规范

块元素（block element）在网页中一般通过块元素来对页面进行布局
行内元素（inline element）行内元素主要用来包裹文本
一般情况会在块元素中放行内元素，而不会在行内元素中放块元素，块元素中基本什么都可以放
注意：p元素中不能放任何块元素

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
标签写在了根标签外部
p标签中嵌套了块元素
根元素中出现了除head和body以外的子元素
.....
浏览器并不会在源码中修改，而是在内存中修改，因此在网页中右键查看源代码并不会改变，右键检查就可以看到改变

    <p>
        <h1>我有错吗</h1>
    </p>

这种情况浏览器会自动为p标签的前半部分补上后半部分，为后半部分补上前半部分，h1标签正常显示

</body>
</html>
<p>我错了吗</p>

如果将标签写到了文档的外面，浏览器会自动将p标签添加到body中

（7）结构化语义标签

header表示网页的头部
main表示网页的主体部分（一个页面只会有一个main）
footer表示网页的底部
nav表示网页中的导航
aside表示和主体相关的侧边栏
article表示一个独立的文章
section表示一个独立的区块，上面的标签都不能表示时使用section
上面提到的都是H5新增的标签，在实际开发中用的非常少，多数情况下还是使用div，div可以代替以上所有标签
目前来讲div结合span还是我们主要的布局元素，div没有语义，就用来表示一个区块，span行内元素，没有任何意义，一般用于在网页中选中文字

4、列表

html中的列表一共有三种：

（1）有序列表

使用ol标签创建，使用li表示列表项
会对列表项进行编号，每一层嵌套都是用阿拉伯数字进行编号

    <ol>
        <li>abc</li>
        <ol>
            <li>re</li>
            <li>sa</li>
            <ol>
                <li>fd</li>
                <li>sa</li>
            </ol>
        </ol>
    </ol>

（2）无序列表

使用ul标签创建，使用li作为列表项
列表项前面为原点，嵌套第一层为空心圈，第二层为实心方块

（3）定义列表

使用dl标签创建，使用dt来表示定义的内容，使用dd来对内容进行说明

    <dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构</dd>
        <dd>结构表示网页的结构</dd>
        <dd>结构表示网页的结构</dd>
    </dl>
在页面中的显示为
结构
    结构表示网页的结构
    结构表示网页的结构
    结构表示网页的结构

这其中用的最多的是ul列表之间可以相互嵌套

5、超链接

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他位置，使用a标签来定义超链接，属性：

（1）`href`:

指定跳转的目标路径，值可以是一个外部网站的地址也可以是内部页面的地址。当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径
相对路径都会使用 . 或 .. 开头
./ 表示当前文件所在目录
../ 表示当前文件所在目录的上一级目录

<a href="https://www.baidu.com">百度</a>
<a href="../JavaScript基础/基础/水仙花数.html">水仙花数</a>

可以直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部位置，如果需要跳转到当前页面的指定位置，需要将href属性值设置为：#目标元素的id值

<a href="#bottom">回到底部</a>
<p>.....</p>
<a href="#" id="bottom">回到顶部</a>

注意：如果href属性中什么都不写与写了#的效果一样，会自动跳转到顶部

在开发中可以用#作为超链接的占位符使用，即定义一个超链接但是让他什么也不做，但是#已经用作跳转页面顶部。因此可以用javascript:;来作为href的属性，此时点击这个超链接什么也不会发生，点击后超链接颜色也不会改变。

<a href="javascript:;">这是一个超链接1</a>

（2）`target`:

用来指定超链接打开的位置
_self默认值，在当前页面中打开超链接
_blank在一个新的页面中打开超链接

<a href="06列表.html" target="_self">当前页面打开</a>
<a href="06列表.html" target="_blank">当前页面打开</a>

6、图片标签

图片标签用于向当前页面中引入一个外部图片，使用img标签来引入外部图片，img标签是一个自结束标签， img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）

（1）属性值：

src：
指定外部图片的路径（路径规则和超链接一样）
alt:
图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎找到
样式
width:图片的宽度
height:图片的高度
宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意：
一般情况下在PC端，不建议修改图片的大小，需要多大的图片就裁多大。但是在移动端，经常需要对图片进行缩放

<img src="https://tse1-mm.cn.bing.net/th/id/OIP.zlXYTkWANFf2FL1Wfvn62gHaHz?w=182&h=192&c=7&o=5&pid=1.7" alt="Iron-man" width="500px">

（2）图片格式

jpeg(jpg):
支持的颜色比较丰富，不支持透明效果，不支持动图，一般用来显示照片
gif:
支持的颜色较少，支持简单透明，支持动图，颜色单一的图片，动图
png:
支持颜色丰富，支持复杂透明，不支持动图，颜色丰富，复杂透明图片（专为网页而生）
webp:
这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式，它具备其他图片格式的所有优点，而且文件还特别小，缺点是兼容性不好
base64:
将图片使用base64编码，这样可以将图片转换为字符，通过字符的方式引入图片，一般都是一些需要和网页一起加载的图片才会使用base64，网页直接搜索base64即可找到在线转换图片网站

7、内联框架

内联框架iframe，用于向一个页面中引入一个其他页面
属性：

src:
指定要引入的网页路径
framebroder:
指定内联框架的边框，默认是0

同样可以为内联框架指定高度和宽度

将腾讯网完整的加载到当前的页面中
<iframe src="https://www.qq.com" frameborder="0" width="500px" height="800px"></iframe>

8、音视频

（1）音频

audio标签用来向页面中引入一个外部的音频文件，音频文件引入时默认情况下不允许用户自己控制播放停止

属性：
contros: 是否允许用户控制播放
autoplay: 音频文件是否自动播放如果设置了autoplay 则音乐在打开页面时自动播放但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop: 音乐是否循环播放

注意：上面的属性都没有属性值

<audio src="音视频/Just the Way You Are.mp3" controls autoplay loop></audio>

除了通过src来指定外部文件路径外，还可以通过source来指定文件路径，一般情况下都通过下面方式引用

    <audio controls>
        <!-- IE8不兼容audio，使用这种方式兼容的浏览器会正常显示，不兼容则会显示提示文字 -->
        对不起，您所使用的浏览器不支持音频播放。
        <source src="音视频/Just the Way You Are.mp3">
    </audio>

如果想要在IE8使用音频播放，可以通过embed标签实现

<audio controls>
  <source src="音视频/Just the Way You Are.mp3">
  <embed src="音视频/Just the Way You Are.mp3" type="audio/mp3" width="300px"           height="100px">
</audio>

（2）视频

使用video标签来向网页中引入一个视频，标签中的属性controls,autoplay,loop与audio的使用方式一样

    <video controls width="400px" height="300px">
        <source src="音视频/end.mp4">
        <embed src="音视频/end.mp4" type="video/mp4" width="400px" height="300px">
    </video>

也可以通过视频网站上的分享复制通用代码直接使用其他网站的视频

<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=o0034qdrsic" 
        allowFullScreen="true" width="400px" height="300px"></iframe>
<iframe src="https://player.bilibili.com/player.html?aid=23867784&bvid=BV15p411R73R&cid=39922285&page=1" 
    scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

9、表格

（1）创建表格

普通表格

使用table标签来创建一个表格，在table标签中使用tr标签来创建行，tr中使用td表示一个单元格网，有几个单元格就有几列
使用rowspan纵向合并单元格
使用colspan来横向合并单元格，参数为向右合并的单元格个数

    <table border="1" width="50%" align="center">
        <tr>
            <td>a1</td>
            <td>a2</td>
            <td>a3</td>
            <td rowspan="2">a4</td>
        </tr>
        <tr>
            <td colspan="2">a1</td>
            <td>a3</td>
        </tr>
    </table>

表格合并.png

长表格

可以将一个表格分成三部分
头部thead，th表示头部单元格
主体tbody
底部tfoot

    <table border="1" width="50%" align="center">
        <thead>
            <tr>
                <th>日期</th>
                <th>收入</th>
                <th>支出</th>
                <th>合计</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2020 1 1</td>
                <td>300</td>
                <td>300</td>
                <td>300</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>合计</td>
                <td>10000</td>
            </tr>
        </tfoot>
    </table>

长表格.png

（2）表格样式

border-spacing指定边框之间的距离
border-collapses设置边框的合并
默认情况下元素在td中是垂直居中的，可以通过vertical-align进行调整

如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中，tr不是table的子元素.

table{
  width: 50%;
  border: 1px solid black;
  margin: 0 auto;
  border-spacing: 0px;
  border-collapse: collapse;
}
td{
  border: 1px solid black;
  height: 50px;
  vertical-align: middle;
  text-align: center;
}
tbody>tr:nth-child(even){
  background-color: #bbffaa;
}
<table>
   <tr>
     <td>学号</td><td>姓名</td>
     <td>性别</td><td>年龄</td>
     <td>地址</td>
   </tr>
   <tr>
     <td>1</td><td>孙悟空</td>
     <td>男</td><td>25</td>
     <td>花果山</td>
   </tr>
</table>

表格样式.png

（3）表单

在现实生活中表单用于提交数据，在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器，使用form标签来创建一个表单。
form的属性action为表单要提交的服务器地址

    <form action="target.html">
        <!-- 文本框，注意要想文本框中的数据提交到服务器中，必须为文本框指定一个name值 -->
        用户名
        <input type="text" name="username">
        <br>
        <!-- 密码框 -->
        密&nbsp;&nbsp;&nbsp;码
        <input type="password" name="password">
        <br>
        <!-- 单选按钮
        像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写值发送给服务器 -->
        单选按钮
        <input type="radio" name="hello" value="a">
        <input type="radio" name="hi" value="b">
        <br>
        <!-- 多选框 -->
        多选框
        <input type="checkbox" name="test" value="1">
        <input type="checkbox" name="test" value="2">
        <input type="checkbox" name="test" value="3" cheaked>
        <br>
        <!-- 下拉列表 -->
        <select name="haha">
            <option value="i">选项一</option>
            <option value="ii" selected>选项二</option>
            <option value="iii">选项三</option>
        </select>
        <br>
        <!-- 提交按钮 -->
        <input type="submit" value="注册">
    </form>

表单.png

autocomplete="off"用于关闭自动补全（历史记录），readonly将表单项设置为只读，数据会提交；disabled将表单项设置为禁用，数据不会提交。

    <form action="target.html" autocomplete="off">
        <input type="text" name="username" value="hello" readonly>
        <br>
        <input type="text" name="username" value="hello" disabled>
        <br>
        <input type="text" name="username" autofocus>
        <br>
        <input type="submit">
        <!-- 重置按钮 -->
        <input type="reset">
        <!-- 普通按钮 -->
        <input type="button" value="按钮">
        <br>
        <button type="button">按钮</button>
        <button type="reset">重置</button>
        <button type="submit">提交</button>
    </form>

表单2.png