HTML5基础标签

网页格式

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

html标签
告诉浏览器这是一个网页。
其它所有的标签都必须写在 html 开始标签和结束标签之间。
head标签
用于给网站添加一些配置信息。
例如:

指定网站的标题 / 指定网站的小图片;
添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息);
外挂一些外部的css/js文件;
添加一些浏览器适配相关的内容;

title标签
用于指定网站的标题。
title标签必须写在head标签里面。
body标签
用于定义HTML文档中需要显示给用户查看的内容。
一对html标签中只能有一对body标签。
meta标签

charset
用于指定字符集
<meta charset="UTF-8">
注意：在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码。
name
name属性主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。
<meta name="参数" content="具体的描述">。
常用：
keywords(关键字)：用于告诉搜索引擎，你网页的关键字。
<meta name="keywords" content="博客，小手，前端">
description(网站内容的描述)：用于告诉搜索引擎，你网站的主要内容。
<meta name="description" content="奔跑的小手热爱前端与编程, 这是我的前端博客">
author(作者)：用于标注网页作者
<meta name="author" content="奔跑的小手">
copyright(版权)：用于标注版权信息
<meta name="copyright" content="xiaohan">
refresh(自动刷新并指向某页面): 网页将在设定的时间内，自动刷新并调向设定的网址。
<meta http-equiv="refresh" content="2；URL=https://www.baidu.com">

H系列标签(Header 1~Header 6)
用于给文本添加标题语义。

<h1 align="center">我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>

H标签一共有6个, 从H1~H6, H1最大, H6最小，最多就只能到6, 超过6则无效。

hgroup 为标题分组

<!--    可以将一组相关的标题同时放入hgroup中-->
    <hgroup>
        <h1>回乡偶书二首</h1>
        <h2>其一</h2>
    </hgroup>

blockquote 表示长引用

<!--    缩进效果 块元素-->
鲁迅说：
    <blockquote>
        这句话我从来没说过！
    </blockquote>

q 表示短引用

<!--    q 行内元素-->
    子曰：
    <q>
        学而时习之不亦说乎
    </q>

strong作用: 着重内容

格式: <strong>着重内容</strong>

ins(Inserted)作用: 新插入的文本(下划线)

格式: <ins>新插入的文本</ins>

em(Emphasized)作用:强调内容（斜体）

格式: <em>强调内容</em>

del(Deleted)作用: 已删除的文本

格式: <del>已删除的文本</del>

p标签(Paragraph)
段落
p标签中不能放任何块元素

<p>我是一个小段落</p>

br标签(Break)
让内容换行。
格式：

<br/>

br的意思是不另起一个段落进行换行，而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做。

布局标签

header
表示网页头部，网站的顶部，一个网页中可以有多个。
<header></header>
main
表示网页主体,一个页面中只有一个。
<main></main>
footer
表示网页的底部。
<footer></footer>
注意：header和footer既可以表示整个网页的头部和底部，也可以表示某一部分的头部和底部，但是main只能表示整个网页的主体。
nav
表示网页中的导航。
<nav></nav>
aside
表示和主体相关的其它内容（侧边栏）。
<aside></aside>
article
表示一个独立的文章。
<article></article>
section
表示一个独立的区块，上面的标签都不能表示时，使用section。
<section></section>

以上标签目前用的不是特别多

div
没有语义，只是表示一个区块。
span
行内元素，没有语义，一般用于网页中选中文字。

列表标签
有序列表(ordered list)

<h3>有序列表ol</h3>
<ol>
    <li>音乐</li>
    <li>视频</li>
    <li>文字</li>
</ol>

其实ol应用场景并不多, 因为能用ol做的用ul都能做。

无序列表(unordered list)
格式：(快速写法：ul>li*4 + tab键)

<h2>无序列表ul</h2>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>深圳</li>
    <li>广州</li>
</ul>

注意：ul 中推荐只能写 li 标签, 但是 li 标签是一个容器标签, li 标签中可以添加任意标签, 甚至可以添加ul标签。

ul>(li>(h4+(ul>li*3)))*2 + tab

