前段HTML简介
一、HTML简介
1.网页
1.1 什么是网页
-
网页是根据因特网上一定的规则，使用html等制作的用于展示特定内容的网页集合。
-
网页是构成网站的基本元素。
-
网页是图片、链接、文字、声音、视频等源深路组成，其实就是一个html文件。
1.2 什么是HTML
-
HTML指的是超文本标记语言（Hyper Text Markup Language）,它是用来描述网页的一种语言。
-
HTML不是一种编程语言，而是一种标记语言（markup language）。 标记语言是一套标记标签（markup tag）。
超文本的含义：
- 它可以加入图片、声音、动画、多媒体等内容（超越文本限制）。
- 它可以从一个文件跳转到另一个文件，于世界各地主机的文件连接（超级链接文本）。
1.3 网页的形成
网页由网页元素组成，这些元素通过html标签描述出来，然后通过浏览器解析并显示出来。
2. 常用浏览器及其内核
2.1 常用浏览器
浏览器是网页显示、运行的平台。
五大浏览器有 IE、Firefox、Chrome、Safari 和 Opera。
四大内核：Trident, Gecko, Webkit, Blink
2.2 浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360、百度浏览器 |
| firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| Chrome/Opera | Blink | chrome/opera 浏览器内核 |
3. Web标准
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。
3.1 为什么需要Web标准
浏览器不同，它们显示的页面或者排版有些许差异。
遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：
- 让Web标准发展前景更为广阔
- 内容能被更广泛的设备访问。
- 更容易被搜索引擎了搜索。
- 降低网站流量费用。
- 易于维护。
- 提高页面浏览速度。
3.2 Web标准的构成
| 标准 | 说明 |
|---|---|
| 结构 | 结构对网页元素进行整理和分类，现阶段主要是HTML |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要是指CSS |
| 行为 | 行为是指网页模型的定义以及交互的编写，现阶段主要是JS |
Web标准提出的最佳体验方案：结构、表现、行为相分离。
二、HTML 标签
1. HTML 语法规范
1.1 基本语法规范
HTML 标签是由尖括号包围的关键词，例如<html>。
HTML 标签通常是成对出现的，例如<html>和<html/>，称为双标签。第一个是开始标签，第二个是结束标签。
有些特殊标签必须是单个标签（极少情况），例如<br/>，我们称之为单标签。
1.2 标签关系
标签关系可以分为两类：包含关系和并列关系
2. HTML 基本结构标签
每个网页都会有一个基本的结构标签，页面内容都是在这些基本标签上书写。 HTML 页面也叫 HTML 文档。
3. 开发工具
3.1 文档类型声明标签
!<DOCTYPE> 文档类型声明，告诉浏览器使用何种 HTML 版本来显示网页。
<!DOCTYPE html>
这句话的意思是：当前页面采用的是 HTML5 版本来显示网页。 注意：
- <!DOCTYPE> 声明位于文档最前面的位置，处于<html>标签之前。
- <!DOCTYPE> 不是一个 HTML 标签，他就是文档类型声明标签。
3.2 lang 语言种类
用来显示当前文档显示的语言。
<html lang="zh-CN">
<html lang="en"></html>
</html>
- en 定义语言为英文。
- zh-CN 定义语言为中文。
这个属性对浏览器和搜索引擎（谷歌/百度）还是有作用的。
3.3 charset 字符集
<meta charset="UTF-8" />
字符集（character set）是多个字符的集合，以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset 属性来设置文档使用何种字符编码。
charset常用的值有：GBK、UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。
4. HTML 常用标签(上)
4.1 标签语义
标签语义就是标签的含义。
根据标签的语义，再合适的地方给一个最合理的标签，可以让页面结构更清晰。
4.2 标题标签 h1-h6
为了使网页具有语义化，经常使用标题标签，HTML 提供 6 个等级的网页标题标签即 <h1> ~ <h6>。
<h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
单词为 head 简写，从<h1> ~ <h6> 依据重要性递减。
4.3 段落和换行标签
p 指paragraph，意为段落。把文字有条理的显示出来就需要将文字分段显示。在 html 中，<p> 标签用于定义段落，将整个网页分成若干个段落。
<p>我是一个段落标签</p>
标签语义: 把 HTML 文档分割为若干段落。
特点：
- 文本在一个段落中会根据浏览器窗口的大小自动换行。
- 段落和段落之间保有空隙。
<br/> 是 break 缩写，意为打断、换行。
标签语义： 强制换行
特点：
- <br/> 是个单标签。
- <br/> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
4.4 文本格式化标签
在网页中，有时候需要为文字设置粗体、斜体或下划线等效果，需要使用 HTML 中的文本格式化标签，使文字以特殊方式显示。
标签语义： 突出重要性，比普通文字重要。
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或<b></b> | 更推荐<strong>，语义更强烈 |
| 斜体 | <em></em>或<i></i> | 更推荐使用<em>，语义更强烈 |
| 删除线 | <del></del>或<s><s/> | 更推荐使用<del>，语义更强烈 |
| 下划线 | <ins></ins>或<u></u> | 更推荐使用<ins>，语义更强烈 |
4.5 div 和 span 标签
<div> 和 <span> 是没有语义的，它们是一个盒子，用来装内容的。
<div>这是头部</div>
<span>今日价格</span>
div 是 division 的缩写，表示分割、分区。span 意思是跨度、跨距。
特点：
- div 标签用来布局，但是现在一行只能放一个 div，大盒子。
- span 标签用来布局，一行可以多个 span，小盒子。
4.6 图像标签和路径
4.6.1 图像标签
在 HTML 标签中， 标签用于定义 HTML 标签页面中的图像。
<img src="图像url" />
-
单词 image 的缩写，意为图像。
-
src 是标签的 必须属性，用于指定图像文件的路径和文件名。
-
属性： 属于这个图像标签的特性。
图像标签的其他属性:
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，当图片不显示时显示文字 |
| title | 文本 | 提示文本。鼠标放到图像上显示文字 |
| width | 像素 | 图像宽度 |
| height | 像素 | 图像高度 |
| border | 像素 | 图像边框粗细 |
4.6.2 路径
- 相对路径
- 绝对路径
相对路径： 以引用文件位置为参考基础，而建立出来的目录路径。是相对于 HTML 页面的位置。
| 分类 | 符号 | 说明 |
|---|---|---|
| 同级路径 | 同一级 | |
| 下一级路径 | / | 位于 HTML 文件上一级 |
| 上一级路径 | …/ | 位于 HTML 文件下一级 |
绝对路径： 是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或者完整的网络地址。
4.7 超链接标签
在 HTML 标签中，<a/> 标签用于从一个页面链接到另一个页面。
4.7.1 链接的语法格式
a 是单词 anchor 的简写，是锚的意思。
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性
| 属性 | 作用 |
|---|---|
| href | 指定链接地址 url，为必须属性。 |
| target | 指定页面打开方式，_self为默认值，_blank为在新窗口中打开 |
4.7.2 超链接分类
- 外部链接
- 内部链接：网站内部页面之间的相互链接。
空链接: # - 下载链接：地址链接的是文件.exe、压缩包.zip 等。
- 网页元素链接：在网页中的各种网页元素。如文本、图像、表格、音频、视频等。
- 锚点链接：点击链接，可以快速定位到页面中的某个位置。
: 在链接文本的href属性中，设置属性为 #名字的形式
: 找到目标位置标签，里面添加一个 id 属性 = 名字
4.8 HTML 中的注释和特殊字符号
注释: VSCode 中快捷键：Ctrk + /
字符实体:
| 字符 | 显示 |
|---|---|
| 空格 | |
| < | ＜ |
| > | ＞ |
| © | © |
5. HTML 常用标签(下)
5.1 表格标签
5.1.1 表格的主要作用
表格主要用于显示、展示数据，因为可以让数据显示非常规整，可读性好。 表格不是来布局的，而是来展示数据的。
5.1.2 表格基本语法
- <table></table> 用于定义表格的标签。
- <tr></tr> 标签用于定义表格中的行，必须嵌套在 <table></table>中。
- <td></td> 用于定义表格中的单元格，必须嵌套在 <tr></tr> 中。
字母 td 指表格数据（table data），即单元格的内容。
5.1.3 表头单元格标签 th
一般单元格位于表格的第一行或第一列，表格单元格里面的文本内容 加粗显示。 <th> 标签表示 HTML 表格的表头部分（table head 的缩写） 表头单元格(<th>)也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。
5.1.4 表格属性
只作了解，后期通过 CSS 来设置。 这些属性都要写到
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 表格元素对齐方式 |
| border | 1 或"" | 规定是否有边框，默认为""，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间空白，默认 1px |
| cellspacing | 像素值 | 规定单元格之间的空白，默认为 2px |
| width | 像素值或百分比 | 规定表格宽度 |
| hight | 像素 | 表格高度 |
5.1.5 表格结构标签
场景：表格可能很长，将表格分割为表格头部和表格主题两大部分。
加强语义化：<thead> 表示头部区域，<tbody> 表示主体区域，更好区分表格结构。
注意：
- <thead>：定义表格头部，且内部必须有标签。
- <tbody>：定义表格主体，存放数据。
以上标签都放在 <table></table> 里面。
5.1.6 合并单元格
合并单元格方式：
- 跨行合并：rowspan=“合并单元格个数”
- 跨列合并：colspan=“合并单元格个数”
合并三部曲：
- 确定跨行 or 跨列。
- 找到目标单元格：跨行取最上面为目标单元格，跨列取最左边为目标单元格。<td colspan=“2”></td>
- 删除多余单元格。
5.2 列表标签
表格展示数据，列表则用来布局。 列表特点是整齐、整洁、有序，作为布局更方便自由。 根据使用场景不同，列表分为三大类：
- 无序列表
- 有序列表
- 自定义列表
5.2.1 无序列表
- 标签标识 HTML 页面项目中的无序列表，一般以项目符号呈现列表项。
语法格式:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
注意:
各个列表项之间无需，并列关系。
- <ul></ul>中只能包含<li></li>，写入其他标签或文字是不允许的。
- 无序列表带有自己的属性，可用 CSS 修改样式属性。
5.2.2 有序列表
使用
- 标签来定义有序列表，
- 来定义列表项。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
与无需列表类似，有自己的样式属性，通过 CSS 设置。
5.2.3 自定义列表
<dl> 定义描述列表，与 <dt> 和 <dd> 标签配合使用。
基本语法：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
注意:
<dl >里面只能包含<dt>和<dd>。
5.3. 表头标签
5.3.1 为什么需要表头
收集用户信息。 和用户进行交互，收集用户资料。
5.3.2 表头组成
- 表单域
- 表单控件（元素）
- 提示信息
5.3.3 表单域
表单域是一个包含表单元素的区域。 使用 标签用于定义表单域，手机和传递用户信息。 form 标签会将它范围内的表单元素信息提交给服务器。
目前而言，暂时不需要用表单域提交数据，只需要写上 form 标签即可。
语法格式：
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url 地址 | 指定接受并处理表单数据的服务器的 url 地址 |
| method | get/post | 设置表单数据的提交方式 |
| name | 名称 用于指定表单名称，区分同一个页面中的多个表单域 |
注意：
- 写表单元素之前需要有表单域将其包含。
- 表单域是 form 标签。
5.3.4 表单控件（表单元素）
在表单域中定义各种表单元素，允许用户在表单中输入或选择的内容控件。
5.3.4.1 <input> 标签
用于收集用户信息。
<input>标签包含 type 属性，决定了输入字段的不同形式：文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。
<input type="属性值" />
- input 标签为单标签
- type 属性设置不同属性值来指定不同控件类型
- type 常用属性值
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮 |
| checkox | 复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 \ |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段。字符不显示 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，清除表单所有数据 |
| submit | 定义提交按钮。重置按钮会清除表单所有数据 |
| text | 定义输入字段。用户可输入文本，默认宽度为 20 个字符 |
input 的其他属性:
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 自定义 | 定义 input 元素名称 |
| value | 自定义 | 规定 input 元素的值 |
| checked | checked | 规定此 input 元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段字符的最大长度 |
注意:
- 对于 radio 单选框，必须使 input 的 name 具有相同的属性值，才能实现多选一。 同理，复选框也要有相同的name值。
- 单选框和复选框可以设置 checked 属性，页面打开默认选择按钮。
- 设置 type 的值为 submit，点击按钮后可以把表单域 form 里面的表单元素里面的值提交给后台。
- 设置 type=“button”，普通按钮，后期结合 js 使用
5.3.4.2 <label>标签
<label> 标签为 input 元素定义标注。 <label> 标签用于绑定一个表单源深路，当点击 label 标签内的文本时，浏览器自动将焦点转到或者选择对应的表单元素上，提升用户体验。
语法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心： 标签的 for 属性与相关元素的 id 属性相同。
5.3.4.3 <select>下拉表单元素
select 标签设置多个选项让用户选择，节约页面空间。
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
注意:
- select 中至少包含一对 option。
- 在 option 中定义属性selected=selected，当前项即为默认选项。
5.3.4.4 <textarea>文本域表单元素
场景：输入内容较多时。
语法：
<textarea rows="3" cols="20">
文本内容
</textarea>
Tip: cols=“每行字符数”，rows=“显示的行数”.
三、TDK 标签 SEO 优化
SEO（Search Engine Optimization），即搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
SEO 的目的是对网站进行深度优化，从而帮助网站获得免费流量，进而在搜索引擎上提升网站排名，提高网站知名度。
页面必须有三个标签用来进行 SEO 优化。
- title
- description
- keyword
<!-- 网站标题 -->
<title></title>
<!-- 网站说明 -->
<meta name="description" content="">
<!-- 网站关键词 -->
<meta name="keywords" content="">
1. title 网站标题
title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
建议：网站名（产品名）- 网站的介绍（尽量不要超过30个汉字）
例如：
京东(JD.COM) - 综合网购首选-正品低价、品质保障、配送及时、轻松购物！
小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站
2. description 网站说明
简要说明我们网站主要是做什么的。
我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。
例如：
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物
体验!" />
3. keywords 关键字
keywords 是页面关键词，是搜索引擎的关注点之一。
keywords 最好限制为6～8 个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2 的形式。
例如：
<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配
件,手表,存储卡,京东" />
4.LOGO SEO 优化
- logo 里面首先放一个h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
- h1 里面再放一个链接，可以返回首页的，把logo 的背景图片给链接即可。
- 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。
- 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后overflow:hidden ，淘宝的做法。
- 方法2：直接给font-size: 0; 就看不到文字了，京东的做法。
- 最后给链接一个title 属性，这样鼠标放到 logo 上就可以看到提示文字了。
四、HTML5新增特性
1. HTML5新特性
1.1 HTML5新增语义化标签
<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<asider>：侧边栏标签
<footer>：尾部标签
1.2 HTML5新增多媒体标签
1.2.1. 视频 <vedio>
所有浏览器支持 mp4 格式。
autoplay="autoplay"
controls="controls" 显示控件
width 设置宽度
height 设置高度
loop=loop 设置循环播放
preload="auto/none" 是否预加载
src=url 视频地址
poster=url 封面图片
muted=muted 静音播放
1.2.2音频
所有浏览器支持 mp3 格式。
controls：显示控件
autoplay：（谷歌禁用）
loop=loop 设置循环播放
1.2.3 HTML5 新增 input 类型
type="email"
type="url"
type="date"
type="time"
type="month"
type="week"
type="number"
type="tel"
type="search"
type="color"
1.2.4 HTML5新增的表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off/on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项默认已经打开,如autocomplete=“on”,关闭autocomplete =“off” 需要放在表单内，同时加上name属性，同时成功提交 |
| multiple | multiple | 可以多选文件 |
可以通过以下设置方式修改placeholder里面的字体颜色：
input::placeholder {
color: pink;
}