前端学习笔记：HTML基础

黑马Pink老师的前端课程b站链接：https://www.bilibili.com/video/BV14J4114768?p=1
老师的PPT和源码案例在他的专栏中有提供下载地址。

本文在原教程的基础上对目录结构进行了整理、排序和裁剪，一些太基础的概念没有写入。针对视频中的讲解、案例、PPT和源码材料作了一些总结，仅用于个人复习以及前端学习交流分享。

网页：通常是HTML格式的文件，通过浏览器阅读。组成网站的基本元素。由图片、链接、文字、音乐、视频等组成。

HTML：超文本标记语言Hyper Text Markup Language，不是编程语言，而是标记语言，由各种标签组成。超文本的含义：1.超越文本限制，可以是图片、声音、多媒体等；2.超级链接文本，可以从一个文件跳到另一个文件。

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

内核	浏览器
Trident	IE、猎豹、360、百度
Gecko	火狐
Webkit	苹果
Blink	chrome/opera。blink是webkit的分支

web标准：由W3C组织和其他标准化组织指定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

主要构成：结构structure、表现persentation、行为behavior。

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

最佳体验方案：结构、行为、表现相互分离。

类比：身体、衣服、动作。

Chapter1. HTML概述

1.1 概述

双标签：成对的标签。如< html ></ html>。有两种关系：包含关系和并列关系。

单标签：特殊的单个标签。如< br >。

1.2 HTML的基本结构标签（骨架标签）

标签名	定义	说明
< html ></ html >	HTML标签	根标签
< head ></ head >	文档的头部	头部标签
< title ></ title >	文档的标题	head标签中必须设置的标签
< body ></ body >	文档的主题	和头部标签并列

<html>

<head>
    <title>第一个页面</title>
</head>

<body>
    万丈高楼平地起。
</body>

</html>

1.3 网页开发工具

1.3.1 vscode的使用

1. 双击打开软件。
2. 新建文件（Ctrl + N ）。
3. 保存（Ctrl + S ）, 注意移动要保存为 .html 文件
4. Ctrl + 加号键 ，Ctrl + 减号键 可以放大缩小视图
5. 生成页面骨架结构。
   输入! 按下 Tab 键。
6. 利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”（“Open In Live Server”）。
7. 输入标签名+tab，自动补全标签

1.3.2 < !DOCTYPE >文档类型声明标签

< !DOCTYPE >文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

< !DOCTYPE html >这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页。

1. 声明位于文档中的最前面的位置，处于 标签之前。

2. < !DOCTYPE >不是一个 HTML 标签，它就是 文档类型声明标签。

1.3.3 lang语言种类

< html lang="en">

1. en定义语言为英语
2. zh-CN定义语言为中文

简单来说，定义为en 就是英文网页，定义为 zh-CN 就是中文网页。

其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。

1.3.4 charset字符集

字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。在< head >标签内，可以通过< meta > 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

<meta charset=" UTF-8" />

charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符。

注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的 “UTF-8”，不要写成 “utf8” 或 “UTF8”。

Chapter2. HTML常用标签

2.1 标题标签

6个等级的网页标题标签：< h1 > - < h6 >

标签语义：作为标题使用，并且依据重要性递减。

特点：

1. 加了标题的文字会变的加粗，字号也会依次变大。
2. 一个标题独占一行。

2.2 段落和换行标签

2.2.1 段落< p >

< p >标签用于定义段落，它可以将整个网页分为若干个段落。

特点：

1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
2. 段落和段落之间保有空隙。

2.2.2 换行< br >

< br >用于强制换行。

特点：

1. < br > 是个单标签。
2. < br > 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

2.3 文本格式化

在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

标签语义: 突出重要性，比普通文字更重要。

语义	标签	说明
加粗	< strong >< /strong> 或 < b >< /b>	推荐使用strong，语义更强烈
倾斜	< em >< /em>或< b >< /b>	推荐使用em，语义更强烈
删除线	< del >< /del >或< s >< /s>	推荐使用del，语义更强烈
下划线	< ins>< /ins >或< u >< /u>	推荐使用ins，语义更强烈

2.4 < div >和< span >标签

< div > 和 < span > 是没有语义的，它们就是一个盒子，用来装内容的。div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。

特点：

1. < div> 标签用来布局，但是一行只能放一个< div >。大盒子
2. < span > 标签用来布局，一行上可以多个 < span >。小盒子

2.5 图像标签和路径

2.5.1 图像标签

在 HTML 标签中，< img > 标签用于定义 HTML 页面中的图像。src 是< img >标签的必须属性，它用于指定图像文件的路径和文件名。

<img src="图像url">

属性	属性值	说明
src	图片路径	必须属性
alt	文本	图片不能显示时，显示的文字。
title	文本	提示文本。鼠标放在图像上显示的文字。
width	像素	宽度
height	像素	高度
border	像素	边框粗细，一般用css指定

• 属性之间无先后顺序，用空格分开
• 属性采用键值对的格式
• 修改宽度和高度之中的一个，另外一个会等比例缩放

2.5.2 路径

2.5.2.1 相对路径

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

