因为想当个全栈，所以巩固了一下HTML与CSS和JS基础，这一篇博客是HTML部分
文章目录
- HTML 基础标签 1
- HTML 基础框架
- HTML 基础标签
- 语义标签
- 文本格式化标签
- `div` 与 `span` 标签
- 图像标签
- 超链接
- 特殊字符
- 基础标签 2 | 表格
- 表格的使用
- 表格标签
- 表格属性
- 表格的头部与身体
- 合并单元格
- 基础标签3 | 列表
- 1. 无序列表
- 2. 有序列表
- 3. 自定义列表
- 基础标签4 | 表单
- 1. 表单域
- 2. 表单中常用标签
- 1. `input` 标签
- 2. `<label>` 标签
- 3. `<select>` | 选择标签
- 4. `textarea` | 文本域
- HTML5新特性1 | 新增基础标签
- 1. 新增的布局标签
- H5新增标签2 | 视频标签
- 视频标签的使用
- 解决浏览器不支持视频类型
- 视频封面演示
- H5新增标签3 | 音频标签
- 使用方式
- 兼容低版本浏览器
- H5新增标签4 | 输入框新属性
HTML 基础标签 1
查资料去 [W3C]
HTML 基础框架
<!-- 以下代码声明文档类型，这里表名该文档采用的是HTML5，这个标签不属于HTML标签的一部分，但是不建议省略-->
<!DOCTYPE html>
<!-- 以下代码表名当前网页的语言类型，即使设置为其它语言，也可以显示中文，但是可能会触发一些比如翻译之类的插件-->
<html lang="zh-CN"><!-- 以下标签是头部标签， 是HTML必须要有的标签，有且只有一个 --><head><!-- 万国码：包含非常非常多语言--><meta charset="UTF-8"><!-- 以下代码是文档名称，会显示在浏览器的标签栏内 --><title>Hello world</title></head><body></body>
</html>
HTML 基础标签
语义标签
- 标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- 段落标签
- 段落和段落之间会有一个较大的空隙
- 段落的宽度会根据浏览器的宽度而变化，越窄段落的上下长度越长，左右宽度越窄
<p>这是一个自然段。</p><p>这又是一个自然段。</p>
<p>换行还是一个自然段。</p>
- 换行标签
- 换行没有大空隙，但是会另起一行来写
> `br` 是一个单标签123<br/>456
文本格式化标签
- 加粗
<strong>我加粗啦</strong>
<b>我加粗啦</b>
- 下划线
<ins>我也有下划线啦~</ins>
<u>我有下划线</u>
- 斜体
<rm>我也倾斜啦</rm>
<i>我是斜体</i>
- 删除线
<del>我身上也是</del>
<s>我身上有一条删除线</s>
div 与 span 标签
div与span都是一个盒子- 一行只能放一个
div
<div>我是一个div标签，我一个人占一行</div>
<span>我是一个span，我一行可以显示多个</span>
图像标签
img是一个单标签
src：是图像标签的必须属性，指向一张图片的地址或者URLalt：当找不到src中指向的图像时，就会显示这段文字title：当鼠标经过图像时候，就会显示这个标题width：图像的宽度（写入一个数字，单位是像素）height：图像的高度（写入一个数字，单位是像素）border：外边框大小，推荐在style或者class中设置
<!-- 下面是显示一张图片的基础操作 -->
<img src="img/img1.png" width="200"/><!-- 如果显示的图片有问题，我们可以采用img的alt属性来替换图像，如下所示 -->
<img src="img/imgxxx.png" alt="我显示不出来啦~" width="200"/><!-- 当鼠标经过图像时候，就会显示图片的标题 -->
<img src="img/img1.png" width="200" title="我是标题"/><!-- 下面图片有一个很大的黑色外框 -->
<img src="img/img1.png" width="200" border="15"/>
由于我并不存在一张名叫imgxxx.png的图片，所以以上代码在浏览器中的效果如下图所示：
为了方便演示，我给图片加了宽度，并且图与图之间加了换行。
超链接
a标签内部不仅可以嵌入文字，还可以嵌入图片等
若是指向的地址是个内部或外部地址，则会跳转到该地址
若是指向地址是一个资源，则会下载该资源（图片的话一般是打开一个新的标签页显示，可以右键保存，这是现在浏览器的特点）
- 外部链接
href：必要属性，指向一个地址，必须以http://开头
target：打开标签的方式，默认是_self，也就是本页打开，可以改成_blank，新页面内打开
<!-- 以下代码会在当前页面打开百度 -->
<a href="http://www.baidu.com">点我打开百度</a>
<!-- 以下代码会在新的页面打开百度 -->
<a href="http://www.baidu.com" target="_blank">点我在新的页面打开百度</a>
- 内部链接
内部标签的
href指向一个文件即可
target标签同样生效
<a href="_HTML_01.1-语义标签.html">点我进入语义语法介绍页面</a>
- 空链接
若是还没有决定跳转到哪里，可以先在href中写一个#，表示不跳转。
<a href="#">点我没啥效果，我哪里都不去</a>
- 指向一个资源
<!-- 点我下载资源 --><a href="img/a.zip">点我下载资源</a>
- 指向页面内的一个锚点
我们可以在页面的某一个资源商写上
id='xxx'，然后再a标签的href中指向这个元素，那么当我们点击这个a标签的时候，我们的页面会直接跳转到这个元素所在的位置。注意：不能是class或者其他
<a href="#jump">点我跳转到锚点</a>
<h2 id="jump">我是一个锚点</h2>
特殊字符
空格 ：
小于号<：<
大于号>：>
基础标签 2 | 表格
表格的使用
表格标签
table：一个表格tr：一行td：一个单元格th：表头单元格（与td同级），里面的文字会居中加粗显示
<!-- 以下代码表示一个表格 -->
<table><tr><th>我是标题1</th><th>我是标题2</th><th>我是标题3</th></tr><!-- 以下代码表示一行--><tr><td>我是一个单元格1.1</td><td>我是一个单元格1.2</td><td>我是一个单元格1.3</td></tr><tr><td>我是一个单元格2.1</td><td>我是一个单元格2.2</td><td>我是一个单元格2.3</td></tr>
</table>
以上代码在浏览器中的表现如下:
表格的具体属性如下：
- 黄色部分是
table标签 - 三个蓝色部分（代码中只有两个）是
tr标签 - 第一行的白色部分对应着
th标签 - 其余白色部分对应着
td标签
表格属性
| 属性 | 属性值 | 说明 |
|---|---|---|
align | left、center、right | 文字对齐方式，左中右 |
border | 1或"" | 规定表格单元是否拥有边框，默认是""，表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
width | 像素值或百分比 | 规定表格的宽度（百分比的话是相对父元素） |
表格还是上面的表格，我对table标签做出如下修改后，表现如下图：
<table border="1" cellpadding="5" cellspacing="0" width="100%"><!-- 表格内容省略，与上面代码一致 -->
</table>
可以看到，宽度是100%，单元格和单元格之间的空隙是0，单元格与文字之间间距也很大，有边框，且文字居中显示。
我没有验证align属性，因为align属性已经过时了，在HTML5中不生效，事实上，以上的5个属性均已失效，只不过除了align以外剩下的4个还可以生效。
表格的头部与身体
| 标签 | 说明 |
|---|---|
thead | 头部 |
tbody | 身体 |
合并单元格
rowspan="合并单元格的个数"：跨行合并colspan="合并单元格的个数"：跨列合并
<table border="1 gray"><thead><tr><th>我是标题1</th><th colspan="2">我是标题2，我合并了单元格</th></tr></thead><tbody><!-- 以下代码表示一行--><tr><td rowspan="2">我是一个单元格1.1</td><td>我是一个单元格1.2</td><td>我是一个单元格1.3</td></tr><tr><td>我是一个单元格2.2</td><td>我是一个单元格2.3</td></tr></tbody>
</table>
以上代码在浏览器中的效果如下图所示:
文章目录
- HTML 基础标签 1
- HTML 基础框架
- HTML 基础标签
- 语义标签
- 文本格式化标签
- `div` 与 `span` 标签
- 图像标签
- 超链接
- 特殊字符
- 基础标签 2 | 表格
- 表格的使用
- 表格标签
- 表格属性
- 表格的头部与身体
- 合并单元格
- 基础标签3 | 列表
- 1. 无序列表
- 2. 有序列表
- 3. 自定义列表
- 基础标签4 | 表单
- 1. 表单域
- 2. 表单中常用标签
- 1. `input` 标签
- 2. `<label>` 标签
- 3. `<select>` | 选择标签
- 4. `textarea` | 文本域
- HTML5新特性1 | 新增基础标签
- 1. 新增的布局标签
- H5新增标签2 | 视频标签
- 视频标签的使用
- 解决浏览器不支持视频类型
- 视频封面演示
- H5新增标签3 | 音频标签
- 使用方式
- 兼容低版本浏览器
- H5新增标签4 | 输入框新属性
基础标签3 | 列表
列表可以分为三大类：
- 无序列表
- 有序列表
- 自定义列表
1. 无序列表
- 无序列表的哥哥列表项之间没有顺序级别之分，是并列的
<ul>标签中只能放<li>，不能单独书写文字或者其他标签<li>标签内可以放任何元素- 无序列表会带有自己的样式属性，比如前面的小黑点（如下图）
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li><!-- 省略... -->
</ul>
以上代码在浏览器中的表现如下:
2. 有序列表
<ol>标签中只能放<li>，不能单独书写文字或者其他标签<li>标签内可以放任何元素- 有序列表会带有自己的样式属性，但是在实际开发中我们会使用css来进行设置
<!-- 明星排行榜 -->
<ol><li>刘德华</li><li>谢霆锋</li><!-- 省略更多... -->
</ol>
以上代码在浏览器中的表现如下:
3. 自定义列表
自定义列表常用于对属于或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
<dl>：自定义列表最外层标签
<dt>：一个小标题
<dd>：列表项
注意事项：
dl白起爱你中只能包含<dt>和<dl><dt>和<dl>标签是兄弟关系<dt>和<dl>的个数没有限制
<dl><dt>我是小标题1</dt><dd>我是列表项1</dd><dd>我是列表项1</dd>
</dl>
以上代码在浏览器中的表现如下:
文章目录
- HTML 基础标签 1
- HTML 基础框架
- HTML 基础标签
- 语义标签
- 文本格式化标签
- `div` 与 `span` 标签
- 图像标签
- 超链接
- 特殊字符
- 基础标签 2 | 表格
- 表格的使用
- 表格标签
- 表格属性
- 表格的头部与身体
- 合并单元格
- 基础标签3 | 列表
- 1. 无序列表
- 2. 有序列表
- 3. 自定义列表
- 基础标签4 | 表单
- 1. 表单域
- 2. 表单中常用标签
- 1. `input` 标签
- 2. `<label>` 标签
- 3. `<select>` | 选择标签
- 4. `textarea` | 文本域
- HTML5新特性1 | 新增基础标签
- 1. 新增的布局标签
- H5新增标签2 | 视频标签
- 视频标签的使用
- 解决浏览器不支持视频类型
- 视频封面演示
- H5新增标签3 | 音频标签
- 使用方式
- 兼容低版本浏览器
- H5新增标签4 | 输入框新属性
基础标签4 | 表单
表单是用于收集用户信息的
表单通常由以下三部分组成：
- 表单域（整个表单）
- 表单控件（也称为表单元素，就是输入框、选择框、按钮之类的）
- 提示信息（label信息等）
1. 表单域
表单域就是
form标签
<form>会把它范围内的白哦氮元素信息提交给浏览器
表单域含有以下属性:
| 属性 | 属性值 | 说明 |
|---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的URL地址 |
method | get/post | 用于设置表单数据的提交方式，其取值为get或post |
name | 名称 | 用于设置表单的名称，以区分同一个页面中的多个表单域 |
我们在使用VUE时候会用到一些第三方UI空间，比如Element-UI，其中的<el-form>也是一个表单域。
<!-- 下面是一个空的表单域 -->
<form action="demo.php" method="post" name="name1"></form>
2. 表单中常用标签
1. input 标签
input标签具有以下几个属性
type:定义输入框的类型name:可以理解成是给不同输入框取个名字以方便取值，也可以理解成是对单选框或者复选框进行分组（多个选择框使用相同的名字可以形成互斥）value:有一些表格，比如复选框选择爱好，那么他们框框本身应该有一个值（比如：足球、篮球、羽毛球），就是用value来进行定义
type| 输入框的类型（必须有的属性）
| 属性值 | 说明 |
|---|---|
button | 定义可点击按钮 |
checkbox | 定义复选框 |
file | 定义输入字段和"浏览"按钮，供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段。该字段中的字符将会被隐藏 |
radio | 定义单选按钮 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据 |
submit | 定义提交按钮 |
text | 定一单行的输入字段，用户可在其中输入文本。默认宽度为20个字符 |
<form method="post" name="name2"><input type="button"/><br><input type="checkbox"/><br><input type="file"/> <br><input type="hidden"/><br><input type="image"/><br><input type="password"/><br><input type="radio"/><br><input type="reset"/><br><input type="submit" value="注册"/><br><input type="text" placeholder="请输入内容"/><br>
</form>
以上代码在浏览器中的表现如下:
以上代码中的单选框、复选框都不会生效，我们可以通过为他们添加name的方式区分它们，同时若是多个单选框使用同一个name，那么他们之间可以形成互斥。
name| 输入框的名称或者分组
<form method="post" name="name2"><input type="radio" name="radio1"/><input type="radio" name="radio1"/><input type="radio" name="radio1"/>
</form>
这么写就可以实现单选，它们在浏览器中的表现如下:
value| 输入框的值
以上代码即使我们选择了第二个复选框，他也是没有意义的，那么我们应该考虑如何让选择框本身有值，给它定义value即可，看以下代码:
同时比如文本输入框我们也可以在JS中通过这个元素获取它的值
一些按钮的value值用于设置其中显示的文字能容
<h2>我的爱好是</h2>
<form method="post" name="name2">足球<input type="radio" name="radio1" value="足球"/>篮球<input type="radio" name="radio1" value="篮球"/>羽毛球<input type="radio" name="radio1" value="羽毛球"/>
</form>
以上代码中我们选择第一个单选框，则是选择了篮球，选择第二个单选框，则是选择了足球（具体是使用单选框还是复选框根据情景进行判断）
checked| 针对单选框或者复选框的默认选中事件
若是想单选框或者复选框在一开始就被选中，那么可以使用这个属性（比如用户注册的时候我默认是男性）
<h2>请选择你的性别</h2>
<form method="post" name="name2">男<input type="radio" name="radio1" value="男" checked/>女<input type="radio" name="radio1" value="女"/>
</form>
以上代码在浏览器中的表现如下（为了方便区分我将第三部分的代码的初始状态也截图进去了。
maxlength| 针对文本输入框的最大输入长度
比如我设置是20，那么用户最大输入20个字符，将不能继续输入了
2. <label> 标签
label标签为input元素定义注解（标签）与vue中的方式不同，这里是通过label的
for属性和input的id属性绑定
<form><label for="sex">男</label><input type="checkbox" id="sex">
</form>
3. <select> | 选择标签
select中至少包含两个optionoption中可以加一个selected属性，那么该值默认处于选定状态
籍贯
<select><option>山东</option><option>北京</option><option>江苏</option><option>上海</option>
</select>
4. textarea | 文本域
它可以写很多行字，但是文本框可以写很多行。
相关属性或方法:
cols="每行的字符数"rows="显示的行数"
实际开发中多用css来控制
<textarea rows="20" cols="50">预显示文字</textarea>
以上代码在浏览器中的表现如下:
HTML5新特性1 | 新增基础标签
以下内容会有一些兼容性问题，基本都需要IE9以上版本。
因为DIV是没有特殊语义的，所以HTML5新增了一些带语义的标签
1. 新增的布局标签
| 标签 | 说明 |
|---|---|
header | 头部标签 |
nav | 导航标签 |
article | 内容标签 |
section | 定义文档某个区域 |
aside | 侧边栏标签 |
footer | 尾部标签 |
- 这种语义化标准主要是针对搜索引擎的
- 这些新标签页面中可以使用多次
- 在IE9中，需要把这些元素转换为块级元素
- 移动端更喜欢用这些标签
H5新增标签2 | 视频标签
视频：video
video是一个行内块元素，可以设置宽高，如果不能使用margin: 0 auto来居中
浏览器支持说明
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| IE | √ | × | × |
| Chrome | √ | √ | √ |
| Firefox | √ （从Firefox21版本开始，Linux从30版本开始) | √ | √ |
| Safari | √ | × | × |
| Opera | √（从Opera25版本开始） | √ | √ |
相关属性
| 属性 | 说明 | 是否可简写 | 备注 |
|---|---|---|---|
| controls | 显示进度条、播放暂停按钮等空间（不点开始播放不会自动播放） | √ | |
| autoplay | 自动播放，进入页面后开始播放 | √ | |
| muted | 静音播放（有controls的话可以解除静音） | √ | |
| loop | 循环播放 | √ | |
| preload | 规定是否预加载视频（如果有autoplay，就忽略该属性） | √ | auto(预加载视频)none（不应加载视频） |
| src | 视频链接 | × | |
| poster | 视频封面图 | × |
视频标签的使用
<video src="" controls></video>
不加controls="controls"则没有进度条、暂停之类的按钮，可能造成无法播放。
解决浏览器不支持视频类型
<video controls><source src="video.mp4" type="video/mp4"><source src="video.ogg" type="video/ogg">您的浏览器不支持播放此视频。
</video>
视频封面演示
<video src="video/video.mp4" controls poster="img/img3.png"></video>
以上代码在我没播放的时候就会显示poster中指定的图片，如下所示(随便找了张图)：
H5新增标签3 | 音频标签
浏览器支持说明
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| IE | √ | × | × |
| Chrome | √ | √ | √ |
| Firefox | √ | √ | √ |
| Safari | √ | √ | × |
| Opera | √ | √ | √ |
相关属性
| 属性 | 说明 | 是否可简写 | 备注 |
|---|---|---|---|
| controls | 显示进度条、播放暂停按钮等空间（不点开始播放不会自动播放） | √ | |
| autoplay | 自动播放，进入页面后开始播放 | √ | 谷歌浏览器不支持 |
| loop | 循环播放 | √ | |
| src | 音频链接 | × | |
| muted | 静音播放（有controls的话可以解除静音） | √ | |
| preload | 规定是否预加载视频（如果有autoplay，就忽略该属性） | √ | auto(预加载视频)none（不应加载视频） |
使用方式
<audio src="video/maobuyi.mp3" controls></audio>
兼容低版本浏览器
<audio controls><source src="music.ogg" type="audio/ogg"><source src="music.mp3" type="audio/mpeg">您的浏览器不支持播放此视频。
</audio>
H5新增标签4 | 输入框新属性
<input type="email">
H5新增输入框属性说名
| 属性值 | 说明 |
|---|---|
| 用户输入必须为Email类型 | |
| url | 用户输入必须为URL类型 |
| date | 用户输入必须为日期类型 |
| time | 用户输入必须为时间类型 |
| month | 用户输入必须为月类型 |
| week | 用户输入必须为周类型 |
| number | 用户输入必须为数字类型 |
| tel | 手机号码 |
| search | 搜索框 |
| color | 生成一个颜色选择表单 |
| 属性值 | 说明 |
|---|---|
| required | 必须填写，不能为空 |
| placeholder | 提示文本 |
| autofocus | 自动聚焦属性，页面加载完成后自动聚焦在这里 |
| autocomplete(off/on) | 当用户在字段开始键入时，浏览器就之前键入过的值，应该显示出在字段中填写的选项。（默认是开启状态，可以设置为off关闭）需要放在表单内，同时加上name属性。 |
| multiple | 可以多选文本提交 |
