HTML 部分常用属性、组成属性|...超链接、路径、锚点、列表、滚动、URL编码、表格、表单、GET和POST
URL地址就是我们所说的网址：www.jd.com
浏览器内核，渲染引擎
Ie内核：triteent
谷歌/欧鹏：blink
火狐：gecko
苹果：webkit
渲染引擎是出现兼容性的根本问题
-html概念:hyperText MarkupLanguage(超文本标记语言)
Html结构标准
[*]<!DOCTYPE html>//声明文档类型
[*]<html>//根标签
[*]<head>//头部标签
[*]<title></title>//标题标签
[*]</head>
[*]<body>//主题标签
[*]</body>
[*]</html>
后缀名不能决定文件的格式，只能决定文档打开的方式
Html标签分类
超文本：超链接（实现页面跳转）
结构规则：HTML（Hyper Text Markup Language）
样式规则：CSS（Cascading Style Sheets）
行为规则：JS（JavaScript）
Html标签分类： 1双标签 2单标签
Html标签之间的关系: 1嵌套关系 2并列关系
Html单标记：
横线标记 <hr/> 换行标记<br/>
注释标记<!– 注释文本--> ctrl+/
Html双标记
-标题标记 <hn></hn> n 取值1-6
-段落标记<p></p>
标签名字
标签作用
标签属性
Display
<!DOCTYPE >
定义文档类型
<p></p>
段落标签，文本内容（上下自动产生一个空白行，<br/>不会）
<h1-h6>
标题标签：一个页面只能出现一次h1
因为H1搜索权重高
影响SEO搜索优化
块级元素
<font>
文本标签
<a>
定义一个超链接
Href=“链接的网址”
title=“提示的文字”
target=“链接在何处打开”
Line
<abbr>
定义缩写
Title=“缩写前的全称”
Line
<area>
定义热点，总是嵌套在<map>中实用
[*]<img src="images/2s.jpg" usemap="#name1" />
[*]<map name="name1">
[*]<area shape="circle" coords="0,0,50" href="#">
[*]</map>
Alt：定义替换的文字
Cords：热点坐标值
圆形（circle）：（x，y，r）
X,y定义了远点坐标，R半径
方形（rect）：（x1,y1,x2,y2,）
X1,y1:定义了左上角顶点
2x,y2:定义了右下角顶点
(网页图片左上角坐标是：0，0)
Href：目标的链接
Target：何地打开链接
图片的usemap属性要和map的那么属性一样，并且图片的usemap属性值要加井号#
Base
为页面内所有链接规定默认地址或者默认目标
位于head内部
Href=“链接地址URL”
Target=“在何地打开链接”
Bdo
定义文字方向
Dir=“ltr（左）/rtl（右）”
Body
定义文档的主题
Button
定义按钮
Disabled=“disabled”禁用此按钮
Name：按钮名称
Type=“sibmit/reset/button”
提交/重置/普通按钮
Value=“按钮的初始值”
Line
Caption
定义表格标题，必须紧跟table标签，只能对每个标签定义一个标题，通常居中与表格之上
Code
定义计算机代码文本
Col
为一个或多个列设置属性
Span：规定行横跨的列数
Align水平对其方式
Valign：垂直对其方式
Div
定义文档中的分区
Dl，dt，dd
自定义列表
Form
表单标签
Frame
定义一个框架
Frameset
定义一个框架集
Col：定义框架的列数
Rew：定义框架水平行
Img
定义图像
Src=“图像路径”
Alt=“替换文本”
Title=“提示文字”
Width、height
Input
定义输入控件
Type=“text/button/password/checkbox/radio/submit/reset”
文本/按钮/密码/复选框/单选框/提交按钮/重置按钮
Value=“元素的默认值”
Lable
为input元素定义标注，
Lable属性的for应与被绑定的元素的id元素相同
Link
定义文档与外部资源的联系，最常见的用途是链接样式表
Charset=“链接文档的字符编码方式”
Href=“被链接文档的路径”
Rel=“当前文本与被链接的文本的关系”
Rev=“定义被链接的文本与当前文本的关系”
Map
定义热点链接
Id/name
Meta
定义文档的元数据
Content=“内容”
http-equiv=“把content属性关联到http头部”
Name=“description/keywords/”
Object
定义内嵌对象
Ol、ul、
定义有序/无序列表
Select>Option
定义下拉列表
Selected=“selected”定义默认被选中项
Value=“定义被发往服务器的值”
Disabled=”disabled”被禁用的项
Span
定义文档中的行内元素
Line
Style
定义内嵌式样式表
Type=“text/css”
Sub/sup
定义下标/上标文本
Table/tr/td
定义表格
Border=“边框”
Th
定义表头单元格
<tr><th></th></tr>
Textarea
定义多行文本输入框
Cols=“文本可见宽度”
Rows=“文本可见高度”
Readonly=“readonly”规定只读
Tfoot
定义表格页脚
<font></font> 控制网页文字颜色，大小，字体。
<strong></strong>与<b></b> 文字加粗
<em></em>与<i></i> 文字斜体
<ins></ins>与 <u></u> 文字下划线
<del></del> 与 <s></s> 文字删除线
超链接
href：链接到的地址（必写属性）
target：新链接在哪打开 _blank 在新窗口打开
title：提示文本
<base target=”_blank”>写在head之中，作用是让所以的超链接都在新窗口打开
Base 作用是使页面内所有超链接指向同一目标或者同一个链接
路径
●相对路径：相对于自己出发找其他文件
跳出文件夹就要使用 （ . . / ）
★往下一级目录用（ / ） 往上一级目录用（ . . / ）
●绝对路径：文件完整的路径
<Img src=”图像URL” alt=”图像不能显示时的替换文本” title=”鼠标悬浮时显示的内容” width/height=”XX”/ >
<img src=”路径” alt=“替换图片文本，对SEO优化有好处”title=“提示文本（鼠标放到图片上显示的文字）”
单独更改img的宽或者高 图片等比缩放 不会变形
同时设置img的宽高会导致图片变形
没有定义宽高的时候按照图片尺寸的100%的尺寸显示
<a hrf=”跳转目标” target = “目标窗口弹出方式_self / _blank”> 文本或图像 </a>
<a href=”#”>此处为空链</a>
锚点：
定义<a id=“md”></a>
<a href = “#id”>链接文本</a>
注意需要英文的; 结尾才生效
特殊字符
描述
字符的代码
空格符
 ；
