HTML5知识总结,看这篇就够了

整理常用的html的基础知识!

一、创建HTML文档

###1、基本的文档结构

1.1 DOCTYPE元素

注:每一个HTML文档都必须以DOCTYPE元素开头。

作用:告知浏览器处理的是HTML文档、标记文档内容的html所属的版本

1.2 html元素

根元素,表示文档中html部分的开始。

1.3 head元素

包含文档的元数据,向浏览器提供有关文档内容和标记信息,还包含脚本和外部资源的引用。(其中必须有title元素)

1.4 body元素

包含文档内容,紧跟head之后,html的第二个子元素。

2、元数据元素说明文档

2.1 设置文档标题

<title>标题名称</title>

2.2 元数据说明文档meta

meta元素用来定义文档的各种元数据(每个meta元素只能用于一种用途,多种用途则添加多个)。

2.2.1 指定名/值元素据对
<meta name="" content="">

其中:

  • name——表示元素据类型
  • application name——当前页所属web应用系统的名称
  • author——当前页的作者名
  • description——当前页的说明
  • generator——用来生成html的软件名称(通常用于以Ruby on Rail、ASP.NET等服务器端框架生成HTML页的情况下)
  • content——提供值

例如:

<meta name="author" content="qixige">
<meta name="description" content="a simple example">
2.2.2 声明字符编码
<meta charset="utf-8">
2.2.3 模拟HTTP标头字段
<meta http-equiv="refresh" content="5"/>

其中:

http-equiv——指定所要模拟的标头字段名称
refresh——以秒为单位指定一个时间间隔,在此时间过去之后将从服务器重新载入当前页面。也可以另行指定一个URL让浏览器载入。如:

<meta http-equiv="refresh" content="5;http://www.apress.com">

default-style——指定页面优先使用的样式表。对应的content属性值应与同一文档中某个style元素或link元素的title属性值相同。
content-type——另一种声明HTML页面所有的字符编码的方法。如:

<meta http-equiv="content-type" content="text/html charset=utf-8">

content——指定字段值

2.3 定义CSS样式

<style type="text/css" media="screen">CSS样式</style>

其中:

  • type——指定样式类型,只有text/css
  • media——表明文档在什么情况下应该使用该元素中定义的样式。
  • all——所有设备(默认值)
  • aural——语音合成器
  • braille——盲文设备
  • handheld——手持设备
  • projection——投影机
  • print——打印预览和打印页面时
  • screen——计算机显示器屏幕
  • tty——电传打字之类的等宽设备
  • tv——用于电视机

2.4 指定外部资源

<link href="" rel="" type="">

其中:

  • href——指定link元素指向的资源的URL
  • rel——说明文档与所关联资源的关系类型
  • alternate——链接到文档的替代版本
  • author——链接到文档的作者
  • help——链接到当前文档的说明文档
  • icon——指定图标资源
  • license——链接到当前文档的相关许可证
  • pingback——指定一个回探服务器
  • prefetch——预先获取一个资源
  • stylesheet——载入外部样式表
  • type——指定所关联资源的MIME类型,如text/css、image/x-icon
2.4.1 载入样式表
<link rel="stylesheet" type="text/css" href="style.css">
2.4.2 为页面定义网站标志
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

3、script元素

<script></script>

3.1 定义文档内嵌脚本

<script>脚本代码</script>

3.2 载入外部脚本库

<script src="脚本文件的URL"></script>

3.3 推迟脚本的执行

<script defer src="脚本文件的URL"></script>

注:只能用于外部脚本文件,对文档内嵌脚本不起作用

3.4 异步执行脚本

<script async src="脚本文件的URL"></script>

二、标记文字

1、超链接

<a href="" hreflang="" media="" rel="" target="" type="">文本内容</a>

其中:

  • href——指定暗元素所指资源的URL
  • hreflang——说明所链接资源使用的语言
  • media——说明所链接资源用于那种设备
  • rel——文档与所链接资源的关系类型
  • target——指定用以打开链接资源的浏览环境
    • _blank——在新窗口或标签页中打开
    • _parent——在父窗框组中打开文档
    • _self——在当前窗口中打开文档(默认)
    • _top——顶层窗口打开文档
    • _<frame>——在指定窗框中打开
  • type——说明所链接资源的MIME类型

