空空叶博客 学习与开发博客

html

2017-05-05
web

html

HyperText Markup Language,超文本标记语言

知识点

浏览器

浏览器并不显示html标记,而是用它们来决定如何显示文档.

html元素

从开始标签到结束标签之间的所有内容

一般形式: <标签 属性="值" ...>内容</标签> 空元素: <标签 属性="值" ...> (不需要也不允许结束标签)

如果元素属性未声明,则使用默认值.

有些标签是可选的,如<p>元素的结束标签

字符与实体引用

在4.0版本中，HTML定义了一系列共252个字符实体引用和1,114,050个数字字符引用。

用这种方式’转义’字符,使浏览器将之当作字符数据而不是标记.

格式:

  1. &entity_name; (大小写敏感)
  2. &#entity_number; 可以是十进制或十六进制,如&#3333;,&#x20AC;

实体名还是实体号?

实体名好记,但实体号的浏览器支持性更好.

结构式(语义式)标记 vs 表现式标记

结构式标记如<h1>,并不指定特定的渲染,但大多数浏览器都会采用元素格式默认的样式

表现式标记如<b>,指定了渲染.

推荐使用结构式标记,因为:

  • 方便机器理解,如爬虫,蜘蛛抓取,或其它屏幕阅读器使用
  • 可以通过css指定(或自定义)结构式标记的格式

块级元素&行内元素

每个元素都有默认的display值

块级元素(block)会换行并且左右扩展到最大

行内元素(inline)不换行,且只占用需要的宽度

颜色

可使用的方式:

  • 颜色名,如white
  • RGB值,格式rgb(red, green, blue),值都在0-255之间,如rgb(0,15,255)
  • Hex值,格式#RRGGBB,如#FF0000

分发

主要通过超文本传输协议与电子邮件进行.

URL

统一资源定位符

大体格式scheme://prefix.domain:port/path/filename

说明:

  • scheme: 服务类型,如http,https,ftp,file
  • prefix: 域名前缀,如www
  • domain: 域名,如xxx.com
  • port: 端口号,http默认为80
  • path: 路径,可以忽略指根路径
  • filename: 文档或资源名

url编码

url只能用ASCII编码,不能包含空格(空格会被转为+或%20),非ASCII字符会被转码为%十六进制数字

自定义元素

html5可以自定义元素

总是指定宽高的情况

有些情况下,总是应该指定宽与高,否则浏览器加载时可能会闪烁或改变页面布局. 包括:

  • input标签,type为image时
  • video标签

拖拽

  1. 让元素可拖拽,加上属性draggable="true"
  2. 设置拖拽的内容,在ondragstart事件里,比如设置text为拖拽的元素的ID: event.dataTransfer.setData("text", event.target.id);
  3. 使目标可放置,默认情况下元素无法放入其它元素里,在可以放置的元素里监听事件ondragover,执行event.preventDefault()来阻止默认行为,就可以放置了
  4. 放置,在ondrop事件里处理,比如通过ID获取元素然后添加到目标元素里: ev.preventDefault();var data = ev.dataTransfer.getData("text");ev.target.appendChild(document.getElementById(data));

local storage

以origin(domain&protocol)来分开存储

localStorage: 不会过期 sessionStorage: 会话结束时过期

如何检测浏览器是否支持localStorage与sessionStorage? 检测代码: if (typeof(Storage) !== "undefined") {}

设置: localStorage.setItem(“lastname”, “Smith”); 或 localStorage.lastname = “Smith”;

获取: localStorage.getItem(“lastname”); 或 localStorage.lastname;

删除: localStorage.removeItem(“lastname”);

Web Worker

如何检测浏览器是否支持? if (typeof(Worker) !== "undefined") {}

是否真的有用还是摆设? 一般十分耗时的操作都在服务端进行,用到再说.

属性(Attribute)

大多数属性以名="值"对出现,由=分离,一般由单引号或双引号包围(有时可以不加引号,但这被认为是不安全的),有些属性无需成对出现(即不需要值).