<h3>食物</h3>
<ul>
    <li>
        <h4>蔬菜</h4>
        <ul>
            <li>西蓝花</li>
            <li>西红柿</li>
            <li>西葫芦</li>
        </ul>
    </li>
    <li>
        <h4>水果</h4>
        <ul>
            <li>葡萄</li>
            <li>香蕉</li>
            <li>苹果</li>
        </ul>
    </li>
</ul>
<hr>

应用场景：
1.新闻列表
2.商品列表
3.导航条

定义列表(definition list)
通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述。

<h2>定义列表dl</h2>
<dl>
    <dt>北京</dt>
    <dd>国家的首都, 看升国旗的地方</dd>
    <dt>上海</dt>
    <dd>魔都, 遍地是黄金的地方</dd>
</dl>

注意：
一个dt可以没有对应的dd，也可以有多个对应的dd，推荐使用一个dt对应一个dd，dd中可以添加其它标签。
应用场景：
1.网站尾部的相关信息
2.做图文混排

超链接 a标签(anchor)

<a href="https://baike.baidu.com/item/%E8%88%AA%E6%B5%B7%E7%8E%8B/75861?fromtitle=%E6%B5%B7%E8%B4%BC%E7%8E%8B&fromid=8904" target="_self" id="hzw">海贼王</a>
 
<a href="https://baike.baidu.com/item/易烊千玺/221450?fr=aladdin"><img src="http://img4.imgtn.bdimg.com/it/u=2034667925,2489842821&fm=26&gp=0.jpg" height="120"></a>

a标签的属性：

属性	作用
href(hypertext reference)	指定跳转的目标地址
target	是否在原标签页跳转, _blank在新标签页打开, _self原标签页打开
title	悬停文本

base标签和a标签结合使用：
base标签写在header标签中，如果某个 a 标签单独设置了页面打开方式，以a标签设置的为准。

<base target="_blank" />

a标签其它用法:
1）假链接(本质是跳转到当前页面)

格式：<a href="#">当前页面顶部</a>
格式：<a href="javascript:">点我也没反应</a>

<a href="#" target="_self">跳转到页面顶部</a>
<a href="javascript:" target="_self">点我也没反应</a>

2）跳转到当前页面指定位置(锚点链接)

格式：<a href="#location">跳转到指定位置</a>

在页面的指定位置给任意标签添加一个id属性
例如 <p id="hzw">这个是目标</p>

<a href="#hzw" target="_self">跳转到海贼王</a>

3）跳转到指定页面的指定位置

格式：<a href="test.html#location">跳转到指定位置</a>
只需要在 test.html 页面添加一个id位置即可

注意：a标签中可以嵌套除它自身之外的任何元素。

相对路径几种查找方式

同级

1）直接编写, 例如: girl.png
2）加上./ 编写, 例如./girl.png（./代表当前目录, ./girl.png代表在当前目录下查找）

下级

1）直接编写, 例如abc/girl.png
2）加上./ 编写, 例如./abc/girl.png

上级

../代表访问上级目录
(假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png)

img标签(image)
在网页上插入一张图片。
格式：

<img src="http://image.qtv.com.cn/003/005/144/00300514413_4a78184e.jpg" alt="银行广告" title="我是广告">

标签的属性:

属性	作用
src(source)	图片路径
alt(alternate)	在src指定的路径下找不到图片时，显示alt指定的文本，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性，图片不会被搜索引擎收录
title	悬停文本(在鼠标悬停在图片上时显示)
height	设置图片显示的高度
width	设置图片显示的宽度

注意：
1）img标签添加的图片默认不是占一整行空间；
2）如果想让图片等比拉伸, 只写高度或者宽度即可；

内联框架
iframe用于向当前页面引入其他页面, 现在用的不多。
src: 要引入否认页面路径
frameborder: 指定内联框架有没有边框，0表示没有，1表示有

<iframe src="https://www.bilibili.com/" width="800" frameborder="0"></iframe>

音视频播放
audio标签

<audio src="" controls></audio>
<audio>
    <source src="" type="">
</audio>

video标签
格式一：

<video src=""></video>

格式二：

<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

第二种格式存在的意义就是为了解决浏览器适配问题. video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放。

video标签属性：