1.1 链接的表现形式

1.1.1 目标文档为下载资源

href 属性值,指定的文件名称,就是下载操作(rar,zip)

1.1.2 电子邮件链接

前提:计算机中必须安装 邮件客户端,并且配置好了 邮件信息。

<a href="mailto:zhaoxu@tedu.cn">联系我们</a>
1.1.3 返回页面顶部的空链接
<a href="#">内容</a>
1.1.4 链接到Javascript
<a href="javascript:">内容</a>

1.2 链接-锚点

用于在页面中做一个记号,允许页面随时随地的跳转到这个记号的位置处。

使用方式:

1、 定义锚点(做记号)

使用 a 标记的 name 属性
    <a name="NO1">衣装鞋帽</a>
使用任何一个标记的 id 属性
    <ANY id="锚点名称"></ANY>

2、链接到锚点上(跳到记号位置处)

<a href="#锚点名称">内容</a>
ex:<a href="#NO1">...</a>

以上方式,链接到本页的锚点处。

链接到其他页面的锚点处:

<a href="页面url#锚点名称"></a>

三、结构标记

1、什么是结构标记

H5中新标记,用来表示页面布局的,从而提升标签的语义性

2、结构标记分类

<header></header>

作用:用于定义文档的头部

注意:允许在页面中出现多次,作为任何部分的头部信息定义

替代: <div id=”header”></div>

<nav></nav>

作用:用于定义页面的导航链接部分。

替代:<div id=”nav”></div>

<section></section>

作用:用于定义文档中的具体组成部分,表示主体内容分

替代:<div id=”main”></div>

<article></article>

作用:用于定义独立于文档主体内容的一些其他内容
比如:论坛中的帖子、新闻信息、博客或微博中的条目

<footer></footer>

作用:用于定义网页中的页脚信息,网页中的靠下部分的内容

<aside></aside>

作用:用于定义页面中的 边栏信息

注意:能使用 结构标记的 地方,尽量使用结构标记,无法被结构标记所取代的,就使用 <div id=””> 一起来实现布局。

四、表格元素

1、表格

1.1 定义表格:

<table></table>

属性:

  • width——表格宽度
  • height——设置表格高度
  • align——设置表格在其父元素中的水平对齐方式。取值:left,center,right
  • border——边框,边框宽度,以px为单位的数值,px可以省略
  • cellpadding——单元格内边距
  • cellspacing——单元格外边距
  • bgcolor——背景颜色

1.2 创建表行:

<tr></tr>

属性:

  • align——该行的内容 水平对齐方式
  • valign——该行的内容 垂直对齐方式。取值:top,middle,bottom
  • bgcolor

1.3 创建列(单元格):

<td></td>

属性:

  • width
  • height
  • align
  • valign
  • bgcolor
  • colspan——设置单元格跨列
  • rowspan——设置单元格跨行

1.4、表格中的其他标记

1、<caption></caption>

作用:为表格定义标题

位置:表格正上方居中显示

<table>
    <caption>标题</caption>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

2、行标题或列标题

列标题:第一行中的每一列,加粗,水平居中的效果显示
行标题:每行里面的第一列, 加粗,水平居中的效果显示
行(列)标题:<th></th>
<th></th>作用 与 <td></td>一模一样

2、表格的复杂应用

2.1 行分组

表头 <thead></thead>
表主体 <tbody></tbody>
表尾 <tfoot></tfoot>
注意:如果不对表格行进行分组的话,那么默认都属于 tbody 中

2.2 不规则表格

每行中的列数,不是统一化的。
跨列:td 的colspan 属性
跨行:td 的 rowspan 属性
注意:无论是跨行还是跨列,被合并的单元格一定从代码中删除出去

2.3 表格的嵌套

在一个表格中,嵌入了另外一个表格,被嵌套的表格必须出现在<td>中。

五、表单

1、作用:表单用于显示、收集信息,并将信息提交给服务器

2、组成:表单form、表单控件

