HTML学习笔记

信息点

1. 教程：https://www.w3school.com.cn/html
2. 教程：https://www.w3school.com.cn/tags/index.asp
3. HTML：内容，CSS: 样式，JS：动作，三种文件的扩展名分别为：.html, .css, .js
4. 本页只保留了大多浏览器都能兼容，且HTML和HTML5均支持的标签
5. 搜索引擎按照标题标签为网页编制索引
6. 背景可以是颜色、图像url等，图像尺寸小于浏览器窗口时，默认平铺
7. 响应式网站设计Responsive Web Design，尺寸可变，适应平板和移动设备。可借助Bootstrap. http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

HTML规范

1. 默认在块级元素前后添加空行，其余连续的空格/空行都会被算作一个空格
2. 标签：小写 + 以尖括号包围 + 成对出现
3. 标签与其属性用空格分开
4. 标签属性中，属性名用小写，属性值用单/引号包围
5. 样式设置：多页共用：外部样式表，单个页面：内部样式表，个别元素：内联样式
6. 常用属性：class, id, style（行内样式）, title（元素的额外信息，可在工具提示中显示）

manifest 文件

扩展名.appcache，列出要缓存、不要缓存的内容，包含3个部分：

1. CACHE MANIFEST - 要缓存的文件列表
2. NETWORK - 不要缓存的文件列表
3. FALLBACK - 页面无法访问时的页面（如 404 页面）。第一个 URI 是资源，第二个是替补

• 注意：各浏览器对缓存数据的容量限制不同（如5MB）

内容被缓存后会一直保持，直到发生以下情况之一：

1. 用户清空浏览器缓存
2. manifest 文件被修改。更新注释行中的日期、版本号可使缓存更新
3. 由程序来更新应用缓存

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html

文件路径

链接网页、图像、样式表、JavaScript时，优先考虑相对路径，然后考虑绝对路径

路径	描述
picture.jpg	与当前网页位于同一文件夹下
images/picture.jpg	位于当前文件夹的子文件夹中
/images/picture.jpg	位于站点根目录的 images 文件夹中
…/picture.jpg"	位于当前文件夹的上一级文件夹中

绝对文件路径（完整 URL），如：https://www.w3school.com.cn/images/picture.jpg

HTML 字符

字符实体

html中，部分内容要通过字符实体的名称或编号录入，名称易于记忆，编号兼容性最佳

空格	<	>	&	"	’	￠	£
	<	>	&	"		¢	£
	<	>	&	"	'	¢	£
¥	€	§	©	®	™	×	÷
¥	€	§	©	®	™	×	÷
¥	€	§	©	®	™	×	÷

• IE浏览器无法识别单引号的名称，只能通过编号输入单引号
• 更多对照参见https://www.w3school.com.cn/html/html_symbols.asp
• 表情字符：https://www.w3school.com.cn/html/html_emoji.asp

常见字符集及其声明

常见字符集有：UTF-8、ASCII、ISO-8859-1、ANSI 字符集 (Windows-1252)

URL 只能使用 ASCII 字符集来通过因特网进行发送

声明当前页面所用字符集：

@charset "UTF-8";
<meta charset="UTF-8">

颜色

1. 属性值可以是十六进制数#000000、RGB值【rgb(0,0,0)】或颜色名
2. 颜色名：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

html标签

属性	值	描述
manifest	url	描述文档缓存信息的URL
xmlns	http://www.w3.org/1999/xhtml	XML命名空间

• XHTML中需要用到xmlns属性

HTML 全局属性

可与大多数 HTML 元素一起使用的属性

class 类

定义样式，以便后期调用。class可以多次调用，且每次可以引用多个样式

<style>
.style1 {color:yellow;}
.style2 {background:red;}	
</style>

<p class="style1">London</p>
<p class="style1 style2">London</p>

id

id值具有唯一性，且大小写敏感。可用于样式，也可用于链接（锚）、JS

<style>
#style1 {color:yellow;} 
</style>

<p id="style1">London</p>

style 行内样式

定义样式，具体方法见CSS教程

data-*

储存元素的私有数据，可通过JS调用。属性名以【data-】开头，且不包含大写字母

<script>
function show(animal) {
    alert(animal.innerHTML + "是一种" +  animal.getAttribute("data-1"));
}
</script>

<p onclick="show(this)" data-1="鸟类">喜鹊</p>

更多全局属性

属性	含义	备注
accesskey	快捷键	设置时要避免冲突。使用时要用(Shift+)Alt + 键 例：CSS 教程
contenteditable	可编辑性	属性值：true(默认), false
draggable	可拖动性	属性值：auto(默认), true, false
dir	文本方向	属性值：ltr(默认), rtl
hidden	隐藏内容	可用JS显示，属性值：hidden
lang	语言	参考手册
spellcheck	拼写/语法检查	检查input、 textarea、可编辑元素中的文本
tabindex	tab键次序	属性值：数字

