HTML基础
格式
<标签 属性 = “值”>内容</标签>
<p align="center">这是段落标签</p>
标签通常是成对出现的（也有单标签），分为开始标签（p）和结束标签(/p)，结束标签只是在开始标签前加一个斜杠“/”。标签可以有属性（align），属性必须有值(center )。 开始标签与结束标签中包含的内容称之为区
域。标签不区分大小写,p和P是相同的。
<!DOCTYPE html> ------------声明了这是一个html文档
<html lang="en"> -----------网页的开始
<head> ---------------------网页头部的开始
<meta charset="UTF-8"> -----------这里可以设置编码格式
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> ------------网页的标题
</head> --------------------网页头部的结束
<body> ---------------------网页内容的开始
------网页内容
</body> --------------------网页内容的结束
</html> --------------------网页的结束
注释
快捷键：ctrl + / 或 ctrl + shift + /
取消注释快捷键相同
编码格式
-
GB2312
简体中文字符集
-
UTF-8
通用字符集
-
BIG5
繁体中文字符集
-
GBK
GB2312延申，增加了一些更多的汉字和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> -----------这里可以设置编码格式
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
标签
以下介绍不完整，请查看这个网站：https://www.w3school.com.cn/h.asp
常用标签
strong/b标签等
- strong , b
字体加粗 - em , i
斜体 - u
下划线 - del
删除线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
这是没用任何标签
<strong>这是一个加粗</strong>
<b>这是另一个加粗</b>
<i>这是一个斜体</i>
<em>这是另一个斜体</em>
<u>这是下划线</u>
<del>这是删除线</del>
</body>
</html>
运行结果：
br标签，hr标签
br-----换行标签
hr-------水平分割线
hr属性
width：长度
size：宽度
align：对齐方式，left——左对齐，center——居中对齐，right——右对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
这是内容
<br>
这也是内容
<hr width="700" size="10" align="left">
</body>
</html>
运行结果：
p标签
p-------段落标签
段落与段落有一定的距离
属性：
align：对齐方式，取值：left、center、right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="left">
国务院总理李强1月5日主持召开国务院常务会议，研究发展银发经济、增进老年人福祉的政策举措，审议进一步优化政务服务、提升行政效能、推动“高效办成一件事”的指导意见，听取保障农民工工资支付情况汇报，讨论《中华人民共和国会计法（修正草案）》和《中华人民共和国能源法（草案）》，审议通过《碳排放权交易管理暂行条例（草案）》。
</p>
<p align="center">
国务院总理李强1月5日主持召开国务院常务会议，研究发展银发经济、增进老年人福祉的政策举措，审议进一步优化政务服务、提升行政效能、推动“高效办成一件事”的指导意见，听取保障农民工工资支付情况汇报，讨论《中华人民共和国会计法（修正草案）》和《中华人民共和国能源法（草案）》，审议通过《碳排放权交易管理暂行条例（草案）》。
</p>
<p align="right">
国务院总理李强1月5日主持召开国务院常务会议，研究发展银发经济、增进老年人福祉的政策举措，审议进一步优化政务服务、提升行政效能、推动“高效办成一件事”的指导意见，听取保障农民工工资支付情况汇报，讨论《中华人民共和国会计法（修正草案）》和《中华人民共和国能源法（草案）》，审议通过《碳排放权交易管理暂行条例（草案）》。
</p>
<p>
国务院总理李强1月5日主持召开国务院常务会议，研究发展银发经济、增进老年人福祉的政策举措，审议进一步优化政务服务、提升行政效能、推动“高效办成一件事”的指导意见，听取保障农民工工资支付情况汇报，讨论《中华人民共和国会计法（修正草案）》和《中华人民共和国能源法（草案）》，审议通过《碳排放权交易管理暂行条例（草案）》。
</p>
</body>
</html>
运行结果：
font标签
font---------字体标签
属性:
color：使用英文单词
#rrggbb，三原色（16进制）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
<font color="blue">
国务院总理李强1月5日主持召开国务院常务会议，研究发展银发经济、增进老年人福祉的政策举措，审议进一步优化政务服务、
提升行政效能、推动“高效办成一件事”的指导意见，听取保障农民工工资支付情况汇报，讨论《中华人民共和国会计法（修正草案）》和
中华人民共和国能源法（草案）》，审议通过《碳排放权交易管理暂行条例（草案）》。
</font>
</p>
<p>
<font color="#009966">
国务院总理李强1月5日主持召开国务院常务会议，研究发展银发经济、增进老年人福祉的政策举措，审议进一步优化政务服务、
提升行政效能、推动“高效办成一件事”的指导意见，听取保障农民工工资支付情况汇报，讨论《中华人民共和国会计法（修正草案）》和
中华人民共和国能源法（草案）》，审议通过《碳排放权交易管理暂行条例（草案）》。
</font>
</p>
</body>
</html>
运行结果：
sub，sup，pre，span标签
sub--------下标
sup--------上标
pre---------原样输出内容
span------修饰文本的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
内容 <sub>下标</sub>
<br>
内容 <sup>上标</sup>
<pre>
这是
原样
输出
</pre>
<!-- style是用来导入css -->
<span style="color: blueviolet; font-size: 32px;">
这是一个标准的行内标签！！！！！
</span>
</body>
</html>
运行结果：
hn，div标签
hn------------标题标签，n代表数字，最大为6
div------------标准的块级标签（可以自动换行），盒子布局
块级标签：独占一行，自动换行：div hn hr p
行内标签：不自动换行，除非内容一行装不下才会换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>这是标题</h1>
<h2>这是标题</h2>
<h3>这是标题</h3>
<h4>这是标题</h4>
<h5>这是标题</h5>
<h6>这是标题</h6>
<div>这是一个div</div>
<div>这是一个div</div>
</body>
</html>
运行结果：
特殊字符
表单标签
form--------表单标签
属性：
action----------表单提交后，需要跳转的路径，分为绝对路径，相对路径
method-------请求方式，常用值：get、post。默认get请求，post相较于get更安全，get请求会把用户暴露在网址栏上
name-----------表单名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="html\demo6.html">
用户名：<input type="text"><br>
密码：<input type="password"><br>
<input type="submit"><br>
</form>
</body>
</html>
运行结果：
表单元素
表单元素（文本框、密码框、下拉列表、单选、多选）
一般由input、textarea、select标签构成，需要放到form里面
input标签
语法
<input type="元素类型" name="元素名称" value="元素的值" id="" class="">
type的取值:
| 值 | 含义 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| radio | 单选按钮 |
| checkbox | 多选按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| button | 普通按钮 |
| image | 图像按钮 |
| file | 文本域（上传文件的按钮） |
| hidden | 隐藏域（用户看不见的数据） |
| 邮箱 | |
| color | 颜色 |
| date | 日期 |
| time | 时间 |
| datetime-local | 日期+时间 |
| range | 进度条 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="demo6.html">
用户名：<input type="text"><br>
密码：<input type="password"><br>
性别：<input type="radio" name="gender">男
<input type="radio" name="gender">女
<br>
爱好：<input type="checkbox">唱歌
<input type="checkbox">唱歌
<input type="checkbox">唱歌<br>
<input type="submit">
<input type="reset">
<input type="button" value="普通"><br>
<input type="image" src="../image/风景.jpg"><br>
<input type="file">
<input type="hidden" value="123456">
邮箱：<input type="email"><br>
颜色：<input type="color"><br>
日期：<input type="date"><br>
时间：<input type="time"><br>
日期+时间：<input type="datetime-local"><br>
进度条：<input type="range">
</form>
</body>
</html>
运行结果：
属性：
checked ---------默认选择
readonly --------只读
disabled ---------禁用
autofocus -------默认光标所在位置
required ---------不可为空
select标签
select ------------ 下拉列表框
一般和option标签连用
属性：
selected -------------默认被选中
multiple -------------以列表的形式显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="demo1.html">
请选择出生地：
<select name="chengshi" id="cs">
<option value="">北京</option>
<option value="" selected>重庆</option>
<option value="">湖南</option>
<option value="">湖北</option>
<option value="">四川</option>
</select>
<br>
<select name="chengshi" id="cs" multiple>
<option value="">北京</option>
<option value="" selected>重庆</option>
<option value="">湖南</option>
<option value="">湖北</option>
<option value="">四川</option>
</select>
</form>
</body>
</html>
运行结果：
textarea标签
textarea -----------文本域
属性：
cols：列，显示文本宽度
row：行，显示文本高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="demo1.html">
<p>
<textarea name="" id="" cols="20" rows="30">
这个家伙很懒，什么都没有留下
</textarea>
</p>
</form>
</body>
</html>
运行结果：
body常用属性
a标签 --------------- 超链接标签
| 属性 | 含义 |
|---|---|
| vlink | 访问过超链接的颜色 |
| Alink | 激活超链接的颜色 |
| link | 超链接的颜色 |
| text | 文本颜色 |
| bgcolor | 背景颜色 |
| background | 背景图片 |
颜色表示法
- 英文单词
- #rrggbb
- rgba() a表示透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body vlink="pink" Alink="#0000FF" link=rgba(0,255,0,0) text="blue" bgcolor="red">
这是蓝色
<a href="https://www.baidu.com/">sm</a>
</body>
</html>
运行结果：
注意：link设置的颜色只有在没有点击才会显示，点击过后超链接会显示vlink设置的颜色，alink设置的颜色只有在点击超链接不松鼠标的时候会显示。
a标签
a ------------------超链接，用来进行页面跳转，也可在当前页面当作锚点
属性：
herf——设置跳转的页面网址，当作描点时值为：#+id
target——设置打开页面的方式
target取值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="www.baidu.com">百度</a><br>
<a href="#2">往下去</a>
<div style="padding-bottom:1000px">
我是空白
</div>
<span id="2">来这里</span>
</body>
</html>
运行结果：
img标签
img ---------------图片标签，用来显示图片
| 属性 | 含义 |
|---|---|
| src | 指的是图片的路径（绝对路径和相对路径） |
| alt | 当图片未显示时，代替图片的文本内容 |
| width | 宽度 |
| height | 高度 |
| border | 边框，默认值为0 |
| align | 位置， top (上对齐) middle(居中对齐) bottom(下对齐 默认值) left(左对齐) right(右对齐) |
| title | 图片的标题 ，用来显示描述图片的文字 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="../image/风景.jpg" alt="图片显示错误" width="200px" height="200px" border="2" align="middle" title="风景">
</body>
</html>
运行结果：
注意：只有当鼠标移到图片上去后title的文字才会显示
位图
位图：当点击图片的某一部分后会跳转到其他网页
img标签使用usemap属性与map标签连接，usemap属性值为map标签的name属性值
map标签的name属性，一般会和area标签进行连用
area属性：
shape ------- 鼠标点击的形状
coords ----- 鼠标点击形状的大小
href ----------表示跳转的路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="../image/风景.jpg" alt="风景" usemap="#fj">
<map name="fj">
<area shape="circle" coords="150,125,30" href="demo1.html">
</map>
</body>
</html>
注意：当鼠标在规定区域会变成手的形状
多媒体标签
audio 标签 ----------- 音频
video 标签 ----------- 视频
| 属性 | 含义 |
|---|---|
| controls | 表示播放器的组件 |
| autoplay | 自动播放（现在浏览器一般不支持） |
| loop | 循环播放 |
<audio src="bgm.mp3" controls autoplay loop></audio>
<video src="花园宝宝1.mp4" controls ></video>
表格布局
table标签
包含thead、tbodt、tr、td、tfood标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<thead>表头</thead>
<!-- 表格主体 -->
<tbody>
<!-- 行 -->
<tr>
<!-- 列 -->
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>four</td>
<td>five</td>
<td>six</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果：
table属性：
| 属性 | 含义 |
|---|---|
| border | 表格的边框 |
| width | 宽度 |
| height | 高度 |
| align | 对齐方式 |
| bgcolor | 背景颜色 |
| background | 背景图片 |
| cellpadding | 表格边距 |
| cellspacing | 单元格的间距 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head
<body>
<table border="2" width="20px" height="100px" align="right" bgcolor="red" cellpadding="0" cellspacing="0">
<thead>表头</thead>
<!-- 表格主体 -->
<tbody>
<!-- 行 -->
<tr>
<!-- 列 -->
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>four</td>
<td>five</td>
<td>six</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果：
表格的合并
使用td标签的rowspan和colspan属性进行合并
rowspan ------- 表示在单元格上垂直方向上去跨行（合并行）
colspan ------ 表示单元格上水平方向跨列（合并列）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head
<body>
<table border="2">
<thead>表头</thead>
<tbody>
<tr>
<td colspan="2">one</td>
<td>two</td>
</tr>
<tr>
<td>four</td>
<td>five</td>
<td>six</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果：
列表标签
有序列表
ol --------------有序列表
与li标签连用
| 属性 | 含义 |
|---|---|
| type | 设置序号的种类，默认数字 |
| start | 序号开始的位置 |
| reversed | 降序（反序） |
| type取值 | 举例 |
|---|---|
| 1 | 1 2 3 4 5 |
| A | A B C D |
| a | a b c d |
| I (大写i) | I II III IV V |
| i | i ii iii iv v |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol type="A" start="2">
<li>北京</li>
<li>重庆</li>
<li>湖北</li>
<li>湖南</li>
</ol>
</body>
</html>
运行结果：
无序列表
dl ----------------无序列表
type属性 ------ 无序列表的样式 disc(默认取值 实心圆) circle(空心圆) square（实心方框）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl type="circle">
<li>北京</li>
<li>重庆</li>
<li>湖北</li>
<li>湖南</li>
</ol>
</body>
</html>
运行结果：
数据列表
dl --------------数据列表
dt ------------数据标题
dd ------------数据项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>重庆</dt>
<dd>垫江</dd>
<dd>云阳</dd>
<dd>永川</dd>
<dd>沙坪坝</dd>
<dt>四川</dt>
<dd>成都</dd>
<dd>德阳</dd>
<dd>泸州</dd>
<dd>绵阳 </dd>
</dl>
</body>
</html>
运行结果：
多窗口框架
一个页面可以显示多个窗口 ----- frameset （不能和body标签连用）
cols ------ 定义页面列方向的尺寸或则数目
rows ---- 行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<frameset cols="25%,40%,*">
<frame src="demo1.html"></frame>
<frame src="demo4.html"></frame>
<frame src="demo3.html"></frame>
</frameset>
</html>
运行结果：
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