3、表单元素

1.1 语法

<form>允许出现表单控件</form>

1.2 属性

1、action:

  • 定义表单被提交时发生的动作
  • 提交给服务器处理程序的地址
  • 注意:通过 与服务器端人员交流 得到 action 的地址
  • 默认,提交给本页

2、method

  • 作用:定义表单提交数据时的方式
  • 取值:
    • get (默认值)
      • 意义:得到,获取
      • 场合:向服务器要数据时使用
      • 特点:明文提交,所提交的数据时可以显示在地址栏上的-安全性较低。提交数据有大小限制-最大为2KB
    • post
      • 意义:邮寄,邮递
      • 场合:将数据提交给服务器处理时使用(有保密类型数据时)
      • 特点:隐式提交-所提交的内容是不会显示在地址栏上的,安全性较高,无大小限制。
    • put
    • delete

3、enctype

  • 作用:编码类型,即表单数据进行编码的方式,允许表单将什么样的数据提交给服务器
  • 取值:
    • application/x-www-form-urlencoded
      默认值,允许将普通字符、特殊字符都提交给服务器,不允许提交文件
    • multipart/form-data
      允许将文件提交给服务器
    • text/plain
      只允许提交普通字符。特殊字符、文件等都无法提交

4、name: 定义表单的名称

4、表单 - 表单控件

4.1 input 元素(demo——表单类型.html)

<input> 或 <input/>

属性:

  • type(重点)——根据不同的type属性值,可以创建各种类型的输入控件,比如:文本框,密码框,复选框,按钮 等… …
  • value——控件的值即要提交给服务器的数据
  • name——控件的名称,服务器要用
    • 命名规范:匈牙利命名法(控件的缩写+功能名称)
  • disabled——该属性只要出现在标签中,表示的是禁用该控件
4.1.1 文本框与密码框

文本框: 明文显示用户输入的数据

<input type="text" name="txt+名称">

密码框:密文显示用户输入的数据

<input type="password" name="txt+名称">

属性:

  • name——缩写:txt
  • value——表示控件的值、表示控件的默认值
  • maxlength——限制输入的字符数
  • readonly——只读-只能看,不能改(该属性只要出现在标记中,就是只读的意思,不需要给值)
  • placeholder——设置一段提示文字
  • datalist——提供一批值,帮助用户输入需要的数据

例:

<label for="fave">
    水果:<input list="fruitlist" id="fave" name="txtFave">
</label>
<datalist>
    <option value="apples" label="lovely apples">
    <option value="pranges">refreshing oranges</option>
    <option value="cherries">
</datalist>

readonly 与 disabled 的区别:

readonly 只能看,不能改,但是可以被提交
disabled 只能看,不能改,但是不能提交给服务器

注意:对于input来讲,如果不写 type 或者 type值写错的时候,默认都是文本框

4.1.2 单选按钮和复选框
  • 单选按钮:type=”radio”
  • 复选框:type=”checkbox”
  • 属性:
    • name——定义名称
      • radio缩写:rdo
      • checkbox缩写:chk
    • checked——设置默认被选中

还可以对控件进行分组,一组单选按钮和复选框,名称必须相同。

对于单选按钮:一组中的单选按钮,最多只能有一个被选中

4.1.3 按钮

提交按钮:功能固定化,负责将表中中的表单控件提交给服务器

<input type="submit">

重置按钮:功能固定化,负责将所有表单控件的值恢复为初始值

<input type="reset">

普通按钮:无功能,执行客户端的脚本(JS)

<input type="button">

属性:

name——缩写:btn
value——按钮上的显示文本
4.1.4 隐藏域 和 文件选择框

隐藏域:不希望被用户看见,但是要提交给服务器的信息

<input type="hidden">

文件选择框:上传文件所用

<input type="file">

注意:上传文件时,method的值必须为 post;enctype的值必须为multipart/form-data

4.1.5 时间 和 日期
  • data——只能输入日期
  • datatime——只能输入带时区信息的世界时(包括日期和时间)
  • datatime-local——只能输入不带时区信息的世界时(同上)
  • month——是能输入年和月
  • time——只能输入时间信息
  • week——只能输入年及星期信息

