正文

HTML 部分常用属性、组成属性|...超链接、路径、锚点、列表、滚动、URL编码、表格、表单、GET和POST

IP云
IP云V管理员/3 阅读
08/06
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

URL地址

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

浏览器内核，渲染引擎

Ie内核：triteent

谷歌/欧鹏：blink

火狐：gecko

苹果：webkit

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

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

Html结构标准

  1. <!DOCTYPE html>    //声明文档类型
  2. <html>//根标签
  3. <head>//头部标签
  4. <title></title>//标题标签
  5. </head>
  6. <body>//主题标签
  7. </body>
  8. </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>中实用

  1. <img src="data:images/2s.jpg" usemap="#name1" />
  2. <map name="name1">
  3. <area shape="circle" coords="0,0,50" href="#">
  4. </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>

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

特殊字符

描述

字符的代码

 

空格符

 &nbsp；

< 

小于号

&lt；

> 

大于号

&gt；

&

和号

&amp；

￥

人民币

&amp；

©

版权

&copy；

®

注册商标

&reg；

°

摄氏度

&deg；

±

正负号

&plusmn ；

×

乘号

&times；

÷

除号

&divide ；

²

平方2（上标2）

&sup2；

³

立方3（上标3）

&sup3；

音乐标签

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元素

  1. <head>
  2.     <base href="http://www.w3school.com.cn/images/" />
  3.     <base target="_blank" />
  4. </head>

Base标签为页面所有链接都指向默认地址或者默认目标

Link元素

  1. <head>
  2. <link rel="stylesheet" type="text/css" href="mystyle.css" />  //外链样式
  3. <link rel=”shortcut icon（只用icon也可以）” type=“image/x-icon” href=”图标路径”>   //网页快捷图标
  4. </head>

Link：标签定义文档与外部资源之间的关系

a) Rel：属性定义该标签关联的样式表标签

b) Href：定义该便签所链接的外部资源的URL地址，可相对地址，可以是绝对地址

c) Type：定义文档类型

d) Media：设置属性调用的资源主要针对什么设备而使用

  1. Screen：针对计算器机显示器的样式
  2. All：所以的设备
  1. <style type=”text/css”>
  2. @import URL(“css/base.css”);
  3. </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”  >  文字与单元格之间的距离

< 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地址，以及数据提交到服务器的方法。如果不定义表单  域，表单中的数据就无法传送到后台服务器。

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

                  控件语法

                  含义

<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控件可以轻松地创建多行文本输入框

<textera cols = “每行显示的字符数” rows = “ 显示的行数” > 文本提示</textera>

Select 控件

用来制作下拉菜单

<select   size = “ 指定下拉菜单的可见选项 ”  multiple = “multiple”>

<option  > 选项1</option>

<option  selected = “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 元素中的内容：

  1. <script type="text/javascript">
  2. document.write("Hello World!")
  3. </script>
  4. <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

  1. 向每张页面的第一行添加 XHTML <!DOCTYPE>
  2. 向每张页面的 html 元素添加 xmlns 属性
  3. 把所有元素名改为小写
  4. 关闭所有空元素
  5. 把所有属性名改为小写
  6. 为所有属性值加引号