一个完整的html页面
<!DOCTYPE html> //声明为html 5文档 不区分大小写
<html>
<head>
<meta charset="utf-8"> //定义网页编码格式为utf-8
<title></title>
</head> //head里包含html的元(meta)数据
<body>
<h1>标题</h1>
<p>段落</p>
</body> //只有body区域才会在浏览器中显示
</html>
html文档由元素组成，以开始标签起始，以结束标签终止，大多数元素可拥有属性； 属性是html元素的附加信息，一般在开始标签中，属性值用引号包含起来，比如
<a href="https://www.baidu.com">Link</a> //html链接用<a>来定义，链接的地址在href属性中指定
还有其他标签在这个手册（取自菜鸟） 全局属性：
- id：为元素指定唯一的标识符
- class：为元素指定一个或多个类名
- style：用于直接在元素上应用 CSS 样式
- title：为元素提供额外的提示信息，通常在鼠标悬停时显示
- data-*：用于存储自定义数据，通常通过 JavaScript 访问(不能包含大写字母)
一些元素和属性
<iframe> 是 HTML 中的内联框架元素，用于在一个 HTML 文档中嵌入另一个文档。
其常见属性：
- src：指定要嵌入的文档的 URL。
- width：设置框架的宽度。
- height：设置框架的高度。
- name：为框架命名，可用于链接的 target 属性。
<form> 是 HTML 中用于创建表单的标签。表单用于收集用户输入的数据，并将其提交到服务器进行处理。
其常见属性：
- action：指定表单数据提交的目标 URL。
- method：指定提交表单数据的 HTTP 方法，常见的值有 get 和 post。
- enctype：指定表单数据的编码类型，常用的值有 application/x-www-form-urlencoded（默认值，适用于大多数情况）、multipart/form-data（用于文件上传）等。
<label> 标签的主要作用是为表单控件提供一个可读性更强的描述。当用户点击
HTML
<abbr title="HyperText Markup Language">HTML</abbr>
target 属性定义链接的打开方式:
_self：在当前窗口或框架中打开链接（这是默认值）。_blank：在新窗口中打开链接。_parent：在父框架集中打开链接，如果没有父框架集，则行为类似于 _self。_top：在整个浏览器窗口中打开链接，忽略所有的框架。
rel 属性定义链接与目标页面的关系:
在
<a>标签中：
nofollow: 表示搜索引擎不应跟踪该链接，常用于外部链接。
noopener 和 noreferrer: 防止在新标签中打开链接时的安全问题，尤其是使用 target=”_blank” 时。 noopener: 防止新的浏览上下文（页面）访问window.opener属性和open方法。
noreferrer: 不发送referer header（即不告诉目标网站你从哪里来的）。
noopener noreferrer: 同时使用noopener和noreferrer。例子:<a href="https://www.example.com" rel="noopener noreferrer">安全链接</a>在
<link>标签中：
stylesheet：表示链接的是一个样式表文件。
icon：表示链接的是网站的图标文件。
html中的链接还可以用内部链接比如：
<a id="place">要跳转的地方</a> <a href="#tips">此处跳转</a>
HTML <head>部分
<title>定义了html文档标题；
<base> 作为HTML文档中所有的链接标签的默认链接,以及默认打开方式；
<link>通常用于链接到样式表；
<style> 标签定义了HTML文档的样式文件引用地址，也可以直接添加样式渲染；比如：
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue
}
</style>
HTML样式：
CSS修饰标签的样式，有 “内联” 和 “外引” 两种方式。 font-family（字体）color（颜色）font-size（字体大小） text-align（文字对齐）
<h1 style="font-family:verdana; text-align:center">一个标题</h1> <! --center是居中-- >
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
HTML图像
<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域
矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
圆形：(圆心坐标为(X1,y1)，半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ……)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
HTML表格
由<table>标签来定义，每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。
每个表格从一个 table 标签开始。
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
带有边框：<table border="1">
带标题的表格用<caption>标题</caption>
单元格跨两列<th colspan="2"> 跨两行<th rowspan="2">
有单元格边距 <table border="1" cellpadding="10">
有单元格间距<table border="1" cellspacing="10">
HTML列表
无序列表始于<ul>标签。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
有序列表可以在<ol>中添加属性start=5表示从5开始，添加属性type=A/a/I/i分别表示大写字母/小写字母/罗马数字/小写罗马数字列表。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
HTML区块
大多数HTML元素被定为块级元素或内联元素
块级元素在浏览器显示时，通常以新行来开始；ex.<h1>,<p>...
内联元素则通常不会以新行开始；ex.<b>加粗，<img>图像...
<div> 是块级元素，它独占一行，可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构，例如页面的主体区域、容器、布局等。
<span> 是行内元素，它不会独占一行，宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹。
clear 属性用于控制元素周围的浮动元素。只对块元素有效，它有四个属性值：
clear:both：表示元素两边都不允许有浮动元素，会使元素直接换行，不会与浮动元素重叠。
clear:left：表示元素左边不允许有浮动元素，如果元素左边有浮动元素，该元素会另起一行。
clear:right：表示元素右边不允许有浮动元素，如果元素右边有浮动元素，该元素会另起一行。
clear:none：表示两边允许有浮动元素，这是默认值。
HTML表单与输入
<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法
<label> 元素用于为表单元素添加标签，提高可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。
type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。
当 type="radio"时，选择框定义为单选框；name 属性用于定义单选按钮的名称，同一组中的单选项必须用同一个名称；value 属性用于定义单选按钮的值，在同一组中域值必须是不同。
<form action="提交的目标url" method="提交的HTTP方法">
<!-- 文本输入框 -->
<label for="name">用户名:</label>
<input type="text" id="name" name="name" required>
//required是必填
//一个文本字段的默认宽度是20个字符
<br>
<!-- 密码输入框 -->
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
// 密码字段中的字符是隐藏的(显示为星号或圆圈)
<br>
<!-- 单选按钮 -->
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
// checked用于指定该单选按钮在页面加载时默认被选中。
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<!-- 复选框 -->
<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">订阅推送信息</label>
<br>
<!-- 下拉列表 -->
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
<textarea rows="10" cols="30">
用户可在文本域中写入文本。可写入字符的字数不受限制。
使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下脚可以重置大小）。
<datalist> 标签规定了 <input> 元素可能的选项列表。
<datalist> 标签被用来在为 <input> 元素提供”自动完成”的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。
ex.
<input list="number">
<datalist id="number">
<option value="123">
<option value="456">
<option value="789">
<option value="000">
</datalist>
HTML框架
对<iframe>的运用(见上文“一些元素和属性”）
<iframe>移除边框
<iframe src="what" frameborder="0"></iframe>
HTML-统一资源定位器(Uniform Resource Locators)
一个网页地址的语法： scheme://host.domain:port/path/filename
scheme - 定义因特网服务的类型。最常见的类型是 httphost - 定义域主机（http 的默认主机是 wwwdomain - 定义因特网域名，比如 runoob.com:port - 定义主机上的端口号（http 的默认端口号是 80）path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。filename - 定义文档/资源的名称
URL 不能包含空格，URL 编码通常使用 + 来替换空格。