前言
HTML(HyperText Markup Language，超文本标记语言)是一种用来制作超文本文档的简单标记语言。
提示：以下是本篇文章正文内容，下面案例可供参考
一、HTML基础
1.HTML文档基础
HTML文档结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
正文
</body>
</html>
二、常用标签
1.基本常用标签
1.标题标签
<h1>
-
<h6>
：定义标题，从一级到六级，每级标题的字体大小依次递减。其中align是设置标题的对齐属性。
<h# align=left|center|right>...</h#>
2.段落标签
<p>
:在
<p>
标签中使用align属性设置段落的对齐方式，其中value有4个值：left、right、center和justify。
<p align=value>...</p>
3.换行标签
<br/>
（单标签）
4.水平分割线标签
<hr/>
（单标签）
5.列表标签:
（1）：无序列表
<ul>
：由
<ul>
标签开始，每个列表项由
<li>
标签开始。使用type属性可以指定出现在列表项前的项目符号的样式，type属性值及其对应的符号样式有，disc实心圆点（默认）、circle空心圆点、square实心方块。
<ul type="">
<li>项目名称</li>
<li>项目名称</li>
<li>项目名称</li>
...
</ul>
（2）有序列表
<ol>
:由
<ol>
标签开始，每个列表项由
<li>
标签开始。使用type属性可以指定出现在列表项前的项目编号的样式，type属性值及其对应的编号样式有，1（阿拉伯数字(默认)）、a（小写字母）、A（大写字母）、ⅰ（小写罗马数字）、Ⅰ（大写罗马数字）。使用start可以指定开始编号。
<ol type="" start="">
<li>项目名称</li>
<li>项目名称</li>
<li>项目名称</li>
...
</ol>
（3）自定义列表
<dl>
<dl>
表示定义列表
<dt>
定义的项目
<dd>
定义项目的描述
<dl>
<dt>标题一</dt>
<dd>描述一</dd>
<dt>标题二</dt>
<dd>描述二</dd>
...
</dl>
三.超链接
创建超级链接。
（1）：href属性用于设置链接的目标。
（2）：target属性用于用于指定打开链接的目标窗口。
（3）：name属性用于规定链接的名称
<a href="url" target="" name="">超链接名称</a>
锚点链接:
用来标记网页中的特定位置，使它可以跳转到当前文档或其他文档中的标记位置。
（1）在同一页面内要使用锚点链接：
<a href="#锚点名称" target="窗口名称">链接标题</a>
（2）在不同页面内要使用锚点链接：
<a href="URL地址#锚点名称" target="窗口名称">链接标题</a>
以上两种链接形式，链接到的目标为：
<a name="锚点名称">链接内容</a>
一个锚点链接实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚点链接</title>
</head>
<body>
<a href="#one">链接到页内标题</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h2><a name="one">标题</a></h2>
</body>
</html>
四.表格
表格标签：
定义表格。每个表格均有若干行(由
<tr>
标签定义)，每个表格可以定义第一行的单元格为表头(由
<th>
标签定义)，其余每行被分割为若干单元格(由
<td>
标签定义)。其中
<table>
标签的border属性可以指定边框宽度。
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个简单的表格</title>
</head>
<body>
<table border="1">
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>内容(1,1)</td>
<td>内容(1,2)</td>
<td>内容(1,3)</td>
</tr>
<tr>
<td>内容(2,1)</td>
<td>内容(2,2)</td>
<td>内容(2,3)</td>
</tr>
</table>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
效果图：
五.表单
表单由
<form>
标记，表单像一个容器一样包含各种类型的控件，常见的控件包含文本框、按钮、单选框、复选框、下拉列表框和文件选择输入框等等。
1.表单标签的用法
基本语法：
（1）name属性定义表单名称
（2）action属性指定表单提交的位置
（3）method属性定义表单结果的提交方式
<form name="" method="" action="">
表单控件
...
</form>
2.post请求和get请求
get和post是来源HTTP协议中中最常见的两种请求提交方式。get和post的区别在：
区别一：get 请求提交路径上存在属性的信息，不安全
post请求提交时路径上没有属性的信息，相对安全
区别二：get 请求提交的数据URL有限制（限制于特定浏览器和服务器），而post请求提交的数据URL有限制
3.文本框标签
<input>
标签用于收集用户输入的数据。根据type属性的不同，输入框拥有多种类型，常见的有text文本框、password密码框、checkbox多选框、radio单选框、submit提交按钮、reset重置按钮、file文件上传。
4.下拉列表框
<select>
标签与
<option>
标签可创建单选或多选下拉列表，常用属性有disabled（规定禁用该下拉列表）和multiple（规定可选择多个选项），基本语法：
<form>
<select name="">
<option value=""></option>
...
<option value=""></option>
</select>
</form>
5.多行文本框标签
用
<textarea>
标签可以定义多行文本框，
<textarea>
标签常用属性为name、cols、rows，基本语法:
<form>
<textarea name="textarea" cols="" rows="">
文字
</textarea>
</form>
6.表单实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div align="center">
<h1>虫虫表单实例</h1>
<hr>
<form action="1.html" method="get">
<p>用户名：<input type="text" name="username" value="请输入您的用户名"/></p><br>
<p>密 码:
<input type="password" name="pwd"/></p>
<p>请输入您的性别:
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</p>
<p>
请选择您喜欢的书籍类型:
<input type="checkbox" name="hobby" value="都市言情" />都市言情
<input type="checkbox" name="hobby" value="古代穿越" />古代穿越
<input type="checkbox" name="hobby" value="现代科技"/>现代科技
<input type="checkbox" name="hobby" value="悬疑推理"/>悬疑推理
<input type="checkbox" name="hobby" value="历史人文"/>历史人文
</p>
<p>
请选择您的城市:
<select name="city">
<option>--请选择城市--</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>重庆</option>
<option>成都</option>
</select>
</p>
<p>
请选择您的爱好:
<select name="style" multiple="multiple">
<option>--请选择类型--</option>
<option>音乐</option>
<option>体育</option>
<option>看书</option>
<option>科技</option>
<option>美术</option>
</select>
</p>
<p>
<textarea rows="5" cols="50">
想写什么写什么！
</textarea>
</p>
<p><input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="button"/>
</p>
</form>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
效果如图：
六.图像映射
<img>
标签src属性为所引用图片的URL地址。width和height属性可以更改图像的尺寸，其单位可以是px或者百分比，align属性定义图像的对齐方式。
其中usemap属性用于做位图。图片映射指的是带有可单击区域的图像，
<area>
标签定义图像映射的区域，
<area>
元素总是嵌套在
<map>
标记中。
基本语法：
<img src="" width="" height="" usemap=#映射图名称>
map标记
定义映射图：
<map>
标签
<area>
标签
<map>
标签定义映射区域：
<map name="namemap" id="namemap"></map>
<area>
标签定义映射区域
<area shape="形状" coords="坐标" href="url" alt="替换文本"/>
图像映射实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像映射实例</title>
</head>
<body>
<img src="https://img1.baidu.com/it/u=2669465948,2438487741&fm=26&fmt=auto&gp=0.jpg" usemap="#dog">
<map name="dog">
<area shape="circle" coords="338,175,50" href="https://www.baidu.com/" alt="百度首页"></area>
</map>
</body>
</html>
七.框架集
frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
<frameset>
标签不可与
<body>
标签一起使用。
<frameset>
标签中可用rows(水平分割)或cols(垂直分割)属性来进行分割。
基本语法：
<html>
<frameset rows="高度1,高度2,...,*">
<frame>
<frame>
<frame>
...
</frameset>
</html>
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架集实例</title>
</head>
<frameset cols="20%,30%,*">
<frame>
<frame>
<frame>
</frameset>
</html>
附：常用特殊符号
|
特殊符号
|
符号代码
|
说明
|
|
|
 ；
|
空格
|
|
&
|
&；
|
连接符
|
|
©
|
©；
|
版权所有
|
|
®
|
®；
|
注册
|
|
™
|
&trade；
|
商标
|
|
§
|
§；
|
小节
|
|
€
|
&euro；
|
欧元
|
|
±
|
±；
|
加减符号
|
|
×
|
×；
|
乘法符号
|
|
÷
|
÷；
|
除法符号
|
|
·
|
·；
|
中间点
|
|
＜
|
<；
|
小于符号
|
|
＞
|
>；
|
大于符号
|
|
¥
|
¥；
|
人民币符号
|
|
°
|
°；
|
度
|
|
£
|
£；
|
镑
|
总结
以上大多数标签的样式都在CSS中设置,或者HTML5已淘汰的标签，所以没有记录相关知识！
以上为本人的
简要
总结，各位大佬请多指教！
