1.HTML概念网页（HTML文件）网页组成网站通过浏览器来阅读 HTML(超文本标记语言) 一种标记语言由标签

概念

网页（HTML文件）

网页组成网站
通过浏览器来阅读

HTML(超文本标记语言)

一种标记语言
由标签组成
浏览器
- 浏览器内核（渲染引擎）
  - 读取网页内容
  - 显示页面

Web标准

结构(网页元素,HTML)

表现(外观样式,CSS)

行为（交互，JS）

注释

注释标签
- 语法：
- 功能：多行注释

标签简介

语法

标签名由<>包裹，例如：<html>

属性

位置
- 写在开始标签中的标签名后面
语法
- <标签名属性名="值"></标签名>
属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
- <标签名属性名="值" 属性名="值"></标签名>
属性值为bool型，可只写属性名
- <标签名属性名></标签名>
一个属性有多个值，用空格隔开
- 属性名="值1 值2"

标签关系

包含关系（父子干系）
并列关系（并列关系）

说明

HTML标签名不区分大小写

标签说明

基本结构标签

别称

骨架标签

html

HTML标签（根标签）
网页中最大的标签

head

网页头部
注意：head标签中必须设置title标签

body

网页的主体

详解

<!DOCTYPE html>
<!-- <!DOCTYPE>
 1.类型：文档类型声明标签（不是HTML标签）
 2.作用：用来告诉浏览器使用哪种HTML版本来显示网页 
 3.注意：声明必须位于文档最前面，处于<html>标签前
 -->
<html lang="en">
<!-- lang 
 1.作用：定义当前文档显示的语言（英文网页or中文网页）
 2.类型
   （1）en:定义语言为英语
   （2）zh-CN:定义语言为中文
   （3）fr:定义语言为法语
 3.注意：主要起提示作用
 -->

<head>
    <meta charset="UTF-8">
    <!-- charset
     1.作用：规定文档使用哪种字符编码
     2.注意：一定要写，否则会出现乱码
     3.字符集类型
        （1）GB2312:简体中文
        （2）BLG5:繁体中文
        （3）GBK:简体中文+繁体中文
        （4）UTF-8:全世界国家需要用到的字符（万国码）
     4.拓展：
        （1）字符集：是多个字符的集合，以便计算机能够识别和存储各种文字
      -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- <meta>
     1.作用：元数据
     2.应用：
        （1）与浏览器交接的数据
        （2）业务逻辑相关的数据
      -->
    <link rel="类型" hre="地址">
    <!-- <link>
     1.作用：外部资源链接
     2.应用：
        （1）标签页的小logo
        （2）网页需要用到的外部资源
        （3）性能优化：针对资源分散在多个域名的情况，提前进行对域名的DNS解析，访问相关资源的时候，节省DNS解析的时间
      -->
    <script src="地址">
    <!-- <script>
     1.作用：链接JS代码
      -->
    <title>网页标题</title>
    <!-- <title>
     1.作用：网页标题
      -->
</head>
<body>
    网页内容
</body>
</html>

语义化标签

标签	说明	提醒
`<header>`	页眉标签
`<nav>`	导航标签
`<main>`	主要区域标签	只能有一个
`<article>`	文章块标签
`<section>`	区块标签
`<aside>`	附栏标签
`<footer>`	页脚标签

文本标签

标题标签

功能：作为标题使用
语法：<h1>文本内容</h1>
特点：
- 文字加粗，字号变大

段落标签

功能：定义段落
语法：<p>文本内容</p>
特点：
- 根据浏览器窗口大小自动换行（需要在代码编写时使用空格或者换行断句）
- 段落和段落之间保有空格(可理解为每个段落下面自带间隔)

换行

语法：<br/>

水平线

语法：<hr/>
属性:
- align//对齐方式
  - left(左对齐)
  - right(右对齐)
  - center(居中对齐)//默认
- size（?）//粗细
- width（像素）//宽度
- color（像素）//颜色

简写

