HTML、XML、XHTML的区别
- HTML,超文本标记语言,包含着网页结构的标签
- XML,可扩展标记语言(标签自定义),主要用来储存数据和结构
- XHTML,可拓展超文本标记语言,HTML的严格版本(如标签需闭合,元素名小写等)
HTML的语义化
HTML语义化就是让页面的内容结构化。在书写HTML时,尽量使用具有语义信息的标签,如<header> <nav> <section>
等,让搜索引擎和人更容易理解作者的意图,以便更好的维护和使用数据。
怎样理解内容与样式分离的原则
一个网页分三部分:结构(内容)、样式和行为,对应着Web中的HTML、CSS、JavaScript,内容与样式的分离即是HTML与CSS的分离。实质上就是不使用嵌套的CSS属性。在设计网页时应强调网页的可访问性,内容和样式的分离保证了即使用户的浏览器不支持CSS,他也能够看到基本的信息,同时还给更先进的浏览器软件或更大的带宽提供了这些页面的一个增强版本。
常见的meta标签
- 声明编码方式
<meta charset="utf-8 />"
- 优先使用IE最新版本和Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
- 页面关键词
<meta name="keywords" content="your tags" />
- 移动设备
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
文档声明的作用
<!DOCTYPE html>
的作用是告诉浏览器应该用什么规则集来解释文档中的标签
- 严格模式,如
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
不允许使用任何表现层上的标识和属性,严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行 - 混杂模式,
<!DOCTYPE>
不存在或者形式不正确将会导致文档以混杂模式呈现,浏览器以自己的混杂模式去渲染页面,这样可以识别以前的旧网页
浏览器乱码的原因
乱码产生的原因是因为编辑器保存文档时使用的字符集如与文档中<meta charset="">
指定的字符集如不一样,而浏览器解析文档使用的字符集是HTML中<meta charset="">
指定的字符集,使得浏览器无法正确解析网页,导致乱码
- 解决方法:将保存文档时使用的字符集设置的与
<meta charset="">
声明的一致,如统一使用“utf-8”
常见浏览器与内核
浏览器 | 内核 |
---|---|
IE | Trident |
Chrome | Webkit |
Safari | Webkit |
Firefox | Gecko |
Opera | Presto(7.0-12.18) & Webkit(future) |
常见标签及其应用场景
标签 | 应用场景 |
---|---|
div | 常用布局标签 |
h1-h6 | 标题 |
p | 段落 |
a | 链接 |
img | 图片 |
ul li | 有序列表 |
ol li | 无序列表 |
dl dt dd | 自定义列表 |
table | 表格 |
form input | 表单 |
span | 无定义 |
strong | 强调 |
header | 头部 |
footer | 尾部 |
iframe | 内联框架 |
button | 按钮 |
常用HTML标签的英文全称及简单描述
HTML标签 | 英文全称 | 中文释义 |
---|---|---|
a | Anchor | 锚 |
abbr | Abbreviation | 缩写词 |
acronym | Acronym | 取首字母的缩写词 |
address | Address | 地址 |
dfn | Defines a Definition Term | 定义定义条目 |
kbd | Keyboard | 键盘(文本) |
samp | Sample | 示例(文本) |
var | Variable | 变量(文本) |
tt | Teletype | 打印机(文本) |
code | Code | 源代码(文本) |
pre | Preformatted | 预定义格式 (文本) |
blockquote | Block Quotation | 区块引用语 |
cite | Citation | 引用 |
q | Quotation | 引用语 |
strong | Strong | 加重(文本) |
em | Emphasized | 加重(文本) |
b | Bold | 粗体(文本) |
i | Italic | 斜体(文本) |
big | Big | 变大(文本) |
small | Small | 变小(文本) |
sup | Superscripted | 上标(文本) |
sub | Subscripted | 下标(文本) |
bdo | Direction of Text Display | 文本显示方向 |
br | Break | 换行 |
center | Centered | 居中(文本) |
font | Font | 字体 |
u | Underlined | 下划线(文本) |
s/strike | Strikethrough | 删除线 |
div | Division | 分隔 |
span | Span | 范围 |
ol | Ordered List | 排序列表 |
ul | Unordered List | 不排序列表 |
li | List Item | 列表项目 |
dl | Definition List | 定义列表 |
dt | Definition Term | 定义术语 |
dd | Definition Description | 定义描述 |
del | Deleted | 删除(的文本) |
ins | Inserted | 插入(的文本) |
h1~h6 | Header 1 to Header 6 | 标题1到标题6 |
p | Paragraph | 段落 |
hr | Horizontal Rule | 水平尺 |
href | hypertext reference | 超文本引用 |
alt | alter | 替用(一般是图片显示不出的提示) |
src | Source | 源文件链接 |
cell | cell | 巢 |
cellpadding | cellpadding | 巢补白 |
cellspacing | cellspacing | 巢空间 |
nl | navigation lists | 导航列表 |
tr | table row | 表格中的一行 |
th | table header cell | 表格中的表头 |
td | table data cell | 表格中的一个单元格 |
iframe | Inline frame | 定义内联框架 |
optgroup | Option group | 定义选项组 |
网友评论