5、textarea - 多行文本域

作用:允许用户录入多行数据到表单控件中

语法:

<textarea></textarea>

属性:

  • name——缩写:txt+功能名称
  • readonly——只读
  • cols——指定文本区域的列数, 变相设置当前元素宽度
  • rows——指定文本区域的行数,变相设置当前元素高度

6、选项框

6.1 语法

1、创建选项框

<select></select> 

属性:

  • name——缩写:sel+功能名称
  • size——取值 大于1的话,则为滚动列表;否则就是下拉选项框
  • multiple——设置多选,该属性出现在 <select>中,那么就允许多选(针对滚动列表)

2、选项

<option>显示文本</option>

属性:

  • value——选项的值
  • selected——预选中

注意: 如果不设置selected属性的话,那么选项框中的第一项会默认被选中。

7、其他元素

为控件分组

<fieldset></fieldset>

为分组指定一个标题

<legend></legend>

<label>元素:

功能:关联 文本 与表达元素的,点击文本时,如同点击表单元素一样

语法:

<label>文本</label>

属性:for——表示与该label相关联的表单控件元素的ID值

六、嵌入内容

1、图像

图像格式:
jpeg——图像图像联合专家组
gif——图形接口格式

特点:支持动画
png——可移植网络图形,采用 无损压缩,有8位,24位,32位三种形式;支持 透明色(PNG24位不支持)

图像元素

<img src="" width="" height="">

以 px 或 % 为单位的数值,如果省略单位不写,默认为 px

注意:width 和 height 如果只给一个属性的话,那么另外一个属性会跟着等比缩放

<img width="100px" src="a.jpg">

2、客户端分区响应图

<img src="xx.png" usemap="#mymap" alt="">
<map name="mymap">  //map可以有多个area
    <area href="swim.html" shape="rect" coords="3,3,68,62" alt="">
    <area href="cycle.html" shape="rect" coords="70,5,130,62" alt="">
    <area href="other.html" shape="default" alt="">
</map>

其中,area属性有两类:

第一类:area所代表的图像区域被用户点击后浏览器会导航到URL(href)
第二类:shape和coords,共同起作用,coords的值根据shape而定

rect——矩形

coords="x1,y1,x2,y2"
其中:
    x1——图像左边缘与矩形的左侧距离
    y1——图像上边缘与矩形的上侧距离
    x2——图像左边缘与矩形的右侧距离
    y2——图像上边缘与矩形的下侧距离

circle——圆形

coords="x1,y2,r"
其中:
    x1——图像的左边缘到圆心的距离
    y1——图像的上边缘到圆心的距离
    r——圆的半径

poly——多边形

coords="x1,y1,x2,y2,x3,y3"

(x1,y1)——代表多边形的一个顶点,数值同上
default——默认区域,即覆盖整张图片,不需要coords提供值。

3、另一张HTML文档

<iframe src="" width="" height="">内容</iframe>

内容:当浏览器不支持<iframe>元素时,将显示该文本作为描述信息。

用法:

<a href="fruit.html" target="myframe">我喜欢的水果</a>
<a href="sport.html" target="myframe">我喜欢的运动</a>
<iframe name="myframe" width="300" height="300"></iframe>

HTML5新属性:

  • seamless——指示浏览器把iframe的内容显示的像主HTML文档的一个整体组成部分;默认情况下会有一个边框,如果内容比width和height所指定的尺寸要大,还会出现滚动条。
    • 注意:只有Chrome和Safari6支持
  • sandbox——对HTML文档进行限制。
    • 注:默认情况下,嵌入文档的脚本、表单、插件、指向其他浏览上下文的链接被禁用;通过sandbox设置属性启动。

属性:

  • allow-forms——启用表单
  • allow-scripts——启用脚本
  • allow-top-navigation——允许链接指向顶层的浏览上下文,这样就能用另一个文档替换当前整个文档,或创建新的标签和窗口
  • allow-same-origin——允许iframe里的内容被视为与文档其余部分拥有同一个来源位置
-------------本文结束感谢您的阅读-------------
Mr.wj wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!