HTML

基础

标签

<!--标题标签-->
<h*></h*>

<!--换行标签-->
<br>

<!--水平线标签-->
<hr>

<!--段落标签-->
<p></p>

文本格式化标签

<!--加粗-->
<b></b>
<strong></strong>

<!--下划线-->
<u></u>
<ins></ins>

<!--倾斜-->
<i></i>
<em></em>

<!--删除线-->
<s></s>
<del></del>

图片

<img>
<!--src:图片路径-->
<!--alt:替换文本-->
<!--title:悬停提示-->
<!--width:宽度-->
<!--height:高度-->

音频

<audio></audio>
<!--src:音频路径-->
<!--controls--:显示播放控件>
<!--autoplay:自动播放（有些浏览器不支持）-->
<!--loop:循环播放-->

视频标签

<video></video>
<!--src:视频路径-->
<!--controls--:显示播放控件>
<!--autoplay:自动播放（有些浏览器不支持）-->
<!--loop:循环播放-->
<!--muted:加这个属性谷歌可以自动静音播放-->

链接标签

<a>显示的文本</a>
<!--target:目标网页的打开形式，两个值。1：_self:默认值，在当前窗口跳转，2：_blank:跳转到新窗口-->
<!--href:需要跳转的链接,#表示空链接-->

列表

无序列表

<ul>
	<li></li>
	<li></li>
	...
</ul>

<ul></ul>中只能有<li></li>标签
<li></li>中可以包含任意的内容

有序列表

<oi>
	<li></li>
	<li></li>
	...
</oi>

<ol></ol>中只能有<li></li>标签
<li></li>中可以包含任意的内容

自定义列表

<dl>
	<dt></dt>
	<dd></dd>
	<dd></dd>
	<dd></dd>
	...
</dl>

• dd前默认增加缩进效果
• dt/dd标签可以包含任意内容
• dl标签只可以有dt/dd标签

表单

表格标签

<!--表头单元格-->
<th></th>
<!--表格标题-->
<caption></caption>

<table border=1>
    <caption>标题</caption>
    <tr>
        <th>id</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    ...
</table>
<!--属性-->
border:值是数字，表示边框宽度
width:值是数字，表示表格宽度
height:值是数字，表示表格高度

<实际开发推荐使用CSS>

表格的结构标签

<thead></thead>
<tbody></tbody>
<tfoot></tfoot>

合并单元格

1. 明确合并的单元格
2. 遵守左上原则，删除该删的单元格
3. 在保留的单元格中使用rowspan属性或者colspan属性
   • rowspan
     • 跨行合并
     • 值是数字，表示合并的单元格数量
   • colspan
     • 跨列合并
     • 值是数字，表示合并的单元格数量

表单标签

input标签

<input></input>

type属性值	说明
test	文本行，用于输出单行文本
password	密码框，用于输入密码
radio	单选框，用于多选一
checkbox	多选框，用于多选多
file	文件选择，用于之后上传文件
submit	提交按钮，用于提交
reset	重置按钮
button	普通按钮，默认无功能，之后配合js添加功能

input属性名：

1. 与输入框配合：
   placeholder:占位符
2. 与redio配合：
   name:name相同的的为同一组
   checked:默认选中（也可和checkbox一起使用）
3. 与file配合
   multiple上传多个文件
4. 提交和重置按钮想使用必须有表单域，使用<form></form>标签包裹<input></input>标签
   <form></form>的属性：

• action:发送到的目的地的地址

5. 与按钮配合：
   value:按钮的名字
6. button可以作为按钮标签，且是双标签，包裹文本或者流媒体，button默认Type是submit

下拉菜单

<select>
	<option>选项</option>
</select>

属性：

<option></option>:
selected:默认选择此选项

textarea文本域标签

在网页中提供可输入多行文本的表单控件
标签名<textarea></textarea>
属性：

• cols:规定文本域内可见宽度
• rows:规定文本域内可见行数

注意：

• 右下角可以改变大小
• 实际开发是推荐使用CSS设置

label标签

绑定内容与表单标签
使用方法：

• 使用label标签把需要关联的内容包裹起来
• 在表单标签增加id属性
• 在label标签的for属性中设置对应的id属性

• 直接使用label标签把内容和表单标签一起包裹起来
• 需要把label标签的for属性删除

语义化标签

无语义标签

<div></div>
<span></sapan>

有语义标签

在HTML新版本推出的，做手机端网页用到

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

注意：
以上标签显示特点与div一致，但是多了不同的语义

字符实体

结构：&英文
常见字符实体

显示结果	实体名称
	&nbsp
<	&lt
>	&gt
&	&amp
"	&quot
’	&apos
￥	&yen