单标签：标签单独出现
：
<
img
/>
可以没有标签反斜线，
但不符合
规范.
双标签：标签成对出现：<a><a/> <div><div/>....。
HTML标签属性放在起始标签的尖括号内，如果有多个属性，则使用空格分开（属性出现的先后顺序没有要求！！）
title标签 设置页面标题
a 标签：超链接标签，双标签，常用标签属性： href ：指定打开的页面； target ：用于指定在哪个窗口打开 href 标签属性指定的页面，b标签：粗体，双标签 i标签：斜体，双标签 del标签：删除线，双标签
p（paragraph单词缩写）标签：段落标签，双标签 ，属性值 align（text-align）：设定文本显示的位置；
hn标签：标题标签，双标签，n的值为1~6，其中<h1></h1> 定义最大的标题；<h6></h6> 定义最小的标题
span标签：常用于组合文档中的行内元素，双标签（如果span标签没有CSS样式，那么span标签中的文本与前面文本没有任何视觉上的差异）
img标签：图片标签，单标签
src
：设置图片路径；
alt
：设置图片不存在时替代文本，该属性的显示效果与浏览器以及浏览器版本有关；
height
和
width
：设置图片的高度和宽度，单位为像素或
%
；
title
：设定鼠标移到元素上时显示的信息；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="img/favicon.ico"/>
<title>京东欢迎你</title>
</head>
<body>
<img src="img/f0de0864fa90cc7f.jpg" title="wawawawawaw" width="600px" />
<img src="img/d3fe2263d2a42a85.jpg" />
<img href="2d841f847ca761e4.jpg.webp" />
<a href="http://www.baidu.com" target="_blank">百度</a>
<p>河南工业大学</p>
</body>
</html>行内元素(i、b、del、a、img、span, input、select、textarea、label)：高度和宽度包裹内容，不单独成行 块级元素(table、p、ol、ul、li、form、div、hr、hn(h1、h2、h3、h4、h5、h6)：高度包裹内容，宽度等于父标记，单独成行 del 删除线 块级元素内文本可居中
有序列表 order list ==ol
无序列表 unorder list ==ul
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img src="" alt="" />
<!--行内元素：高度和宽度包裹内容，不单独成行 -->
<!--块级元素：高度包裹内容，宽度等于父标记，单独成行-->
<a href="https://www.baidu.com">百度</a>
<i>郑州</i><b>郑州</b><span>郑州</span><del>郑州</del>
<!--
del 删除线
块级元素内文本可剧中
-->
<div style="text-align:center ;">郑州</div>
<li style="text-align:center ;">郑州</li>
<p style="text-align:center ;">郑州</p>
<h1 style="text-align:center ;">郑州</h1>
<h6 style="text-align:center ;">郑州</h6>
<!--
有序列表 order list ==ol
-->
<ol start="3" type="I">
<li>郑州</li>
<li>郑州</li>
<li>郑州</li>
<li>郑州</li>
</ol>
<!--
无序列表 unorder list ==ul
-->
<ul type="square">
<li>郑州</li>
<li>郑州</li>
<li>郑州</li>
<li>郑州</li>
<li>郑州</li>
</ul>
</body>
</html>form标签 :form标签用于为创建 HTML 表单，双标签
action
：设定当提交表单时向何处（
一般为
Servlet
）发送表单数据。
method
：设定如何将表单中的数据传送给服务器进行处理，
属性值可以为
get
（对应于
Servlet
中的
doGet
方法）或
post
（对应于
Servlet
中的
doPost
方法） ，
默认值为
get
。
enctype
：
设定在发送表单数据之前如何对其进行编码，属性值有三个：
application/x-www-form-
urlencoded
（在发送前编码所有字符，默认值）、
multipart/form-data
（不对字符编码。在使用包含文件上传控件的表单时，必须使用该值）、
text/plain
（空格转换为
“+”
加号，但不对特殊字符编码）。
get和post区别
：
1.
get
提交数据时可以在地址栏中看到数据，数据安全性低；
post
在提交数据时看不到数据，提高了数据的安全性；
2.
get
方法提交的数据比
post
方式提交的数据少，即
post
方式提交的数据量大。
input
标签中
type
标签属性属性值为
text
时即为文本框，
input
标签为单标签；
input
标签中
type
标签属性属性值为
password
时即为密码框；
input
标签中
type
标签属性属性值为
file
时即为文件框；
input
标签中
type
标签属性属性值为
radio
时即为单选框
input
标签中
type
标签属性属性值为
checkbox
时即为复选框
id：设定单选框唯一标识符 name：name相同的为一组 value：设定单选项对应的值，该值是传到服务器端的真正数据。
label
标签：双标签，点击该标签包裹内容（图片或文字）时，浏览器将焦点转到和
label
标签相关的表单控件上。（没有使用
label标签的单选项无法通过点击“男”或“女”字符选中单选项，使用label标签的单选项则可以； label标签通常也和复选框一起使用，用法和单选项中的用法相同。）
下拉列表：
下拉列表由一个
select
标签和多个
option
子标签组成
文本域：textarea标签：文本域标签，双标签
rows
：设置文本域的高度；
cols
：设置文本域的宽度；
input标签中type标签属性属性值为button时即为按钮
input标签中type标签属性属性值为button时即为按钮
input标签中type标签属性属性值为submit时即为提交按钮
input标签中type标签属性属性值为reset时即为重置按钮
上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
<!--隐藏框 -->
<input type="hidden" />
<!--文本框-->
<input type="text" placeholder="请输入用户名" />
<!--密码框-->
<input type="password" placeholder="请输入密码" />
<!--文件框 -->
<input type="file" />
<!--下拉列表 -->
<select >
<option >--请选择--</option>
<option >河南省</option>
<option >江苏省</option>
</select
<!--评论区-->
<textarea></textarea>
<!--单选题-->
<input type="radio" name="sex" id="male"/><label for="male">男</label>
<input type="radio" name="sex" id="female"/><label for="female">女</label>
<!--复选框 -->
<input type="checkbox" name="hobby" id="basketball"/><label for="basketball">篮球</label>
<input type="checkbox" name="hobby" id="football"/><label for="football">足球</label>
<input type="checkbox" name="hobby" id="pingpang"/><label for="pingpang">乒乓球</label>
<input type="checkbox" name="hobby" id="paiqiu"/><label for="paiqiu">排球</label>
<!--按钮-->
<input type="button" value="登录" />
<input type="submit" value="提交" />
<input type="reset" value="撤销" />
<!--打开我的电脑 Windows+E -->
</form>
</body>
</html>
border标签属性：设定围绕表格的边框的宽度
cellspacing 标签属性：设定单元格之间的间距（
不建议通过cellspacing标签属性设置单元格之间的间距，建议向table标签添加border-spacing）
cellpadding标签属性：设定单元边沿与单元内容之间的间距
（1.不建议通过cellpadding标签属性设置单元边沿与单元内容之间的间距，建议向td或th标签添加padding样式属性来实现）
bgcolor标签属性：设置表格背景颜色
（
不建议通过bgcolor标签属性设置表格背景颜色，建议向table标签添加background-color样式属性实现这一效果
）
border-collapse样式属性：设置表格的边框是否被合并为一个单一的边框
separate 默认值。边框会被分开 collapse 边框会合并为一个单一的边框 inherit
规定应该从父元素继承
border-collapse
属性的值。
th ,td
: nowrap
标签属性：设定单元格的内容是否换行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border: 1px solid black;
border-spacing: 0px;
border-collapse: collapse;
}
th,td{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr align="center">
<td colspan="13">2013年图书销售统计</td>
</tr>
<tr>
<td rowspan="2">图书分类</td><td colspan="3">一季度</td><td colspan="3">二季度</td><td colspan="3">三季度</td><td colspan="3">四季度</td>
</tr>
<tr align="center">
<td><b>销售量</b></td><td colspan="2"><b>销售额</b></td><td><b>销售量</b></td><td colspan="2"><b>销售额</b></td><td><b>销售量</b></td><td colspan="2"><b>销售额</b></td><td><b>销售量</b></td><td colspan="2"><b>销售额</b></td>
</tr>
<tr align="center">
<td>小说</td><td>23521</td><td colspan="2">￥559940.00</td><td>18423</td><td colspan="2">￥44841.00</td><td>32125</td><td colspan="2">￥829870.00</td><td>25188</td><td colspan="2">￥586546.00</td>
</tr>
<tr align="center">
<td>文艺</td><td>23521</td><td colspan="2">￥559940.00</td><td>18423</td><td colspan="2">￥44841.00</td><td>32125</td><td colspan="2">￥829870.00</td><td>25188</td><td colspan="2">￥586546.00</td>
</tr>
<tr align="center">
<td>励志/成功</td><td>23521</td><td colspan="2">￥559940.00</td><td>18423</td><td colspan="2">￥44841.00</td><td>32125</td><td colspan="2">￥829870.00</td><td>25188</td><td colspan="2">￥586546.00</td>
</tr>
<tr align="center">
<td>童书</td><td>23521</td><td colspan="2">￥559940.00</td><td>18423</td><td colspan="2">￥44841.00</td><td>32125</td><td colspan="2">￥829870.00</td><td>25188</td><td colspan="2">￥586546.00</td>
</tr>
</table>
</body>
</html>咳咳，重点来了
---------------------------------------------------------------------------------------------------------------------------------
frameset标签 (frameset标签不能与body标签一起使用。)
frameset标签：框架集标签，用于规定框架集中有多少个框架窗口或框架集 集（set）
rows属性 值 px % * 定义框架集中列的数目和尺寸。
cols 属性 值 px % * 定义框架集中行的数目和尺寸。
frame标签：框架标签，单标签，用于在frameset 中定义一个框架窗口
属性{ src标签属性：当前frame框架中显示的文档的地址 ； name标签属性：定义当前frame框架的名称，用于在 JavaScript 中引用元素或作为链接的目标 ； scrolling标签属性：设定是否在框架中显示滚动条：auto no yes ; }
iframe标签
iframe标签：在页面中嵌入另外一个页面, 该标签为双标签
a标签与iframe标签区别：
a标签不显示href指定的页面，它只是一个超链接；而iframe会在页面中显示src指定的网页。
a标签中target标签属性用于设定在哪儿打开链接文档 [
_blank：在新窗口中打开被链接文档;
_self：在当前窗口、frame或iframe中打开被链接文档，默认值;
target_name:在指定的窗口中打开被链接文档;
_top：清除所有被包含的框架并将文档载入整个浏览器窗口;
_parent：在父窗口中打开被链接.
]
代码来了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<frameset rows="20%,*">
<frame src="top.html" frameborder="0" scrolling="no" hspace="0"/>
<frameset cols="20%,*">
<frame src="left.html" frameborder="0" scrolling="no" hspace="2"/>
<frame src="right.html" name="right" frameborder="0" scrolling="no" hspace="0"/>
</frameset>
</frameset>
</html>分别指定三个界面
1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: #F5DEB3;
}
</style>
</head>
<body>
top
</body>
</html>2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: yellowgreen;
}
</style>
</head>
<body >
right
</body>
</html>
3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: deepskyblue;
}
</style>
</head>
<body>
left
<a href="https://www.baidu.com" target="right">百度</a>
<iframe width="350" height="25" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&id=40"></iframe>
</body>
</html>
在页面中插入的天气信息 就可以用iframe来实现。。
本次总结到此为止。。下次再见。。
264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
