HTML
一个最基本的H5骨架长这样:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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小图标等等
- 文档声明头:
<!DOCTYPE html>
,DocType Declaration,简称DTD,DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 - 页面语言lang:
<html lang="en">
,指定页面的语言类型,en、zh-CN。 - meta标签:提供相关页面的元信息(meta-information)
1 | <!--必要,网页标题--> |
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标签分为两种:
- 文本级标签:p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。(a标签里不能放a和input)
- 容器级标签:div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
排版标签
<h1>
标题使用<h1>
至<h6>
标签定义,有align属性(对齐方式):left、center、right。<p>
段落标签,单独成段,分割网页。有align属性。<hr/>
水平分割线线标签。<br/>
<div>
可以把标签中的内容分割为独立的区块。必须单独占据一行,DIV+CSS来实现各种样式,div标签负责布局、结构、分块,css负责样式<span>
和div的作用一致,但不换行<center>
让元素居中,H5中不使用<pre>
预格式化,让文本不空格和空行,几乎用不着<!-- 我是 html 注释 -->
字体标签
- 特殊字符(转义字符),需要时百度,
空格,<
小于号<,>
大于号>,等 <u>
下划线,<s>
或<del>
中划线,<i>
或<em>
斜体- 弃用:
<b>
<strong>
粗体,<font>
字体标签 <sup>
上标,<sub>
下标
超链接a
一个文本级标签
- 外部链接:
<a href="02页面.html">点击进入另外一个文件</a>
href超文本地址 - 锚链接:
1 | <!--设置锚点,必须是a标签--> |
通常p包裹a href:目标URL 超链接的属性
title:悬停文本。
name:主要用于设置一个锚点的名称。
target:告诉浏览器用什么方式来打开目标页面。target属性有以下几个值:
_self:在同一个网页中显示(默认值)
_blank:在新的窗口中打开。
_top:在顶级窗口中显示
图片标签
<img src="图片的URL" />
src中写图片路径
标签属性:
- width、height
在 HTML5 中的单位是 CSS 像素,在 HTML 4 中既可以是像素,也可以是百分比
可以只指定 width 和 height 中的一个值,浏览器会根据原始图像进行等比缩放 - alt:当图片无法显示时,代替图片的文本
- title:鼠标悬停时出现的文本
- 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">
网络路径
列表标签
- 无序列表
<ul>
,type=”属性值”;disc(实心原点,默认),square(实心方点),circle(空心圆) - 有序列表
<ol>
,type=”属性值”;1(阿拉伯数字,默认)、a、A、i、I。结合start属性表示从几开始<ul>
、<ol>
里放<li>
,li是容器级 - 定义列表
<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;”单元格的线和表格的边框线合并(表格的两边框合并为一条)
- width、height
- 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
单元格的合并
- colspan:横向往右合并
- rowspan:纵向往下合并
thead、tbody、tfoot
表格优先按照thead、tbody、tfoot的顺序依次来显示内容(三个标签无需同时存在),如果不写,表格按代码从上到下的顺序来显示
当表格非常大内容非常多的时候,用thead、tbody、tfoot标签,数据可以边获取边显示。如果不写,则必须等表格的内容全部从服务器获取完成才能显示出来。
tr和tbody同级,按代码从上到下的顺序来显示
*框架标签
框架标签用于在一个网页中显示多个页面(html)
<frameset>
和<body>
只能二选一。框架标签不能放在<body>
标签里面,因为<body>
标签代表的只是一个页面,而框架标签代表的是多个页面- 框架的集合用
<frameset>
表示,然后在<frameset>
集合里放入一个一个的框架<frame>
- frameset和frame已经从 Web标准中删除,使用iframe代替
*frameset
<frameset>
框架的集合,一个框架的集合可以包含多个框架或框架的集合
frameset的属性
- rows 水平分割,将框架分为上下部分
- cols 垂直分割,将框架分为左右部分。
写法有两种:
- 绝对值写法:
rows/cols="200,*"
*代表剩余的。包含了两个框架:一个占200个像素,另一个占剩下的部分。 - 相对值写法:
rows/cols="30%,*"
*代表剩余的。包含了两个框架:一个占30%,另一个占70%。
如果想将框架分成很多个,在属性值里用多个逗号隔开。
1 | <frameset rows="20%,*"> |
*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的属性
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的属性
fieldset表单分组
<fieldset>
子标签<legend>
定义组的标题 fieldset的属性
label
label
使其中文字内容与<input>
绑定,点击文字也能选择选项等 fieldset的属性
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 自定义正则,验证表单。
表单事件
oninput()
用户输入内容时触发,可用于输入字数统计。oninvalid()
验证不通过时触发
audio音频标签
audio的属性
- autoplay 自动播放
- controls 控制条
- loop 循环播放
- preload 预加载,设置autoplay此属性失效
video视频标签
audio的属性
- autoplay 自动播放
- controls 控制条
- loop 循环播放
- preload 预加载,设置autoplay此属性失效
- width、height
1 | <video src="video/movie.mp4" controls autoplay ></video> |