注释标签

!–…--	!DOCTYPE	ruby	rt
注释	声明文档类型	ruby注释	ruby注释的解释

<!-- 
  a
  b
-->

HTML head

head包含文档整体信息，通常不作为内容展示给读者，省略时，浏览器会把 body之前的所有元素识别为head元素。常用标签如下：

title	link	style	meta	address	main	base
标题	外部资源	样式	元信息	作者联系信息	主要内容	默认链接地址

• meta：提供针对搜索引擎和更新频度的描述和关键词、字符集，如charset=“utf-8”
• address常以斜体显示。多数浏览器会在元素前后加折行。
• 默认链接地址：

HTML body

首尾			中间			通用
header	footer	nav	section	article	aside	div	span	iframe
页眉	页脚	导航	节	文章	正文外	块级	行内	内框架

• 页眉写对主页的介绍，页脚通常放置版权信息、作者、使用条款链接、联系信息等
• section：有主题的内容组，通常带标题
• article：可以源自论坛帖子、报纸文章、博客条目、用户评论
• aside：正文以外，但与正文相关。可用作文章的侧栏

iframe

属性	值	描述
frameborder	1,0	显示边框
height	pixels, %	高度
width	pixels, %	宽度
marginheight	pixels	顶部和底部的边距
marginwidth	pixels	左侧和右侧的边距
name	frame_name	iframe名称
scrolling	auto(默认值),yes,no	显示滚动条
longdesc	URL	显示较长描述文档（.txt）
src	URL	显示html文档(.html)
sandbox	见下文	限制框架内容

• sandbox属性值

“”	allow-forms	allow-scripts	allow-same-origin	allow-top-navigation
允许所有	允许表单提交	允许脚本执行	允许同源	允许导航

• 使用name属性，可以先设置frame，后显示内容

<iframe name="a"></iframe>
<a href="/html/html_iframe.asp" target="a">显示</a>

frameset

框架集，把窗口划分为若干个框架，每个框架应用不同的html文件。不可与body标签共用

rows属性可指定行数、宽度，cols属性可指定列数、高度，如cols=“120,*”

