导读

网页

网站是指在因特网中根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合

网页是网站中的一页，通常就是 HTML 格式的文件

什么是 HTML

一种描述网页的超文本语言

它并非编程语言，是一套标记标签

而所谓超文本有两种含义

  1. 超越了文本限制： 可以加入图片、声音、动漫等内容

  2. 含超级链接： 可以从一个文件跳转到另一个文件，也就是网站中网页的替换呈现

🌟Web 标准

（面试考点）

由 W3C 组织和其他标准化组织制定的一系列标准集合
制定标准就像是制定规则，增大了设备、浏览器、搜索引擎的等兼容性

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

以上三类规定分离，即 html 文件写结构、css 文件写表现、JavaScript 文件写行为

1.基本标签

1.1 HTML 标签

称之为根标签，是最大的标签，文件从< html >开始到< /html >结束

1.2 头部标签< head >

定义一些往往不可见的内容

1
2
3
4
5
6
7
<head>内部标签|    说明
<title>        定义网页标题
<meta>         定义网页基本内容（搜索引擎的关键字）
<style>        定义CSS样式
<link>         链接外部CSS文件或脚本文件
<script>       定义脚本语言
<base>         定义页面所有链接的基础定位（少用）

前期除 title 标签外，其他只需认识就行

1.3 身体标签< body >

定义的就是网页展示出来的内容

1.4 类型声明标签

< !DOCTYPE html >
告诉浏览器采取 HTML5 版本
开头声明

1.5 部分标签内部属性

<html lang= “en” > 本页面采用英文显示

en 是英文显示、zh-CN 是中文显示

<meta charset= “UTF-8” /> 采用 UTF-8 来保存文字，不写会出现乱码的情况

charset 是字符集的意思，而 UTF-8 基本包含所有的字符

2.常用标签

2.1 标题标签

双标签从<h1>到<h6>重要性以此递减
表达格式：<h1> 一级标签 </h1>
注意： 一个标题独占一行且文字会变粗变大

2.2 段落与换行标签

段落标签：
<p> 某段落 </p>
段落文本会根据浏览器窗口的大小自动换行
段落之间存在空行间隙
换行标签：
<br />
强制换行
与段落不同，换行不会出现间距
有时会看到<hr/>标签，这是显示水平线的标签

2.3 文本格式化标签

加粗：
<strong> 加粗文字 </strong>
strong 也可用 b 替代

倾斜：
<em> 倾斜文字 </em>
em 也可用 i 替代

删除线：
<del> 删除线文字 </del>
del 也可用 s 替代

下划线：
<ins> 下划线文字 <ins>
ins 也可以 u 替代

上标：
<sup> 上标文字</sup>

下标：
<sub> 下标文字 </sub>

2.4 “盒子”标签

<div>标签
division，表示分割分区，一行只能放一个大盒子<div>
<div> </div>

<span>标签
span，表示跨度、跨距，一行可以放多个小盒子<span>
<span> </span>

2.5 图像标签和路径

2.5.1 图像标签

<img src="图像URL" />
<img>标签用于定义 HTML 页面中的图像
src 是其里面的 必须属性
指定图像文件的路径和文件名

img 标签的其他属性：

属性 属性值（输入类型） 说明
alt 文本 替换文本，当文本不能显示时，在其后面显示的文字
title 文本 提示文本，鼠标放在图像上显示的文字
width 像素 图像宽度
height 像素 图像高度
border 像素 图像边框粗细

属性之间不分先后、以空格隔开

2.5.2 路径

相对路径
以引用文件所在位置为参考基础
如某一图片名 nb.gif

分类 符号 表达
同一级 <img src=“nb.gif” />
下一级 / <img src =“images/nb.gif” />
上一级 …/ <img src=“…/nb.gif” />

绝对路径
指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径
例如：
D:\web\img\baidu.gif
或完整的网络地址
http://www.baidu.com
前者实际开发中基本不用，不能在每个电脑兼容
后者由于网络地址具有唯一性，可以实现兼容情况

2.6 超链接标签

2.6.1 <a>标签

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
anchor 表示为锚
herf： 制定链接的 URL 地址（必须属性）

target： 打开链接页面方式
（1）_self 为默认值，在当前窗口打开
（2）_blank ，在新窗口打开

2.6.2 链接分类

1.外部链接，如网络链接 2.内部链接：网站内页面之间的相互链接，如
<a href="index.html">首页 </a> 3.空链接：当还没有确定的链接目标，可以先指向空
<a href="#" 目录 </a> 4.下载链接：如指向 rar 压缩包，便会下载该包 5.网页元素链接，在网页中，文本、图像、表格等等都可添加超链接，如给图片添加超链接：
<a href ="https//www.baidu.com > <img src="index.html" /></a> 6.锚点链接：点击链接跳转到本页面的某个位置
需两步：
（1）在链接标签的 href 属性中，设置为”#名字”的形式，如<a href="#power" 力量</a>
（2）在目标位置标签，添加 id 属性= 名字，如：
<h2 id= "power" >
此时点击文本中的力量，便可跳转到目的位置

2.7 音频标签

<audio></audio>标签，插入音频链接
属性：

a26ecd107a6b42beb03f83607ad81a47

语法：

1
2
3
<audio src="音频地址" controls autoplay loop>
</audio>

注意：
音频链接目前支持三种格式：MP3、WAV、Ogg

