HTML学习笔记
一、Web标准
1、为什么需要Web标准？
浏览器不同，它们显示页面或者排版就会有些许差异，所以需要一套标准来规范。
2、Web标准的构成
主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS |
| 行为 | 行为是指网页模型的定义及交互的编写，现阶段学的主要是JavaScript |
Web标准提出的最佳体验方案：结构、样式、行为相分离。
二、HTML标签
1、语法规范
1.1 基本语法概述
-
HTML标签是由尖括号包围的关键词，如：
<html> -
HTML通常是成对出现的，如：
<html></html>，称为双标签 -
有些特殊的是单标签，如：
<br />
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>
1
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意为跨度、跨距。
特点
- div 标签用来布局，但是现在一行只能放一个div，可以理解为，它是独占一行的大盒子。
- span 标签也是用来布局的，但是一行可以有多个 span 。可以理解为小盒子。
3.6 图像标签img和路径
1、它是单标签，image的缩写。
<img src = "图像的URL" />
src 是 image 标签的必需属性，用于指定图像文件的路径和文件名。
img标签的其他属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
src | 图片路径 | 必需属性 |
alt | 文本 | 替换文本，图像不能显示的文字 |
title | 文本 | 提示文本，鼠标放到图片上显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框粗细 |
图像标签属性注意点：
- 属性必须写在标签名的后面。
- 属性之间不分先后顺序，标签名与属性、属性与属性之间要以空格隔开。
- 属性采取键值对的形式：属性名 = “属性值”。
2、路径
-
相对路径：以引用文件所在位置为参考基础而建立的目录路径。
简单来说，就是图片相对于HTML页面的位置。
-
绝对路径
是指目录下的绝对路径，直接到达目标位置，通常是从盘符开始的路径。
例如：
"D:\***\123.jpg"
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | ./ | 图像文件位于HTML文件同一级 |
| 下一级路径 | / | 图像文件位于HTML文件下一级 |
| 上一级路径 | ../ | 图像文件位于HTML文件上一级 |
3.7 超链接标签
标签用于定义超链接，作用是从一个页面链接到另一个页面。
-
语法格式
<a href = "跳转目标" target = "目标窗口的弹出方式">文本或图像</a> 1属性 作用 href（必需属性）链接目标的URL地址 target用于指定目标页面的弹出方式，_self 为默认值 _blank为在新窗口中打开 -
链接分类
-
外部链接：地址必须以
http://开头。 -
内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。
-
空链接：没有确定链接目标时
<a href = "#">还没想好链接到哪儿</a>
-
-
下载链接：如果 href 里面地址是一个文件或者压缩包，点击就会下载这个文件。
-
网页元素链接：各种网页元素例如文本、图像、表格、音频等都可以添加超链接。
<a href = "http://www.baidu.com"><img src = "img.jpg"></a>-
锚点链接：点击链接可以快速定位到页面中的某个位置。
-
设置链接文本的属性 href 为 #名字 的形式，如：
<a href ="#job"> 任职经历 </a>
-
- 找到目标位置标签，并添加一个 id 属性 = 上面命名的名字，如：
-
<h3 id = "job">
任职经历简介
</h3>
3.8 表格标签
-
表格的主要作用
用于显示、展示数据，提高数据的可读性。
-
表格的基本语法
<table> <tr> <td>这是一个单元格</td> ... </tr> ... </table> -
table用于定义表格。
- tr 用于定义表格中的一行，必须嵌套在 table 中。
- td 用于定义表格中的单元格，必须嵌套在 tr 中。
- td 指的是 table data 表格数据，即数据单元格中的内容。
-
表头单元格标签
一般位于表格的第一行或第一列，里面的文本内容会加粗居中显示。
th 标签表示 HTML 表格的表头部分（ table head ）
<table> <tr> <th>姓名</th> ... </tr> ... </table> -
表格属性
实际开发中并不常使用，后面通过CSS来设置。
| 属性名 | 属性值 | 描述 |
|---|---|---|
align | left 、center 、right | 规定表格相对周围元素的对齐方式 |
border | 1 或 “” | 规定表格单元是否拥有边框，默认值为""，无边框 |
cellpadding | 像素值 | 规定单元格内容与边框之间的空白距离，默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
- 表格结构标签
当表格很长时，为了更好的表示单元格的语义，可以将表格分割成表格头部和表格主体两大部分。用 thead 表示头部区域、 tbody 表示主体区域 。
-
合并单元格
特殊情况下，把多个单元格合并成一个单元格
-
合并单元格的方式
- 跨行合并：rowspan = “合并单元格的个数”
- 跨列合并：colspan = “合并单元格的个数”
-
目标单元格
- 跨行：最上侧为目标单元格
- 跨列：最左侧为目标单元格
-
合并单元格的步骤
- 确定跨行还是跨列
- 找到目标单元格，写上 ：合并方式 = 合并单元格的数量，如:
<td colspan = "3"></td>
-
-
删除多余的单元格
3.9 列表标签
表格是用来显示数据的，列表是用来布局的，因为它最大的特点就是整齐有序。分为无序列表、有序列表和自定义列表。
3.9.1 无序列表
（做导航栏什么的一般用无序列表）
<ul></ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，列表项用<li>标签定义。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
注意：
- 无序列表各个表项之间没有顺序级别之分。
<ul></ul>中只能嵌套<li></li>，但是<li></li>中可以容纳所有元素。- 无序列表会带有自己的样式属性，但在实际使用时，通过CSS来设置。
3.9.2 有序列表
<ol>
<li>第一</li>
<li>第二</li>
<li>第三</li>
...
</ol>
注意事项和无序列表基本一致，在实际开发中使用并不多。
3.9.3 自定义列表
使用场景：常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
<dl>
<dt>联系方式</dt>
<dd>微信</dd>
<dd>QQ</dd>
</dl>
注意：
<dl></dl>里面只能包含<dt></dt>和<dd></dd>- dt 和 dd 没有个数限制
3.10 表单标签
表单的目的是为了收集用户信息。
在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。
-
表单域
包含表单元素的区域，在HTML中，<form>标签用于定义表单域，以实现用户信息的收集和传递。<form>会把它范围内的表单元素提交给服务器。<form action = "url地址" method = "提交方式" name = "表单名称"> 各种表单元素控件 </form>
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
| method | get/post | 用于设置表单数据的提交方式。 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域。 |
- 表单控件（表单元素）
<input>表单元素
-
type属性值：
属性值 描述 button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） checkbox 复选框 file 定义输入字段和"浏览"按钮，供文件上传 hidden 定义隐藏的输入字段 image 图像形式的提交按钮 password 密码字段，该字段中的字符被掩码 radio 单选按钮 reset 重置按钮，会清除表单中的所有数据 submit 提交按钮，会把表单数据发送到服务器 text 单行的输入字段，可在其中输入文本，默认宽度为20个字符 -
除 type 属性外，
<input>标签还有其他很多属性，常用属性如下：属性 属性值 描述 name 自定义 定义input元素的名称 value 自定义 规定input元素的值 checked checked 规定此input元素首次加载时应当被选中 maxlength 正整数 规定输入字段中的字符的最大长度 注意：
- name 和 value 是每个表单元素都有的属性值，主要给后台人员使用。
- name 表单元素的名字，要求 单选按钮和复选框都要有想同的 name 值
<label>标签
为 input 元素定义标签，用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点（光标）转到或者选择到对应的表单元素上，用来增加用户体验。
<label for = "sex">男</label>
<input type = "radio" name = "sex" id = "sex" />
12
核心：<label>标签的 for 属性要与相关元素的 id 属性相同。
<select>下拉表单元素
**使用场景：**有多个选择项并且想要节约页面空间。
<form>
籍贯：
<select name = "jiguan">
<option>广东</option>
<option selected = "selected">湖南</option>
<option>浙江</option>
...
</select>
</form>
注意：
<select>中至少包含一对<option>- 在
<option>中定义 selected = “selected” 时，选项变为默认选项
<textarea>表单元素
**使用场景：**当输入内容较多的情况下，可以使用<textarea>标签，常见于留言板、评论。
<textarea rows = "3" cols = "20" name = "pinglun">
文本内容
</textarea>
- 通过
<textarea>标签可以轻松地创建多行文本输入框 - cols = “每行中的字符数” ，rows = “显示的行数”，但在实际开发中不会使用，都是用CSS来改变大小
三、HTML中的注释和特殊字符
- 注释
<!--注释语句-->
-
特殊字符
记住三个，其余的自行查阅：
特殊字符 描述 字符的代码 空格符 < 小于号 <> 大于号 >
四、查阅文档
www.w3school.com.cn
https://developer.mozilla.org/zh-CN
4646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
