HTML+CSS学习笔记（一）HTML

本系列：（一）HTML · （二）CSS与品优购项目

第一部分基础知识

1. 网页

1.1 什么是网页

网页是构成网站的基本元素

元素：文字声音视频链接

后缀名：.htm 或者 .html （俗称HTML文件）

1.2 什么是HTML（重点）

HTML指的是超文本标记语言（Hyper Text Markup Language),用来描述网页的一种语言。

HTML不是一种编程语言，而是一种标记语言（markup language)

标记语言是一套标记标签（markup tag)

超文本有两层含义：

可以加入图片，声音，动画，多媒体等内容（超越了文本限制）
从一个文件跳转到另一个文件，与世界各地的文件连接（超级链接文本）

1.3 网页的形成

网页由网页元素组成，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。

前端人员开发代码——>浏览器显示代码（解析，渲染）——>生成最后的Web页面

1.4 网页总结

网页是由图片，链接，文字，声音，视频等元素组成，其实就是一个html文件（.htm或者.html)

网页生成制作：有前端人员书写HTML文件，然后浏览器打开，就能看到网页。

HTML：超文本标记语言，用来制作网页的一门语言。由标签组成的，比如图片标签，链接标签，视频标签等。

2. 常用浏览器

2.1 常用的浏览器

浏览器是网页显示，运行的平台。常用的浏览器有IE（Edge），Firefox，Chrome，Safari和Opera等。

平时称为五大浏览器。

查看浏览器市场份额：https://tongji.baidu.com/data/brower

2.2 浏览器内核

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

浏览器	内核	备注
IE	Trident	IE，猎豹安全，360极速浏览器，百度浏览器
Firefox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
Chrome/Opera	Blink	chrome/opera浏览器内核，Blink其实是WebKit的分支。

目前国内一般浏览器都会采用WebKit/Blink内核，如360，UC，QQ，搜狗等。

3. Web标准（重点）

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

为什么需要web标准
Web标准的构成

3.1 为什么需要Web标准

浏览器不同，它们显示页面或者排版就有些许差异。

遵循Web标准除了可以让不同开发人员学出的页面更标准，更统一外，还有以下优点：

让Web的发展前景更广阔
内容能被更广泛的设备访问
更容易被搜索引擎搜索
降低网站浏览费用
使网站更易于维护
提高页面浏览速度

3.2 Web标准的构成

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

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

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

简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

相比较而言，三者中结构最重要。

第二部分 HTML标签（上）

目标：

能够说出标签的书写注意规范
能够写出HTML骨架标签
能够书写超链接标签
能够书写图片标签并说出alt和title的区别
能够说出相对路径的三种形式

内容：

HTML语法规范
HTML基本结构标签
开发工具
HTML常用标签
HTML中的注释和特殊字符

1. HTML语法规范

1.1 基本语法概述

HTML标签是由尖括号包围的关键词，例如<html>。
HTML标签通常是成对出现的，例如<html>和</html>,我们称为双标签。标签对中的第一个标签是开始标签，第二个是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如<br/>,我们称为单标签。

1.2 标签关系

双标签关系可以分为两类：包含关系和并列关系。

包含关系：

1
2
3

<head>
    <title></title>
</head>

并列关系:

1 2	<head></head> <body></body>

2. HTML基本结构标签

2.1 第一个HTML网页

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。

HTML页面也称为HTML文档。

<html>
    <head>
        <title>我的第一个页面</title>
    </head>
    <body>
        你我之间，黑马洗练，月薪过万，一飞冲天
    </body>
</html>

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们称为根标签
<head><head>	文档的头部	注意在head标签中我们必须要设置的标签是title
<title><title>	文档的标题	让页面拥有一个属于自己的网页标题
<body><body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

HTML文档的后缀名必须是.html或者.htm，浏览器的作用是读取HTML文档，并以网页的形式显示它们。此时，用浏览器打开这个网页，我们就可以预览我们写的第一个HTML文件了。

2.2 基本结构标签总结

3. 网页开发工具

VScode的使用

双击打开软件。
新建(Ctrl + N)。
保存(Ctrl+S),注意一定要保存为.html文件
。。。
生成页面骨架结构。

输入！按下Tab键。

利用插件在浏览器中预览页面：单击鼠标右键，在弹出出口中点击“Open with live server”。

略 VSCode插件安装以及快捷键

VSCode工具生成骨架标签新增代码

标签
lang语言
charset字符集

3.1 文档类型声明标签

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

1	<!DOCTYPE html>

这句代码的意思是：当前页面采取的是HTML5版本来显示网页。

注意：

声明位于文档中的最前面的位置，处于标签之前。
不是一个HTML标签，它就是文档类型声明标签。

3.2 lang语言种类

用来定义当前文档显示的语言。

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

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

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

这个属性对浏览器和搜索引擎（百度、谷歌等）还是有作用的。

3.3 字符集

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

1	<meta charset="UTF-8" />

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

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

3.4 总结

以上三个代码 vscode 自动生成,基本不需要我们重写.
<!DOCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.
<meta charset=“ UTF-8” /> 必须写. 采取 UTF-8来保存文字. 如果不写就会乱码.具体原理后面分析.

4. HTML 常用标签

4.1 标签语义

4.2 标题标签

4.3 段落和换行标签（重要）

<p></p>

<br/>

4.4 文本格式化标签

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

4.5 <div>和<span>标签

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

特点：

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

4.6 图像标签和路径（重点）

1. 图像标签

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。

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

单词 image 的缩写，意为图像。
src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。

