HTML常见标签

HTML定义

HTML超文本标记语言——HyperTextMarkupLanguage
①超文本是什么？ 链接
②标记是什么？     标记也叫标签，带尖括号的文本

标签

标签语法

1. 标签一般成对出现，中间包裹内容

2. <>里面放英文字母（标签名）

3. 结束标签比开始标签多一个字符 /

4. 标签内可以嵌套标签，例：<p> 请打开该 <a href="#">链接</a> </p>

5. 拓展：
①双标签：成对出现的标签
②单标签：只有开始标签，没有结束标签，如<br>换行，<hr>水平线

基本骨架

HTML基本股骨架是 网页模板。

html：整个页面
head：网页头部，存放给浏览器看的代码，例如CSS
body：页面主题，存放给用户看的代码，例如 图片、文字
title：网页标题

标签的关系

1. 作用：明确代码的书写位置

2. 关系：
①父子关系（嵌套关系）
②兄弟关系（并列关系）

注释

1. 注释就是对代码的解释和说明，提高程序代码的可读性。

2. <!--注释内容-->

属性

1. 标签属性（以下简称属性）是对标签的一种描述方式

2. 标签属性的分类：
①通用属性：每个标签都有的属性
②自有属性：只有特定的标签才有的属性
③自定义属性：不是内置的属性，而是我们根据需要自定义的属性

3. 注意事项：
①属性总是以名/值对的形式出现，比如：charset="UTF-8"
②属性总是在 HTML 元素的开始标签中规定。
③属性和属性值对大小写不敏感，但通常使用小写属性
④属性值应该始终被包括在引号内，通常使用双引号
⑤属性与标签名间用空格隔开
⑥一个标签可以有多个属性，属性间也用空格隔开

常用标签

标题标签<h1>

一般用在新闻标题、文章标题、网页区域名称、产品名称等等

标签名：h1 ~ h6（双标签，有6个级别）

<h1> 内容  </h1>

不同级别标题标签的显示效果特点
①文字加粗
②文字字号逐渐减小
③独占一行

注意：
① h1标签在一个网页中只能用一次，用来放新闻标题或网页的logo
② h2 ~ h6 无使用次数限制

段落标签<p>

一般用在新闻段落、文章段落、产品描述信息等等

标签名：p（双标签）

<p> 标题内容 </p>

段落标签显示效果特点

换行标签<br>

1. 标签名：<br>（单标签）

2. 作用：用于内容的换行，注意要区别于段落标签，浏览器是不会识别代码中换行的

水平线标签<hr>

1. 标签名：<hr>（单标签）

2. 作用：添加一个水平线

文本格式化标签

为文本添加特殊格式，以突出重点。常见的格式有：加粗（strong或b）、倾斜（em或 i）、下划线（ins或u）、删除线（del或s ）等。（括号内的为标签名）（均为双标签）

图像标签<img src="图片的URL">

1. 作用： 在网页中插入图片

2. 标签名：<img>（单标签）

SRC用于指定图像的位置和名称，是<img>的必须属性。

3. 属性

超链接标签<a>

1. 作用：点击跳转到其他页面

2. 标签名：<a> 显示的内容 </a>

3. 属性

小tip：开发初期，不确定跳转地址时，可以使用井号#代替URL，表示空链接

音频标签<audio>

1. 作用：在页面中插入音频

2. 标签名：<audio> 显示的内容 </audio>

3. 属性

小tip：当属性名和属性值相同时，只写属性名即可。 

视频标签<video>

1. 作用：在页面中插入视频

2. 标签名：<video> 显示的内容 </video>

3. 属性

列表<ul>、<ol>、<dl>

无序列表<ul>

1. 作用：布局排列整齐的不需要规定顺序的区域

2. 标签名：<ul> 嵌套 <li> ，ul是无序列表，li是列表条目

3. 注意：
① li 标签的显示特点是独占一行
② ul 标签里面只能嵌套有 li 标签，但是 li 标签里面可以嵌套其他标签

有序列表<ol>

1. 作用：布局排列整齐的不需要规定顺序的区域

2. 标签名：<ol> 嵌套 <li> ，ul是无序列表，li是列表条目

3. 注意：
① li 标签的显示特点也是独占一行
② ol 标签里面只能嵌套有 li 标签，但是 li 标签里面可以嵌套其他标签

定义列表<dl>

1. 作用：一个标题对应多个内容的列表

2. 标签名： <dl> 嵌套 <dt> 和 <dd>，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述/详情

3. 注意：
①dl 里面只能包含dt 和 dd
②dt 和 dd 里面可以包含任何内容

表格<table>

1. 作用：在页面中插入表格

2. 标签名：<table> 嵌套 <tr> ， <tr> 嵌套 <td>/<th>

3. 属性

① table标签的属性

② tr标签的属性

③ th 和 td 标签的属性

4. 注意：
① 在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线
②插入表格时，可以在代码也插入表格结构标签，该标签可以增强表格的结构性，但是显示效果几乎没有区别

内容补充：合并单元格

1. 作用：将多个单元格合并成一个单元格，以合并同类信息

2. 分类
① 跨行合并：保留最上单元格，添加属性 rowspan
② 跨列合并：保留最左单元格，添加属性 colspan
③ rowspan/colspan的属性值为需要合并的单元格个数，该个数包含首个单元格

3. 步骤
① 明确合并的目标
② 保留最上（跨行）/最左（跨列）的单元格，添加相关属性rowspan（跨行）/colspan（跨列）属性

表单<input>

1. 作用：收集用户信息

2. 标签名：<input>

3. input 标签中 type 属性值不同，则功能不同，<input type="……"> ，具体功能如下

 4. input 标签属性

5. 不同type属性值的显示效果

①  文本框的设置

② 密码框的设置

③ 单选框的设置

 ④ 多选框的设置

⑤ 重置与提交按钮的设置

⑥ 上传文件的设置

上传文件：<input typer="file">

效果如下：

 下拉菜单 <select>

标签名： <select> 嵌套 <option>，select 是下拉菜单整体，option 是下拉菜单的每一项 

文本域<textarea>

1. 作用：多行输入文本的表单空件

2. 标签名：<textarea>

3. 属性

label标签 

1. 作用：网页中，某个标签的说明文本

2. 可以 通过label标签增大点击范围

写法一：
① label 标签只包裹内容，不包裹表单控件
② 设置 label 标签的 for 属性值 和表单控件的 id 属性值 相同

<input type="radio" id="man">
<label for="man">男</label>

写法二：
① 使用 label 标签包裹文字和表单控件，不需要属性

<label><input type="radio">男</label>

3. 属性

按钮<button> 

1. 作用：定义可点击的按钮

2. 标签名：<button>

3. 和 input 标签一样，button 标签中 type 属性值不同，则功能不同，<button type="……"> ，具体功能如下

表单区域标签<from>

1. 作用：用于创建表，实现用户信息的收集和传递

2. 标签名：<from>

3. 属性

无语义的布局标签

1. 作用：布局网页（划分网页区域，摆放内容） 

2. 标签名
① <div>标签：独占一行
② <span>标签：不换行

3.基本格式

字符实体

1. 作用：在网页中显示预留字符

2. 常见的字符实体

通用行内容器标签<span>

1. 作用：没有任何特殊语义，通常用来编组元素以达到某种样式意图

2. 标签名：<span>

3. 基本格式：<span>文字内容或者其他标签</span>