web前端之HTML技术
web前端包括HTML+CSS+JavaScript三大主流技术，HTML是 超文本标记语言 (Hyper Text Markup Language)，网页的结构（类似于身体）；CSS是 层叠样式表 ( Cascading Style Sheets ) 的简称，就像外观装饰，美化HTML；JavaScript简称（JS）是一种表述语言，主管交互，是网页变“活”。
1. HTML语法规范
1.1 基本语法概述
- HTML 标签是由尖括号包围的关键词，例如
<html>。 - HTML 标签通常是成对出现的，例如
<html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。 - 有些特殊的标签必须是单个标签（极少情况），例如
<br />，我们称为单标签。
1.2 标签关系
标签关系分为两类：包含关系和并列关系
包含关系：
<head>
<title> </title>
</head>
并列关系：
<head> </head>
<body> </body>
2. HTML基本结构标签
2.1 结构标签
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称为 HTML 文档。
| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> |
HTML标签 | 页面中最大的标签，我们称为根标签 |
<head></head> |
文档的头部 | 在<head>标签中必须要设置的标签是<title> |
<title></title> |
文档的标题 | 让页面拥有属于自己的页面标题 |
<body></body> |
文档的主体 | 包含文档的所有内容、页面内容 |
HTML 文档的的后缀名必须是 .html 或 .htm ，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。
3. HTML 常用标签
3.1 标题标签
-
标签语义：作为标题使用，并且依据重要性递减。
为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题， 即从<h1> </h1>到<h6> </h6>，其中，数字每加一，文字会缩小一些。标题标签中的文字都是加粗独占一行。具体表现形式如下所示：这是一级标题
这是二级标题
这是三级标题
这是四级标题
这是五级标题
这是六级标题
代码示例： <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6>- 特点
数字每加一，文字会缩小一些。标题标签中的文字都是加粗独占一行。
- 特点
3.2 段落和换行标签
<p> </p>标签语义：可以把HTML文档分割成若干段。
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p></p>标签用于定义段落，它可以将整个网页分为若干个段落。具体表现形式如下所示：
这是
段落标签
代码示例：
这是<p>段落标签</p>
- 特点：
文本在一个段落中会根据浏览器窗口的大小自动换行。段落和段落之间保有空隙。
-
<br />标签语义：强制换行
在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望
某段文本强制换行显示，就需要使用换行标签<br />，也可以直接写成<br>。具体表现形式如下所示：扫描二维码关注公众号，回复： 11138286 查看本文章
这是
换行标签代码示例： 这是<br />换行标签 -
特点：
<br />是个单标签。<br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
3.3 文本格式化标签
- 标签语义: 突出重要性, 比普通文字更重要
在网页中，有时需要为文字设置粗体、斜体 、下划线或删除线效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong> </strong>或<b> </b> |
更推荐使用<strong> </strong>，语义更强 |
| 斜体 | <em> </em>或<i> </i> |
更推荐使用<em> </em>，语义更强 |
| 删除线 | <del> </del>或<s> </s> |
更推荐使用<del> </del>，语义更强 |
| 下划线 | <ins> </ins>或<u> </u> |
更推荐使用<ins> </ins>，语义更强 |
3.4 用来布局的标签
-
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。具体表现形式如下所示：这是头部，占一整行1一行可以多个 span 2一行可以多个 span 3一行可以多个 span
<div> 这是头部，占一整行 </div> <span> 1一行可以多个 span </span>
<span> 2一行可以多个 span </span>
<span> 3一行可以多个 span </span>
- 特点：
<div>标签用来布局，但是现在一行只能放一个<div>。 大盒子
<span>标签用来布局，一行上可以多个<span>。小盒子
3.5 图像标签
- 在 HTML 标签中，
<img>标签用于定义 HTML 页面中的图像。
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
| 属性 | 属性值 | 说明 |
|---|---|---|
src |
图片路径 | <img>的必备属性 |
alt |
文本 | 替换文本，当图像不能显示时的提示文字 |
title |
文本 | 提示文本，鼠标放到图像上显示的文字 |
width |
像素 | 设置图像的宽度 |
height |
像素 | 设置图像的高度 |
border |
像素 | 设置图像的边框粗细 |
- 图像标签可以拥有多个属性，必须写在标签名的后面。
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。
3.6 超链接标签
- 在 HTML 标签中，
<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。 - 链接的语法格式：
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a> - 两个属性的作用：
| 属性 | 作用 |
|---|---|
href |
用于指定目标链接的url地址，（必须属性） |
target |
用于指定链接页面的打开方式，_self为默认值，默认本页面打开， _bank为在新窗口中打开 |
-
链接分类
外部链接：例如<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>
4. HTML 中的注释和特殊字符
4.1 注释
如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。HTML中的注释以<!--开头，以 -->结束。
<!-- 注释语句 --> 快捷键：Ctrl + /
注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的。
4.2 特殊字符
在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | |
|
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方(上标2) | ² |
| ³ | 立方(上标3) | ³ |
5. 表格标签
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
注意： 表格不是用来布局页面的,而是用来展示数据的
5.1 表格的基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
<table> </table>是用于定义表格的标签。<tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中。<td> </td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。- 字母
td指表格数据（table data），即数据单元格的内容。
5.2 表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
<th>标签表示 HTML 表格的表头部分(table head 的缩写)
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
5.3 表格属性
表格标签这部分属性在实际开发不常用，基本通过 CSS 来设置。
| 属性名 | 属性值 | 描述 |
|---|---|---|
align |
left、center、right | 规定表格相对周围元素的相对齐方式 |
border |
1或"" | 规定表格单元是否拥有边框，默认为""，表示没有边框 |
cellpadding |
像素值 | 规定单元边沿与内容之间的空白，默认1像素 |
cellspacing |
像素值 | 规定单元格之间的空白，默认2像素 |
width |
像素值或百分比 | 规定表格的宽度 |
5.4 表格结构标签
<thead></thead>：用于定义表格的头部。<thead>内部必须拥有<tr>标签。 一般是位于第一行。<tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。- 以上标签都是放在
<table></table>标签中。
5.5 合并单元格
- 合并单元格方式：
- 跨行合并：
rowspan="合并单元格的个数" - 跨列合并：
colspan="合并单元格的个数
- 目标单元格：
- 跨行：最上侧单元格为目标单元格, 写合并代码
- 跨列：最左侧单元格为目标单元格, 写合并代码
- 合并单元格三步曲：
先确定是跨行还是跨列合并。
找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>。
删除多余的单元格。
6. 列表标签
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。
6.1 无序列表
-
<ul>标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。
无序列表的基本语法格式如下：<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ul> -
特点：
无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。
无序列表会带有自己的样式属性，但在实际使用时，会使用 CSS 来设置。
6.2 有序列表
-
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。 在 HTML 标签中，
<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。有序列表的基本语法格式如下：
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ol> -
特点：
<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。
有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。
6.3 自定义列表
-
在 HTML 标签中，
<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和
<dd>（描述每一个项目/名字）一起使用。其基本语法如下：
<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> </dl> -
特点：
<dl></dl>里面只能包含<dt>和<dd>。
<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。
6.4 列表总结
| 标签名 | 定义 | 说明 |
|---|---|---|
<ul></ul> |
无序标签 | 里面只能包含<li>； 没有顺序； <li>中可以包含任何标签 |
<ol></ol> |
有序标签 | 里面只能包含<li>； 有顺序； <li>中可以包含任何标签 |
<dl></dl> |
自定义标签 | 里面只能包含<dt>和<dd>； <dt>和<dd>中可以包含任何标签 |
7. 表单标签
使用表单的目的是为了收集用户信息。
在网页中， 需要跟用户进行交互，收集用户资料，此时就需要表单。
7.1 表单的组成
在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。
7.1.1 表单域
-
表单域是一个包含表单元素的区域。
在 HTML 标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器其基本语法如下：
<form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </form> -
常用属性
| 属性 | 属性值 | 作用 |
|---|---|---|
action |
url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method |
get/post | 用于设置表单数据的提交方式，其取值为get或post |
name |
名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
7.1.2 表单控件(表单元素)
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
input输入表单元素select下拉表单元素textarea文本域元素
7.1.2.1 <input>表单元素
-
<input>标签用于收集用户信息。
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本
字段、复选框、掩码后的文本控件、单选按钮、按钮等）。其基本语法如下：
<input type="属性值" /> -
<input />标签为单标签
type属性设置不同的属性值用来指定不同的控件类型 -
type属性的属性值及其描述如下：
| 属性值 | 描述 |
|---|---|
button |
定义可点击按钮(多数情况下，用于通过JavaScript启动脚本) |
checkbox |
定义复选框 |
file |
定义输入字段和“浏览按钮”，供文件上传 |
hidden |
定义隐藏的输入字段 |
image |
定义图像形式的提交按钮 |
password |
定义密码字段，该字段中的字符被掩码 |
radio |
定义单选按钮 |
reset |
定义重置按钮，重置按钮会清除表单中的所有数据 |
submit |
定义提交按钮，提交按钮会把表单数据发送给服务器 |
text |
定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符 |
- 除
type属性外，<input>标签还有其他很多属性，其常用属性如下：
| 属性 | 属性值 | 描述 |
|---|---|---|
name |
用户自定义 | 定义input元素的名称 |
value |
用户自定义 | 定义input元素的值 |
checked |
checke | 规定此input元素首次加载时应当被选中 |
maxlength |
正整数 | 规定输入字段中的字符的最大长度 |
name和value是每个表单元素都有的属性值,主要给后台人员使用name表单元素的名字, 要求单选按钮和复选框要有相同的name值checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素maxlength是用户可以在表单元素输入的最大字符数, 一般较少使用
-
<label>标签
<label>标签为input元素定义标注（标签）。
<label>标签用于绑定一个表单元素, 当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者
选择对应的表单元素上,用来增加用户体验.
其基本语法如下：<label for="sex">男</label> <input type="radio" name="sex" id="sex" />核心：
7.1.2.2 <select>表单元素
-
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用
<select>标签控件定义下拉列表。其基本语法如下：
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select> -
特点：
<select>中至少包含一对<option>。
在<option>中定义selected =" selected "时，当前项即为默认选中项
7.1.2.3 <textarea>表单元素
- 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用
<textarea>标签。
在表单元素中，<textarea>标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
其基本语法如下：
<textarea rows="3" cols="20">
文本内容
</textarea>
- 特点：
通过<textarea>标签可以轻松地创建多行文本输入框。
cols=“每行中的字符数”，rows=“显示的行数”，在实际开发中不会使用，都是用 CSS 来改变大小。
