HTML学习笔记 | 常用标签的使用及注意事项（排版后），
HTML学习笔记 | 常用标签的使用及注意事项（排版后），
html学习笔记
本文章根据B站pink老师的视频内容进行整理，供复习参考
本文内容：
一、Web标准
1、为什么需要Web标准
2、Web标准的构成
二、HTML标签
1、语法规范
2、HTML基本结构标签
3、HTML常用标签
3.1 标签语义
3.2 标题标签
3.3 段落和换行标签
3.4 文本格式化标签
3.5 div和span标签
3.6 图像标签img和路径
3.7 超链接标签
3.8 表格标签
3.9 列表标签
3.9.1 无序列表
3.9.2 有序列表
3.9.3 自定义列表
3.10 表单标签
input 表单标签
label 标签
select 下拉列表标签
textarea表单元素
三、HTML中的注释和特殊字符
四、查阅文档
一、Web标准
1、为什么需要Web标准？
浏览器不同，它们显示页面或者排版就会有些许差异，所以需要一套标准来规范。
2、Web标准的构成
主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS |
| 行为 | 行为是指网页模型的定义及交互的编写，现阶段学的主要是JavaScript |
Web标准提出的最佳体验方案：结构、样式、行为相分离。
二、HTML标签
1、语法规范
1.1 基本语法概述
2、HTML基本结构标签
| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> |
HTML标签 | 根标签 |
<head></head> |
文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<title></title> |
文档的标题 | 让页面拥有属于自己的网页标题 |
<body></body> |
文档的主体 | 包含文档的所有内容，页面内容基本都是放到body里面的 |
<!DOCTYPE html> //文档类型声明标签，当前页面是HTML5版本，必须位于第一行，它不是THML标签
<html lang="en"> //lang语言种类，zh-CN为中文文档
<head>
<meta charset="UTF-8"> //字符集
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
3、HTML常用标签
3.1 标签语义
简单理解为标签的含义，这个标签是用来干什么的？在合适的地方用合适的标签，可以让页面结构更加清晰。
3.2 标题标签
HTML提供了六个等级的标题标签，即 <h1> ~ <h6>
<h1>这是一级标题</h1>
3.3 段落和换行标签
标签<p>用于定义段
<p>我是一个段落标签</p>
<br /> 用于强制换行
3.4 文本格式化标签
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或者<b></b> |
推荐使用<strong>，语义更强烈 |
| 倾斜 | <em></em>或者<i></i> |
推荐使用<em>，语义更强烈 |
| 删除线 | <del></del>或者<s></s> |
推荐使用<del>，语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> |
推荐使用<ins>，语义更强烈 |
3.5 div和span标签
div和 span标签是没有语义的，它们就是一个盒子，用来装内容的。
<div>这是头部</div>
<span>今天天气真好</span>
div 是 division 的缩写，表示分区、分割。span意为跨度、跨距。
特点
3.6 图像标签img和路径
1、它是单标签，image的缩写。
<img src = "图像的URL" />
src 是 image 标签的必需属性，用于指定图像文件的路径和文件名。
img标签的其他属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
src |
图片路径 | 必需属性 |
alt |
文本 | 替换文本，图像不能显示的文字 |
title |
文本 | 提示文本，鼠标放到图片上显示的文字 |
width |
像素 | 设置图像的宽度 |
height |
像素 | 设置图像的高度 |
border |
像素 | 设置图像的边框粗细 |
图像标签属性注意点：
2、路径
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级 | |
| 下一级路径 | / |
图像文件位于HTML文件下一级 |
| 上一级路径 | ../ |
图像文件位于HTML文件上一级 |
3.7 超链接标签
<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。
3.8 表格标签
表头单元格标签
一般位于表格的第一行或第一列，里面的文本内容会加粗居中显示。
th 标签表示 HTML 表格的表头部分（ table head ）
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
表格属性
实际开发中并不常使用，后面通过CSS来设置。
| 属性名 | 属性值 | 描述 |
|---|---|---|
align |
left 、center 、right | 规定表格相对周围元素的对齐方式 |
border |
1 或 “” | 规定表格单元是否拥有边框，默认值为""，无边框 |
cellpadding |
像素值 | 规定单元格内容与边框之间的空白距离，默认1像素 |
cellspacing |
像素值 | 规定单元格之间的空白，默认2像素 |
width |
像素值或百分比 | 规定表格的宽度 |
- 表格结构标签
当表格很长时，为了更好的表示单元格的语义，可以将表格分割成表格头部和表格主体两大部分。用 thead 表示头部区域、 tbody 表示主体区域 。
-
合并单元格
特殊情况下，把多个单元格合并成一个单元格
<td colspan = "3"></td>- 删除多余的单元格
3.9 列表标签
表格是用来显示数据的，列表是用来布局的，因为它最大的特点就是整齐有序。分为无序列表、有序列表和自定义列表。
3.9.1 无序列表
（做导航栏什么的一般用无序列表）
<ul></ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，列表项用<li>标签定义。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
注意：
3.9.2 有序列表
<ol>
<li>第一</li>
<li>第二</li>
<li>第三</li>
...
</ol>
注意事项和无序列表基本一致，在实际开发中使用并不多。
3.9.3 自定义列表
使用场景：常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
<dl>
<dt>联系方式</dt>
<dd>微信</dd>
<dd>QQ</dd>
</dl>
注意：
3.10 表单标签
表单的目的是为了收集用户信息。
在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。
<input>表单元素
-
type属性值：
属性值 描述 button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） checkbox 复选框 file 定义输入字段和"浏览"按钮，供文件上传 hidden 定义隐藏的输入字段 image 图像形式的提交按钮 password 密码字段，该字段中的字符被掩码 radio 单选按钮 reset 重置按钮，会清除表单中的所有数据 submit 提交按钮，会把表单数据发送到服务器 text 单行的输入字段，可在其中输入文本，默认宽度为20个字符 -
除 type 属性外，
<input>标签还有其他很多属性，常用属性如下：属性 属性值 描述 name 自定义 定义input元素的名称 value 自定义 规定input元素的值 checked checked 规定此input元素首次加载时应当被选中 maxlength 正整数 规定输入字段中的字符的最大长度 注意：
<label>标签
为 input 元素定义标签，用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点（光标）转到或者选择到对应的表单元素上，用来增加用户体验。
<label for = "sex">男</label>
<input type = "radio" name = "sex" id = "sex" />
核心：<label>标签的 for 属性要与相关元素的 id 属性相同。
<select>下拉表单元素
**使用场景：**有多个选择项并且想要节约页面空间。
<form>
籍贯：
<select name = "jiguan">
<option>广东</option>
<option selected = "selected">湖南</option>
<option>浙江</option>
...
</select>
</form>
注意：
<textarea>表单元素
**使用场景：**当输入内容较多的情况下，可以使用<textarea>标签，常见于留言板、评论。
<textarea rows = "3" cols = "20" name = "pinglun">
文本内容
</textarea>
三、HTML中的注释和特殊字符
<!--注释语句-->
-
特殊字符
记住三个，其余的自行查阅：
特殊字符 描述 字符的代码 空格符 < 小于号 <> 大于号 >
四、查阅文档
www.w3school.com.cn
https://developer.mozilla.org/zh-CN
评论暂时关闭