属性值：pixels/%/*，星号表示剩余空间

noresize属性设置为noresize，可以禁止用户通过拖动改变边框大小

HTML 文本标签

文本类型

h1~h6	p	a	q	blockquote	abbr	pre	samp
标题	段落	链接	短引用	长引用	缩写	计算机源代码	计算机代码样本

文本样式

b	i	u	s	mark
粗体	斜体	下划线	删除线	标记
sup	sub	small	bdo	bdi
上标	下标	小号文本	文字方向	文字方向-独立

文本样式 -建议用样式表取代

em	strong	dfn	code	kbd	var	cite
强调	强调	项目	计算机代码	键盘文本	变量	引用

• cite常用于书名
• code元素中，多余的空格和折行会被删除

链接标签 a

文本、图片或其他 HTML 元素都可以创建链接。使用锚或id，可以链接到指定元素

锚：可以用name属性创建锚点，定位锚失败时，会定位到文档的顶端

<a name="tips">...</a>          #创建锚点
<a href="#tips">...</a>         #链接到锚点 
<a href="/html#tips">...</a>    #链接到其它页面的锚点
<a href="song.mp3">...</a>      #链接到多媒体，多数浏览器会自动调用辅助应用程序

相关属性

属性	值	描述
href	URL	链接地址
target	见下文	打开链接的位置
download	filename	下载链接
hreflang	language_code	被链接文档的语言
media	media_query	被链接文档是为何种媒体
rel	text	当前文档与被链接文档的关系

target属性的属性值

self(默认)	blank	parent	top	framename
当前框架	新窗口	父框架	整个窗口	指定的框架

表格标签

表格标签列表

table	caption	th(head)	tr(row)	td(data)	col	colgroup
表格	表格标题	表头	行	单元	列属性	列组

1. table中的元素样式，建议通过CSS修改
2. caption标签必须紧随 table 标签
3. 表格中的空白占位符： 

table标签的属性

属性	描述	值
border	边框宽度	pixels
width	表格宽度	pixels, %
cellpadding	单元格内边距	pixels, %
cellspacing	单元格外边距	pixels, %
summary	摘要	text
frame	外边框	void,above,below,hsides,lhs,rhs,vsides,box,border
rules	内边框	none,groups,rows,cols,all,

th、td标签的属性

属性	描述	值
colspan	设置单元格可横跨的列数	number
rowspan	规定单元格可横跨的行数	number
align	内容的水平对齐方式	left,right,center,justify,char,
valign	内容的垂直排列方式	top,middle,bottom,baseline

tr标签的属性

属性	描述	值
align	内容的水平对齐方式	left,right,center,justify,char,
valign	内容的垂直排列方式	top,middle,bottom,baseline

col标签的属性

逐列指定格式，添加class属性即可引用CSS样式

属性	描述	值
align	内容的水平对齐方式	left,right,center,justify,char,
valign	内容的垂直排列方式	top,middle,bottom,baseline
width	列宽	pixels,%,relative_length
span	col属性影响的列数	number

<table>
  <col width="30" />
  <col width="10", span="2"/>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
</table>

colgroup标签

相当于设置了span属性的col标签，用法：

表单标签

浏览器会根据元素标签类型，提供日期、时间、颜色选择器，滑块，或者验证规则

form	input	textarea	label
表单	输入框	多行输入框	输入框标注

• 其中，input标签可以制作文本字段、复选框、单选框、提交按钮等等

HTML5新增标签

date	time	datetime	datetime-local	month	week
range	number	email	color	search	url

表单元素通用属性

属性	值	描述
name	field_name	名称
form	form_id	表外元素，仍属于表单
required	required	必填
disabled	disabled(可省略属性值)	禁用
readonly	readonly(可省略属性值)	只读
autofocus	autofocus	获取焦点
formnovalidate	formnovalidate	提交数据时，不验证

• 一组单选按钮的name属性要用同一个属性值

form的属性

属性	值	描述
accept-charset	charset_list	字符集
action	URL	数据接收地址
autocomplete	on, off	自动补齐
novalidate	novalidate	不验证
method*	get, post	表单数据发送方法
enctype*	见下文	发送表单数据前，编码数据
rel*	见下文	关于链接资源的描述

GET与POST的区别

	显示在url中	长度受限制	制作书签
GET	是（不适合敏感数据）	是。2048 个字符	可以
POST	否	否	不行

1. 少量没有敏感信息的数据用GET，表单数据在页面地址栏中可见
2. 包含密码等敏感信息时，用POST，在地址栏中不可见

enctype的属性值

值	描述
application/x-www-form-urlencoded	编码所有字符（默认）
multipart/form-data	不编码字符。上传文件时要用这个
text/plain	空格转 “+” ，不对特殊字符编码

rel的属性值

值	external	help	license	prev	next
描述	外部链接	帮助文档	版权信息	上一文档	下一文档
值	search	nofollow	noreferrer	opener	noopener
描述	搜索工具	拒绝爬虫	不发Referer	允许	禁止

• opener/noopener表示是否允许用window.opener访问窗口对象。禁止更安全

textarea的属性

属性	placeholder	maxlength	rows	cols	rows	wrap
值	text	number	number	number	number	soft(默认), hard
描述	提示文本	字符数量	可见行数	可见宽度	可见行数	文本换行方法

• 设置提交数据时换行，必需同时设置cols属性和wrap=“hard”

input的属性

属性	placeholder	maxlength	size	list
值	text	number	number	datalist-id
描述	提示文本	字符数量	字符数, px	引用datalist
属性	pattern	autocomplete	max|min	step
值	regexp_pattern	on, off	number, 日期	number
描述	指定正则表达式	自动补齐	最值	间隔

type属性

image：图像形式的提交按钮

select	text	radio	button	image	file
search	password	checkbox	reset	submit	hidden

• type也可限定格式：number, range, date, datetime, datetime-local, month, time, week

与type相关的属性

type	属性	属性值	描述
checkbox|radio	checked	checked	设置选中状态
file	accept	MIME type	限制文件类型
file	multiple	multiple	允许多选
image	width|height|src|alt
button|reset|submit	value	按钮文本
text|password|hidden	value	初始值
checkbox|radio|image	value	关联值
image|submit	[formaction	formenctype	formmethod

• accept属性中，可以用星号表示所有图片，如accept=“image/*”

表单边框标签

标签	属性	描述
fieldset	disabled，form，name	在表单外创建边框
legend	通过CSS设置样式	边框标题

列表标签

建议通过CSS定义样式

列表相关标签

常用列表			定义列表
ol	ul	li	dl	dt	dd
有序列表	无序列表	列表项	定义列表	列表项	列表项的描述

ol标签的属性

属性	值	描述
reversed	reversed	列表顺序为降序。(9,8,7…)
start	number	起始值
type	1,A,a,I,i	标记类型

下拉列表标签

select标签：类似设置了type="select"的input标签

select	option	optgroup	datalist
下拉列表	选项	选项组合	预先定义列表，然后调用

• optgroup：选项分组，每组可单独创建label

<select>
  <optgroup label="a">
    <option value="a1">a1</option>
    <option value="a2">a2</option>
  </optgroup>
  <optgroup label="b">
    <option value="b1">b1</option>
    <option value="b2">b2</option>
  </optgroup>
</select>

select的属性

属性	值	描述
autofocus	autofocus	自动获得焦点
disabled	disabled	禁用该下拉列表
multiple	multiple	可多选（要按住Ctrl键）
required	required	必填
size	number	可见选项数目

Button

button标签：比强大，但表单中应使用

各浏览器默认的type属性不同，一定要手动设置

属性	值	描述
name|form|disable|autofocus	略	表单通用属性
type	button, reset, submit	按钮类型
value	text	按钮的初始值

与type="submit"配合使用的属性:

formaction	formenctype	formmethod	formnovalidate	formtarget
提交地址	编码方式	提交方式	不验证	提交窗口

Progress

属性	值	描述
max	number	总数
value	number	已完成数量

图像

img	canvas	svg	map	area
图像	图形	svg图形	图像映射	图像映射内部的区域

• canvas和svg只提供容器，指定width和height属性，图形绘制是另外的，canvas要用JS，
• map标签定义带有可点击区域的图像，area标签指定可点击的区域
• 加载图像需要时间，慎用，尽量限制在10k以下。

img 图像属性

	属性名	值	描述
常用属性	alt	text	替代文本
	src	URL	图片位置（相对/绝对）
	height	pixels, %
	width	pixels, %
更多属性	longdesc	URL	长描述
	ismap	URL	发送鼠标的点击位置到服务器
	usemap	URL	与map标签搭配使用

ismap与usemap使用演示

<img src="/i/eg_planets.jpg" ismap />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" alt="Venus" />
  <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" alt="Sun" />
</map>
<img src="/i/eg_planets.jpg" usemap="#planetmap"/>

SVG

参考资料：https://www.w3school.com.cn/svg/index.asp

Scalable Vector Graphics：基于矢量，用于网络的图形，

优点：可通过文本编辑器来创建和修改，可被搜索、索引、脚本化或压缩，可无损放大

Canvas 与 SVG 的比较

	依赖分辨率	事件处理器	游戏应用
Canvas	是	不支持	适合
SVG	否	支持	不适合

• Canvas能够以 .png 或 .jpg 格式保存结果图像
• SVG最适合带有大型渲染区域的应用程序（比如谷歌地图），复杂度高会减慢渲染速度

音频/视频/媒介源

浏览器会根据文件的扩展名来识别文件类型，如 .swf、.wmv、.mp3 以及 .mp4

source

属性	值	描述
scr	url	媒体文件的地址
type	视频：video/ogg, video/mp4, video/webm 音频：audio/ogg, audio/mpeg	媒体资源的 MIME 类型

video

属性	值	描述
src	url	视频地址
width	pixels	宽度
height	pixels	高度
autoplay	autoplay	自动播放
preload	preload	与页面同时加载
controls	controls	显示控件
loop	loop	循环播放
muted	muted	静音
poster	URL	缩略图

audio

属性	值	描述
src	url	视频地址
autoplay	autoplay	自动播放
preload	preload	与页面同时加载
controls	controls	显示控件
loop	loop	循环播放
mute	muted	静音

嵌入

嵌入音频/视频/媒介源时，要用多个标签适应不同浏览器，顺序：source - object - embed

• 注意：embed元素没有替代文本

object	嵌入对象	param	object的参数	embed	嵌入对象

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
<embed height="100" width="100" src="song.mp3" />
</audio>

视频网站

1. Youtube：
   https://www.youtube.com/embed/i7LhU?autoplay=1&mute=1&controls=0
   autoplay=1：自动播放，mute=1：默认静音，controls=0：显示播放控件

2. Youku
   http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf

HTML 更多元素标签

分类	标签	描述
JS	script	客户端脚本
	noscript	script的替代文本
元素及其标题	details, summary	元素的细节
	figure, figcaption	独立的流内容（图像、图表、照片、代码等）
空白元素	<hr />	水平线
	<br />	换行
其它	wbr	可能的换行符
	template	隐藏内容
	output	输出（脚本等）

相关知识 统一资源定位器

URL - Uniform Resource Locator，格式：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		您计算机上的文件。

相关知识 视频格式

.avi，.wmv：由微软开发，非 Windows 计算机并不总是能够播放

.mpg，.mpeg Moving Pictures Expert Group：所有浏览器都支持

.mov：苹果公司开发的，Windows 计算机安装额外的（免费）组件才可播放

.swf，.flv：需要额外的组件来播放，部分浏览器会预装

.mp4：针对因特网的新格式

相关知识 声音格式

.mid，.midi：数字音乐指令文件，极其小巧

.wav：由IBM 和微软开发，Chrome不支持。最受欢迎的无压缩声音格式

.wma：质量优于 MP3，不兼容于iPod，可作为连续的数据流来传输，适用于在线音乐

.mp3，.mpga：MP3 文件实际上是 MPEG 文件的声音部分

.rm，.ram：视频、声音均可。低带宽优先的（在线播放），质量常会降低