前端基础知识HTML5
前言
学习HTML5，大概可以分为以下几个阶段：基础概念、标签，标签属性
学习目标
本文最终学习HTML5的基础知识并且最终完成一个小慕医生的首页静态页面结构。
基础概念
HTML5是一种超文本标记语言，主要是网页的骨架，并没有样式和动效功能，HTML5是HTML的第5个版本，关于之前的版本，不再赘述，已经属于上古时期的知识；关于HTML5，其实这个版本的也是很久就已经发布的，但是现在用的HTML5和最开始定义的HTML5已经有非常多的更新，相当于这个5不再是版本，而是HTML的一部分，原因就是前端发展太快，等到标准定义出来，再去实现，已经慢了一大截了
基础标签
骨架标签
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body></html>这是一个非常常规的html5骨架，其中：
<!DOCTYPE html>是文档类型声明DTD，HTML文件第一行必须是DTD（Document Type Definition ，文档类型声明）lang表示页面主要使用的语言。主要影响的是：搜索引擎理解页面语言，SEO、浏览器翻译等- meta是网页元信息，也就是来描述网页相关的内容，charset是描述网页字符集，一般写UTF-8就可以了，还有name为viewport的，viewport 可以简单理解成：浏览器用多大的虚拟区域来显示网页。width=device-width是网页宽度使用设备屏幕宽度。initial-scale=1.0是页面首次打开时，缩放比例为 100%。关于这点，只要理解跟响应式有关就可以，后续的web侧响应式再展开说
- title标签用来设置网页的标题，文字会显示在浏览器的标签栏上
<html></html>、<head></head>、<body></body>是标签对，head内的主要都是网页的配置项
标题和段落标签
标题标签有6个，从大到小：h1>h2>h3>h4>h5>h6，标题标签对SEO有影响，特别是H1对SEO权重最大，通常会把logo放在H1标签中
段落标签是p，字如其意，就是表达网页段落的意思，但是这个段落并不会前面空两格的段落，需要注意的是，标题和段落不能互相嵌套，非要这么写，是非常严重的语法错误，虽然在浏览器也能看到正常显示，但那是浏览器自动重新编排了，打开F12查看元素就能查看到
拓展：H5的一些特性
HTML5存在空白折叠现象：文字和文字之间的多个空格、换行会被折叠成一个空格，标签“内壁”和文字之间的空格会被忽略；转义字符： 如果想在网页显示标签对，直接写肯定是不行的，这时候需要用到转义字符
常见转义字符（字符实体）：
| 转义字符 | 意义 |
|---|---|
< | 小于号 |
> | 大于号 |
| 空格（不会被折叠） |
© | 版权符号© |
列表标签
列表标签可以分三种：无序列表、有序列表和定义列表
无序列表：无序列表是“没有刻意顺序”的列表；使用 ul标签，每个列表项都是li标签；ul的子标签只能是li，li里面可以放任何东西
有序列表：有序列表是“有刻意顺序”的列表；使用 ol标签，每个列表项都是li标签；ol标签有一个start属性：start属性值必须是一个整数，指定了列表编号的起始值：记住start是写在ol的，是ol的属性，start表示从哪个开始数字开始排序，type表示编号样式，value表示 某一个 li 强制指定编号
<ol start="3"> <li>我是有序列表1</li> <li>我是有序列表2</li> <li value="5">我是有序列表3</li> <li>我是有序列表4</li></ol><!-- 只能值A --><ol type="A"> <li>我是有序列表1</li> <li>我是有序列表2</li> <li>我是有序列表3</li> <li>我是有序列表4</li></ol>效果：
- 我是有序列表1
- 我是有序列表2
- 我是有序列表3
- 我是有序列表4
- 我是有序列表1
- 我是有序列表2
- 我是有序列表3
- 我是有序列表4
还有一个属性reversed，也是ol的属性，reversed属性指定列表中的条目是否是倒序排列的，reversed属性不需要值，只需要写reversed单词即可
定义列表：dl、dt、dd，都是定义列表的标签，字如其意，就是定义一个列表，定义的一列的数据，dl表示一列，dt表示列的头部，dd表示列的内容项，dt和dd是平级的，从效果可以看出来，定义列表是有默认样式的，dt是头部，相当于标题，加粗，dd是项，空格两行
<dl> <dt>北京</dt> <dd>我国首都、政治中心、文化中心</dd> <dt>上海</dt> <dd>国际经济、金融、科技创新中心</dd> <dt>深圳</dt> <dd>经济特区，国际化都市</dd></dl>效果：
- 北京
- 我国首都、政治中心、文化中心
- 上海
- 国际经济、金融、科技创新中心
- 深圳
- 经济特区，国际化都市
使用什么标签，不应该看样式，应该看语义，只要语义上有“解释说明”含义的文字，且为列表形态，应该使用定义列表
多媒体标签
多媒体标签主要有三个img、video和audio，一个是插入图片，一个是插入视频和插入音频
img标签：有一个src属性，表示图片的地址；alt属性，表示文件加载失败的时候显示的文字；还有width、height属性，表示宽高，如果只设置一个，就等比例缩放，以下是src支持的图片格式：
| 格式 | 说明 |
|---|---|
| .bmp | windows画图软件默认保存的格式，位图 |
| .gif | 支持动画（比如表情包） |
| .jpeg(.jpg) | 有损压缩图片，用于照片 |
| .png | 便携式网络图像，用于logo、背景图形等，支持 透明和半透明 |
| .svg | 矢量图片 |
| .webp | 最新的压缩算法非常优秀的图片格式 |
video和audio属性值基本相同，这里放在一起，区别是一个播放视频一个播放音频，audio 支持mp3和ogg格式，video支持mp4、ogv、webm等格式，通常有以下属性
| 属性 | 说明 |
|---|---|
| autoplay | 自动播放 |
| loop | 循环播放 |
| controls | 显示播放控件 |
超链接标签
a标签是html的超链接的标签，可以跳转到其他网页或者其他地址，href属性可以指定跳转到哪里；
将标签的target属性设置为blank，即可在新标签页中打开网页；
除了文字可以加上超链接，图片也可以设置超链接，只需要用a标签包裹img标签即可；
除此之外还可以在页面内做锚点：较长的页面，可以适当的给h系列标签添加id属性，它将成为 页面的“锚点”，网址后面添加#时，页面将自动滚动到锚点所在位置，其他页面的超级链接，可以链接到指定锚点；
指向exe、zip、rar等文件格式的链接，将自动成为下载链接；
有mailto<前缀的链接是邮件链接>，系统将自动打开Email相 关软件；有tel<前缀的链接是电话连接>，系统将自动打开拨号盘
通常target会和rel出现，rel有两个属性值：noopener noreferrer，noopener是 防止新页面控制原页面，noreferrer是不告诉目标网站“我是从哪里跳过来的”
语义化标签
语义化标签最大作用就是SEO，利于搜索引擎的抓取，大致分为大纲标签（大语义）和语义化标签（小语义）
以下这些都是块级标签，都会换行
| 区块标签 | 说明 |
|---|---|
<section> | 文档的区域，语义比div大 |
<article> | 文档的核心文章内容，会被搜索引擎主要抓取 |
<aside> | 文档的非必要相关内容，比如广告等 |
<nav> | 导航条 |
<header> | 页头 |
<main> | 网页核心部分 |
<footer> | 页脚 |
以下的都是行内标签，不会换行
| 标签 | 说明 |
|---|---|
| span | 是文本中的“区块”标签，本身没有任何特殊 的显示效果，可以结合CSS来丰富样式 |
| b | 被加粗的文字，CSS已经替代了它的功能 |
| u | 加下划线的文字，CSS已经替代了它的功能 |
| i | 倾斜的文字，CSS已经替代了它的功能 |
| strong | 代表特别重要文字 |
| em | 代表强调文字 |
| mark | 代表一段需要被高亮的文字 |
<span>span</span><b>b</b><u>u</u><i>i</i><strong>非常重要</strong><em>强调文字</em><mark>需要被高亮的文字</mark>效果：
span b u i 非常重要 强调文字 需要被高亮的文字
figure和figcaption 是比较特别的：<figure> 表示一块独立的媒体/内容，<figcaption> 表示这块内容的说明文字，figure可以单独存在，figcaption 必须在figure内部，因为figcaption 本身就是对figure的一个描述，通常应该是 <figure> 的第一个或最后一个子元素
<figure> <figcaption>我是对内容的描述，这是一张图片</figcaption> <img src="./小慕医生/images/logo.png" alt="小慕" width="200px" /></figure>表单标签
表单标签无非是from和input，内容比较多和复杂的input的type类型，表单的name一般强烈建议写上去，因为使用原生表单提交时，name时必须要写上的，因为这是提交数据时使用的字段名
from标签属性：
| 属性 | 说明 |
|---|---|
| action | 表示表单要提 交到的后台程序的网址 |
| method | 属性表示表单提交 的方式，有get或post |
input标签属性
| 属性 | 说明 |
|---|---|
| type | 表示input的类型，什么控件 |
| value | 表示已经input填写的值 |
| placeholder | 表示提示文本 |
| disabled | 用户不能与元素交互，即“锁死” |
| name | 确定提交数据时使用的字段名 |
input控件
| 属性值 | 说明 |
|---|---|
| text | 单行 文本框 |
| radio | 单选按钮，name为相同值时候就可以实现互斥，要有value属性值，向服务器提交的就是value值 |
| checkbox | 复选框，同组复选框应该设置它们的name为相同值，要有value属性值，向服务器提交的就是name值+value值 |
| password | 密码框 |
| select标签 | 表示下拉菜单，option是它内部的选项，select的属性name会被提交 |
| textarea标签 | 多行文本框，有rows和cols属性，用于定义多行文本框的行数和列数 |
| button | 普通按钮 |
| submit | 重置按钮 |
| reset | 提交按钮 |
| color | 颜色选择控件 |
| date、time | 日期、时间选择控件 |
| 电子邮件输入控件 | |
| file | 文件选择控件 |
| number | 数字输入控件 |
| range | 拖拽条 |
| search | 搜索框 |
| url | 网址输入控件 |
datalist控件
datalist控件可以为输入框提供一些备选项，当用户输 入的内容与备选项文字相同时，将会显示智能感应
<input type="text" list="province-list"><datalist id="province-list"> <option value="山东"> <option value="山西"> <option value="广东"> <option value="广西"> <option value="河南"> <option value="河北"> <option value="湖南"> <option value="湖北"></datalist>示例：
<form action="" method="get"> <p> 文本框required：<input type="text" placeholder="请输入文本" required /> </p> <p> 文本框disabled： <input type="text" placeholder="请输入文本，disabled" required disabled /> </p> <p>密码框：<input type="password" /></p> <p> <!-- 单选name要一致,value是提交的值 --> <span>性别</span> <label for="nan" ><input type="radio" value="man" name="1" id="nan" />男</label > <label for="nv"> <input type="radio" value="grid" name="1" id="nv" />女</label > </p> <p> <span>爱好组1</span> <label for="1" ><input type="checkbox" id="1" name="aihao" value="chang" />唱</label > <label for="2" ><input type="checkbox" id="2" name="aihao" value="rab" />rab</label > <label for="3" ><input type="checkbox" id="3" name="aihao" value="tiao" />跳 </label> <label for="4"> <input type="checkbox" id="4" name="aihao" value="lanqiu" />打篮球</label > </p> <p> <span>爱好组2</span> <label for="5" ><input type="checkbox" id="5" name="aihao2" value="chang" />唱</label > <label for="6" ><input type="checkbox" id="6" name="aihao2" value="rab" />rab</label > <label for="7" ><input type="checkbox" id="7" name="aihao2" value="tiao" />跳 </label> <label for="8"> <input type="checkbox" id="8" name="aihao2" value="lanqiu" />打篮球</label > </p> <p> 下拉框： <select name="payment"> <option value="alipay">支付宝</option> <option value="wx">微信</option> <option value="bank">网银</option> </select> </p> <p>多行文本框：<textarea cols="50" rows="20"></textarea></p> <p>date<input type="date" /></p> <p>time<input type="time" /></p> <p>email<input type="email" /></p> <p>file<input type="file" /></p> <p>number<input type="number" /></p> <p>range<input type="range" /></p> <p>搜索框<input type="search" /></p> <p>只能输入网址<input type="url" /></p> <input type="text" list="province-list" /> <datalist id="province-list"> <option value="山东"></option> <option value="山西"></option> <option value="广东"></option> <option value="广西"></option> <option value="河南"></option> <option value="河北"></option> <option value="湖南"></option> <option value="湖北"></option> </datalist> <p><input type="button" value="按钮" /></p> <p><input type="submit" value="登录" /></p> <p><input type="reset" value="重置" /></p></form>表格标签
表格控件可以参考列表标签中的定义列表，一个书写的顺序是列，表格是按照行
一个示例
<table border="1"> <caption> 表格标题 </caption> <thead> <tr> <th>表头1</th> <th>表头2</th> </tr> </thead> <tbody> <tr> <!-- 向下合并列 --> <td colspan="2">第1行第1列</td> <!-- <td>第1行第2列</td> --> </tr> <tr> <td>第2行第1列</td> <!-- 向下合并行 --> <td rowspan="2">第2行第2列</td> </tr> <tr> <td>第3行第1列</td> <!-- <td>第3行第2列</td> --> </tr> </tbody></table>效果：
| 表头1 | 表头2 |
|---|---|
| 第1行第1列 | |
| 第2行第1列 | 第2行第2列 |
| 第3行第1列 | |
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！