HTML

简介

HTML是一门语言，所有的网页都是用该语言编写出来的

HTML（HyperText Markup Language）：超文本标记

超文本：普通文本只有文字信息，超文本可以定义文字信息，图片，音频，视频等

标记语言：由标签构成的语言

HTML运行在浏览器上，HTML标签由浏览器来解析

HTML的标签都是预定义好的，学习HTML也主要学习各种标签（如：<img>标签代表展示图片）

W3C标准：网页主要由三部分组成

1.结构：HTML（网页中的主要内容）

2.表现：CSS（网页的美化）

3.行为：JavaScript（网页的交互）

注意事项

1.HTML文件以.htm或.html为扩展名

2.HTML标签不区分大小写

3.HTML标签属性值单双引号皆可

4.HTML语法结构松散（如标签只写开头不写结尾，仍可识别）

结构标签

基础标签

标签	描述
<h1>~<h6>	定义标题，h1最大，h6最小
<font>	定义文本的字体、字体尺寸、字体颜色(一般由CSS完成这些功能)
<b>	加粗文本
<i>	斜体文本
<u>	下划线文本
<center>	居中文本（一般由CSS代替）
<p>	定义段落
<br>	换行
<hr>	水平线

html 表示颜色：

1.英文单词

使用英文单词表示颜色，如red等

2.rgb(三原色)

rgb(值1，值2，值3)：以此代表红色，绿色，蓝色的占比，如：rgb（255，0，0）代表红色

值的取值范围为0~255

3.#值1值2值3

用16进制的形式表示三原色，如：#FF0000代表红色

值的范围：00~FF

图片、音频、视频标签

img：定义图片

src：规定显示图像的URL（统一资源定位符）

herght：定义图像的高度

width：定义图像的宽度

audio：定义音频（支持的音频格式：MP3、WAV、OGG）

src：规定音频的URL（统一资源定位符）

controls：显示播放控件（播放按钮）（属性值还是controls，可以省略）

video：定义视频（支持的音频格式：MP4、WebM、OGG）

src：规定视频的URL（统一资源定位符）

controls：显示播放控件（播放按钮）

herght：定义视频的高度

width：定义视频的宽度

资源路径：

1.绝对路径：完整路径

2.相对路径：相对位置关系

若文件和资源在同一目录下：如

则资源路径为./资源名（./可省略）

若资源在一个文件夹中，且该文件夹和文件在同一目录下，如

则资源路径为./文件夹/资源名（./可省略）

若两者在不同文件夹中，如

注：html和img在同一目录下

则

总结：文件默认在当前文件夹下寻找，../代表向上退一级

尺寸单位

1.px(像素)

2.%

超链接标签

该标签有以下两个属性

href：指定访问资源的URL

target：指定打开资源的方式

_self：默认值，在当前页面打开（即当前页面跳转）

_blank：在空白页面打开（打开一个新的页面）

列表标签

有序列表和无序列表都有一个属性type，可以控制列表前面的项目符号（一般用CSS代替）

有序列表

有序列表定义的列表前面会有123的序号

无序列表

无序列表定义的列表前面是一些符号

表格标签

标签	描述
<table>	定义表格
<tr>	定义行
<td>	定义单元格
<th>	定义表头单元格（自带加粗）

table：定义表格

border：规定表格边框的宽度

width：规定表格的宽度

cellspacing：规定单元格之间的空白

tr：定义行

align：定义表格行的内容对齐方式（居中等）

td：定义单元格

rowspan：规定单元格可横跨的行数（向下合并单元格，算作上面一行的单元格）

colspan：规定单元格可横跨的列数（向右合并单元格）

例：

布局标签

表单标签

表单

表单：在网页中主要负责数据采集功能，使用<form>标签定义表单，有两个属性

action：指定表单数据提交的URL

method：指定表单提交的方式，有两个值

1.get：默认值

请求参数会拼接到URL后边（url的长度限制为4kb）

2.post：

请求参数会在http请求协议的请求体中（请求参数无限制）

表单项（元素）

表单项：不同类型的input元素、下拉列表、文本域等

注：表单项要想被提交，则必须指定其name属性

<input>

<input>：表单项，通过type属性控制输入形式

radio

radio：单选按钮

定义单选按钮时，需要同时定义属性name和value

当多个单选按钮name相同时，才能达到"单选"的效果

value代表提交时，若该按钮被选中，提交的数据

hidden

hidden：不会显示在表单中，提交时会跟随表单一起提交

需要定义属性name和value

submit

submit：提交按钮，点击后会把表单数据发送到服务器

有属性value，可以将默认显示的"提交"更改为"注册"等

button

button：定义一个可点击的按钮，无效果，需要配合JavaScript

<select>

<select>：定义下拉列表

<option>：定义列表项

option有属性value，若定义该属性，则提交时提交value属性，否则提交标签中的内容

<textarea>

<textarea>：文本域

可以定义属性cols和rows

cols：列数，即每行可以写多少字符

rows：行数，即可以写多少行

<label>

<label>：扩大表单项的选中范围

如图，为相应的表单项的属性id命名，然后再<label>的属性for上指定id，那么<label>中的数据在点击时可以自动跳转到username上

即点击"用户名："时也可以选中输入框

其他标签

<!DOCTYPE htme>：html5 标识

<meta charset="UTF-8">：页面的

转义字符

在HTML中可以使用转义字符来打出一些字符