GET vs POST

  1. 从REST角度来说,get是查询获取,post是新建
  2. get的返回结果可以缓存,post不能
  3. get请求会被保存在浏览器历史记录中,post则不会
  4. get请求可以加书签,post则不能
  5. 从安全角度来说,get不如post安全:
    • get的所有请求内容与变量都在url里,不应该用来传递敏感数据
    • get请求很容易通过各种方式构造出来,因此安全性不佳
  6. 因为url有长度限制,因此get有长度限制,不能传递大量的数据,post传递的内容在请求体中,长度无限制
  7. 后退/重载时,get没有问题,post则会导致数据被重新提交(因此应该提示用户)

推荐

  1. 大小写不敏感时,使用小写
  2. 属性值加引号,以免产生问题
  3. 不要忽略结束标签,以免产生问题
  4. 总是关闭空元素,如<meta charset="utf-8" />
  5. 不要用table表格来布局
  6. 总是在每个页面增加页面编码,否则后果很难想象
  7. img标签总是写上alt属性,方便图片无法显示时显示提示
  8. 减少不必要的空格,如<link rel = "xxx">可以改为<link rel="xxx">
  9. 不要无意义地增加空行,大的逻辑代码块用空行分割,短的或相关的内容可能不需要空行
  10. 缩进使用2个空格,不要用tab,减少不必要的缩进
  11. html5里,html,head,body标签可以省略,为了增加美观可以忽略head标签,不建议忽略html与body标签(存在时格式更清晰)

html标签

基本

DOCTYPE

必须放在HTML文档的第一行,用来指示页面使用哪个HTML版本

常用举例:

  • HTML5: <!DOCTYPE html>
  • HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • XHTML 1.1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

html

html文档本身

title

文档标题

body

文档体

h1-h6

标题,h1最重要,h6最不重要

p

段落

br

换行

hr

水平分隔线

<!‑‑ … ‑‑>

注释

格式

pre

定义预格式化的文本,文本会呈现等宽字体

code

代码(并不会保留额外空格与换行符)

kbd

键盘输入

var

变量

i & em

i是斜体,em是强调,推荐使用有语义的em

b & strong

b是加粗,strong是更强烈的强调,推荐使用有语义的strong

u & ins

u是下划线,ins是插入/增加的内容,推荐使用有语义的ins

s & del

都是删除线的意思,推荐使用有语义的del

sup & sub

上标与下标

q & blockquote

q是(行内)短引用,blockquote是(区块)引用,浏览器通常会缩进

mark

标记文本(突出显示)

process

进度条

meter

进度条请用process标签

定义已知范围或分数值内的标量测量

time

定义日期时间

cite

通常表示对参考文献的引用

abbr

缩写

address

地址

bdo

可设置文本方向

samp

样例输出

wbr

定义文本的何处适合添加换行符

如果单词太长,或者担心浏览器在错误的位置换行,则可以添加wbr指示单词换行时机

表单&输入

form

表单

属性:

  • action: 行为(如果忽略此属性,则默认提交到当前页面)
  • method: HTTP方法,包括get与post
  • autocomplete: 是否自动完成(根据已经输入过的值)

input

输入

