html学习笔记

本文根据B站pink老师的视频整理而成，包含常用标签的使用及注意事项。

注意：本篇文章排版不好看，不方便大家阅读，重新排版后的文章在这里：HTML学习笔记 | 常用标签的使用及注意事项（排版后）

html简介

浏览器

浏览器内核（渲染引擎）

Web标准

1、为什么需要Web标准？

浏览器不同，它们显示页面或者排版就会有些许差异，所以需要一套标准来规范。

2、Web标准的构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，现阶段学的主要是JavaScript

Web标准提出的最佳体验方案：结构、样式、行为相分离。

HTML标签

语法规范

基本语法概述

HTML标签是由尖括号包围的关键词，如：
HTML通常是成对出现的，如：，称为双标签
有些特殊的是单标签，如：

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>

HTML常用标签

标签语义

简单理解为标签的含义，这个标签是用来干什么的？在合适的地方用合适的标签，可以让页面结构更加清晰。

标题标签

HTML提供了六个等级的标题标签，即 <h1> ~ <h6>

<h1>这是一级标题</h1>

段落和换行标签

标签<p>用于定义段
<br /> 用于强制换行 ( 斜杠可省略)

<p>我是一个段落标签</p><br /> 用于强制换行

文本格式化标签

语义	标签	说明
加粗	或者	推荐使用，语义更强烈
倾斜	或者	推荐使用，语义更强烈
删除线	或者	推荐使用~~，语义更强烈~~
下划线	或者	推荐使用，语义更强烈

div和span标签

div 和 span 标签是没有语义的，它们就是一个盒子，用来装内容的。

<div>这是头部</div>
<span>今天天气真好</span>

div 是 division 的缩写，表示分区、分割。span意为跨度、跨距。

特点

div 标签用来布局，但是现在一行只能放一个div，可以理解为，它是独占一行的大盒子。
span 标签也是用来布局的，但是一行可以有多个 span 。可以理解为小盒子。

图像标签img和路径

1、它是单标签，image的缩写。

<img src = "图像的URL" />

src 是 image 标签的必需属性，用于指定图像文件的路径和文件名。

img标签的其他属性：

属性	属性值	说明
src	图片路径	必需属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放到图片上显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

图像标签属性注意点：

属性必须写在标签名的后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间要以空格隔开。
属性采取键值对的形式：属性名 = “属性值”。

2、路径

相对路径

以引用文件所在位置为参考基础而建立的目录路径。

简单来说，就是图片相对于HTML页面的位置。

绝对路径

是指目录下的绝对路径，直接到达目标位置，通常是从盘符开始的路径。

例如：“D:***\123.jpg”

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级
下一级路径	`/`	图像文件位于HTML文件下一级
上一级路径	`../`	图像文件位于HTML文件上一级

超链接标签

<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

语法格式

<a href = "跳转目标" target = "目标窗口的弹出方式">文本或图像</a>

属性	作用
href （必需属性）	链接目标的URL地址
target	用于指定目标页面的弹出方式，_self 为默认值 _blank为在新窗口中打开

链接分类
1. 外部链接：地址必须以 http:// 开头。
2. 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。
3. 空链接：没有确定链接目标时
```
<a href = "#">还没想好链接到哪儿</a>
```
4. 下载链接：如果 href 里面地址是一个文件或者压缩包，点击就会下载这个文件。
5. 网页元素链接：各种网页元素例如文本、图像、表格、音频等都可以添加超链接。
```
<a href = "http://www.baidu.com"><img src = "img.jpg"></a>
```
6. 锚点链接：点击链接可以快速定位到页面中的某个位置。
  - 设置链接文本的属性 href 为 #名字 的形式，如：
```
<a href ="#job"> 任职经历 </a>
```
  - 找到目标位置标签，并添加一个 id 属性 = 上面命名的名字，如：
```
<h3 id = "job">任职经历简介
</h3>
```

表格标签

表格的主要作用

用于显示、展示数据，提高数据的可读性。
表格的基本语法
```
<table><tr><td>这是一个单元格</td>...</tr>...
</table>
```
1. table用于定义表格。
2. tr 用于定义表格中的一行，必须嵌套在 table 中。
3. td 用于定义表格中的单元格，必须嵌套在 tr 中。
4. 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 表示主体区域。

合并单元格

特殊情况下，把多个单元格合并成一个单元格
1. 合并单元格的方式
  - 跨行合并：rowspan = “合并单元格的个数”
  - 跨列合并：colspan = “合并单元格的个数”
2. 目标单元格
  - 跨行：最上侧为目标单元格
  - 跨列：最左侧为目标单元格
3. 合并单元格的步骤
  1. 确定跨行还是跨列
  2. 找到目标单元格，写上：合并方式 = 合并单元格的数量，如:
```
<td colspan = "3"></td>
```
4. 删除多余的单元格

列表标签

表格是用来显示数据的，列表是用来布局的，因为它最大的特点就是整齐有序。分为无序列表、有序列表和自定义列表。

无序列表

（做导航栏什么的一般用无序列表）

<ul></ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，列表项用<li>标签定义。
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>...
</ul>

注意：

无序列表各个表项之间没有顺序级别之分。
<ul></ul> 中只能嵌套 <li></li>，但是 <li></li>中可以容纳所有元素。
无序列表会带有自己的样式属性，但在实际使用时，通过CSS来设置。

有序列表

<ol><li>第一</li><li>第二</li><li>第三</li>...
</ol>

注意事项和无序列表基本一致，在实际开发中使用并不多。

自定义列表

使用场景：常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl><dt>联系方式</dt><dd>微信</dd><dd>QQ</dd>
</dl>

注意：

<dl></dl>里面只能包含 <dt></dt> 和 <dd></dd>
dt 和 dd 没有个数限制

表单标签

表单的目的是为了收集用户信息。

在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" />

核心：<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