图像标签的其他属性：

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

图像标签属性注意点：

图像标签可以拥有多个属性，必须写在标签名的后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。

2. 路径（前期铺垫知识）

（1）目录文件夹和根目录：
实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。
目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 html 文件、图片等。
根目录：打开目录文件夹的第一层就是根目录

（2）VSCode打开目录文件夹

文件——打开文件夹，选择目录文件夹，后期非常方便管理文件。

路径可以分为：

相对路径
绝对路径

4.7 超链接标签(重点)

<a>

1. 链接的语法格式

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

单词 anchor [ˈæŋkə(r)] 的缩写，意为：锚。

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

2. 链接分类

外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。
内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href=“index.html”> 首页 </a >。
空链接: 如果当时没有确定链接目标时，< a href=“#”> 首页 </a > 。
下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.

在链接文本的 href 属性中，设置属性值为 #名字 的形式，如<a href=“#two”> 第2集 </a>
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如：<h3 id=“two”>第2集介绍</h3>

5. HTML 中的注释和特殊字符

5.1 注释

5.2 特殊字符

重点记住：空格、大于号、小于号这三个，其余的使用很少，如果需要回头查阅即可。

综合案例

通过综合案例，主要复习：

目录文件夹
今日所学标签
路径
锚点链接

第三部分 HTML标签（下）

能够写出表格
能够写出无序列表
能够写出3~4个常用input表单类型
能够写出下拉列表表单
能够使用表单元素实现注册页面
能够独立查阅W3C文档

1. 表格标签

表格是实际开发中非常常用的标签：

表格的主要作用
表格的基本语法

1.1 表格的主要作用

1.2 表格的基本语法

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

<table> </table> 是用于定义表格的标签。
<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
字母 td 指表格数据（table data），即数据单元格的内容。

1.3 表头单元格标签

一般表头单元格位于表格的第一行或者第一列，表头单元格里面的文本内容加粗居中显示。

<th>标签标识HTML表格的表头部分（table head的缩写）

<table>
    <tr>
    	<th>姓名</th>
        ---
    </tr>
    ---
</table>

1.4 表格属性

表格标签这部分属性我们实际开发我们不常用，后面通过CSS来设置。

目的有2个：

记住这些英语单词，后面CSS会使用。
直观感受表格的外观形态。

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

1.5 表格结构标签

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

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

<thead></thead>：用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行。
<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
以上标签都是放在<table></table>标签中。

1.6 合并单元格

特殊情况下，可以把多个单元格合并为一个单元格（学会最简单的合并单元格即可）。

合并单元格方式
目标单元格
合并单元格的步骤

合并单元格方式：

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

目标单元格：（写合并代码）

跨行：最上侧单元格为目标单元格, 写合并代码
跨列：最左侧单元格为目标单元格, 写合并代码

合并单元格三步曲：

先确定是跨行还是跨列合并。
找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>。
删除多余的单元格。

1.7 表格总结

表格学习整体分为三大部分：

表格的相关标签

table
tr
td
th
thead
tbody

表格的相关属性
合并单元格

2. 列表标签

表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

2.1 无序列表（重点）

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

无序列表的基本语法格式如下：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ---
</ul>

无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul></ul> 中只能嵌套<li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
<li> 与 </li> 之间相当于一个容器，可以容纳所有元素。
无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

2.2 有序列表（理解）

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。
有序列表的基本语法格式如下：

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ---
</ol>

<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
<li> 与 </li>之间相当于一个容器，可以容纳所有元素。
有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。

2.3 自定义列表（重点）

其基本语法如下：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

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

2.4 列表总结

标签名	定义	说明
	无序标签	里面只能包含li，没有顺序，使用较多。li里面可以包含任何标签
	有序标签	里面只能包含li，有顺序，使用相对较少。li里面可以包含任何标签
	自定义列表	里面只能包含dt和dd。dt和dd里面可以放任何标签

3. 表单标签

网页中的表单展示

为什么需要表单
表单的组成

3.1 为什么需要表单

使用表单目的是为了收集用户信息。
在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

3.2 表单的组成

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

3.3 表单域

表单域是一个包含表单元素的区域。

在HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。

<form> 会把它范围内的表单元素信息提交给服务器.

1
2
3

<form action=“url地址” method=“提交方式” name=“表单域名称">
	各种表单元素控件
</form>

常用属性：

属性	属性值	作用
action	url地址
method	get/post
name	名称

在我们写表单元素之前,应该有个表单域把他们进行包含.
表单域是 form标签.

3.4 表单控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

input输入表单元素
select下拉表单元素
textarea 文本域元素

3.4.1 <input>表单元素

在英文单词中，input 是输入的意思，而在表单元素中 <input> 标签用于收集用户信息。
在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

1	<input type="属性值" />

<input/>标签为单标签
type属性设置不同的属性值用来指定不同的控件类型

type属性的属性值及其描述如下：

属性值	描述
button
checkbox	定义复选框。
file
hidden
image
password
radio	定义单选按钮。
reset
submit
text

除了type属性外，<input>标签还有其他很多属性，其常用属性如下：

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

name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

3.4.2 <label>标签

<label>标签为input元素定义标注（标签）。

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

语法：

1 2	<label for="sex">男</label> <input type="radio" name="sex" id="sex" />

核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。

3.4.3 <select> 表单元素

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

<select>
    <optional>选项1</optional>
    <optional>选项2</optional>
    <optional>选项3</optional>
    ---
</select>

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

3.4.4 <textarea> 表单元素

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

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

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