属性:

  • type: 输入类型
    • text
    • password
    • submit
    • radio
    • checkbox
    • button
    • number
    • date
    • color
    • range: 范围
    • month: 年月
    • week: 周
    • time: 时间
    • email
    • search
    • tel (目前Safari 8支持)
    • url
    • datetime-local: (本地)日期时间
    • datetime(废弃)
  • value: 初始的值
  • readonly
  • disabled: 不会被使用,无法点击,无法被提交
  • size: 以字符为单位的输入框长度
  • maxlength: 最大字符数
  • autocomplete: 是否自动完成(根据已经输入过的值)
  • novalidate: 提交时不验证
  • form: 所属的表单ID(多个表单以空格连接)
  • formaction: 会覆盖form的action属性(type为submit或image时有效)
  • formenctype: 会覆盖form的enctype属性(method为post时,type为submit或image时有效)
  • formmethod: 会覆盖form的method属性(type为submit或image时有效)
  • formnovalidate: 会覆盖form的novalidate属性(type为submit时有效)
  • formtarget: 会覆盖form的target属性(type为submit或image时有效)
  • height&width: 请总是指定大小,否则图片加载时浏览器会闪烁(type为image时有效)
  • list: 对应datalist标签的id
  • min&max: 最小与最大值(type为number,range,date,date-time,datetime-local,month,time,week时有效)
  • multiple: 允许多个值(type为email或file时有效)
  • pattern: 输入内容允许的正则(type为text,search,url,tel,email,password时有效)
  • placeholder: 占位内容(type为text,search,url,tel,email,password时有效)
  • required
  • step: 默认数字间隔(type为number,range,date,datetime,datetime-local,month,time,week时有效)

datalist

为input元素指定了预先定义的选项列表

input元素的list属性必须引用某个datalist的id

textarea

多行输入区域

select & option & optgroup

select是下拉列表,option是选项,optgroup定义下拉列表的组

label

定义input元素的标签

fieldset & legend

fieldset定义输入分组,legend定义fieldset的标题

button

不推荐使用

按钮

常见问题:

  • 总是应该指定type属性,因为不同浏览器会设置不同的默认type
  • 不要放在form里,否则不同浏览器会提交不同的值

output

定义了计算的输出

keygen

规定用于表单的密钥对生成器字段

提交密钥时,私钥保存在本地,公钥发送到服务器

框架

iframe

内联框架

图像

img

图像

map & area

map定义图像映射,area定义map中的可点击区域

canvas

动态画图像,通常用js

figure & figcaption

figure定义了自包含的内容(独立的流内容),figcaption定义了figure的标题

视频/音频

audio

音频

video

视频

source

为媒介元素(video与audio)定义资源

允许定义可替换的视频/音频文件供浏览器(根据它对媒体类型或者编解码器的支持进行)选择。

链接

a

超链接

属性:

  • target:
    • _blank: 在新的页面中打开
    • _self(默认): 在当前页中打开
    • _parent: 在父frame框架中打开
    • _top: 在整个浏览器窗口中打开
    • framename: 在指定name或id的frame框架中打开,如果不存在,则会打开一个新窗口,给它加上指定的标记

通常用来链接外部样式表

定义导航链接部分

列表

ul & ol & li

ul是无序列表,ol是有序列表,li是列表项

ul属性:

  • list-style-type: 列表项标记的类型
    • disc(默认): 实心圆
    • circle: 空心圆
    • square: 实心方块
    • none: 无

ol属性:

  • type: 列表项标记的类型
    • 1(默认): 显示为数字
    • a: 字母
    • I: 罗马字母

dl & dt & dd

dl是描述列表,dt是名,dd是描述

表格

table

表格

caption

表格标题

tr

行

th & td

th是表头单元,td是标准单元

属性: * colspan: 跨多列 * rowspan: 跨多行

thead & tbody & tfoot

定义表格中的不同内容区域

colgroup & col

colgroup定义列的组,col定义列组的信息

样式&语义

style

定义样式

div

通常作为其它元素的容器

span

通常用来组合行内元素

main

section

部分

article

文章

aside

details & summary

ie不支持

details定义额外的详细信息,summary定义details的可见标题

元信息

文档头

meta

定义文档元数据

浏览器,搜索引擎,其它web服务都可使用元信息

属性:

  • charset: 字符集

base

为页面上的所有链接规定默认url与默认target

通常情况下,浏览器会从当前文档的url中提取相应的元素来

编程

script

客户端脚本

noscript

不支持客户端脚本时的可选内容

embed & object

嵌入内容

param

定义object的变量

上一篇 git实例

下一篇 https

目录