HTML

  一个最基本的H5骨架长这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="123" />
<meta name="Description" content="123456" />
<title>Document</title>
</head>
<body>

</body>
</html>

标准的div+css页面,只会用到种类很少的标签:div、p、h1、span、a、img、ul、ol、dl、input、i等


头标签head

  head标签表示的是页面的配置,有字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等

  1. 文档声明头:<!DOCTYPE html>,DocType Declaration,简称DTD,DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
  2. 页面语言lang:<html lang="en">,指定页面的语言类型,en、zh-CN。
  3. meta标签:提供相关页面的元信息(meta-information)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--必要,网页标题-->
<title>轻笑Chuckle</title>
<!--必要,网页的编码方式,文件格式要与其声明相符-->
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--视口viewport,适配移动端-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--网页关键词,SEO用-->
<meta name="Keywords" content="轻笑,Chuckle" />
<!--网页描述-->
<meta name="Description" content="宁静致远,倾尘轻笑" />
<!--网页作者-->
<meta name="Author" content="轻笑Chuckle">
<!--3s后跳转百度-->
<meta http-equiv="refresh" content="3;http://www.baidu.com">
<!--指定基础的路径,a链接以此为基准-->
<base href="/">


body标签

  • div、section、article、aside、header、footer
  • p
  • span、em、strong
  • 表格元素:table、thead、tbody、tr、td
  • 列表元素:ul、ol、dl、dt、dd
  • a
  • 表单元素:form、input、select、textarea、button

  HTML标签分为两种:

  1. 文本级标签:p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。(a标签里不能放a和input)
  2. 容器级标签:div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

排版标签

  1. <h1>标题使用<h1><h6>标签定义,有align属性(对齐方式):left、center、right。
  2. <p>段落标签,单独成段,分割网页。有align属性。
  3. <hr/>水平分割线线标签。
  4. <br/>
  5. <div>可以把标签中的内容分割为独立的区块。必须单独占据一行,DIV+CSS来实现各种样式,div标签负责布局、结构、分块,css负责样式
  6. <span>和div的作用一致,但不换行
  7. <center>让元素居中,H5中不使用
  8. <pre>预格式化,让文本不空格和空行,几乎用不着
  9. <!-- 我是 html 注释 -->

字体标签

  1. 特殊字符(转义字符),需要时百度,&nbsp;空格,&lt;小于号<,&gt;大于号>,等
  2. <u>下划线,<s><del>中划线,<i><em>斜体
  3. 弃用:<b> <strong>粗体,<font>字体标签
  4. <sup>上标,<sub>下标

超链接a

 一个文本级标签

  1. 外部链接:<a href="02页面.html">点击进入另外一个文件</a>href超文本地址
  2. 锚链接:
1
2
3
4
5
6
7
8
<!--设置锚点,必须是a标签-->
<!--name属性是HTML4.0以前使用的,id属性是HTML4.0后才开始使用。为了向前兼容,因此,name和id这两个属性都要写上,并且值是一样的-->
<a name="a1" id="a1">a1点</a>
<!--触发锚点-->
<a href="#a1">去a1点</a>
<!--跳转到a.html页面的a1锚点中去-->
<a href="a.html#a1">去a1</a>

 通常p包裹a

超链接的属性

href:目标URL
title:悬停文本。
name:主要用于设置一个锚点的名称。
target:告诉浏览器用什么方式来打开目标页面。target属性有以下几个值:
_self:在同一个网页中显示(默认值)
_blank:在新的窗口中打开。
_top:在顶级窗口中显示


图片标签

<img src="图片的URL" />src中写图片路径

 标签属性:

  1. widthheight
    在 HTML5 中的单位是 CSS 像素,在 HTML 4 中既可以是像素,也可以是百分比
    可以只指定 width 和 height 中的一个值,浏览器会根据原始图像进行等比缩放
  2. alt:当图片无法显示时,代替图片的文本
  3. title:鼠标悬停时出现的文本
  4. align属性,默认bottom

相对路径

.当前目录,..上一层目录

1
2
3
4
5
6
7
<!-- 当前目录中的图片 -->
<img src="img.jpg">
<img src="./img.jpg">
<!-- 上一级目录中的图片 -->
<img src="../img.jpg">
<!-- ../要么不写,要么就写在开头 -->


绝对路径

<img src="C:\img.jpg">C盘图片
<img src="http://img.baidu.com/head.png">网络路径


列表标签

  1. 无序列表<ul>,type=”属性值”;disc(实心原点,默认),square(实心方点),circle(空心圆)
  2. 有序列表<ol>,type=”属性值”;1(阿拉伯数字,默认)、a、A、i、I。结合start属性表示从几开始
    <ul><ol>里放<li>,li是容器级
  3. 定义列表<al>,没有属性,子元素<dt><dd>

  从语义上来说,dt表示名称,dd表示对其的描述,dt、dd都是容器级标签,想放什么都可以。用什么标签,不是根据样子来决定,而是语义(语义本质上是结构)。