2.8 视频链接

<video></video>标签，插入视频链接

b7177e5a67274104b67b9a6858748980

语法：

1
2
<video src="视频地址" controls autoplay loop
</video>

注意：
视频静音下，谷歌浏览器才给自动播放

2.9 有语义的结构标签

H5 新版本推出的语义化标签，主要用于手机端网页的制作

9c9f1473d7494d25b250dbc822f473d7

1ff5c6115d68409a9b8966abeee9ee56

3.注释和特殊字符

3.1 注释

<! -- 注释语句 -->,一些编辑器，可以直接ctrl + /

3.2 特殊字符表

收藏一下，忘了可以直接在目录点过来查哦 🤗🤗🤗

image-20220608125023224

常用的主要是空格、大于号和小于号,其他的查个几次就记住了 🤪

4.表格

4.1 基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  …
</table>

以下进行解释：

<table></table>是用于定义表格的标签，需要将整个表格包含
<tr></tr>定义行，<td></td>定义单元格，因此一个表格中有几列，则 tr 标签嵌套几个 td 标签
td 标签内放内容
还有一个表头标签（table head 的缩写），是标题加成效果，因此一般是将第一行的包含，突出重要性

4.2 表格属性

ps:
这部分属性实际开发并不常用，后面通过 CSS 设置

学习目的主要是这里用到的单词后面 CSS 也会用到
同时直观感受表格的外观形态

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

4.3 表格结构标签

<thead>标签，表示表格的头部，包含第一行
<tbody>标签，表示表格的主体，包含第二行及以下的
<caption>标签，表示表格的标题

以上三个是使表格结构更加清晰的工具，可以不用

4.4 合并单元格

4.4.1 跨行合并

在最上面单元格的标签中加入——rowspan="单元格合并个数"，再将下面被合并的单元格<td>标签删去

4.4.2 跨列合并

在最左边的单元格的标签中加入——colspan="单元格合并个数"，再将右边被合并的单元格<td>标签删去

5.列表标签

5.1 无序列表

5.1.1 语法

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

5.1.2 type 属性

<ul>标签中只能嵌套<li>
属性

type 属性值 列表项的序号类型
disc 默认值，实心圆
circle 空心圆
square 实心正方形

5.2 有序列表

5.2.1 语法

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

<ol>中只可嵌套<li>

5.2.2 type 属性

type 属性值 列表项的序号类型
1 数字
a a,b,c…
A A,B,C…
i 小写罗马数字 i,ii,iii…
I 大写罗马数字 I,II,III…

学习 CSS 后，列表列表项符号由 list-style-type 定义，到时候会摒弃 type 属性

5.3 定义列表

5.3.1 语法

1
2
3
4
5
<dl>
    <dt> 定义名词 </dt>
    <dd> 定义描述 </dd>
    ...
</dl>

效果呈现如下：

通常是一个<dt>标签对应多个<dd>标签

6.表单标签

使用表单——收集用户信息

6.1 组成

表单=表单域+表单控件（元素）+提示信息

6.2 表单域

包含表单元素的区域

<form>标签——定义表单域
<form>会把其范围内的表单元素提交给服务器

常用属性：

属性 属性值 作用
action url 地址 用于指定接收并处理表单数据的服务器程序的 url 地址
method get/post 设置表单的提交方式
name 名称 用于指定表单的名称，以区别同一个页面的多个表单域

6.3 表单控件（表单元素）

6.3.1 <input>表单元素

  1. input 是输入的意思，因此在表单元素中，<input>标签用于收集用户信息

  2. 单标签

  3. 属性：type 属性（输入字段的形式）
    <input type="属性值" />

属性值 描述
button 定义可点击按钮（多数情况下通过JavaScript启动脚本）
checkbox 定义复选框
file 定义输入字段和“浏览”按钮，，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段，该字段中的字符被掩码
radio 定义单选按钮
reset 定义重置按钮，重置按钮会清除表单中所有数据
submit 定义提交按钮，提交按钮会把表单数据发送到服务器中
text 定义单行输入字段，用户可在其中输入文本，默认宽度为 20 字符
  1. 其他常用属性：
属性 属性值 描述
name 由用户自定义 定义 input 元素的名称
value 由用户自定义 规定 input 元素的值
checked checked 规定此 input 元素首次加载时应当被选中
maxlength 正整数 规定输入字段中的字符的最大长度
  • 单选按钮和复选框需要相同的 name 值
  • checked 属性主要针对单选按钮和复选框，主要作用是一打开页面，就默认选中某个表单元素
  • maxlength,规定输入的最大字符数
  1. <label>标签

绑定一个表单元素，当点击

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

for 属性与相关元素的 id 属性相同

6.3.2 <select>表单元素

功能：当有多个选项供用户选择，且想节约空间时，可以用<select>标签定义下拉列表

语法：

1
2
3
4
5
<select>
  <option>选项一</option>
  <option>选项二</option>
  <option>选项三</option>
</select>

<select>标签中至少包含一对<option>
在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。
6.3.3 <textarea>表单元素
功能：用于定义多行文本输入的控件
常见于留言板、评论等等

语法：

1
2
3
<textarea rows="3" cols="20">
文本内容
</textarea>

cols="每行中的字符数"，rows="显示的行数"
==实际开发不常用，基本依靠 CSS
🍔🍔🍔