一、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类型来解析
三、编码规范
1.所有的标记都必须要有一个相应的结束标记,单标记直接用/结束
2.所有标签的元素和属性的名字都必须使用小写
3.所有的属性必须用引号""括起来
虽然在html5中,对规范有所放松,但是还是建议大家用xhtml的规范来书写代码,养成严谨的好习惯
四、HTML标记解析
1、头标记head
title
:网页标题
meta
:辅助信息标记,向浏览器传递一些信息,常用的如下:
显示字符集:
<meta charset="UTF-8">
网页刷新:
<meta http-equiv="refresh" content="5,http://www.163.com"/>
//与SEO有关
网页关键字:
<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
3、文字排版标记
1)标题标记
<h1>
到<h6>
表示页面中的关键词(标题),以使用时有以下的注意事项!
1. <h1>
代表最重要的,<h6>
代表相对最不重要的,因此,根据这个递减,适当安排关键词;
2.<h1>尽量靠近在html 中的<body>标签,越近越好,以便让搜索引擎最快的领略主题。
2)文字标记
<b>
:加粗
<strong>
:强调
b
和strong
的区别就在于前者是物理元素,仅表示加粗,后者是逻辑元素,表示强调的意思,<b>
是在html中的标签,而在xhtml中只能使用<strong>
,后者兼容性更好。
<i>
:斜体
<em>
:强调
<u>
:下划线
3)段落与换行标记
<p>
:段落
<br />
换行
<br>
标记使当前行强行中断而另起一行,但是新行与原来的行保持相同的属性,即新行与原来的行属于同一段落,而<p>
标记在换行的时候另起了一新的段落。
4)<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>
5. 绝对路径、相对路径
相对路径:指文件的位置是相对于当前文件的位置
例:
若要从 contents.html 链接到 hours.html(两个文件位于同一文件夹中),可使用相对路径 hours.html。
若要从 contents.html 链接到 tips.html(在 resources 子文件夹中),请使用相对路径 resources/tips.html。每出现一个斜杠 (/),表示在文件夹层次结构中向下移动一个级别。
若要从 contents.html 链接到 index.html(位于父文件夹中 contents.html 的上一级),请使用相对路径 ../index.html。两个点和一个斜杠 (../) 可使您在文件夹层次结构中向上移动一个级别。
若要从 contents.html 链接到 catalog.html(位于父文件夹的不同子文件夹中),请使用相对路径 ../products/catalog.html。其中,../ 使您向上移至父文件夹,而 products/ 使您向下移至 products 子文件夹中。
绝对路径:从站点根目录开始的路径,以“/”开头
5)img
:图片标记
<img src="图片位置" alt="图片描述" width="宽度" height="高度" />
6)<hr />
:横线
4、数据列表标记
1、ul、ol、li
- <ol>
- <li>巴西</li>
- <li>阿根廷</li>
- <li>德国</li>
- </ol>
-
巴西
-
阿根廷
-
德国
- <ul>
- <li>巴西</li>
- <li>阿根廷</li>
- <li>德国</li>
- </ul>
-
巴西
-
阿根廷
-
德国
2、dl、dt、dd
- <dl>
- <dt>计算机</dt>
- <dd>用来计算的仪器 ... ...</dd>
- <dt>显示器</dt>
- <dd>以视觉方式显示信息的装置 ... ...</dd>
- </dl>
5、表格标记
- <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>
学号 | 姓名 | 性别 |
---|---|---|
12010101 | 胡悦 | 女 |
合并单元格演示:
水平合并(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>
2 | 3 | |
4 | 5 | 6 |
垂直合并(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>
2 | 3 | 4 |
5 | 6 |
ul
:无序列表,li
子元素显示为默认的黑色圆点,也可通过参数自定义列表的符号,常用于新闻列表展示
ol
:有序列表,可以在列表前增加序号,如1,2,3,4;适用于排行榜;
dl
:自定义列表,可以包括标题及内容,可适合用制作风箱结构;
table
:表格,适合于超过两行以上的数据呈现
6、转义字符
文本字符 | html字符 |
空格 | |
< | < |
> | > |
" | " |
& | & |
7、表单
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 />
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>
实例演示:
8、框架网页:将浏览器窗口分解为多个小窗口,每个小窗口均可以显示各自的网页
<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>
可以将代码复制到Sublime Text,然后保存后,打开,查看效果。
纵向分隔两个窗口,左边窗口宽度为200,右边窗口为剩余大小
- <!doctype html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>框架窗口</title>
- </head>
- <frameset cols="300,*">
- <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
的浏览器。