表格标签table

  网页中表格由每行<tr>组成,每一行由一个个单元格<td>组成
  <th>加粗的单元格。相当于<td> + <b>

一个表格
1
2
3
4
5
6
7
8
9
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

table的属性
  • border 边框
  • style=”border-collapse:collapse;”单元格的线和表格的边框线合并(表格的两边框合并为一条)
  • widthheight
  • bordercolor 表格的边框颜色
  • align 表格的水平对齐方式left right center,注意:这里不是设置表格里内容的对齐方式,如果想设置内容的对齐方式,要对单元格标签<td>进行设置)
  • cellpadding 单元格和单元格之间的距离(外边距),像素为单位。默认情况下的值为0
  • bgcolor 背景颜色,background 背景图片。背景图片的优先级大于背景颜色。
  • bordercolorlight 表格的上、左边框,以及单元格的右、下边框的颜色,bordercolordark 表格的右、下边框,以及单元格的上、左的边框的颜色 这两个属性的目的是为了设置3D的效果
  • dir 公有属性,单元格内容的排列方式,取值ltr左到右,rtl从右到左
tr的属性
  • dir 公有属性,单元格内容的排列方式,取值ltr左到右,rtl从右到左
  • bgcolor 设置这一行的单元格的背景色
  • height
  • align 一行的内容水平居中显示,取值:left、center、right
  • valign 一行的内容垂直居中,取值:top、middle、bottom
tr的属性
  • bgcolor 单元格的背景色,background 设置这个单元格的背景(图片)
  • height 单元格的高度
  • width 绝对值或者相对值(%)
  • align 内容的横向对齐方式,取值:left right center
  • valign 内容的纵向对齐方式。取值:top middle bottom

单元格的合并

  1. colspan:横向往右合并
  2. rowspan:纵向往下合并

thead、tbody、tfoot

  表格优先按照thead、tbody、tfoot的顺序依次来显示内容(三个标签无需同时存在),如果不写,表格按代码从上到下的顺序来显示
  当表格非常大内容非常多的时候,用thead、tbody、tfoot标签,数据可以边获取边显示。如果不写,则必须等表格的内容全部从服务器获取完成才能显示出来。
  tr和tbody同级,按代码从上到下的顺序来显示


*框架标签

  框架标签用于在一个网页中显示多个页面(html)

  1. <frameset><body>只能二选一。框架标签不能放在<body>标签里面,因为<body>标签代表的只是一个页面,而框架标签代表的是多个页面
  2. 框架的集合用<frameset>表示,然后在<frameset>集合里放入一个一个的框架<frame>
  3. frameset和frame已经从 Web标准中删除,使用iframe代替

*frameset

  <frameset> 框架的集合,一个框架的集合可以包含多个框架框架的集合

frameset的属性
  • rows 水平分割,将框架分为上下部分
  • cols 垂直分割,将框架分为左右部分。
    写法有两种:
  1. 绝对值写法:rows/cols="200,*" *代表剩余的。包含了两个框架:一个占200个像素,另一个占剩下的部分。
  2. 相对值写法:rows/cols="30%,*" *代表剩余的。包含了两个框架:一个占30%,另一个占70%。

 如果想将框架分成很多个,在属性值里用多个逗号隔开。

1
2
3
4
5
6
7
8
<frameset rows="20%,*">
<frame src="1.html"></frame>
<frameset cols="30%,*">
<frame src="1.html"></frame>
<frame src="1.html"></frame>
</frameset>
</frameset>


*frame

  <frame><frameset>的子标签,一个框架显示一个页面。

frame的属性
  • scrolling=”no” 是否要滚动条,默认值是true。
  • noresize 不可以改变框架大小。默认情况下,单个框架的边界是可以拖动的,用了这个属性值,框架大小将固定。
  • bordercolor 框架边框颜色,仅IE生效
  • frameborder=”0”“1” 隐藏或显示边框(框架线)。
  • name 框架名字,用于框架内的超链

内嵌框架

  内嵌框架用<iframe>表示。<iframe>写在<body>中,在其中嵌入html页面

iframe的属性
  • src=”” 嵌入html页面的路径
  • height,width
  • scrolling=”no” 是否需要滚动条。默认值是true。
  • name 名称

表单标签

  表单标签用<form>表示,收集用户信息,用于与服务器的交互。

form的属性
  • nameid 表单的名称,JS来操作或控制表单时使用
  • action 指定表单数据的处理程序
  • method 表单数据的提交方式,一般取值:get(默认)和post


input输入标签

  <input>是一个输入标签,用于接收用户输入或选择

