HTML知识点复习
一、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:test@qq.com">发送邮件</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
子元素显示为默认的黑色圆点,也可通过参数自定义列表的符号,常用于新闻列表展示。
ol:
有序列表,可以在列表前增加序号,如1,2,3,4;适用于排行榜。
dl:
自定义列表,可以包括标题及内容,可适合用制作风箱结构。
table:
表格,适合于超过两行以上的数据呈现。
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、框架网页:将浏览器窗口分解为多个小窗口,每个小窗口均可以显示各自的网页
1
、
<frameset rows="" cols="">
:框架网页集,rows
为横向分隔,cols
为纵向分隔,值可以是具体数值也可以是百分比,注意 frameset
标记是和 body
标记同级的标记,不能将 frameset
标记包含在 body
标记中,否则将无法看到框架网页的效果。
2
、
<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>
3、内嵌框架<iframe>:可以在一个浏览器窗口种同时显式多个页面文档。
<iframe src="url" width="宽度" height="高度"></iframe>
提示:可以把说明的文本放置在<iframe>
和 </iframe>
之间,这样就可以应对无法理解 iframe
的浏览器。
以上是我老师的讲义,讲的很详细,便拿来复习。