文章目录
一.HTML简介
1.基本概念
HTML是用来描述网页的一种语言
-
HTML： Hyper Text Markup Language，超文本（包括文字、图片、音频、视频等等）标记语言
-
HTML 不是一种编程语言，而是一种标记语言，即由一套标记标签（markup tag）组成的语言。
-
浏览器都支持HTML语言，可以将HTML语言所编写的文档渲染成可听、可视的网站
标记语言是不涉及逻辑判断的语言，就比如markdown也是一种标记语言。因此HTML非常容易学习。
当访问网站时，实际获得的其实是一份由文本构成的HTML文档，Web浏览器可以读取HTML文档，并将其渲染成网页。例：你在浏览器的地址栏中输入了知乎的网址zhihu.com，知乎的服务器在得知了你的请求后会发送一份HTML文档给你的电脑，而你的浏览器将这份HTML文档翻译成了网页。
注：一份网页的组成其实还包括样式表文件（Css） 和 脚本文件（Js）
2.HTML标签
HTML标签是HTML语言中最基本的单位:
- 标签由尖括号<>和关键字组成，如
<html> - 标签的书写与字母的大小写无关，如
<body>等价于<bODy> - 标签通常成对出现，比如
<head>和</head>，前者为开始（开放）标签，后者为结束（关闭）标签 - 少数标签没有闭合标签，如
<img>
开始标签和结束标签间往往是一段文本，例：
<h1>我是标题</h1>
它的效果是在页面中出现一个一级标题
如果我们修改这段文本的内容，比如说：
<h1>换一个标题</h1>
虽然标题名字变换了，但它还是一个标题。
因此我们可以这么理解：标签用于告诉浏览器，我们需要呈现的是什么元素，而这个元素的具体内容则由标签间的文本决定。
开始标签和结束标签间也可以存放其他的标签，例：
<p>
<h1>我是标题</h1>
我是一段普通的文本
</p>
<h1>标签表示标题，而<p>标签表示一个段落，它的效果是这样的：
3.HTML骨架
一份HTML文档的基本骨架如下：
<!DOCTYPE html> <!--位于文档最前面，向浏览器说明当前.当前文件使用的是哪种标准规范-->
<html> <!--文档的开始点-->
<head> <!--文档的头部-->
</head>
<body> <!--文档的主体-->
</body>
</html> <!--文档的结束点-->
-
<!DOCTYPE html> 用于向浏览器说明，我这份文件是什么类型的文档
注：不加也没关系，因为所有浏览器都默认文档是用HTML语言写的
-
<html>与</html> 是最外层的标签，标签之间的文本描述网页
-
<head>与<head>之间的文本描述了文档的各种属性和信息，如网页的标题、样式表所在路径等等，绝大部分在加载成网页后是不可见的
-
<body> 与</body>之间的文本描述可见的网页内容
4.环境准备
- 一个好用的浏览器：如
Google Chrome，自带的开发者模式（按F12）对网页调试很有帮助 - 一个好用的文本编辑器：个人用的是
Sublime Text，比较轻量的一个文本编辑器；因为HTML是文本标记语言，所以只需要一个文本编辑器就能学习了（甚至用windows自带的记事本也可以）
如果在网上看到别的网页，想知道是怎么实现的，只需要右键查看网页源代码即可
5.网页的创建
在编写好HTML文档后，将其加载成网页的步骤如下：
-
编写HTML代码，比如一句简单的Hello World！
-
将文件后缀名改为.html (.htm也是可以的)
-
用任意一个浏览器打开该文件
-
完成
观察浏览器的地址栏，发现就是html文件所在的路径：
- 浏览器是一个能将html文件翻译成网页的软件
- 当我们在地址栏中输入网址时，浏览器能帮我们去向对应的服务器请求 html 文档
- 当我们在地址栏中输入本地文件的路径时，浏览器能帮我们将html 文档翻译成网页
二.网页基本标签
HTML是由标签所组成的语言，所以先来熟悉一些最基本的标签
1.注释标签
注释是给自己或其他开发者看的，目的是增强代码的可读性。故注释标签的内容是不会在网页上呈现出来的
格式：<!--注释内容 -->
多行注释:
<!--
注释
注释
注释
-->
2.标题标签
标题是通过<h1> - <h6> 等标签进行定义的 ：
- h即heading的缩写
- <h1>表示一级标签，<h2>表示二级标签，以此类推，最多有六级标签
- 格式为：<h1> 标题内容 </h1>
tips：标题是很重要的，虽然本质和加粗加大的文本没区别，但搜索引擎会根据标题来为网页编制索引
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h6>六级标题</h6>
</body>
效果如下：
3.段落标签
段落是通过 <p>标签进行定义的：
- p为paragraph的缩写
- 段落标签实现的是文字的分段，当文字内容超过浏览器宽度后会换行
- 格式为：<p> 段落内容 </p>
<body>
Hello
world!
<p>a paragraph</p>
<p>another paragraph</p>
</body>
效果如下：
上例中，即便在代码中Hello 和 world！在不同行，但加载成网页后还是在一行的
当显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格。所以需要通过标签来实现换行、分段
4.换行标签
换行是通过标签<br>来定义的：
- 换行标签是一个单标签（自闭合标签），作用是输出换行符
- 注意换行和分段的区别，分段的间隙比换行要大很多
- 格式：<br> 或 <br/>
<body>
Hello<br>
world!<br/>
!<br><br><br>
hhhh
</body>
效果如下：
<br>标签没有结束标签，所以是单标签
可以将标签理解为容器，在开始标签和结束标签间存放内容。而换行则不需要存放啥，所以没有闭合标签。当然也可以将其写为<br/>，后面的/相当于闭合了
5.水平线标签
水平线是通过标签<hr>来定义的：
- 水平线标签也是一个自闭合标签，作用是输出水平线、分隔内容
- 水平线的长度可以随浏览器宽度的变化而变化
- 格式：<hr> 或 <hr/>
<body>
<h1>Title</h1> <!--标题-->
<hr> <!--水平线-->
<p> This is paragraph 1</p> <!--段落-->
<hr/> <!--水平线-->
</body>
效果如下：
6.粗体斜体标签
粗体通过<strong>标签定义，斜体通过<em>标签定义
- 粗体标签格式： <strong>文字内容 </strong>
- 斜体标签格式： <em> 文字内容 </em>
<body>
<h1>字体样式演示</h1> <!--标题-->
<hr/>
正常：I love you <br>
粗体：<strong>I love you</strong><br>
斜体：<em>I love you</em><br>
粗体+斜体：<strong><em>I love you</em></strong>
</body>
效果如下：
三.基本知识
1.元素
**HTML元素：**从开始标签到对应结束标签的所有代码
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| <p> | this is a paragraph | </p> |
- HTML 元素以 开始标签 起始
- HTML 元素以 结束标签 终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素不具有内容，即空元素（empty content），所以不需要结束标签
- 大多数 HTML 元素拥有属性
- 元素内可以包含其他HTML元素（嵌套）
可以将元素想象为容器，<html></html>就是最大的容器
<br>,<hr>等就是空元素，但更好的写法是<br/> <hr />
2.标准流
HTML元素被分为块级元素、行内块元素和行内元素。
-
块级元素：
- 独占一行，具备宽、高属性
- 可以通过属性来设置元素的宽、高；如果不设置，将由内容决定元素的宽高
- 例：<h1>、<p>、<table> 、<ol>
-
行内元素：
- 可以和其他元素挤在一行，无法加载宽、高属性
- 元素的高度和宽度直接由内容决定，即便设置了宽、高属性的值也不起作用
- 例：<strong>, <a>，<em>
-
行内块元素：
- 可以和其他元素挤在一行，且能加载宽、高属性
- 即具备行内元素可以并排显示的特点，又具备块级元素能设置宽、高属性的特点
- 例：<img>、<input>
标准文档流：指的是元素排版布局过程中，行内元素、行内块元素元素会默认从左往右、块级元素默认从上往下的流式排列方式。前面的内容发生变化后，后面的内容位置也会随着发生变化。
HTML的布局还存在以下特点：
- 底边对齐：同一行（同一个块级元素中）的元素如果高度不一致，底边将对齐显示
- 自动换行：如果一行展示不下，元素将自动排列到下一行展示
3.属性
属性的作用是为元素提供附加信息
-
属性以 名称/值 对的形式出现，比如： name=“value”
-
属性在 HTML 元素的 开始标签 中规定。
-
属性和标签一样，对大小写不敏感，但推荐用小写
-
属性的值应该放在双引号/单引号内，但如果属性值本身包含双引号则只能放在单引号内
例1：<h1 align=“center”> 标题 </h1> align属性定义了标题的对齐方式 ：居中排列
例2：<body bgcolor=“yellow”> </body> bgcolor属性定义了网页的背景颜色：黄色
居中排列和背景颜色这两个功能也可以通过样式（CSS）来实现，并且更推荐后者
不同元素具有不同的属性，以下是几乎所有元素都有的属性：
- class ： 规定元素的类名
- id ： 规定元素的唯一id
- style ： 规定元素的行内样式（CSS中再学习）
注：HTML中用于设置样式的属性，包括颜色、文字对齐方式、长、宽等全部建议用CSS语言编写的样式表来实现
4.转义字符
在HTML中，定义转义字符的原因有两个：
- 一是像“<”和“>”这类符号已经用来表示HTML标签，所以不能直接当作文本中的符号来使用；
- 二是有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。
注：转义字符需要严格注重大小写的区别
- " 对应双引号
- & 对应&
- < 对应小于符号
- > 对应大于符号
- 对应一个空格
- © 对应版权符号?
在HTML的代码中，换行通过标签<br>实现，空格通过转义字符** **实现
可以发现，特殊符号都是以**&开头，以；**结尾
四.常用标签
注：在实际的网页开发中，因为样式表（CSS）的存在，HTML中的很多标签、属性是不会用的。比如粗体、斜体标签，完全可以用样式表来代替设置字体且更加灵活。
下面要讲的标签中都还算是经常用到的，其他了解即可，在要使用的时候去搜即可。
1.图像标签
在HTML中，插入图片通过<img>标签实现
-
<img>标签是没有结束标签的
-
格式：<img src = " " alt= " " >
| 属性 | 值 | 描述 |
|---|---|---|
| src | 网络路径（URL）或本地路径 | 图像的来源 |
| alt | 文本值（Text） | 图像的替代文本 |
| height | 数值，默认单位为像素 | 设置图像高度 |
| width | 数值，默认单位为像素 | 设置图像宽度 |
例：
<body>
<h1>img标签学习</h1>
<hr>
<img src="D:\Note\Picture\Pokemon.jpg" alt="Pokemon" height=150 width=120>
</body>
效果如下：
2.链接标签
<a>标签用于定义超链接，从一个页面链接到另一个页面
- 需要使用闭合标签</a>
- 格式：<a href=“path” target=”目标窗口“ > 链接描述 </a>
- 链接描述可以是文本，也可以是一个img标签
| 属性 | 值 | 描述 |
|---|---|---|
| href | URL（网址或本地路径） | hypertext reference的缩写，用于填写目标页面的链接 |
| target | {_self,_blank,_parent,_top} | 规定目标页面在哪个窗口打开 |
- target属性的默认值为_self，即在当前页面打开新的页面
- target的值若为_blank，则会创建一个新的页面
简单地说，target属性定义在哪里打开页面，href属性定义打开什么
<h1>链接标签学习</h1>
<hr><br>
<a href="https://www.baidu.com" target="_blank"> <!--跳转到百度-->
点击跳转到百度
</a>
<br>
<a href="web.html"> <!--跳转到本地的一个网页-->
点击查看大图
<img src="D:\Note\Picture\Pokemon.jpg" alt="美女" height=15 width=12> <!--点击图片跳转-->
</a>
</body>
效果如下：
<a>标签还有另外一种用法，就是跳转到本页面内的某个指定位置，实现类似书签的功能
锚链接：
锚链接用于跳转到页面的指定位置
首先要用一个具备 id 属性的元素来作为锚点，如<p id="top"></p>；
然后在需要跳转的地方，通过href属性来跳转，如<a href="#top">回到顶部</a>
<body>
<h1>链接标签学习</h1>
<hr><br>
<p id="top"></p>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#top">回到顶部</a>
</body>
如果想跳转到其他页面的锚点，也是可以的，如<a href="web.html#top">点击跳转</a>
很多网页的目录就是这么实现的，点击后能跳转到网页中指定的位置
注：原先的html版本中是使用 name 属性作为锚点的，但是在最新的HTML5中 name 属性已经被弃用，只有 <a> 标签仍可以设置 name 属性来作为锚点。
建议使用 id 属性作为锚点
3.列表标签
列表分为有序列表、无序列表、自定义列表
有序列表格式如下:
<ol>
<li> 列表项1 </li>
<li> 列表项2 </li>
<li> 列表项3 </li>
</ol>
无序列表格式与之类似，如下：
<ul>
<li> 列表项1 </li>
<li> 列表项2 </li>
<li> 列表项3 </li>
</ul>
自定义列表格式略为复杂：
<dl>
<dt>列表项1</dt>
<dd>对列表项1的描述</dd>
<dd>对列表项1的描述</dd>
<dd>对列表项1的描述</dd>
<dt>列表项2</dt>
<dd>对列表项2的描述</dd>
<dd>对列表项2的描述</dd>
<dd>对列表项2的描述</dd>
</dl>
其中<dl>为列表标签，
<dt>定义一个列表项
<dd>是列表项的具体描述
三种列表的效果如下：
缩写记忆：
ul是unordered lists的缩写 (无序列表)
li是list item的缩写 （列表项目）
ol是ordered lists的缩写（有序列表）
dl是definition lists的英文缩写 (自定义列表)
dt是definition term的缩写 (自定义列表组)
dd是definition description的缩写（自定义列表描述）
用得最多的是无序列表ul，用来作为网站的导航栏
4.表格标签
表格元素用<table>标签来定义。
基本格式如下：
- border 属性表示表格边框的长度，单位为像素(pixel)
- 一个表格有若干行，每行通过<tr>标签来定义 (r 表示 row)
- 一行有若干个单元格，每个单元格通过<td>标签来定义，内容可以是文本、图像等等 (d表示data)
- 表头单元格可以用<th> 标签来定义 （h表示header）
<th> 标签和<td>标签的区别如下：
-
<th> 元素中的文本通常呈现为粗体并且居中。
-
<td> 元素中的文本通常是普通的左对齐文本。
<table border=1>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
效果如下：
单元格有colspan和rowspan属性，可以实现跨行、跨列
<table border=1>
<tr>
<th colspan=3>学生成绩</th>
</tr>
<tr>
<td rowspan=3>小悦</td>
<td>语文</td>
<td>96</td>
</tr>
<tr>
<td>英语</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>99</td>
</tr>
<tr>
<td rowspan=3>吉利</td>
<td>语文</td>
<td>5</td>
</tr>
<tr>
<td>英语</td>
<td>55</td>
</tr>
<tr>
<td>数学</td>
<td>25</td>
</tr>
</table>
效果如下：
tips:如果某个单元格是空的，浏览器不会显示它的边框，就会很丑，建议用空格进行占位 
5.框架标签
通过使用框架，可以在同一个浏览器窗口中显示多个页面（内联框架）
<iframe src="URL"></iframe>
URL为网页的链接
（试了下百度的，发现请求被拒绝）
属性：
- frameborder定义iframe是否显示边框，值为0不显示，为1显示
- height 和 width 属性分别用来定义iframe的长度和宽度，默认单位为像素，也可以按百分比赋值
例：
<iframe src="https://www.runoob.com/html/html-tutorial.html" frameborder="0" height="500" width="30%"></iframe>
效果如下：
使用iframe来显示目标链接页面：
iframe元素中还有一个属性name
在链接元素中将target指定为iframe的name，则可以在iframe中打开链接元素中的链接
<iframe src="https://www.runoob.com/html/html-tutorial.html" name="hey" frameborder="0" height="500" width="30%"></iframe>
<a href="https://www.bilibili.com/" target="hey" >点击跳转到B站</a>
五.表单
推荐B站上一个讲表单的视频：表单验证课程
这个教程里讲了很多HTML5中新增的表单新特性，建议对表单有一定了解后再去看。
1.概述
表单的作用是收集不同类型的用户输入，并提交到处理数据的地方
一个常见的案例是登录框，需要收集用户输入的账号和密码，提交到后台再验证账号是否存在、密码是否正确等
表单标签：<form> </form>
form标签中有两个重要的属性：
-
method：值为post或get，规定表单提交的方式
-
action：值为URL，规定表单提交到哪里
post方式更为安全，get方式更为高效
典型的get方法如百度，你每次搜索的内容都会在地址栏中显示出来
注：表单本身在网页中是不可见的。具体功能需要通过input标签实现
input标签是一个自闭合标签，是表单中最重要和常用的标签。
除了input标签，还有文件域textarea、下拉框select等标签
2.input属性
input标签中最重要的就是type属性
根据type属性，input元素可以展示很多形态：
- type=“text” 文本框
- type=“password” 密码框
- type=“radio” 单选框
- type=“checkbox” 复选框
- type=“file” 用于提交文件
- type=“button” 按钮
- type=“reset” 重置按钮，点击后表单数据被清空
- type=“submit” 提交按钮，点击后表单被提交
各个类型的具体情况，之后会一一介绍
input元素的其他属性：
-
name属性
- 作用：为input元素设置名字
- 表单的作用是收集用户输入的信息并提交，一个input元素可以收集一份信息，令用户输入的值为value，最后提交的信息是 name=value 这种形式的
- 例：
<input type="text" name="username">
-
vlaue属性规定了input元素的初始值（默认值）
- 用户输入的信息会变为value属性的值
- 如果代码中直接给value属性赋值了，就相当于默认值的效果了
-
placeholder属性规定文本框的提示信息
- 例：淘宝网的登录框
-
pattern 属性用于输入正则表达式，以实现表单验证
- 表单验证：对用户的输入作一定的校验，比如规定用户名中不允许出现特殊字符
以下五个属性不需要赋值
- checked、selected分别在单选框多选框和下拉框中表示默认被选
- disabled 属性表示禁用
- readonly 属性表示只读
- hidden 属性表示隐藏
- required 属性表示非空判断（即不能输入空值）
- autocomplete 属性表示自动填充
3.文本框和密码框
密码框和文本框都用于收集用户输入的字符，区别在于，密码框中输入的字符在网页中显示为掩码
我们可以通过maxlength属性来规定文本框和密码框中输入的最大字符数
详见下例：
<form action="提交到这里.html" method="get">
<p> 用户名： <input type="text" name="username" maxlength="8" value="haha"> </p>
<p> 密码 ： <input type="password" name="pwd" maxlength="10"> </p>
<p>
<input type="submit" >
<input type="reset" >
</p>
</form>
效果如下：
密码框中的内容在网页上以掩码形式出现
点击重置按钮后表单中内容会恢复初始值
点击提交后跳转到form元素action属性所指向的网页
表单中的元素会以name:value的形式被提交，其中value是用户所输入的值，若在HTML中为value属性赋值则相当于给该表单赋了一个默认初值，name属性应该自己定义
3.单选框和多选框
radio表示单选框，checkbox表示多选框
每一个选项都要定义一个input元素，所以在radio和checkbox中name属性是很重要的：
name相同的元素属于同一个问题的选项
大致写法如下：
<form action="提交到这里.html" method="post">
<p> 性别：
<input type="radio" value="male" name="gender" > 男
<input type="radio" value="female" name="gender"> 女
</p>
<p>爱好：
<input type="checkbox" value="basketball" name="hobby" > 篮球
<input type="checkbox" value="running" name="hobby"> 跑步
<input type="checkbox" value="soccer" name="hobby"> 足球
<input type="checkbox" value="sleep" name="hobby" checked> 睡觉
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
效果如下：
在radio和checkbox中，value属性是必填项。
本质上，男、女、篮球等等这些文本是在<input>元素外的，真正提交的数据是input元素的value值
checked表示默认被选，因此一打开上面的页面睡觉就已经显示被选择了
注：单选框最多有一个选项被checked，若有多个以最后一个为准
4.特殊文本框
用户输入的内容可能是非法的，有一些文本框能对用户的输入作简单的合法性检查：
①邮箱
<p>个人邮箱：
<input type="email" name="e-mail">
</p>
会检查用户输入的字符中是否含有@，并且要求@不能是在字符串的末尾
②URL
<p>个人网页：
<input type="url" name="web">
</p>
会检查用户输入的字符是否满足合法的网址格式
③数字
<p>年龄：
<input type="number" name="_num" max=120 min=0 step=1>
</p>
可以自定义值域，max表示最大值，min表示最小值
step为变化的步长
利用pattern属性（正则表达式）可以实现更强的验证
例：网上找到邮箱的正则表达式
<p>个人邮箱：
<input type="text" name="e-mail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
5.下拉框
下拉框所实现的功能其实和单选框是一样的，即多选一
<p>国籍：
<select name="nationality">
<option value="China"> 中国 </option>
<option value="England"> 英国 </option>
<option value="South Korea" selected> 韩国 </option>
<option value="North Korea"> 朝鲜</option>
</select>
</p>
selected表示默认项，和前面的checked是一样的
value为选择对应选项后表单提交的值
效果如下：
6.文本域
文本域用于多行文本输入，例：
<textarea maxlength="1000" cols="20" rows="30" name="complain" >
你有什么想说的请写在这里
</textarea>
maxlength规定输入的最大字符数
cols和rows分别用来规定文本域的列数和行数以控制尺寸
<textarea>和</textarea>间的文字为文本域的默认内容
效果如下：
7.各种按钮
前面出现过的submit、reset其实就是按钮，作用分别是提交表单、重置表单
可以通过value属性改变按钮上的字：
<input type="submit" value="submit">
<input type="reset" value="点击重置">
图片形式的提交按钮：
<input type="image" src="C:\Users\93297\Pictures\壁纸\动漫\8cfb108aea41b521f5b3a7b1d46dd5cd5c0fcd5a.jpg@518w.webp" width="50" height="100">
属性src、width、height都只针对type为image 的input元素
src提供图片的地址（或url）、width和height分别用于定义图片的高、宽
提交文件时的按钮
<p>头像上传：
<input type="file" name="profile_photo">
</p>
以上都是具有特定用途的按钮
type为button时定义的是最普通的按钮，本身并没有什么用，但可以和JS一些动作函数进行配合。
六.总结
HTML是文本标记语言，门槛比较低，但知识点杂。
学习HTML的主要目标是：
- 理解HTML的语法和编写规则，对网页是如何形成的有大致的了解
- 掌握常见的标签
- 掌握表单及表单验证
本篇笔记涉及的知识点较少，以入门为主。
涉及布局的 div、span标签将在CSS的笔记中再提及。
自定义属性将在JS的笔记中再提及。
学习HTML的目的是学会开发网页，而不是记住所有标签名、属性名等
HTML标签参考手册：w3school
表单验证课程：BV16K4y1Z7Gb
遇到的其他问题，百度即可