HTML
1 概述
HTML 指的是超文本标记语言 (Hyper TextMarkup Language)
HTML不是编程语言，而是标记语言及标签
HTML是通过标签来定义的语言，代码都是由标签所组成。
HTML文档
文档包含：HTML标签和纯文本
文档扩展名：.html 或 .htm
HTML文档也被称为“网页”
浏览器的作用是读取 HTML文档，他不会显示 HTML 标签，而是使用标签来解释页面的内容，并以网页的形式显示。
注：
超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。超文本更是一种用户介面范式，用以显示文本及与文本之间相关的内容
超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。
2 格式
html样例：
<html>
<head>
<title>这里是标签</title>
</head>
<body>
这里是网页要显示的内容
</body>
</html>
用适当的标签包括数据，通过设置不同的属性可以显示不同的样式。
如：<font color="red">要显示的内容</font>
3 HTML标签
格式：
一般标签：<标签名> 数据内容 </标签名>
单个标签：<标签名/>
注：Html文档不区分大小写。但W3C建议使用小写。
扩展：xhtml强制使用小写。
3.1 HTML元素
HTML 元素指的是从开始标签到结束标签的所有代码
HTML 文档由嵌套的 HTML 元素构成。
例如：
<html> 元素定义了整个 HTML 文档。
<head> 标签用于定义文档的头部，它是所有头部元素的容器。
<head> 中的元素可以引用脚本、确定样式表、提供元信息等等
<body> 元素定义了 HTML 文档的主体。
3.2 HTML属性
属性为 HTML 元素提供附加信息
属性总是以名称和值成对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定
格式：
<标签名 属性名='属性值'> 数据内容 </标签名>
<标签名 属性名='属性值' />
注意：
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
不用引号也可以，属于不良好的书写规范
小结：为了操作数据，需要用合适的标签对数据进行封装，通过标签中的属性对数据进行操作。
3.3 常用标签
3.3.1 字体标签
<font> 规定文本的字体、字体尺寸、字体颜色。
格式：<font color="颜色" face="字体"size="大小"></font>
属性：
<1> color：指定文字的颜色
值：1.直接定颜色的英文名：red、blue、green
2.用十六进制来表示#ff000 建议用工具选取
3.rgb(255,0,0) 不常用
<2> size：指定文字的大小
值：1--7之间的数字。
<3> face：指定文字的字体
值：黑体、宋体、微软雅黑
其他标签： <b>：字体加粗 <i>：加下划线 <u>：斜体字
<p>：段落标签，定义一个段落文字
属性：align：指定文字的对齐方向
值：left、right、center
3.3.2 标题标签
标题（Heading）是通过 <h1> -- <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。其实就是某个字号和粗体的组合
其他标签：
<sup>：上标 <sub>：下标
注意：
浏览器会自动地在标题的前后添加空行。
标题标签只用于标题，不要仅仅是为了产生粗体或大号的文本而使用标题，搜索引擎使用标题为您的网页的结构和内容编制索引。
3.3.3 实体 (特殊字符)标签
格式：&实体名称; 或 &实体编号;
注意：实体名称有的浏览器不支持，编号一般都支持
3.3.4 辅助标签
注释：<!-- 内容 -->
换行：<br/>
水平线：<hr/>
属性有：align="[center][left][right]"
size="10px" 象素值
width="[px][%]"
3.3.5 列表标签
列表标签：
dl：声明列表
子标签：dt 指定列表表头
dd指定列表项
格式：
<dl>
<dt>列表头
<dd>列表项
*课后练习：dl中嵌套dl
无符号列表：
ul (unsingle list)：声明无符号的列表
属性：type
值：disc实心黑点、square黑色方块 、circle空心圆 (默认)
子标签： li (list item)
格式：
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
有序列列表：
ol：声明有序列表
type属性，规定列表的类型，取值：A 、a、 I 、i 、1
start属性，规定从第几个开始
子标签：li
3.3.6 图像标签
图像由<img> 标签定义
格式：<img src="图片路径" alt="提示"/>
常用属性：
src 指定图片的数据源
alt 属性用来为图像定义一串预备的可替换的文本，当图片不能显示将进行显示
width 指定宽度
height 指定高度
3.3.7 热点地图标签
<map> 标签定义图像映射，指的是带有可点击区域的一幅图像。例如：中国地图每个省所对应的区域。map：声明热点地图
<map>中需嵌套<area>标签，用于定义图像映射中的区域。子标签：area声明一个区域
格式：<area shape="" coords=""href="" alt=""></area>
属性：
shape：定义区域的形状。
值：rect矩形、ploy多边形、circle圆形
coords：描述形状的参数，规定区域的 x 和 y 坐标
href：定义此区域的目标 URL。
例如：
圆形：shape="circle"，coords="x,y,r"。x和y圆心的位置，r半径
多边形：shape="poly"，coords="x1,y1,x2,y2,x3,y3,..."。
矩形：shape="rect"，coords="x1,y1,x2,y2"。
<map>标签与<img>一起使用
例如：
<imgsrc="Sunset.jpg" alt="图片说明文字" usemap="#Map" />
<mapname="Map">
<area shape="rect"coords="50,59,116,104" href="1.html" />
<area shape="circle" coords="118,203,40"href="2.html" />
</map>
3.3.8 超链接标签
■重要！HTML 使用超级链接<a>与网络上的另一个文档相连。
格式1：<a href="" target="">显示内容</a>
属性：
<1> href：指向要链接的目标资源
值：url
url格式：
http://www.itheima.com指向一个网路资源
www.itheima.com指向一个本地资源文件
mailto.lyc@itcast.cn给指定邮箱发送邮件
thunder:adsljljfa打开迅雷，下载指定资源
<2> target：可以定义被链接的文档在何处显示
_blank在新窗口中打开被链接文档。
_self默认。在相同的框架中打开被链接文档。
_parent在父框架集中打开被链接文档。
_top在整个窗口中打开被链接文档。
framename在指定的框架中打开被链接文档
格式2：<a name="">显示内容</a>
在文档中定义一个锚标记，可在其他地方直接跳转
属性：
name：规定锚的名称
href：指向要链接的目标资源
使用：将#符号和锚名称添加到URL的末端，就可以直接链接到当前文档某一章节内容
例如：<a href=“index.html#itcast”>itcast章节</a>
完整示例——跳转的格式：
<a name="name1">显示内容</a> （前面定义一个锚）
<a href="#name1">回到name1</a>（在这里，点击后，返回到锚处）
注意：在href属性值中要先加一个#
3.3.9 表格标签
<table> 定义表格
属性：
border指定边框的厚度
width
height
align 指定对齐的方式
collspacing：单元格之间的距离
collpadding：单元格与内容之间的距离
子标签：
tr：定义表格的行。
td：定义表格单元。
属性：colspan 设置该单元格占多少列
rowspan 设置该单元格占多少行
其他子标签：
caption：定义表格的标题，必须紧跟在table后面
属性：align 指定标题的位置。
th：定义表格的小标题，将内容的加粗居中显示
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
如果使用 thead、tfoot 以及 tbody 元素，必须全部使用。
出现次序是：thead、tfoot、tbody，浏览器就可以在收到所有数据前呈现页脚
好处：无须全部加载完成就能显示也变
<col /> 定义用于表格列的属性。
<colgroup/> 定义表格列的组。
表格格式示例：
<table>
<tr>
<td>第一格</td>
</tr>
......
</table>
3.3.10 框架标签
frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。多与body作为网站的结构使用。、
<frameset>仅仅会规定在框架集中存在多少列或多少行。必须使用 cols 或 rows 属性来确定列或行
<frame>标签定义了放置在每个框架中的 HTML 文档。
格式：<framesetcols="" | rows=""><frame src="">
属性： cols 定义框架集中列的数目和尺寸。
rows 定义框架集中行的数目和尺寸。
取值：像素、百分比、* (多个值使用逗号分隔，*表示剩余的其他所有)
例如：<framesetcols=“100px,200px,*”> 表示3列，第一列100像素，第二列200像素，其他的都是第三列的宽度
注意：<frameset>标签不能和<body>标签一起使用
子标签：<frame /> 定义一个框架 用于显示指定的网页
属性：
①scrolling 是否在 iframe 中显示滚动条。
值：auto 在需要的情况下出现滚动条（默认值）。
yes 始终显示滚动条（即使不需要）。
no 从不显示滚动条（即使需要）。
②noresize 设置是否可以改变大小
值：noresize
③frameborder
值：0|1 设置是否显示边框线
3.3.11 表单标签
格式：<formaction="" method=""></form>
属性：
action：规定当提交表单时，向何处发送表单数据。指定提交的地址，url。
method：规定如何发送表单数据。 指定提交的方式。
取值：post：将要发送的参数拼装在地址栏中发送，发送的内容有长度限制
get：参数不再地址栏
注意：当提交表单时，表单数据将发送到<form>action指定的页面，数据是依name=value的形式传递，所以必须给需要传递数据的表单元素提供name属性。
post与get底层的不同之处：（请求数据的格式）
get post
| 请求行：参数附加在请求行中 |
| 请求行 |
| 请求头 |
| 请求头 |
|
|
| 请求体：发送的参数会添加在请求体中 |
其他表单标签：
<1>input——用户输入标签
格式：<input type="" name="" value=""/>
属性：
name：元素的名称
value：元素的值
type：元素类型，确定显示风格
值：①type="text" 输入的是文本内容
②type="password" 输入的是密码，隐式
③type="submit" 默认的提交按钮，将form表单中所有的输入标签的name属
性值和输入的内容发送给服务器
④type="reset" 重置表单
⑤type="radio" 单选框，单选框为name属性值分组，传递的值为value属性值
⑥type="checkbox" 复选框，以属性name的属性值作为一组的分类，即同一
类的多选框应有相同的name属性值，传递的值为name属性值和value值。
<2>select——下拉框选择器标签
子标签：option
格式：
<selectname="提交的名称">
<option value="如果选中，提交的值">浏览器显示的内容</option>
<option value="value2">xxx</option>
....
</select>
<3>textarea——多行文字标签
格式：<textarearows="" cols="">
cols ：规定文本区内的可见宽度。（以平均字符数计）
rows ：规定文本区内的可见行数。
3.3.12 头标签
头元素内部的标题信息不会显示在浏览器窗口中。
根据HTML标准，仅有几个标签在 HTML 的头部分是合法的。它们是：
<base>,<link>, <meta>, <title>, <style> 和 <script>。
具体来说：
<title> 定义文档标题。
<base> 定义页面中所有链接的基准 URL。
格式：<base href="" />
href：规定页面中所有相对链接的基准 URL
<link> 定义资源引用。
格式：<link rel=""type="" href="" />
rel ：定义当前文档与被链接文档之间的关系。
type ：规定被链接文档的 MIME类型。
href ：定义被链接文档的位置。
例如：<link rel=“stylesheet”type=“text/css” href=“theme.css”/>引用CSS文档
<meta> 定义元信息。
格式1：<meta name="" content="" />
格式2：<meta http-equiv="" content="" />
content：定义与 http-equiv 或 name 属性相关的元信息
name：把 content 属性关联到一个名称。
name="keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某
些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
http-equiv：把 content 属性关联到 HTTP 头部。
例如：
设置编码：<metahttp-equiv="content-type" content="text/html;charset=UTF-8">
刷新页面：<metahttp-equiv="refresh" content="3;url=http://www.itcast.cn"/>
<style> 标签用于为 HTML 文档定义样式信息。
格式：<styletype="text/css">css样式</style>
例如：
<style type="text/css">
h1 {color:red}
</style>
<script>标签用于定义客户端脚本，比如JavaScript。
格式：<script type=""src="">
type MIME-type 指示脚本的 MIME 类型。
src URL 规定外部脚本文件的 URL。
例如：
编写javascript代码
<script type="text/javascript">
document.write("Hello World!")
</script>
引用javascript文件
<script type="text/javascript"src="myscripts.js"></script>
3.3.13 页面设计的原则与细节
符合行业要求，色调搭配要求与行业相符。
政府机关：白深蓝、白红
邮政与铁路：白浅绿
广告与传媒：白橘、白红、白黄
医院：白天蓝
艺术行业：黑白、白黑
女性：婚庆？白粉、白红
计算机？白深蓝
3343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
