html标签 掌握
相关信息
内容取自千古前端图文教程HTML标签
排版标签
注
学完后试试腾讯招聘练习
标题
提示
Vscode中使用Ctrl+D多选，标题具有align对齐属性，属性值left\right\center
换行标签
br是英语break打断的缩写
在需要换行的结尾添加<br>强制换行
水平线标签
hr是英语horizontal水平线的缩写
<hr> //水平线支持以下属性
| 属性 | 说明 | 属性值 |
|---|---|---|
| align | 对齐 | left/right/center |
| size | 尺寸 | 数值 |
| width | 宽度 | |
| color | 颜色 | 16进制颜色代码 |
| noshade | 无阴影 |
段落标签
Emmet语法
输入p，英语单词paragraph（段落）的缩写，同样支持align属性
注意
p标签是文本级标签，只能放文字、图片、表单元素，其他一律不能放
文本格式化
| 标签 | 说明 |
|---|---|
| b | 加粗 |
| ins | 下划线 |
| em | 倾斜 |
| del | 删除线 |
警告
下面的标签已被html5废弃，可能会在以后的版本中移除，请酌情使用
| 标签 | 说明 |
|---|---|
| b | 加粗 |
| u | 下划线 |
| i | 倾斜 |
| s | 删除线 |
路径
具体地址，如`C:\Program Files\7-Zip\7-Zip.exe`./ //本级目录
../ //上级目录
~/ //根目录媒体
图片
Emmet 语法
img
注
注意路径写法
title：提示性文本
alt：英文单词alternate（替代）的缩写，方便视觉障碍者或图片无法加载
align：对齐方式，center/top/left/right
width/height：设置宽度/高度，如需等比例缩放，请只设置其中一个
视频
Emmet 语法
video
<video src=""></video>controls：显示控制条
loop：循环
音频
Emmet 语法
audio
<audio src=""><audio>链接
Emmet 语法
a
提示
a是一个文本级别标签，语义小于p，所以嵌套使用时，p标签包含a
<a href="" target="_self"></a>
<a href="" target="_blank"></a> //新窗口
<a href="" target="_parent"></a> //父窗口展示
<a href="" target="_top"></a> //顶级窗口展示锚链接
<a name="top">顶部</a>
<a href="#top">尾部</a> //回到顶部🔝邮件
<a href="mailto:XXXXX.com">邮箱地址></a>列表
无序
Emmet 语法
ul>li{无序列表项目}*2
有序
Emmet 语法
ul>li{有序列表项目}*2
自定义
Emmet 语法!
dl>dt{标题}+dd{内容}*2
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
</dl>预定义标签
将字符（包括空格、换行符）原封不动输出到页面。
默认没效果，通常需与其他标签配合
表格
Emmet 语法
table
注意
建议使用tbody、tfoot结构化标签
<table>
<caption>标题</caption>
<thead>
<th>行标题1</th>
<th>行标题2</th>
</thead>
<tbody>
<tr>
<td>项目1</td>
<td>项目2</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>colspan：跨列合并rowspan：跨行合并
内嵌框架
<body>
<a href="文字页面.html" target="myframe">默认显示文字页面</a><br>
<a href="图片页面.html" target="myframe">点击进入图片页面</a><br>
<a href="表格页面.html" target="myframe">点击进入表格页面</a><br>
<iframe src="文字页面.html" width="400" height="400" name="myframe"></iframe>
</body>表单
Emmet 语法
form
属性：
name：表单的名称，用于JS来操作或控制表单时使用；id：表单的名称，用于JS来操作或控制表单时使用；action：指定表单数据的处理程序，一般是PHP，如：action=“login.php”method：表单数据的提交方式，一般取值：get(默认)和post
重要
<form action="">
</form>input
| Type | 说明 | 属性 | Emment语法 | 图片 |
|---|---|---|---|---|
| text | 文本框 | placeholder、width、height | input:t |  |
| password | 密码 | name、placeholder | input:p |  |
| radio | 单选框 | name、checked | input:r |  |
| checkbox | 多选框 | name、checked | input:c |  |
| file | 文件选择 | value | input:f |  |
| submit | 提交 | value | input:s |  |
| reset | 重置 | value | ||
| button | 普通 | value | input:b |  |
注意
通常不会使用button属性
placeholder提示文字checked默认状态value可修改按钮名称
button
| Type | 说明 | 属性 |
|---|---|---|
| submit | 提交 | value |
| reset | 重置 | value |
select
Emmet 语法
select>option*2
textarea
Emmet 语法
textarea
<textarea></textarea>cols：可见宽度rows：可见行数
label
blockquote
内容
无语义标签
- div，单独占据一行
- span，不换行，是文本标签，不能放p、h、ui、dl、div标签
有语义标签
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>侧边栏</aside>
<section>网页区块</section>
<article>文章</article>字符实体
<!-- 网页不认识多个空格, 只认识一个 -->
这是HTML文档, 现在要学 习字符实体.| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | ||
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 立方3（上标3） | &sub3; |