THML知识点复习
爱好HtmlCssJs 2019-12-26
一, HTML介绍
HTML（HyperText Markup Language）超文本标记语言，是学习Web程序的最重要并且最基础部分。
html语言由浏览器可以自动进行解释。
最新版本为HTML5.0，常用版本为xhtml1.0，由浏览器解释执行，纯文本文件。
xhtml（扩展HTML）xhtml1.0是HTML4.01的升级版本，比HTML更加严格，删除了表现型标签。
二, HTML基本结构
html5基本结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
</body>
</html>xhtml1.0基本结构(虽然建议使用html5的框架，但是因为老浏览器还广泛存在，还需掌握xhtml1.0的框架)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html> xhtml1.0的文档结构声明有三种transitional（ 过渡型 ）、strict（严格型）、frameset（框架型），浏览器将安装DTD类型来解析。
DTD，是Document Type Definition的简称，是一系列标记语言语法的规则，用来定义XML或者(X)HTML的文档类型。
浏览器会根据DTD规范来判断文档类型，决定使用何种语法规则来解析该文档。
三, 编码规范
1.所有的标记都必须要有一个相应的结束标记，单标记直接用/结束。
2.所有标签的元素和属性的名字都必须使用小写。
3.所有的属性必须用引号""括起来。
虽然在html5中，对规范有所放松，但是还是建议用xhtml的规范来书写代码，养成严谨的好习惯。
四, HTML标记解析
1、头标记head
title：网页标题
meta：辅助信息标记，向浏览器传递一些信息，常用的如下：
指定网页的字符编码：
<meta charset="UTF-8">
网页刷新：
<meta http-equiv="refresh" content="5,http://www.163.com"/>
网页关键字：
<meta name="keywords" content="电脑、机器人、智能" />
网页描述：
<meta name="description" content="关于网络的网页" />
与移动开发有关：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
2、文档主体标记body
html标签选择的原则：从语义的角度选择，而不是外观，这也称之为html的语义化。
3、 文档结构标记
1）标题标记
<h1>到<h6>表示页面中的关键词（标题），以使用时有以下的注意事项！
<h1>代表最重要的，<h6>代表相对最不重要的，因此，根据这个递减，适当安排关键词。
2）段落与换行标记
<p>：段落
<br />：换行
<br>标记使当前行强行中断而另起一行，但是新行与原来的行保持相同的属性，即新行与原来的行属于同一段落，而<p>标记在换行的时候另起了一新的段落。
3）div与span
div表示一个盒子或容器
span没有特定的语义，通常用于样式的应用
4）<hr />：分割线
4、文字标记
<b>：加粗
<strong>：强调
b和strong的区别就在于前者是物理元素,仅表示加粗，后者是逻辑元素，表示强调的意思，<b>是在html中的标签，而在xhtml中只能使用<strong>，后者兼容性更好。
<i>：斜体
<em>：次级强调
我们可以看到下表中有部分的文本标记，我们只要按照标记的语义来使用即可，比如大段的引用我们可以用<blockquote>标签，代码用<code>标签，缩写用<abbr>标签等等。
| 文字标记 | 语义 |
| <blockquote> | 长引用 |
| <q> | 短引用 |
| <abbr> | 缩写 |
| <address> | 作者联系信息 |
| <pre> | 预格式化的文本，常用与程序代码 |
| <code> | 定义计算机代码文本 |
| <del> | 删除文本 |
| <sub> | 上标 |
| <sup> | 下标 |
5、<a>：超级链接标记
<a href="链接位置" title="链接描述" target="目标">链接文字</a>
1） 使用邮件链接：
<a href="mailto:">发送邮件</a>
2）页面链接的锚点：
<a href="#top">回到顶部</a> <div id="top">顶部的链接</div>
3）给链接增加鼠标提示：
<a title=“点击查看胡悦的详细信息”>查看</a>
4）理解链接的不同打开方式:
<a href=“” target=“_top/_self/_blank”></a>
6、绝对路径、相对路径
相对路径：从当前文件开始的位置；绝对路径：从站点根目录开始的路径，以“/”开头。
. 代表当前目录 . . 代表上一级目录
7、img：图片标记
<img src="图片位置" alt="图片描述" width="宽度" height="高度" />
8、数据列表标记
1）ul、ol、li
<ol>
<li>a</li> 1.a
<li>b/li> 2.b
<li>c</li> 3.c
</ol><ul>
<li>A</li> ● A
<li>B</li> ● B
<li>C</li> ● C
</ul>2）dl、dt、dd
<dl>
<dt>计算机</dt> 计算机
<dd>用来计算的仪器 ... ...</dd> 用来计算的仪器... ...
<dt>显示器</dt> 显示器
<dd>以视觉方式显示信息的装置 ... ...</dd> 以视觉方式显示信息的装置 ... ...
</dl>
9、表格标记
<table width="200" border="1">
<caption>表格标题</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>12010101</td>
<td>胡悦</td>
<td>女</td>
</tr>
</tbody>
</table> 
合并单元格演示：
水平合并(colspan=合并单元格数)
<table border="1">
<tr>
<td colspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table> 
垂直合并（rowspan=合并的单元格数）
<table border="1">
<tr>
<td rowspan="2">2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table> 
ul：无序列表，li子元素显示为默认的黑色圆点，也可通过参数自定义列表的符号，常用于新闻列表展示。
<strong>ol</strong>：有序列表，可以在列表前增加序号，如1，2，3，4；适用于排行榜。
<strong>dl</strong>：自定义列表，可以包括标题及内容，可适合用制作风箱结构。
<strong>table</strong>：表格，适合于超过两行以上的数据呈现。
10、转义字符
| 文本字符 | html字符 |
| 空格 | |
| < | < |
| > | > |
| " | " |
| & | & |
11、注释
<!-- 注释内容 -->
12、表单
1）表单标记
<form action="表单提交的处理程序地址" method="表单提交方式(post/get)" name="表单名称"></form>
form元素将所有的表单包含起来，也相应于表单的作用域。
get和post提交方式的区别：get请求把表单的数据显式地放在URL中,并且对长度和数据值编码有所限制.post请求把表单数据放在HTTP请求体中,并且没有长度限制。
2）文本框
<input type="text" name="控件名称" value="文本框输入值" placeholder="提示信息" disabled readonly required auotfocus />
3）密码框
<input type="password" name="控件名称" placeholder="提示信息"/>
4）单选按钮：同一组单选按钮使用同一命名
<input type="radio" name="控件名称" value="控件值" checked />
5）复选按钮
<input type="checkbox" name="控件名称" value="控件值" checked />
6）下拉列表
<select name="控件名称" multiple="multiple" size="数值">
<option value="控件值" selected>选项</option>
</select>7）多行文本框
<textarea name="控件名称" cols="列数" rows="行数"></textarea>
8）隐藏控件
<input type="hidden" name="控件名称" value="控件值" />
9）普通按钮
<input type="button" value="按钮文字" /> <button type="button">按钮文字</button>
10）发送按钮
<input type="submit" value="按钮文字" /> <button type="submit">按钮文字</button>
11）重置按钮
<input type="reset" value="按钮文字"> <button type="reset">按钮文字</button>
表单实例：
<form action="" method="post">
<fieldset>
<legend>表单演示</legend>
<p>
<label for="username">姓名：</label><input type="text" name="username" id="username" placeholder="姓名" required="required" />
</p>
<p>
<label for="pwd">密码：</label><input type="password" name="pwd" id="pwd" placeholder="密码" />
</p>
<p>
性别：
<label><input type="radio" name="sex" value="1" checked="checked"/>男</label>
<label><input type="radio" name="sex" value="0" />女</label>
</p>
<p>
爱好：
<label><input type="checkbox" name="basketball" value="basketball" />篮球</label>
<label><input type="checkbox" name="football" value="football" />足球</label>
</p>
<p>
<label for="bloodtype">血型：</label>
<select name="bloodtype" id="bloodtype">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="AB">AB型</option>
<option value="O">O型</option>
</select>
</p>
<p>
<label for="intro">介绍</label>
<textarea name="intro" cols="30" rows="3" id="intro"></textarea>
</p>
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<input type="button" value="自定义按钮" />
</fieldset>
</form> 
13、框架网页：将浏览器窗口分解为多个小窗口，每个小窗口均可以显示各自的网页
<frameset rows="" cols="">：框架网页集，rows为横向分隔，cols为纵向分隔，值可以是具体数值也可以是百分比，注意frameset标记是和body标记同级的标记，不能将frameset标记包含在body标记中，否则将无法看到框架网页的效果。
<frame name="" scr="" />：指定每一个小窗口的名称和链接的网页，窗口的名称可以用于超级链接的target属性。
水平分隔两个窗口，每个窗口各占50%
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>框架窗口</title>
</head>
<frameset rows="50%,*">
<frame src="http://www.baidu.com" />
<frame src="http://www.bing.com" />
</frameset>
</html>复杂框架网页的制作，复杂的框架网页实际上就是frameset标记的嵌套，主要是要搞清楚，是先横向分割还是纵向分隔，然后在子窗口中再次分隔。
框架网页中，超级链接的指定窗口打开。
如果有如下的框架网页：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>框架窗口</title>
</head>
<frameset rows="100,*">
<frame src="nav.html" name="nav" />
<frame src="a.html" name="content" />
</frameset>
</html>我们希望上面的窗口是导航，下面的窗口来显示内容，那么上面导航窗口的超级链接就应该这样写（nav.html）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>导航</title>
</head>
<body>
<ul>
<li><a href="a.html" target="content">a文件</a></li>
<li><a href="b.html" target="content">b文件</a></li>
<li><a href="c.html" target="content">c文件</a></li>
</ul>
</body>
</html>内嵌框架<iframe>：可以在一个浏览器窗口种同时显式多个页面文档。
<iframe src="url" width="宽度" height="高度"></iframe>
提示：可以把说明的文本放置在<iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。
以上内容为我很厉害的老师的总结。