语法：<abbr>
功能：可以在标签里面简写，然后全部内容写在title属性里面，鼠标经过时显示title的值
属性
- title

提示文本

语法

<label for="表单控件id值">男</label>
<input type="类型" id="name"/>

作用
- 当点击标签内的文本时，自动将光标转移到对应的表单元素上
- 仅限与表单元素绑定
属性
- for

文本格式化标签

加粗

<strong></strong>（<b></b>）

倾斜

<em></em>(<i></i>)

下划线

<ins>(<u></u>)

删除线

<del>(<s></s>)

上标

<sup>
比主体文字稍高

下标

<sub>
比主体文字稍低

图像标签

语法

<img src="图像URL"/>

属性

src(图片路径)//必须
- 语法：<img src="图片路径"/>
- 功能：用于指定图像文件的路径

alt（文本）
- 语法:<img src="图片路径" alt="图片显示失败"/>
- 功能：替换文本，图像不能显示时显示的文字（用文字替换图片）

title(文本)：
- 语法：<img scr="图片路径" title="提示文本内容"/>
- 功能：提示文本，鼠标放到图像上，提示的文字

width（像素）：
- 语法：<img scr="图片路径" width="像素大小"/>
- 功能：设置图像的宽度
- 特点：
  - 只修改宽度时，高度等比例缩放、
  - 像素大小可以只写数值，不带单位

height（像素）：
- 语法：<img scr="图片路径" height="像素大小"/>
- 功能：设置图像的高度
- 特点：
  - 只修改高度时，宽度等比例缩放
  - 像素大小可以只写数值，不带单位

border（像素）：
- 语法：<img scr="图片路径" border="像素大小"/>
- 功能：设置图像的边框粗细
  - 特点：
    - 像素大小可以只写数值，不带单位

图标标签

语法

<link rel="shortcut icon" href="图标地址"/>

流标签

语法

<figure><!--流标签-->
  <img src="图片路径" >
  <figcaption>图1：黄山日出</figcaption><!--流标题-->
</figure>

说明

一个流标签里最多含一个流标题，可省略

多媒体标签

音频

语法

<audio src="文件地址" controls="controls">文字</audio>
文字会在音频无法渲染的时候显示

属性

autoplay：autoplay;//载入后自动播放
loop:loop;//循环播发

高兼容写法

可以通过嵌套多个 <source> 标签来提供不同格式的音频文件，浏览器会从上到下依次检查，选择第一个它能播放的格式

<audio controls>
  <source src="example.mp3" type="audio/mpeg">
  <source src="example.ogg" type="audio/ogg">
  <source src="example.wav" type="audio/wav">
  您的浏览器不支持 audio 元素。
</audio>

视频

语法

<video src="文件地址" controls="controls">文字</video>
文字会在视频无法渲染的时候显示
（mp4兼容性最好）

属性

autoplay：autoplay;//载入后自动播放
loop:loop;//循环播发

高兼容写法

可以通过嵌套多个 <source> 标签来提供不同格式的音频文件，浏览器会从上到下依次检查，选择第一个它能播放的格式。

<video controls width="640" height="360">
  <!-- 1. 优先尝试 WebM 格式（文件更小，质量更好，适合 Chrome/Firefox/Opera） -->
  <source src="video.webm" type="video/webm">
  
  <!-- 2. 备选 MP4 格式（兼容性最广，特别是 Safari/iOS/IE） -->
  <source src="video.mp4" type="video/mp4">
  
  <!-- 3. 提供字幕文件，提升可访问性（可选但推荐） -->
  <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
  
  <!-- 4. 终极后备：如果以上都不支持，显示一段提示文字或下载链接 -->
  您的浏览器不支持 HTML5 视频，您可以 <a href="video.mp4">下载视频文件</a> 观看。
</video>

列表标签

功能

布局

无序列表

语法

<ul>
    <li>列表项</li>
</ul>

提醒

标签（其余的都不行，例如：纯文字）
标签里面可以放所有元素

有序列表

语法

<ol>
    <li>列表项</li>
</ol>