<
小于号
<；
>
大于号
>；
&
和号
&；
￥
人民币
&；
©
版权
©；
®
注册商标
®；
°
摄氏度
°；
±
正负号
± ；
×
乘号
×；
÷
除号
÷ ；
²
平方2（上标2）
²；
³
立方3（上标3）
³；
音乐标签
Embed
Hidden=“true”隐藏播放器
列表（list）分为 ：
无序列表UL
有序列表ol
自定义列表 dl
无序列表ul：
<UL>
<li> 列表项目1</li>
</ul>
list-style:none；取消列表样式 disc/square/circle/
下图
有序列表ol
< ol type = 1/ a / A / i / I / start=” 2 / b / B / ii /II / ”>
< li > </li>
</ol>
自定义列表dl
<dl>
<dt>123</dt>
<dt>weqwe</dt>
<dt>qweq</dt>
</dl>
滚动marquee
HTML头部标签
<head>
定义关于文档的信息
<title>
定义文档标题
<base>
定义页面上所有链接的默认地址或默认目标
<link>
定义文档与外部资源的关系
<meta>
定义HTML文档的元数据
<script>
定义客户端脚本
<style>
定义文档的样式信息
[*]
Base元素
[*]<head>
[*] <base href="http://www.w3school.com.cn/images/" />
[*] <base target="_blank" />
[*]</head>
Base标签为页面所有链接都指向默认地址或者默认目标
Link元素
[*]<head>
[*]<link rel="stylesheet" type="text/css" href="mystyle.css" />//外链样式
[*]<link rel=”shortcut icon（只用icon也可以）” type=“image/x-icon” href=”图标路径”> //网页快捷图标
[*]</head>
Link：标签定义文档与外部资源之间的关系
a) Rel：属性定义该标签关联的样式表标签
b) Href：定义该便签所链接的外部资源的URL地址，可相对地址，可以是绝对地址
c) Type：定义文档类型
d) Media：设置属性调用的资源主要针对什么设备而使用
[*]Screen：针对计算器机显示器的样式
[*]All：所以的设备
[*]<style type=”text/css”>
[*]@import URL(“css/base.css”);
[*]</style>//不建议使用
Meta元数据
元数据metadata是关于数据的信息，元数据不会显示在页面上，对与机器是可读的。
Meta元素被用来规定页面的描述、关键词、文档的作者、最后的修改时间以及其他元数据。
Meta标签始终位于head元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或者其他web服务。
◆ 一些搜索引擎会利用meta元素的name和conteng属性来索引你的页面
Meta 标签介绍
Meta属性有两种：name和http-equiv 。
<meta name = “generator”content = ““”> 用以说明生成工具
<meta name = “keywords”content = “”>向搜索引擎说明自身网页关键词
<meta name = “description” content =”“>告诉搜索引擎本站点主要内容
<meta name = “Author” content = “你的名字”> 告诉其制作者的名字
<meta name = “Robots” content = “all/none/index/noindex/follow/nofollow”>
设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。
http-equiv属性
<meta http-equiv=”content-Type” content = “text/html”; charset=gb_2312”>
描述网页属性 编码
<meta http-equiv=”refresh” content=”5 ; URL=http://www.123.com”/>
网页跳转
URL编码
URL只能使用ASCII字符集通过因特网进行发送
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
字符集 charset
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312
gb2312 简单中文
GBK包含全部中文字符繁体
BIG5 繁体中文
UTF-8则包含全世界所有国家需要用到的字符
表格 table
最简单的表格 <table>
<caption>表格的名字</caption>
< tr >
<th>加粗居中</th>
<td>普通</td>
</tr>
</table>
< table border = “0”> 边框
< table cellspacing = “0”>单元格与单元格之间的距离
< table cellpadding = “0”>文字与单元格之间的距离
< tablewidth= “0”> 宽度
< tableheight= “0”>高度
< tablealign= “ lift / right / center ”> 对齐方式
< tablebgcolor= “ white/ red/...”>背景色
表格的结构
在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体 如下所示：
<thead></thead>：用于定义表格的头部，必须位于<table></table>标记中，一般包含网页的 logo和导航等头部信息。
<tfoot></ tfoot >：用于定义表格的页脚，位于<table></table>标记中<thead></thead>标记之 后，一般包含网页底部的企业信息等。
<tbody></tbody>：用于定义表格的主体，位于<table></table>标记中<tfoot></ tfoot >标记之 后，一般包含网页中除头部和底部之外的其他内容。
Colspan 合并同一行rowspan 合并同一列
表单 form
表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、 重置按钮等。
提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表 单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
<from name = “from_name” action = “url” method = “get/post”> ...</form>
Name：定义表单的名称
Method ： 传送方式 默认get
Get：通过地址栏提交信息，安全性差
Post：通过文件提交信息，安全性高
Action： 指定表单处理程序的位置（服务器端脚本处理程序）
Fieldset ： 把表单分组
Legend ：分组名称
http方法
在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST。
get：从指定的资源请求数据
有关 GET 请求的其他一些注释：
[*]GET 请求可被缓存
[*]GET 请求保留在浏览器历史记录中
[*]GET 请求可被收藏为书签
[*]GET 请求不应在处理敏感数据时使用
[*]GET 请求有长度限制
[*]GET 请求只应当用于取回数据
Post：向指定的资源提交要被处理的数据
有关 POST 请求的其他一些注释：
[*]POST 请求不会被缓存
[*]POST 请求不会保留在浏览器历史记录中
[*]POST 不能被收藏为书签
[*]POST 请求对数据长度没有要求
比较 GET 与 POST
GET
POST
后退按钮/刷新
无害
数据会被重新提交
书签
可收藏为书签
不可收藏为书签
缓存
能被缓存
不能缓存
编码类型
application/x-www-form-urlencoded
application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史
参数保留在浏览器历史中
参数不会保存在浏览器历史中。
对数据长度的要求
是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。
无限制
对数据类型的限制
只允许 ASCII 字符。
没有限制。也允许二进制数据。
安全性
与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。
POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中
可见性
数据在 URL 中对所有人都是可见的。
数据不会显示在 URL 中。
Input控件
< Input type = “控件类型”>
控件语法
含义
<inputtype=”text” name=“”>
文本输入框
<inputtype=“password”>
密码输入框
<inputtype=“radio” name=“gender”>
单选框
<inputtype=“checkbox”>
复选框（多选框）
<input type=“file”>
文件上传控件
<inputtype=“button”>
普通按钮 value 设置显示文字
l HTML5表单标签
<Input type=“url”>：网址提交；
<Input type=“date”>：显示日期控件
<Input type=“time”>：时间控件
<input type=”emial”>：邮件控件
<input type=”number” step=“5”(默认1，值是几每次跳几)>：数字控件
<input type=”range” step=“5”>：滑块控件
Step：默认1，值是几每次跳几
Textarea 控件
textarea控件可以轻松地创建多行文本输入框
<textera cols = “每行显示的字符数” rows = “ 显示的行数” > 文本提示</textera>
Select 控件
用来制作下拉菜单
<select size = “ 指定下拉菜单的可见选项 ”multiple = “multiple”>
<option> 选项1</option>
<optionselected = “selected”> 选项2</option>
</select>
Select>option：下拉列表
Selectked：selectked：默认选项
Multiple：multiple 可多选
Size：定义列表显示的项
Optgroup：对option进行分组
<fieldset>
<!-- 表格名字 -->
<legend>账户信息</legend>
<!-- 表格的内容 -->
<font color="red" size="2">*</font>用户名:<input type="text"><br><br>
<font color="red" size="2">*</font>密 码：<input type="password">
<br><input type="radio" checked="checked">男 <br>
<input type="radio">女
</fieldset>
<fieldset>
HTML脚本
JavaScript是HTML文档具有更强的动态性和交互性
JavaScript最常用于图片操作、表单验证、动态内容更新
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：
[*]<script type="text/javascript">
[*]document.write("Hello World!")
[*]</script>
[*]<noscript>Your browser does not support JavaScript!</noscript>
HTML统一资源定位器URL
URL（Unifrom Resource Locator）也被称为网址
URL可由单词组成，比如www.taobao.com，或者因特网协议（IP）地址：192.168.12.122。大多数人上网的时候会输入网站的域名。
当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。
统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。
网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：
scheme://host.domain:port/path/filename
◆解释：
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
Scheme（服务类型）
访问
用于…
http
超文本传输协议
以http://开头的普通网页，不加密
https
安全超文本传输协议
安全网页，加密所有信息交换
ftp
文件传输协议
用于将文件上传或者下载
File
您计算机上的文件
HTML WEB Server
ISP：因特网服务提供商
大多数小公司会把网站存放到由 ISP 提供的服务器上
HTML多媒体
Web 上的多媒体指的是音效、音乐、视频和动画。
HTML5多媒体标签
<embed src=“路径” width=“” height=“”></embed>
XHTML
什么是XHTML？
[*]XHTML 指的是可扩展超文本标记语言
[*]XHTML 与 HTML 4.01 几乎是相同的
[*]XHTML 是更严格更纯净的 HTML 版本
[*]XHTML 是以 XML 应用的方式定义的 HTML
[*]XHTML 是 2001 年 1 月发布的 W3C 推荐标准
[*]XHTML 得到所有主流浏览器的支持
为什么使用 XHTML？
因特网上的很多页面包含了“糟糕”的 HTML。
XHTML 是一种必须正确标记且格式良好的标记语言
与 HTML 相比最重要的区别
文档结构
[*]XHTML DOCTYPE 是强制性的
[*]<html> 中的 XML namespace 属性是强制性的
[*]<html>、<head>、<title> 以及 <body> 也是强制性的
[*]XHTML 元素必须正确嵌套
[*]XHTML 元素必须始终关闭
[*]XHTML 元素必须小写
[*]XHTML 文档必须有一个根元素
[*]XHTML 属性必须使用小写
[*]XHTML 属性值必须用引号包围
[*]XHTML 属性最小化也是禁止的
元素语法
[*]XHTML 元素必须正确嵌套
[*]XHTML 元素必须始终关闭
[*]XHTML 元素必须小写
[*]XHTML 文档必须有一个根元素
属性语法
[*]XHTML 属性必须使用小写
[*]XHTML 属性值必须用引号包围
[*]XHTML 属性最小化也是禁止的
XHTML 文档必须进行 XHTML 文档类型声明
（XHTML DOCTYPE declaration）。
如何从 HTML 转换到 XHTML
[*]向每张页面的第一行添加 XHTML <!DOCTYPE>
[*]向每张页面的 html 元素添加 xmlns 属性
[*]把所有元素名改为小写
[*]关闭所有空元素
[*]把所有属性名改为小写
[*]为所有属性值加引号
页:
[1]