设为首页 收藏本站
查看: 1294|回复: 0

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

[复制链接]

尚未签到

发表于 2017-6-22 07:53:20 | 显示全部楼层 |阅读模式
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=”图像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/
  下图
DSC0000.jpg

  有序列表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

DSC0001.png

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则包含全世界所有国家需要用到的字符
DSC0002.png

  表格 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 设置显示文字
   DSC0003.png
  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 控件
  用来制作下拉菜单
DSC0004.png

  <select   size = “ 指定下拉菜单的可见选项 ”  multiple = “multiple”>
  <option  > 选项1</option>
  <option  selected = “selected”> 选项2</option>
  </select>
  Select>option:下拉列表
  Selectked:selectked:默认选项
  Multiple:multiple 可多选
  Size:定义列表显示的项
  Optgroup:对option进行分组
DSC0005.png

  <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、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-386643-1-1.html 上篇帖子: html5基础知识点 下篇帖子: 关于Intel芯片架构的发展史
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表