提醒

1. 标签
3. 标签可以放所有元素

ol属性

reversed:reversed;//降序
start:数值;//排序的起始值
type:属性值;//表序号的类型
- 1
- A
- a
- i

li属性

value:数值；//表序号

自定义列表

语法

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

提醒

标签里面只能放
&
一个
里面
&
没有数量限
&
里面可以放任何元素

超链接标签

功能

从一个页面链接到另一个页面

语法

<a href="目标地址">文本或图像</a>

属性

href(地址)//必须
- 功能：指定跳转目标的url地址
target(打开方式)
- 功能：指定连接页面的打开方式
- _self//默认
  - 链接页面覆盖原页面
- _blank
  - 在新窗口中打开

分类

外部连接

定义：跳转到外部网站
语法：href="外部网站网址"

内部链接

定义：跳转到同一网站的不同网页
语法：href="网页路径"

空链接

定义：没有跳转目标
语法：href="#"
说明：
- 点击后回到顶部//默认
- href="javascript:;"//点击无反应

下载链接

定义：点击会下载这个文件
语法：href="文件地址/压缩包地址"

网页元素链接

定义：标签里面包裹的是各种网页元素（如：文本，图片，音频等）
示例:<a href="https://vjudge.net"><img src="img.ipg"></a>

锚点链接

定义
- 跳转到页面的某个位置(目标位置将置于页面顶部)

语法

<!-----跳转链接----->
<!--跳转到本页-->
<标签名 href="#【对应id值】">xx</标签名>

<!--跳转到其他页面-->
<标签名 href="页面地址#【对应id值】">xx</标签名>

<!-----目标跳转位置----->
<标签名 id="id值">xx</标签名>

电子邮件链接

语法：<a href="mailto:电子邮件地址?subjiect="邮箱主题”></a>

图像热点链接

定义：同一张图片上，给不同位置不同的超链接

语法：

<img usename="#名字">
<map name=名字>
    <area shape="热区形状" coords="热区坐标" href="链接地址">
</map>

表格标签

作用

显示数据

语法

<table><!--定义表格的标签-->
    <caption>表格标题</caption>
    <col span="1"><!--设置第一列的样式-->//只包含属性的空标签e
    <col span="5"><!--设置列的后5列样式-->
    <thead><!--包裹整个表头-->
        <tr> 
            <th>表头</th><!--表头单元格-->//表头内容加粗&居中显示
        </tr>
    </thead>
    <tbody><!--包裹整个表主体-->
        <tr><!--定义表格中的行-->
            <td>单元格内的文字</td><!--普通单元格-->
        </tr>
        ...
    </tbody>
    <tfoot></tfoot><!--包裹整个表尾-->
</table>

属性

属性名	属性值	说明	备注
align	left/center/right	对齐方式	表格元素相对于父元素
border	像素值/（默认无）	表格边框
border-collapse	collapse	消除表格间隙
cellpadding	像素值	单元格内边距	内容与单元格的内边距
cellspacing	像素值	单元格外边距	单元格与单元格的外边距

rules属性//内边框

属性值	说明
node	不显示内边框
rows	显示行之间的边框
all	显示行与列之间的边框
groups	仅显示按行（/列）分组的边框
cols	显示列之间的边框

frame属性//外边框

属性值	说明
void	不显示外边框
above	显示上外边框
below	显示下外边框
box,borser	显示所有外边框
lhs	显示左外边框
rhs	显示右外边框
hsides	显示上，下外外边框
vside	显示左，右外边框

合并单元格

位置：合并代码写到目标单元格()里面
分类：
- 跨行合并：
  - 语法：rowspan="合并单元格个数"
- 跨列合并：
  - 语法：colspan="合并单元格个数"
目标单元格：
- 跨行：最上侧的单元格
- 跨列：最左边的单元格
提醒：
- 合并后记得删掉多余单元格
- 可以理解成，以目标单元格为基准，创建了一个横跨n列，竖跨m列的单元格

表单标签

作用

搜集用户信息

组成

