HTML4常用标签详解
概念:用特定的标签,去表达特定的含义。
原则:标签的默认效果不重要(后期可以通过 CSS 随便控制效果),语义最重要!
举例:对于 h1 标签,效果是文字很大(不重要),语义是网页主要内容(很重要)。
优势:
代码结构清晰可读性强。
有利于 SEO(搜索引擎优化)。
方便设备解析(如屏幕阅读器、盲人阅读器等)。
一、排版标签
标签名 | 标签含义 | 单 / 双 标签 |
---|---|---|
h1 ~ h6 | 文章标题 | 双 |
p | 文章段落 | 双 |
div | 没有任何含义,用于整体布局(生活中的包装袋)。 | 双 |
二、文本标签
标签名 | 标签含义 | 单 / 双 标签 |
---|---|---|
em | 要着重阅读的内容 | 双 |
strong | 十分重要的阅读内容(语气比em重) | 双 |
span | 没有语义,用于包裹短语的通用容器 | 双 |
三、图片标签
标签名 | 标签含义 | 属性 | 单 / 双 标签 |
---|---|---|---|
img | 图片 | src :图片路径(又称:图片地址)—— 图片的具体位置 | 双 |
alt :图片描述src :图片路径(又称:图片地址)—— 图片的具体位置 | |||
alt :图片描述 | |||
width :图片宽度,单位是像素,例如: 200px 或 200 | |||
height :图片高度, 单位是像素,例如: 200px 或 |
alt 属性的作用:
-
搜索引擎通过 alt 属性,得知图片的内容。—— 最主要的作用。
-
当图片无法展示时候,有些浏览器会呈现 alt 属性的值。
-
盲人阅读器会朗读 alt 属性的值。
#尽量不调整图片的宽度和高度,会导致图片失真。
四、超链接
主要作用:从当前页面进行跳转。
可以实现:①跳转到指定页面、②跳转到指定文件(也可触发下载)、③跳转到锚点位置、④唤起指定
应用。
标签名 | 标签含义 | 属性 | 单 / 双 标签 |
---|---|---|---|
a | 超链接 | href : 指定要跳转到的具体目标。 | 双 |
target : 控制跳转时如何打开页面,常用值如下:_self :在本窗口打开。_blank :在新窗口打开。 | |||
name : 元素的名字,写在 a 标签中,也能设置锚点。 | |||
id : 元素的唯一 标识,可用于设置锚点。 |
1.跳转到其他页面
`<!-- 跳转其他网页 -->`
`<a href="https://www.jd.com/" target="_blank">去京东</a>`
`<!-- 跳转本地网页 -->`
`<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>`
2.跳转到文件
<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">看自拍</a>
<!-- 浏览器不能打开的文件,会自动触发下载 -->
<a href="./resource/内部资源.zip">内部资源</a>
<!-- 强制触发下载(若想强制触发下载,请使用 download 属性,属性值即为下载文件的名称。) -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
3. 跳转到锚点
什么是锚点?—— 网页中的一个标记点。
具体使用方式
–第一步:设置锚点
<!-- 第一种方式:a标签配合name属性 -->
<a name="test1"></a>
<!-- 第二种方式:其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>
–第二步:跳转锚点
<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>
4. 唤起指定应用
通过 a 标签,可以唤起设备应用程序。
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>
五、列表
1. 有序列表(ordered list – ol)
概念:有顺序或侧重顺序的列表。
<h2>要把大象放冰箱总共分几步</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>
2. 无序列表(unordered list – ul)
概念:无顺序或不侧重顺序的列表。
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
<li>武汉</li>
</ul>
3. 列表嵌套
概念:列表中的某项内容,又包含一个列表(注意:嵌套时,请务必把解构写完整)。
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>
<span>上海</span>
<ul>
<li>外滩</li>
<li>杜莎夫人蜡像馆</li>
<li>
<a href="https://www.opg.cn/">东方明珠</a>
</li>
<li>迪士尼乐园</li>
</ul>
</li>
<li>西安</li>
<li>武汉</li>
</ul>
4. 自定义列表(defined list – dl)
- 概念:所谓自定义列表,就是一个包含术语名称以及术语描述的列表。
- 一个 dl 就是一个自定义列表,一个 dt (defined title)就是一个术语名称,一个 dd (defined describe)就是术语描述(可以有多
个)。
<h2>如何高效的学习?</h2>
<dl>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
<dd>笔记可以是电子版,也可以是纸质版</dd>
<dt>多加练习</dt>
<dd>只有敲出来的代码,才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常,改正后并记住,就是经验</dd>
</dl>
六、表格
1. 基本结构
-
一个完整的表格由:表格标题、表格头部、表格主体、表格脚注,四部分组成。
-
表格涉及到的标签:
table :表格
caption :表格标题
thead :表格头部
tbody ):表格主体
tfoot (table foot):表格注脚
tr (table row):每一行
th (table head)、 td(table data) :每一个单元格(备注:表格头部中用 th ,表格主体、表格脚注中用: td )
3.具体编码
<table border="1">
<!-- 表格标题 -->
<caption>学生信息</caption>
<!-- 表格头部 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>20</td>
<td>回族</td>
<td>党员</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>21</td>
<td>壮族</td>
<td>团员</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计:4人</td>
</tr>
</tfoot>
</table>
2. 常用属性
七、补充
注意点:
- 不要用 < br >来增加文本之间的行间隔,应使用 < p > 元素,或后面即将学到的 CSS
margin 属性。
- < hr > 的语义是分隔,如果不想要语义,只是想画一条水平线,那么应当使用 CSS 完成。
八、表单
概念:一个包含交互的区域,用于收集用户提供的数据。
1. 基本结构
<form action="https://www.baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<button>去百度搜索</button>
</form>
2. 常用表单控件
① 文本输入框
<input type="text">
常用属性如下:
name 属性:数据的名称。
value 属性:输入框的默认输入值。
maxlength 属性:输入框最大可输入长度。
② 密码输入框
<input type="password">
常用属性如下:
name 属性:数据的名称。
value 属性:输入框的默认输入值(一般不用,无意义)。
maxlength 属性:输入框最大可输入长度。
③ 单选框
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男
常用属性如下:
name 属性:数据的名称,注意:想要单选效果,多个 radio 的 name 属性值要保持一致。
value 属性:提交的数据值。
checked 属性:让该单选按钮默认选中。
④ 复选框
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
常用属性如下::
name 属性:数据的名称。
value 属性:提交的数据值。
checked 属性:让该复选框默认选中。
⑤ 隐藏域
<input type="hidden" name="tag" value="100">
用户不可见的一个输入区域,作用是: 提交表单的时候,携带一些固定的数据。
name 属性:指定数据的名称。
value 属性:指定的是真正提交的数据。
⑥ 提交按钮
<input type="submit" value="点我提交表单">
<button>点我提交表单</button>
注意:
- button 标签 type 属性的默认值是 submit 。
- button 不要指定 name 属性
- input 标签编写的按钮,使用 value 属性指定按钮文字。
⑦ 重置按钮
<input type="reset" value="点我重置">
<button type="reset">点我重置</button>
注意点:
- button 不要指定 name 属性
- input 标签编写的按钮,使用 value 属性指定按钮文字。
⑧ 普通按钮
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>
注意点:普通按钮的 type 值为 button ,若不写 type 值是 submit 会引起表单的提交。
⑨文本域
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>
常用属性如下:
- rows 属性:指定默认显示的行数,会影响文本域的高度。
- cols 属性:指定默认显示的列数,会影响文本域的宽度。
- 不能编写 type 属性,其他属性,与普通文本输入框一致。
⑩ 下拉框
<select name="from">
<option value="黑">黑龙江</option>
<option value="辽">辽宁</option>
<option value="吉">吉林</option>
<option value="粤" selected>广东</option>
</select>
常用属性及注意事项:
- name 属性:指定数据的名称。
- option 标签设置 value 属性, 如果没有 value 属性,提交的数据是 option 中间的文
字;如果设置了 value 属性,提交的数据就是 value 的值(建议设置 value 属性)
- option 标签设置了 selected 属性,表示默认选中。
3. 禁用表单控件
给表单控件的标签设置 disabled 既可禁用表单控件。
input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性
4.label 标签
label 标签可与表单控件相关联,关联之后点击文字,与之对应的表单控件就会获取焦点。
两种与 label 关联方式如下:
- 让 label 标签的 for 属性的值等于表单控件的 id 。
- 把表单控件套在 label 标签的里面。
总结:
九、框架
iframe 标签的实际应用:
- 在网页中嵌入广告。
- 与超链接或表单的 target 配合,展示不同的内容。
十、hTML实体
在 HTML 中我们可以用一种特殊的形式的内容,来表示某个符号,这种特殊形式的内容,就是 HTML 实
体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符,我们必须
在 HTML 源码中插入字符实体。
字符实体由三部分组成:一个 & 和 一个实体名称(或者一个 # 和 一个实体编号),最后加上一
个分号 ; 。
完整实体列表,请参考:HTML Standard (whatwg.org)
十一、HTML****全局属性
常用的全局属性
完整的全局属性,请参考:全局属性 - HTML**(超文本标记语言)** | MDN (mozilla.org)
十二、meta元信息
-
配置字符编码
-
针对 IE 浏览器的兼容性配置。
-
针对移动端的配置
-
配置网页关键字
-
配置网页描述信息
-
针对搜索引擎爬虫配置:
-
配置网页作者:
-
配置网页生成工具
-
配置定义网页版权信息:
-
配置网页自动刷新
完整的网页元信息,请参考:文档级元数据元素 | MDN
十三、总结