HTML知识概要
文章目录
前言
HTML(HyperText Markup Language，超文本标记语言)是一种用来制作超文本文档的简单标记语言。
提示：以下是本篇文章正文内容，下面案例可供参考
一、HTML基础
1.HTML文档基础
HTML文档结构如下：
<!DOCTYPE html><!--文档类型 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>
效果图：
五.表单
表单由<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"><!--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>
效果如图：
六.图像映射
<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已淘汰的标签，所以没有记录相关知识！
以上为本人的简要总结，各位大佬请多指教！
扫一扫
1708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