表单域

作用
- 把其范围内的表单元素信息提交给服务器（url地址）
提醒
- form标签内不能嵌套form标签

语法

<form action="url地址" method="提交方式" name="表单域名称" autocomplete="off">
    各种表单元素控件
</form>
<!--autocomplete="off"//关闭收索历史提醒-->

属性

属性名	属性值	说明
action	(服务器的)url地址
method	GET/POST
name	表单名称
autocomplete	off/on(自动完成功能)	记录输入的历史记录
novalidate	novalidate	不对提交内容进行验证
enctype	application/x-www-form-urlencode(默认)	数据发送到服务器时的编码类型
target	`_self`/`_blank`	打开方式

表单控件

别称

表单元素

输入表单元素

语法
```
<input type="属性值（类型）"/>
```

属性

type(必需属性)：

作用：指定不同的控制类型

属性值：

属性值	说明	备注
text	单行文本框
password	密码框	输入内容显示为黑色圆点
radio	单选框
checkbox	复选框
button	普通按钮
submit	提交按钮
reset	重置按钮	清空输入信息
image	图片形式的提交按钮
file	文件上传
email	邮箱地址文本框	可以验证格式
url	地址文本框	可以验证格式
tel	电话号码文本框
search	搜索框
number	数值文本框
range	数值范围滑块
month,week,date,time等	日期时间文本框	分别返回：（月，年）（周，年）（日，月，年）（小时，分钟）

name
- 属性值：input元素的名称
- 特点：单选按钮&复选框必须要有相同的name值
- 说明：当表单被提交到服务器时，name属性的值被用作键（key），表单元素的值被用作值（value），这样服务器端的脚本就可以通过name属性的值来获取相应的表单数据。
value
- 向后台显示，该表单项的值
- 文本表单项，将值显示在页面作为默认值
checked：
- 属性值：checked
特点:单选按钮&复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮
maxlength：
- 属性值：输入字段中字符的最大长度
required:
- 属性值：required
- 说明：表单项非空

数据列表

作用：设置输入型文本的常用内容列表选项

语法：

<input type="类型" list ="list_name"/>
<datalist id="list_name">
        <option>选项</option>
</datalist>

下拉表单元素

语法

```html
<select>
    <optgroup label="组名">
        <option>选项</option>
    </optgroup>
 </select>       
```

属性

| 属性名   | 属性值   | 归属     | 说明     |
| -------- | -------- | -------- | -------- |
| size     | 正整数   | //select  | 选项个数 |
| multiple | multiple | //select  | 多行显示 |
| selected | selected | //option | 默认选中 |
* <span>在<option>中定义selected="selected"时，当前项为默认选中项</span>

文本域表单元素

语法

<textarea rows="3" cols="每行字数">

表单提交

<button type="submit"></button>//点击按钮，触发提交事件

属性