分类	符号	说明
同一级路径		如< img src=“baidu.gif” >
下一级路径	/	如< img src=“images/baidu.gif” >
上一级	…/	如< img src="…/baidu.gif" >

2.5.2.2 绝对路径

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

2.6 超链接标签

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

2.6.1 语法

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

属性	作用
href	必须属性。用于指定链接目标的url地址。
target	用于指定链接页面的打开方式。 _ self为默认值，_ blank为在新窗口中打开方式

2.6.2 分类

1. 外部链接：< a href="http:// www.baidu.com "> 百度</a >。
2. 内部链接：网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。
3. 空链接：如果当时没有确定链接目标时，< a href="#"> 首页 </a >。
4. 下载链接：如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
5. 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
6. 锚点链接：快速定位到页面中的某个位置。
   • 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如<a href="#two"> 第2集 </a>
   • 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id="two">第2集介绍</h3>

2.7 注释和特殊字符

注释：<!-- 注释语句 -->快捷键：ctrl+/

特殊字符	描述	字符代码
	空格符	& nbsp;
>	大于号	& gt;
<	小于号	& lt;
>=	大于等于	& ge;
<=	小于等于	& le;

2.8 表格

表格不是用来布局页面的,而是用来展示数据的。

<table>
    <tr>
    	<td>单元格内的文字</td>
	...
    </tr>
</table>

• tr: table row
• td: table data cell
• th: table head cell（加粗居中）

2.8.1 表格属性

一般在css中设置

属性名	属性值	描述
align	left, center, right	表格相对周围元素的对齐方式
border	1 或 “”	是否拥有边框，默认""无边框
cellpadding	像素值	边沿与内容之间的空白，默认1px
cellspacing	像素值	单元格之间的空白，默认2px
width	像素值或百分比	表格的宽度

2.8.2 表格结构标签

使用场景:因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。

在表格标签中，分别用：< thead >标签 表格的头部区域、< tbody >标签 表格的主体区域. 这样可以更好的分清表格结构。

<table>
    <thead>
    	<tr>
    		<td>单元格内的文字</td>
		...
    	</tr>
	</thead>
    <tbody>
    	<tr>
    		<td>单元格内的文字</td>
		...
    	</tr>
	</tbody>
</table>

2.8.3 合并单元格

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并：colspan=“合并单元格的个数”

2.9 列表标签

• 无序列表
• 有序列表
• 自定义列表

2.9.1 无序列表

ul: unordered list

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

• < ul >< /ul > 中只能嵌套 < li >< /li >，直接在 < ul >< /ul > 标签中输入其他标签或者文字的做法是不被允许的。
• < li >与< /li >之间相当于一个容器，可以容纳所有元素。

2.9.2 有序列表

ol: ordered list

li: list item

    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>

• < ol >< /ol > 中只能嵌套 < li >< /li >，直接在 < ol >< /ol > 标签中输入其他标签或者文字的做法是不被允许的。
• < li >与< /li >之间相当于一个容器，可以容纳所有元素。

2.9.3 自定义列表

dl: definition list

dt: definition term

dd: definition description

    <dl>
        <dt></dt>
        <dd></dd>
        <dd></dd>
    </dl>

• < dl >< /dl > 里面只能包含 < dt > 和 < dd >。
• < dt > 和 < dd >没有个数限制，经常是一个< dt > 对应多个 < dd >。

2.10 表单标签

表单：收集用户信息

在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。

2.10.1 表单域

   <form action="demo.php" method="POST" name="name1">
		...
   </form>

2.10.2 表单控件（表单元素）

2.10.2.1< input >表单元素

input是一个单标签，表示用户输入，必要属：type。

<input type="属性值" />

type属性值表格

属性值	描述
button	可点击按钮
checkbox	复选框
file	供文件上传，如“浏览”按钮
hidden	隐藏的输入字段
image	图像形式的提交按钮
password	密码，字符被掩码
radio	单选按钮
reset	重置按钮，清除表单中所有数据
submit	提交按钮，把表单数据发送到服务器
text	单行的输入字段，输入文本，默认宽度为20字符

input的其他按钮

属性	属性值	描述
name	用户自定义	定义input元素的名称
value	用户自定义	规定input元素的默认值
checked	checked	规定input元素首次加载时应当被选中
maxlength	正整数	输入字符的最大长度

• name 和value 是每个表单元素都有的属性值,主要给后台人员使用
• name 表单元素的名字,主要作用就是用于区别不同的表单元素，要求单选按钮和复选框要有相同的name值
• checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素。

< label >标签：用于绑定一个表单元素, 当点击< label > 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验。

<label for="text"> 用户名:</label> <input type="text" id="text" >

2.10.2.2 < select >下拉表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用< select >标签控件定义下拉列表。

    <select>
        <option>山东</option>
        <option>北京</option>
        <option>天津</option>
        <option selected="selected">火星</option>
    </select>

• < select > 中至少包含一对< option >
• 在< option > 中定义 selected =“ selected " 时，当前项即为默认选中项

2.10.2.3 < textarea >文本域元素

当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 < textarea > 标签。

在表单元素中，< textarea > 标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

今日反馈:
        <textarea cols="50" rows="5">pink老师,我知道这个反馈留言是textarea来做的 </textarea>