属性	作用
src	需要播放的视频地址
autoplay	是否需要自动播放
controls	是否需要显示控制条
poster	视频没有播放之前显示的占位图片
loop	循环播放视频
preload	预加载视频 (需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效)
muted	视频静音
width/height	视频显示宽高

表格标签
以表格形式将数据显示出来。
格式:
table 定义表格
tr 定义行
td 定义单元格

表格属性：

属性	作用
border	默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度
width	默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度
height	默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度
cellspacing	外边距. 默认情况下单元格之间有2个像素的间隙, 可以通过cellpadding指定表格之间的间隙
cellpadding	内边距. 默认情况下单元格边缘距离内容有1个像素的内边距, 可以通过cellpadding属性指定单元格边缘和内容之间的内边距
bgcolor	规定表格的背景颜色
align	单元格水平对齐方式, 取值有center、left、right
valign	单元格垂直对齐方式，取值有top、middle、bottom、baseline
rowspan	单元格横跨的行数
colspan	单元格横跨的列数

表格的结构
1）thead标签: 用来存放当前列的表头, 如果没有加css页面默认将表头中的高度设置变小;
2）tbody标签: 一般用来存放页面中的主体数据, 如果不写会自动加上;
3）tfoot标签: 用来存放表格的页脚（脚注或表注)，很少用，没什么效果;

<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>每一列的标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>数据</td>
        </tr>
    </tfoot>
</table>

表单标签
用于收集用户信息, 让用户填写、选择相关信息。
格式:

<form>
    所有的表单内容，都要写在form标签里面
</form>

input标签
input 是表单最核心的标签, input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同。

明文输入框

账号: <input type="text"/>

暗文输入框

密码: <input type="password"/>

给输入框设置默认值

账号:<input type="text" value="aaaaaa"/>
密码:<input type="password" value="123456"/>

规定输入字段中的字符的最大长度

账号: <input type="text" name="fullname" maxlength="8" />

单选框(radio)

<input type="radio" name="gender" /> 男
<input type="radio" name="gender" /> 女

多选框(checkbox)

<input type="checkbox" name="hobby"/> 摄影
<input type="checkbox" name="hobby"/> 书法
<input type="checkbox" name="hobby"/> 网球

给单选、多选设置默认值
指定radio和checkbox默认值, 前提是同一组内容必须设置相同name属性。

<input type="radio" name="gender" checked="checked"/> 男
<input type="radio" name="gender" /> 女

<input type="checkbox" name="hobby" checked="checked"/> 摄影
<input type="checkbox" name="hobby" checked="checked"/> 书法
<input type="checkbox" name="hobby"/> 网球

label标签
表单元素要有一个id，然后label标签就有一个for属性，for属性和id相同就表示绑定了。

<!--给文本框添加绑定-->
<label for="account">账号:</label>
<input type="text" id="account" />

<!--给单选框添加绑定-->
<input type="radio" name="gender" id="man" /> <label for="man">男</label>

<!--给多选框添加绑定-->
<input type="checkbox" id="basketball" />
<label for="basketball">篮球</label>

按钮

<input type="button" value="点我" />

图片按钮
定义图像形式的提交按钮。

<input type="image" src="image.png" />

重置按钮
定义重置按钮。重置按钮会清除表单中的所有数据。
不需要写value自动就有“重置”文字。

<input type="reset" />

提交按钮
定义提交按钮。提交按钮会把表单数据发送到action属性指定的页面。
不需要写value自动就有“提交”文字。

<input type="submit" />

要想通过submit提交数据到服务器, 被提交的表单项都必须设置name属性。
默认明文传输(GET)不安全, 可以将method属性设置为POST改为非明文传输。

隐藏域
定义隐藏的输入字段。

<input type="hidden">

数据列表
给输入框绑定待选项。
格式:

    <p>请输入你的爱好:</p>
    <input type="text" list="sports">
    <datalist id="sports">
        <option value="篮球"></option>
        <option value="足球"></option>
        <option value="羽毛球"></option>
        <option value="网球"></option>
    </datalist>

多行文本框(文本域)
textarea标签用于在表单中定义多行的文本输入控件。
cols属性表示columns“列”, 规定文本区内的可见宽度。
rows属性表示rows“行”, 规定文本区内的可见行数。
格式：

