0. 概述

1. 网页

1.1 网页：网站中的一“页”，通常是HTML格式的文件，组成网站的基本元素。由图片，链接，文字，声音，视频等元素组成。（修改后缀名为.html）

1.2 HTML：超文本标记语言。他不是编程语言，而是一种标记语言。由各种标签组成。

​ 超文本：不仅可以放入文字，还可以加入图片，声音，动画，多媒体等；还可以从一个文件跳转到另一个文件。

2. 常用浏览器

2.1 五大浏览器：IE浏览器，火狐浏览器，谷歌浏览器，Safari和Opera等。

2.2 浏览器内核

image-20211121220235179

3. Web标准

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

3.2 构成：结构（Structure），表现（Presentation），行为（Behavior）。

image-20211121220711484

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

如：身体（HTML），外观(CSS)，动作(JS)。

一. HTML标签（上）

1. HTML基本结构标签

image-20211121222239225

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

单标签：特殊标签，如<br>。

image-20211121222849762

2. 网页开发工具

1.1 vscode的使用

  1. 双击打开软件

  2. 新建文件（Ctrl+N）。

  3. 保存（Ctrl+S）,注意保存为.html文件

  4. Ctrl + 加号键，Ctrl + 减号键 可以放大缩小视图

  5. 生成页面骨架结构

    输入！按下Tab键。

  6. 利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口电机“Open In Default Browser”。

1.2 文档类型声明标签

1.2.1 < !DOCTYPE>

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

<!DOCTYPE html>:当前页面采取的是HTML5版本来显示网页。

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

​ 2.不是一个HTML标签，他就是文档类型声明标签。

1.2.2 lang 语言种类

<html lang="en">

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

1.2.3 字符集

<meta charset="UTF-8" />

通过charset属性来规定HTML文档使用哪种字符编码。

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

注意：上面语法是必须写的代码，豆则可能造成乱码。统一标准”UTF-8”。

3. HTML 常用标签

3.1 标题标签

image-20211121231016703

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

特点：1. 加了标题的文字会加粗，字号也会依次变大。

​ 2.一个标题独占一行。

3.2 段落标签

image-20211121231227109

<p> 定义段落，他可以将占整个网页分为若干个段落。

特点：1. 文本在一个段落中会根据浏览器的大小自动换行

​ 2.段落和段落之间保有空隙

3.3 换行标签

<br />用于强制换行。

特点：1. <br />是一个单标签

​ 2.<br>标签只是简单的开始新的一行，而段落之间会插入一些垂直的间距

3.4 文本格式化标签

在网页中，为文字设置粗体，斜体和下划线效果。

image-20211122185015970

image-20211122185110676

3.5 < div >和< span >标签

<div> 和<span> 标签是没有语义的，他们就是一个盒子，用来装内容。

特点：1. <div>标签用来布局，但是一行只能放一个。（大盒子）

​ 2.<span>标签用来布局，一行可以放多个。（小盒子）

3.6 图像标签

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

<img src="图像URL">（src为必须属性，必须写）

image-20211122190208310

image-20211122190257882

3.7 路径

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

image-20211122190720329

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

image-20211122191440894

3.8 超链接标签

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

3.8.1 语法格式

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

image-20211122192017257

3.8.2 分类

image-20211122192258767

image-20211122192707489

3.9 注释和特殊字符

注释：<!-- 注释语句 -->

快捷键：Ctrl+/

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

二. HTML标签（下）

1. 表格标签

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

1
2
3
4
5
<table>
    <tr>
    	<td>单元格内的内容</td>
    </tr>
</table>

<th> 表头单元格（加粗居中）

1.1 表格属性

表格标签这部分属性通常用不到，后面通过CSS来设置。

image-20211122220004045

扩展：table> * m>td * n

创建一个m行n列的表格

1.2 表格结构标签

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

在表格标签中，分别用：<thead> 标签表格的头部区域，<tbody> 标签表格的主体区域。

image-20211122221640584

1.3 合并单元格

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

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

写合并代码：左上原则

image-20211122222539641

2. 列表标签

2.1 无序列表

1
2
3
4
5
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

image-20211122224736621

特点：1. <ul> 中只能嵌套<li> ,直接在<ul> 标签中输入其他标签或者文字的做法是不被允许的。

​ 2.<li> </li>之间相当于讴歌容器，可以容纳所有元素。

2.2 有序列表

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

image-20211122225352755

2.3 自定义列表

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

特点：1. <dl> </dl> 里面只能包含<dt> 和</dt>

​ 2.<dt> 和<dd> 没有个数限制，经常是一个<dt>对应多个

.

2.4 表单标签

作用：收集用户信息

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

2.4.1 表单域

作用：

会把他范围内的表单元素提交给服务器。

属性：image-20211122231302682

image-20211122231205875

2.4.2 表单控件

  1. < input > 表单元素

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

type属性值：image-20211122231808877

type其他属性：image-20211122232115374

特点：1. name 和 value 是每个表单元素都有的属性值，主要给后台人员使用。

​ 2.name 表单元素的名字，主要作用就是区别不同的表单元素，要求单选按钮和复选框要有相同的name值。

​ 3.checked 属性主要针对于单选按钮和复选框，主要作用为默认选中某个表单元素。

image-20211122232425400

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

image-20211122235022635

  1. < select >下拉表单元素

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

image-20211122235623847

特点：1. <select> 中至少包含一对<option>

​ 2.在<option>中定义selected=”selected”时，当前项即为默认选项

  1. < textarea > 文本域元素

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

image-20211123000235055