HTML5
格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> html5文档类型 </title>
</head>
<body></body>
</html>
二、排版标签
2.1 标题标签
h1元素表示标题。HTML定义了标题元素的层次结构，其中h1是排名最高的。
其它标题元素是h2，h3到h6。
相同排名的标题会分解内容，以便每个主题都在其自己的部分。
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
2.2 段落标签
标签是段落标签，可以将HTML文档分割为若干段落。浏览器会自动在段落前后添加空行。
常用属性：
align:用于设定对齐方式 可选值left 、right 、center默认值是left.
<p> 段落的内容 <p>
<p> 段落的内容 <p>
2.3 水平线标签
<hr>标签会生成一条水平线。
常用属性:
align:设置水平线对齐方式 可选值 left right centersize:设置水平线厚度 以像素为单位。默认为2width:设置水平线长度.可以是绝对值或相对值。默认为100%color:设置水平线颜色.默认为黑色
3.1 div 标签
用于在文档中设定一个块区域（层+块）。块级元素。
常用属性：
align:left center right
3.2 span 标签
块级元素：block.宽度默认100%，块的前后有换行。p，h1-h6，div
内联元素（inline.行内元素）：无法设置宽高，前后没有空格。span,label
label有“焦点”指引功能
点击用户名就会跳转到输入框，这就是焦点指引的功能
4. 链接标签
<a>标签用于定义超连接，用于从一个页面链接到另一个页面。
anchor–锚
常用属性:
-
href:用于设定链接指向页面的url. -
name:用于设定锚的名称。锚点。 -
target:用于设定在何处打开链接页面。_new在固定的新窗口中打开链接_blank在新窗口中打开链接_parent在父窗体中打开链接_self在当前窗体打开链接,【此为默认值】_top在当前窗体打开链接，并替换当前的整个窗体(框架页)- iframe的name 在指定name的iframe中打开。
new:是在固定的新窗口打开
blank:不断打开新窗口
图片动态标签
5. 图片标签
<img>是一个图片标签，用于在页面上引入图片.
常用属性：
src:用于设定要引入的图片的urlalt:用于设定图像的替代文字。新浏览器不支持。width:用于设定图片的宽度height:用于设定图片的高度border：图片边框厚度
图片链接：
<a href="">
<img src="" >
</a>
6. 列表标签
6.1 ul 标签
<ul>标签表示的是一个无序列表。
常用属性:
type:规定列表的项目符号类型,可取值disc,square,circle.默认值为disc
6.2 li 标签
<li>标签表示的是一个列表项
常用属性:
-
type:这个属性只适用于无序列表，用于设定项目符号，默认值为disc -
value:这个属性只适用于有序列表，用于设定列表的项目数字
6.3 ol 标签
<ol>表示的是一个有序列表。
常用属性:
type:这个属性规定列表中使用的标记类型。可取值1 A a I i.start:这个属性规定列表的起始值
7. 表格标签-对齐
7.1 table 标签
定义表格
<table></table>
常用属性：
align:用于设定表格的对齐方式bgcolor:用于设定表格的背景颜色。border:用于设定表格边框的宽度width:用于规定表格的宽度。
7.2 tr 标签
定义表格的行
<table>
<tr></tr>
</table>
<tr>标签用于定义表格的行,包含一个或多个th或td元素。
常用属性:
align:用于设定表格中行的内容对齐方式。bgcolor:用于设定表格中行的背景颜色。
7.3 th 标签
定义表格的表头
内部的文本通常呈现为居中加粗文本。
Html表格中有两种类型的单元格：
- 表头单元格
th:包含表头信息。 - 标准单元格
td:包含数据。 - 两种单元格的属性一致
7.4 td 标签-格子
定义表格的列格子
align:用于设定单元格内容的对齐方式。bgcolor:用于设定单元格背景颜色。height:用于设定单元格的高度。width:用于设定单元格的宽度。colspan:用于设定列合并。跨列数。rowspan:用于设定行合并。跨行数。
colspan 属性
colspan: colspan属性用在td或th标签中，用来指定单元格横向跨越的列数
在浏览器中将显示如下：
rowspan 属性
rowspan ： colspan属性用在td或th标签中，用来指定单元格纵向跨越的行数
上例中的单元格1，其rowspan被设为“3”，这表示该单元格必须跨越三行（本身一行，加上另外两行）。因此，单元格1和单元格2在同一行，而单元格3和单元格4形成独立的两行。
7.5 caption 标签
定义表格标题
<caption>标签必须紧随<table>标签之后，一个表格只能有一个标题。通常这个标题会被居中于表格之上。
<table border="1">
<caption>111</caption>
<tr><td>2</rd><td>3</td></tr>
<tr><td>2</td><td>3</td></tr>
</table>
7.6 thead 标签
定义表格的页眉
<thead>标签用于组合HTML表格的表头内容。<thead>元素应该与<tbody>和<tfoot>元素结合起来使用。
注意:
<thead>内部必须有<tr>标签。
7.7 tbody 标签
定义表格的主体
<tbody>标签用于组合HTML表格的主体内容
7.8 tfoot 标签
定义表格的页脚
<tfoot>标签用于组合HTML表格中的表注内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1">
<thead bgcolor="#009900">
<tr>
<td>2</rd>
<td>3</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody bgcolor="red">
<tr>
<td>2</rd>
<td>3</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</rd>
<td>3</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
<tfoot bgcolor="yellow">
<tr>
<td>2</td>
<td>3</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>
</body>
</html>
8. 表单标签-提交
8.1 form 标签
form标签代表一个表单，表单用于向服务器传输数据。
form 标签能够包含 ，可以是文本字段，复选框，单选框或提交按钮等。
还可以包含 等。
常用属性:-
name:用于定义表单的名称 -
action:用于规定提交表单时向何处发送表单数据。服务器的地址。 -
method:用于规定提交的方式。一般取值POST或GET提交数据：name1=value1&name2=value2…
name–>服务器使用。可以重复。如：多选框。
id–>前端技术使用。不重复。
POST与GET方式区别:
-
get方式<255字节只能传输少量数据,而post可以携带大数据。文件上传只能用post。
-
get方式提交时，数据会在地址栏上显示，安全性差。Post方式提交不会在地址栏上显示数据，更加安全。
get采用请求报文的head 装数据。post采用请求报文的body装数据。
8.2 input 标签
标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
关于标签type属性值说明 :
text（默认）
定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
其它常用属性:
name:定义标签名称value:定义标签值size:定义输入字段的长度maxlength:定义可输入最大字符个数minlength:定义可输入最小字符个数- placeholder：输入提示
password
定义密码字段。该字段中的字符被掩码.
其它常用属性:
name:定义标签名称value:定义标签值size:定义输入字段的长度maxlength:定义可输入最大字符个数minlength:定义可输入最小字符个数
radio
定义单选按钮。
其它常用属性:
name:定义标签名称.- 注意，对于单选按钮，如果要想做到单一选择，多个radion的name值必一样。
value:定义标签值checked:定义该标签默认被选中。
checkbox
定义复选框。
其它常用属性:
name:定义标签名称.注意，一组的checkbox它们的name值应该是一样的。value:定义标签值checked:定义该标签默认被选中。
button
定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
其它常用属性:
name:定义标签名称value:按钮显示名称
hidden
定义隐藏的输入字段。
其它常用属性:
name:定义标签名称value:定义标签值
file
定义输入字段和 "浏览"按钮，供文件上传。
其它常用属性:
name:定义标签名称
submit
定义提交按钮。提交按钮会把表单数据发送到服务器。
其它常用属性:
name:定义标签名称value:按钮显示名称
reset
定义重置按钮。重置按钮会清除表单中的所有数据。
其它常用属性:
- name:定义标签名称
- value:按钮显示名称
image
定义图像形式的提交按钮。
这个标签主要是用了替换submit按钮，因为默认产生的提交按钮并不漂亮，这个标签允许你采用指定的图片做为提交按钮。
其它常用属性:
name:定义标签名称src:定义作为提交按钮显示的图像的urlalt:定义作用图像的替代文本。
8.3 select和option标签
select
用于定义一个下拉列表
常用属性:
name:定义下拉列表的名称size:定义下拉列表中可见选项的数目multiple:定义可选择多个选项
option
用于定义下拉列表中的选项。
需要位于标签内部常用属性:
value:定义送往服务器的选项值selected:定义选项为选中状态。
8.4 textarea 标签
<textarea>标签用于定义一个多行文本输入控件(多行文本框,文本域)
常用属性:
name:定义多行文本框名称cols:定义多行文本框可见宽度rows:定义多行文本框可见行数
9. 框架标签
所谓框架就是将页面划分成几个窗框，就可以让我们在同一个浏览器中显示不止一个页面。
9.1 frameset 标签
<frameset>是框架结构标签，它定义如果将窗口分割为框架.
注意:不能与
<frameset></frameset>标签一起使用<body></body>标签。
常用属性:
-
cols:垂直切割 -
rows:横向切割 -
frameborder:定义框架的边框，其值可以有0和 1，0表示不要边框，1表示要显示边框。 -
border:定义框架的边框厚度 -
bordercolor:定义框架的边框颜色 -
framespacing:定义框架与框架之间的距离。
<frameset cols="25%,*,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
9.2 frame 标签
frame 是框架标签，它定义放置在每个框架中的页面。
常用属性:
-
src:定义此框架要显示的页面url -
name:定义此框架的名称 -
frameborder:定义框架的边框，其值可以有0和 1，0表示不要边框，1表示要显示边框。 -
framespacing:定义框架与框架之间的距离 -
bordercolor:定义框架的边框颜色 -
scrolling:定义是否显示卷轴，YES表示要显示，NO表示不显示，AUTO视情况而定。 -
noresize:定义框架大小不可以改变。 -
marginhight:定义框架高度部分边缘所保留的空间。 -
marginwidth:定义框架宽度部分边缘所保留的空间。
如果浏览器不支持框架，我们可以使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-agZtQ4e7-1592031198693)(assets/1554022716979.png)]
9.3 iframe 标签
iframe 标签会创建包含另外一个文档的内联框架（即行内框架）
常用属性:
src:定义些框架要显示的页面urlname:定义些框架的名称width:定义些框架的宽度height:定义些框架的高度marginwidth:定义插入的页面与框边所保留的宽度marginheight: 定义插入的页面与框边所保留的高度frameborder:定义框架的边框，1表示显示边框 ，0表示不显示scrolling:定义是否允许卷动，YES允许，NO不允许。
10. meta -元数据 标签
| 属性 | 示例 | 描述 |
|---|---|---|
| charset | <meta charset="UTF-8"> | 定义文档的字符编码。 |
| name | description keywords | 把 content 属性关联到一个名称。 |
定义文档的字符集编码
<meta charset="UTF-8">
定义针对搜索引擎的关键词：seo必备。
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
定义对页面的描述：
<meta name="description" content="免费的 web 技术教程。" />
去除缓存
link href=“css/1.css?v=2222"
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
<meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<meta HTTP-EQUIV="expires" CONTENT="0">
11. 颜色值
颜色由红®、绿(G)、蓝(B)组成。
- 颜色值由十六进制来表示红、绿、蓝（RGB）。
- 每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。
- 十六进制值的写法为#号后跟三个或六个十六进制字符。
- 三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。
<!DOCTYPE html>
<html>
<body>
<p style="background-color:red">
通过颜色名称设置背景颜色
</p>
<p style="background-color:#FFFF00">
通过十六进制设置背景颜色
</p>
<p style="background-color:rgb(255,255,0)">
通过 rgb 值设置背景颜色
</p>
</body>
</html>
12. 特殊字符
| 实体名称 | 显示结果 | 描述 |
|---|---|---|
| 空格 | |
< | < | 小于号 |
> | > | 大于号 |
& | & | 和号 |
" | " | 引号 |
' (IE不支持) | ' | 撇号 |
¢ | ￠ | 分 |
£ | £ | 镑 |
¥ | ¥ | 人民币/日元 |
€ | € | 欧元 |
§ | § | 小节 |
© | © | 版权 |
® | ® | 注册商标 |
™ | ™ | 商标 |
× | × | 乘号 |
÷ | ÷ | 除号 |
781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
