脚断整理——HTML篇

概念

HTML（Hyper Text Markup Language）超文本标签语言，主要通过HTML标签对网页中的文本、图片、声音等内容进行描述。

特殊字符

特殊字符	说明	字符的代码	栗子
	空格	 	空格 空格
<	小于	&lt;	4 < 6
>	大于	&gt;	8 > 5
&	和	&amp;	东哥 & 兄弟
¥	人民币	&yen;	¥ 1000000
©	版权	&copy;	© 1999-2029
®	注册商标	&reg;	® 商标
°	摄氏度	&deg;	37°
±	正负	&plusmn;	±5
×	乘号	&times;	3 × 3
÷	除号	&divide;	132 ÷ 3
²	平方2	&sup2;	8²
³	平方3	&sup3;	8³

标签分类

• 双标签：如<div>标签内容</div>
• 单标签：如<hr>
  
  

简单标签

• 标题标签 ：<hn>标题内容</hn> （n取值1-6）
• 段落标签 ：<p>段落标签</p>
• 水平线标签：<hr/>
• 换行标签：<br/>
• 字体加粗 <strong>字体加粗</strong> <b>字体加粗</b>
• 字体倾斜 <em>字体倾斜</em> <i>字体倾斜</i>
• 字体删除线 <del>字体删除</del> <s>字体删除</s>
• 字体下划线 <ins>字体下划线</ins> <u>字体下划线</u>
• 注释标签 <!-- 注释标签内容 -->
  
  

标签属性

语法： <标签 属性名1=“属性值1” 属性名2=“属性值2”> 如：<hr color="red">

常用标签

图片标签

<img src="图片的地址" alt="图片的替换文本" title="图片的标题" />

图片属性

1. src=“图片地址”
2. alt=“图片的替换文本”
3. title=“图片标题”
4. width=“400” height=“600”
   
   

链接标签

<a href="链接的地址" target="链接的打开方式"></a>

跳转的分类：

1. 站外跳转：http://www.baidu.com (地址绝对路径）
2. 站内跳转：本地文件路径（相对路径）
3. 锚点跳转：本页跳转（id）

   <p id="idName"></p>
   <a href="idName"></a>
   

target常用取值：

1. _self 默认值，当前页面跳转新页面
2. _blank 新窗口打开
   
   

列表标签

列表分类

• 无序列表
• 有序列表
• 自定义列表

无序列表

<ul>
	<li>无序列表</li>
	<li>无序列表</li>
	<li>无序列表</li>
</ul>

有序列表

<ol>
	<li>有序列表</li>
	<li>有序列表</li>
	<li>有序列表</li>
</ol>

自定义列表

<dl>
	<dt>列表标题</dt>
	<li>自定义列表</li>
	<li>自定义列表</li>
	<li>自定义列表</li>
</dl>

表格标签

<table>
	<thead>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>小明</td>
			<td>10</td>
		</tr>
		<tr>
			<td>小红</td>
			<td>9</td>
		</tr>
		<tr>
			<td>韩梅梅</td>
			<td>11</td>
		</tr>
	<tbody>
</table>

表格属性：

1. width：宽
2. height：高
3. border：边框
4. align：对齐方式
5. cellspacing：单元格之间的间距
6. cellpadding：单元格内边距
7. rowspan：上下合并单元格
8. colspan：左右合并单元格

注意：
thead 和 tbody 为非必须，添加上可让表格的语义更明确。

表单标签

表单作用：收集用户信息发送给后台。

1. 表单域：<form action=""></form>
2. 提示文本
3. 表单

表单的分类，即<input type="">中type的取值：

• text ： 单行文本输入框
• password ：密码框
• radio ：单选框，配合name属性使用。同一种类型的单选框，name取值必须一致。
• checkbox ：复选框
• button ：按钮
• file ：用户上传控件
• submit ：提交
• textarea ：多行文本输入框
• select ：下拉菜单

注意事项：
radio、checkbox，默认 checked
select，默认 selected

H5新增标签见

https://blog.csdn.net/qq_42969437/article/details/82154095

补充多媒体标签：

视频播放：

网页中视频插入方法有二

1. 将视频上传第三方网站，使用该网站分享代码放入自己的页面中即可
   优点：没有兼容性
   缺点：有广告
2. 使用H5新增的video标签

   <video src="视频路径">
   </video>
   

   有点：没有广告
   缺点：兼容性

video标签常用属性：
4. autoplay ：自动播放
5. controls ：播放控件
6. loop ：循环播放

兼容性问题的解决方案：准备多种格式的视频文件

    <video autoplay> 
    	<source src="视频.ogg">
    	<source src="视频.mp4">
    	<source src="视频.webm">
    	<a href="#">你的浏览器不支持video，点击升级</a>
    </video>   

浏览器会从上而下依次解读，识别可播放文件后，并不会继续读取。

音频播放

    <video autoplay> 
    	<source src="音频.ogg">
    	<source src="音频.mp3">
    	<a href="#">你的浏览器不支持audio，点击升级</a>
    </video>