目录
常用的标签：
strong 和 b 标签（用来加粗字体）
em 和 i 标签(斜体)
u标签（下划线）
del标签（删除线）
br 和hr标签（换行）
hr （水平分割线）
p标签（段落标签）-------两个相邻的p标签中间会空一行、
font 标签----设置字体 属性color
颜色表示法
sub 下标签 sup上标签
pre 标签 用来原样输出内容
span 标签 用来修饰文本标签
hn 和div 标签hn. 指的点.h1.h2.h3,h4.hs,h6.(1~06）只取标题标签） n.的取值只能是1~b.越往后标签越小有加粗效果
div.标准的块级标签——（盒子布局）
表单标签：
form 一般和input 连用（一般不会单独使用）
action 跳转路径
表单元素；
放入form标签内
input+type（类型）name（元素名称，取名）value.(元素的值)type 取值： text.文本框 Password:密码框 reset 重置 radio：单选临钮 .checkbox 多选按钮 buttom普通按钮 Submit.提交按钮
input标签中常用的属性checked 默认属性readonly-一只读，字段只可以读，不能修改
写在form标签内
select标签.下拉列表框 属性:selected 属性.默认被选重的选项 multiple.以列表形式显示
textarea.标签 用来实现文本域属性： ols…表示列数，用于是文本宽度 rows…表子多少行.用来显示文本高度
a标签.超链接.点击其可跳转页面属性： Vlink…访问过超链接文本的颜色. .Alink…激活超链连格文本的颜色 link...超链接文本的颜色
img标签：
位图：点击图片某一位置可以跳转
多媒体标签
audio 标签（音频）
vidio 标签（视频）
表格布局
table标签
表格属性：
表格的间距和边距
表格的合并
列表标签：
有序列表：
无序列表：
数据列表
多窗口框架
HTML为超文本标签语言/超文本元素语言
运行软件有：sublime ，editplus ,vscode
专门前端开发软件：IDE--Webstorm，Hbuilder
文件建立： xxxxx.html
! (Tab)自动补全
<!DOCTYPE html>---------------声明部分
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dierc</title>--------------标题
可添加css中内容
</head>
<body>
将内容添加到其中
</body> 编码格式：1.GB2312---中文简体字符集
2.UTF-8 ---------通用字符集
3.BIG5------------繁体字中文字符集
4.GBK-----GB2312的延伸（增加了特殊符号和更多的汉字）
注释添加方法：ctrl+shift +反斜杠/ ctrl="/" (起解释说明的作用)
常用的标签：
strong 和 b 标签（用来加粗字体）
em 和 i 标签(斜体)
u标签（下划线）
del标签（删除线）
br 和hr标签（换行）
br 标签用来换行，<br>可以直接加在换行部分后面
hr （水平分割线）
width=“ ” （宽度属性）默认单位像素 eg: “800px”
size=" " (粗细大小) eg：10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dierc</title>
</head>
<body>
hallo word!!!!
<strong>加粗字体</strong>
<b>这个也加粗</b>
<em>这个是斜着的</em><br>
<hr width="800p">
<u>加一条下划线</u>
<del>删除线</del>
</body>p标签（段落标签）-------两个相邻的p标签中间会空一行、
align 属性----段落位置设置 左：left 右：right 居中：center
font 标签----设置字体 属性color
<p>
随着大数据，物联网，5G技术的运用等技术的不断发展，社会对该职业从业人员的要求日益增长。2025年
</p>
<hr size="10">
<p align="right">
这个班能帮助我提升我的专业能力。班里有很多学过计算机或者对计算机有见解的同学，竞争能力较大，同时也能约束我学习专业知识，当然也要靠自生的努力。
</p><br>
<font color="blue"> 哈哈哈哈哈哈哈哈哈哈哈</font><br>
<font color="006600">hhhhhhhhhhhhhhhh</font><br>颜色表示法
1.英文单词：red black pink
2.#rrggbb 表示三原色 red green blue
(可查阅颜色对比表)
sub 下标签 sup上标签
pre 标签 用来原样输出内容
span 标签 用来修饰文本标签
hn 和div 标签
hn. 指的点.h1.h2.h3,h4.hs,h6.(1~06）只取
标题标签） n.的取值只能是1~b.越往后标签越小有加粗效果
div.标准的块级标签——（盒子布局）
输出数组[a]的下标2:[a]<sub>2</sub><br>
输出2的3次方:2 <sup>3</sup><br>
<pre><br>
师资力量较弱，老师太年轻，
没有太多教学经验。但是专业前景不错。
</pre>
<span style="color: rgba(0, 191, 255, 0.621);"><br>
师资力量较弱，老师太年轻，没有太多教学经验。
但是专业前景不错。
</span>
<h1>zheshibiaoti</h1>
<h2>zheshibiaoti</h2>
<h3>zheshibiaoti</h3>
<h4>zheshibiaoti</h4>
<h5>zheshibiaoti</h5>
<h6>zheshibiaoti</h6>块级标签：独占一行，自动换行
div hn p hr
行内标签：不会自动换行，除非这一行内容已经满整个画面才换行
span strong b sub sup pre
特殊字符：
网上可查
表单标签：
form 一般和input 连用（一般不会单独使用）
action 跳转路径
绝对路径：（从盘服开始）只能用于在一个电脑上的文件
相对路径; 当前原文件与目标文件的相对路径
<p>输出大于小于符号< ></p>
<p>¥ " ± © ‰ ÷ ®</p>
<form action="..\第二天\111111.html"method="post"name="register">表单元素；
表单元素（文本框、密码根、下拉列表，多选、单选）--
一般由 input. textarea select （三个标签构成）
放入form标签内
input+type（类型）name（元素名称，取名）value.(元素的值)
type 取值： text.文本框 Password:密码框 reset 重置 radio：单选临钮 .
checkbox 多选按钮 buttom普通按钮 Submit.提交按钮
type中的标签
image 图像按钮 hidden 隐藏域 file 文件域 email 邮箱
color 颜色域 date 日期域 time 时间域 range进度条
<form action="">
用户名：<input type="text"required autofocus><br>
密码：<input type="text"><br>
用户名：<input type="text"disabled><br>
用户名：<input type="text"readonly><br>
<input type="submit"name="登录">
<input type="rest"name="chongzhi"><br>
请选择您的性别<input type="radio"name="gender">男<input type="radio"name="gender">女
请选择您的爱好<br>
<input type="checkbox"name="gender">唱歌
<input type="checkbox"name="gender">跳舞
<input type="checkbox"name="gender">打篮球
<input type="checkbox"name="gender">rap
<input type="image"scr=""><br>
<input type="file"><br>
<input type="hidden"><br>
请输入您的邮箱：<br>
<input type="email"value="邮箱"><br>
<input type="color"><br>
<input type="date"><br>
<input type="time"><br>
<input type="datetime-local"><br>
<input type="range">
</form>input标签中常用的属性
checked 默认属性
readonly-一只读，字段只可以读，不能修改
disabled…禁用.(不可以点击)
autofocus… 自动获取光标，默认光标位置
required…不能是空白要填写（不能空白提交）
写在form标签内
select标签.下拉列表框
属性:selected 属性.默认被选重的选项
multiple.以列表形式显示
textarea.标签 用来实现文本域
属性： ols…表示列数，用于是文本宽度
rows…表子多少行.用来显示文本高度
a标签.超链接.点击其可跳转页面
属性： Vlink…访问过超链接文本的颜色.
.Alink…激活超链连格文本的颜色
link...超链接文本的颜色
<option> 标签定义选择列表中的选项。
text…文本的颜色. 加在body中一整个页面换色
bgolor…背景颜色.
background...背景图片
您的家庭住址是：<select name="" id="">
<option value="">四川</option>
<option value=""selected>重庆</option>
<option value="">西安</option>
<option value="">北京</option>
<option value="">广东</option>
</select><br>
</p>
<p>
您的收货地址是：<select name="" id=""multiple>
<option value="">永川</option>
<option value="">巴南</option>
<option value="">万州</option>
<option value="">江津</option><br>
</select><br>
</p>
<p>
请留下您的建议或意见：
<textarea name="" id="" cols="30" rows="10">
您的建议或者是意见
</textarea><br>
</p>
<p>
请您选择您喜欢的颜色:
<input type="color">
注册的时间：
<input type="datetime-local">
</p>
<input type="submit"value="注册">
<input type="reset">
</form>img标签：
图片常见格式GIF JPG PNG BMP
属性：scr-------放置图片路径（绝对/相对）
alt--------代替图片的文本内容（因为路径浏览器的问题，当显示不出这个图片时，alt性质可 以猫叔这张图片的内容）
width----宽度 height------高度 border------边框（默认值为0 代表无边框）
align----位置（图片与文字所在位置）（top--上对齐 middle-----居中对齐 bottom---下对齐 left----左对齐 right----右对齐）
title-----图片标题，用来显示描述图片的文字
<img src="th.jpg" alt="蜡笔小新" title="蜡笔小新"border="2"><br>
向上对齐 <img src="th.jpg" alt="蜡笔小新" title="蜡笔小新"border="2"align="top"><br>
向下对齐 <img src="th.jpg" alt="蜡笔小新" title="蜡笔小新"border="2"align="bottom"><br>
居中对齐 <img src="th.jpg" alt="蜡笔小新" title="蜡笔小新"border="2"align="middle"><br>
向左对齐 <img src="th.jpg" alt="蜡笔小新" title="蜡笔小新"border="2"align="left"><br>位图：点击图片某一位置可以跳转
usemap属性
map标签 name属性
map标签一般与area标签进行连用
area标签属性 shape 鼠标点击的形状（react 矩形/circle 圆形 /poly 多边形）
coords 点击形状大小
herf 点击形状链接跳转的路径
<body>
<img src="th.jpg" alt="蜡笔小新"usemap="#xiaoxin">
<map name="xiaoxin">
<area shape="circle" coords="100,70,30" href="11111.html">
</map>
</body>多媒体标签
audio 标签（音频）
vidio 标签（视频）
属性：controls 表示播放器组件
autoplay 自动播放属性（现在一般浏览器不支持）
loop 循环播放
<audio src="..\圣诞树\汪苏泷 - 小星星.mp3"controls></audio>
<video src="花园宝宝2.mp4"controls></video>
<video src="TG-2023-12-11-230318679.mp4"controls></video>
<audio src=""></audio>表格布局
table标签
包含： thead 表头 tbody 主干 tr--行 td---列
表格属性：
border--边框 width--宽度 height--高度 align----对齐方式
bgcolor----表格背景颜色 （放在th或 td内）
background-----背景可以插入的图片
表格的间距和边距
cellpadding -----表格边距（表示单元格内元素距离 单元格边缘的距离）
cellspacing------表格间距（单元格与单元格之间的距离）
（二者的默认边间距为 “2px”）
表格的合并
rowspan------表示单元格垂直方向上去跨行合并
colspan------表示单元格水平方向上的合并
表格嵌套：表格里可以嵌套表格
<table border="" width="1400px"height="50px" cellspacing="0"cellpadding="0">
<tr align="center">
<td colspan="2"><b>回单类型</b></td>
<td><b>网上转账汇款</b></td>
<td colspan="2"><b>指令序号</b></td>
<td><b>213254135454</b></td>
</tr>
<tr>
<td rowspan="4"><b>收 <br> 款 <br>人</b></td>
<td>户名</td>
<td>张三</td>
<td rowspan="4"><b>付 <br>款 <br>人</b></td>
<td>户名</td>
<td>老刘</td>
</tr>
</table>列表标签：
主要分为三种： 有序 无序 数据（列表）
有序列表：
ol---标签 属性：type 设置序号种类，默认为数字（123，ABC，abc ，I II III）
start 控制序号开始的位置
reversed 降序列表
<ol>
<li>内容<li>
</ol>
无序列表：
ul 标签 属性 disc 实心圆（默认）
circle 空心圆
square 实心方框
数据列表
dl 标签
<dl>
<dt> 标题</dt>
<dd>内容</dd>
</dl>
<ol type="1" start="2">
<li>hhh</li>
<li>zzz</li>
<li>hhh</li>
<li>zzz</li>
<li>yyy</li>
<li>kkk</li>
</ol>
<ul type="circle">
<li>nsbx</li>
<li>nsbx</li>
<li>nsbx</li>
<li>nsbx</li>
</ul>
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>多窗口框架
一个页面可以显示多个窗口
frameset （不能与body标签连用）
属性 cols----定义页面列方向尺寸，数目
rows-----定义行方向尺寸
iframe可以写在body中
<iframe src="..\33333.html" frameborder="0"></iframe>
<iframe src="..\11111112.html" frameborder="0"></iframe>
</body>
<frameset clos="50%,20%,*">
<frame scr=" 添加页面路径"></frame >
</frameset>本文为简单的HTML总结，代码都是我自己敲出来的，大家可能会看不懂，其中还有许多不足的地方，我还需要继续学习。
