首页 > > 网页制作 > css >

HTML 部分常用属性、组成属性|...超链接、路径、…

2018-06-24 01:00:13来源：未知阅读 ()

URL地址

就是我们所说的网址：www.jd.com

浏览器内核，渲染引擎

Ie内核：triteent

谷歌/欧鹏：blink

火狐：gecko

苹果：webkit

渲染引擎是出现兼容性的根本问题

-html概念:hyper Text Markup Language (超文本标记语言)

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=”路径” alt=“替换图片文本，对SEO优化有好处” title=“提示文本（鼠标放到图片上显示的文字）”

单独更改img的宽或者高图片等比缩放不会变形

同时设置img的宽高会导致图片变形

没有定义宽高的时候按照图片尺寸的100%的尺寸显示

<a hrf=”跳转目标” target = “目标窗口弹出方式_self / _blank”> 文本或图像 </a>

<a href=”#”>此处为空链</a>

锚点：

定义<a id=“md”></a>

注意需要英文的 ; 结尾才生效

特殊字符	描述	字符的代码
	空格符	&nbsp；
<	小于号	&lt；
>	大于号	&gt；
&	和号	&amp；
￥	人民币	&amp；
?	版权	&copy；
?	注册商标	&reg；
°	摄氏度	&deg；
±	正负号	&plusmn ；
×	乘号	&times；
÷	除号	&divide ；
2	平方2（上标2）	&sup2；
3	立方3（上标3）	&sup3；

音乐标签

Embed

Hidden=“true” 隐藏播放器

列表（list）分为：

无序列表UL

有序列表ol

自定义列表 dl

无序列表ul：

<UL>

</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>weqwe</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 。

设定为all：文件将被检索，且页面上的链接可以被查询；

　　设定为none：文件将不被检索，且页面上的链接不可以被查询；

　　设定为index：文件将被检索；

　　设定为follow：页面上的链接可以被查询；

　　设定为noindex：文件将不被检索，但页面上的链接可以被查询；

　　设定为nofollow：文件将不被检索，页面上的链接可以被查询。

http-equiv属性

描述网页属性编码

网页跳转

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 >

</tr>

</table>

< table border = “0” > 边框

< table cellspacing = “0” > 单元格与单元格之间的距离

< table cellpadding = “0” > 文字与单元格之间的距离

< table width= “0” > 宽度

< table height= “0” > 高度

< table align= “ lift / right / center ” > 对齐方式

< table bgcolor= “ white/ red/...” > 背景色

表格的结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体如下所示：

<thead></thead>：用于定义表格的头部，必须位于<table></table>标记中，一般包含网页的 logo和导航等头部信息。

<tfoot></ tfoot >：用于定义表格的页脚，位于<table></table>标记中<thead></thead>标记之后，一般包含网页底部的企业信息等。

<tbody></tbody>：用于定义表格的主体，位于<table></table>标记中<tfoot></ tfoot >标记之后，一般包含网页中除头部和底部之外的其他内容。

Colspan 合并同一行 rowspan 合并同一列

表单 form

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

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 = “控件类型”>

控件语法	含义
<input type=”text” name=“”>	文本输入框
<input type=“password”>	密码输入框
<input type=“radio” name=“gender”>	单选框
<input type=“checkbox”>	复选框（多选框）
<input type=“file”>	文件上传控件
<input type=“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控件可以轻松地创建多行文本输入框

Select 控件

用来制作下拉菜单

</select>

Select>option：下拉列表

Selectked：selectked：默认选项

Multiple：multiple 可多选

Size：定义列表显示的项

Optgroup：对option进行分组

<input type="radio">女

</fieldset>

HTML脚本

JavaScript是HTML文档具有更强的动态性和交互性

JavaScript最常用于图片操作、表单验证、动态内容更新

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		您计算机上的文件