input的属性
  • type=”属性值” 文本类型
    text 文本框,默认
    password 密码框
    radio 单选按钮
    checkbox 多选按钮,name属性值相同的按钮作为一组进行选择,但id必须唯一。
    hidden 隐藏框,在表单中包含不希望用户看见的信息
    button 普通按钮,结合js代码进行使用。
    submit 提交按钮,提交当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字,点击按钮后,整个表单就会被提交到form标签的action属性中指定的那个页面中去
    reset 重置按钮,清空当前表单的内容,并设置为最初的默认值
    image 图片按钮,和submit提交按钮的功能完全一致,图片按钮可以显示图片。
    file 文件选择框,配合JS对文件进行限制和检查
  • checked 将单选按钮或多选按钮默认处于选中状态。当<input>标签设置为type=”radio”或者type=checkbox时,可用此属性
  • value=”内容” 文本框里的默认内容(已经被填好了的)
  • size=”50” 表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符
  • readonly 文本框只读
  • disabled 文本框只读

select下拉列表

  <select>列表中每一选项为<option>

select、option的属性

<select>的属性:

  • multiple 多选(ctrl加左键点击)
  • size=”3” 属性值大于1,则列表为滚动视图,默认属性值为1,即下拉视图。

<option>的属性:

  • selected 预选中

textarea多行文本框

  <textarea>不会省略空格和换行

textarea的属性
  • rows=”4” 文本框行数
  • cols=”20” 文本框列数
  • readonly 文本框只读


fieldset表单分组

  <fieldset>子标签<legend>定义组的标题

fieldset的属性
  • disabled 表单仍然显示,但是禁用
  • form=”另一个表单的id” 让此fieldset也属于该表单一部分
  • name fieldset的名称


label

  label使其中文字内容与<input>绑定,点击文字也能选择选项等

fieldset的属性
  • for=”[id]” label要绑定的input的id


HTML5

  HTML5是新一代开发Web富客户端应用程序整体解决方案。包括:HTML5,CSS3,Javascript API在内的一套技术组合。富客户端具有很强的交互性和体验。


新增的语义标签

  相较于使用class="header"给网页做语义化处理,HTML5本身提供了一些语义化的标签。强调了HTML的职责是描述一块内容是什么(或其意义)。

  常见的HTML结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 头部 -->
<div class="header">
<ul class="nav"></ul>
</div>

<!-- 主体部分 -->
<div class="main">
<!-- 文章 -->
<div class="article"></div>
<!-- 侧边栏 -->
<div class="aside"></div>
</div>

<!-- 底部 -->
<div class="footer">

</div>

  HTML5中这样写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 头部 -->
<header>
<ul class="nav"></ul>
</header>

<!-- 主体部分 -->
<div class="main">
<!-- 文章 -->
<article></article>
<!-- 侧边栏 -->
<aside></aside>
</div>

<!-- 底部 -->
<footer>

</footer>

HTML5语义标签
  • section 区块
  • article 表示主体内容,如文章
  • header 页眉
  • footer 页脚
  • nav 导航栏
  • aside 侧边栏
  • figure 媒介内容分组
  • mark 标记
  • progress 进度
  • time 日期

H5中的表单

HTML5表单中input新增的类型
  • email 只能输入email格式,自带格式验证
  • tel 手机号码
  • url 只能输入url格式
  • number 只能输入数字。
  • search 搜索框
  • range 滑动条
  • color 拾色器
  • time 时间
  • date 日期
  • datetime 时间日期
  • month 月份
  • week 星期

新表单标签

  • <datalist> 数据列表,用于数据自动提示
  • <keygen> 用于验证用户,本质是密钥对生成器,当提交表单时,会生成两个键:一个公钥,一个私钥,私钥存储于客户端,公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。

新表单属性

新表单属性
  • placeholder 占位符(提示文字)
  • autofocus 自动获取焦点
  • multiple 文件上传多选或多个邮箱地址
  • autocomplete 自动完成(填充的)on开启(默认)off取消。效果是会记住之前的提交,可以快速选择
  • form 指定表单项属于哪个form,处理复杂表单时会需要
  • novalidate 关闭默认的验证功能(只能加给form)
  • required 表示必填项
  • pattern 自定义正则,验证表单。

表单事件

  1. oninput() 用户输入内容时触发,可用于输入字数统计。
  2. oninvalid() 验证不通过时触发

audio音频标签

audio的属性
  • autoplay 自动播放
  • controls 控制条
  • loop 循环播放
  • preload 预加载,设置autoplay此属性失效

video视频标签

audio的属性
  • autoplay 自动播放
  • controls 控制条
  • loop 循环播放
  • preload 预加载,设置autoplay此属性失效
  • widthheight
1
2
3
4
5
6
7
8
<video src="video/movie.mp4" controls  autoplay ></video>
<video controls autoplay>
<source src="video/movie.mp4"/>
<source src="video/movie.ogg"/>
<source src="video/movie.webm"/>
抱歉,不支持此视频
</video>