<textarea name="简介" id="detailed" cols="30" rows="10"></textarea>

默认情况下输入框是可以手动拉伸的

<!--禁止手动拉伸-->
<style type="text/css">
  textarea{
     resize: none;
  }
</style>

上传文件

<form action="http://127.0.0.1:8888" method="post" enctype="multipart/form-data">
    <input type="file" name="upFlie"><br>
    <input type="submit" value="上传">
</form>

下拉列表

<select name="city" id="city">
    <option selected>北京</option>
    <option>上海</option>
    <option>杭州</option>
</select>

<!--下拉列表分组-->
<select name="urban" id="urban">
    <optgroup label="北京">
        <option>朝阳区</option>
        <option>西城区</option>
        <option>东城区</option>
    </optgroup>
    <optgroup label="上海">
        <option>黄埔区</option>
        <option>徐汇区</option>
        <option>长宁区</option>
    </optgroup>
</select>

input标签补充
自动校验输入的内容是否符合邮箱格式:
邮箱：<input type="email">
自动校验URL格式:
URL：<input type="url">
输入框只能输入数字:
数字：<input type="number">
通过日历选择时间:
时间：<input type="date">
颜色:
颜色：<input type="color">

详情details和概要summary标签
利用summary标签来描述概要信息, 利用details标签来描述详情信息。
默认情况下是折叠展示, 想看见详情必须点击。
格式：

<details>
    <summary>概要信息</summary>
    详情信息
</details>

marquee标签
跑马灯效果。

格式：<marquee>内容</marquee>

属性：

属性	作用
direction	设置滚动方向 left/right/up/down
scrollamount	设置滚动速度, 值越大就越快
loop	设置滚动次数, 默认是-1, 也就是无限滚动
behavior	设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回

滚动内容可以是图片：

<marquee><img src="image.png" alt="图片加载失败" width="200"></marquee>

meta其它类型

Keywords类型
告诉搜索引擎当前网页的关键词, 在SEO中非常重要, 能够提高搜索命中率, 让别人更容易找到你。

格式：<meta name="keywords" content="iOS技术、Android技术、HTML5技术、js技术" />

Descriiption类型
告诉搜索引擎当前网页的主要内容, 在SEO中非常重要, 当别人在搜索引擎中搜索到你的网站时会自动作为对你网站的描述信息展示给用户, 能够提高搜索命中率。

格式：<meta name="description" content="你想要的这里都有" />

Author类型
告诉搜索引擎当前网页的作业, install B专用。

格式：<meta name="author" content="Xiaohan" />

Refresh类型
多久自动刷新一次页面并指向新页面, 常用于新老域名交替时, 访问老域名自动跳转到新域名, 或用于一些需要定时刷新的聊天室等。

格式：<meta http-equiv="Refresh" content="2；URL=https://www.baidu.com/">

Robots类型
告诉搜索引擎当前网页的作业, 写给网络爬虫看的内容。

格式：<meta name="robots" content="all|none|index|follow|noindex|nofollow" />

属性	作用
index	告诉搜索引擎允许抓取当前页面
noindex	告诉搜索引擎不允许抓取当前页面
follow	告诉搜索引擎可以从当前页面上找到链接，然后继续访问抓取下去
nofollow	告诉搜索引擎不允许从当前页面上找到链接, 拒绝其继续访问
all	告诉搜索引擎允许抓取当前页面, 并且允许从此页找到链接继续访问
none	告诉搜索引擎不允许抓取这个页面,并且不允许从此页找到链接、拒绝其继续访问

常见组合：

<META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">：可以抓取本页，而且可以顺着本页继续索引别的链接
也可以写成<META NAME="ROBOTS" CONTENT="ALL">

<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">：不许抓取本页，但是可以顺着本页抓取索引别的链接

<META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW">：可以抓取本页，但是不许顺着本页抓取索引别的链接

<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">：不许抓取本页，也不许顺着本页抓取索引别的链接。

最后编辑于：2020.10.23 14:38:17

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,590评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 86,808评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,151评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,779评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,773评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,656评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,022评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,678评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,038评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,659评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,756评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,411评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,005评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,973评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,053评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,495评论 2赞 343

HTML5基础标签

网页格式

推荐阅读更多精彩内容