属性	属性值	说明
name	自定义	表单控件的名称
value	自定义	表单控件的默认值(可设置按钮的说明文字)
readonly	readonly	表单控件不可编辑修改
disabled	disabled	禁用该表单控件(显示为灰色)
checked	checked	该项默认选中(单选钮或复选框）
autocomplete	on/off	自动完成功能
autofocus	autofocus	自动获取焦点
form	的 id 属性值	指定控件所属表单
placeholder	字符串	显示在输入型文本框中的输入提示
required	required	该表单控件不可为空
pattern	字符串(正则表达式)	验证输入内容的模式
disabled	true	禁用

提示信息

标签可以绑定一个表单元素
语法：

<label for="表单控件id值">男</label>
<input type="类型" id="name"/>

作用：当点击标签内的文本时，自动将光标转移到对应的表单元素上
属性：for

表单对象分组

语法

<form>
        <fieldset>
                <legend>分组标题</legend>
        </fieldset>/*一个分组*/
</form>

div&span

语法：<div></div>和<span></span>
作用：布局网页
特点：
- 没有语义
- <<div></div>//一行只能放一个
- <span></span>//一行可放多个，每个之间有间隔
  - 不能设置宽高，宽高根据内容大小自适应

路径

目录文件夹

存放本项目所有相关文件的文件夹

根目录

相对路径

定义

引用文件相对于HTML文件的位置

实现

绝对路径

定义：引用文件所在位置或完整的网络地址
示例1：C:\Users\哈哈哈\Desktop\CODE\web\imges
示例2：https://vjudge.net

特殊字符

常用

结果	HTML 原代码	描述
<	`<`	小于号或显示标记
`>`		大于号或显示标记
&	`&`	可用于显示其它特殊字符
“	`"`	引号
®	`®`	已注册
™	`™`	商标
	`&ensp;`	半个空白位
	`&emsp;`	一个空白位
	` `	不断行的空白

全

结果	代码	结果	代码	结果	代码	结果	代码	结果	代码
´	`´`	©	`©`	`>`			`µ`	®	`®`
&	`&`	°	`°`	¡	`¡`		` `	»	`»`
¦	`¦`	÷	`÷`	¿	`¿`	¬	`¬`	§	`§`
•	`•`	½	`½`	«	`«`	¶	`¶`	¨	`¨`
¸	`¸`	¼	`¼`	<	`<`	±	`±`	×	`×`
¢	`¢`	¾	`¾`	¯	`¯`	“	`"`	™	`™`
€	`€`	£	`£`	¥	`¥`
≈	`≈`	⁄	`&frasl;`	←	`←`	∂	`∂`	♠	`&spades;`
∩	`∩`	≥	`≥`	≤	`≤`	″	`″`	∑	`∑`
♣	`&clubs;`	↔	`↔`	◊	`&loz;`	′	`′`	↑	`↑`
↓	`↓`	♥	`&hearts;`	−	`−`	∏	`∏`	‍	`&zwj;`
♦	`&diams;`	∞	`∞`	≠	`≠`	√	`√`	‌	`&zwnj;`
≡	`&equiv;`	∫	`∫`	‾	`&oline;`	→	`→`
α	`α`	η	`η`	μ	`μ`	π	`π`	θ	`θ`
β	`β`	γ	`γ`	ν	`ν`	ψ	`ψ`	υ	`υ`
χ	`χ`	ι	`ι`	ω	`ω`	ρ	`ρ`	ξ	`ξ`
δ	`δ`	κ	`κ`	ο	`ο`	σ	`σ`	ζ	`ζ`
ε	`ε`	λ	`λ`	φ	`φ`	τ	`τ`
Α	`Α`	Η	`Η`	Μ	`Μ`	Π	`Π`	Θ	`Θ`
Β	`Β`	Γ	`Γ`	Ν	`Ν`	Ψ	`Ψ`	Υ	`Υ`
Χ	`Χ`	Ι	`Ι`	Ω	`Ω`	Ρ	`Ρ`	Ξ	`Ξ`
Δ	`Δ`	Κ	`Κ`	Ο	`Ο`	Σ	`Σ`	Ζ	`Ζ`
Ε	`Ε`	Λ	`Λ`	Φ	`Φ`	Τ	`Τ`	ς	`&sigmaf;`

1.HTML

概念

网页（HTML文件）

HTML(超文本标记语言)

Web标准

注释

标签简介

语法

分类

双标签

单标签

属性

标签关系

说明

标签说明

基本结构标签

别称

html

head

body

详解

语义化标签

文本标签

标题标签

段落标签

换行

水平线

简写

提示文本

文本格式化标签

加粗

倾斜

下划线

删除线

上标

下标

图像标签

语法

属性

图标标签

语法

流标签

语法

说明

多媒体标签

音频

语法

属性

高兼容写法

视频

语法

属性

高兼容写法

列表标签

功能

无序列表

语法

提醒

有序列表

语法

提醒

ol属性

li属性

自定义列表

语法

提醒

超链接标签

功能

语法

属性

分类

外部连接

内部链接

空链接

下载链接

网页元素链接

锚点链接

电子邮件链接

图像热点链接

表格标签