关于html
HTML、XML和XHTML
html是一种超文本标记语言,通过一些字符串来对网页结构进行描述,浏览器对这些字符串进行编译从而展示出来DOM树。
xml是一种可扩展标记语言,相对于html语法更严谨,主要应用于存储数据和结构。
xhtml是一种可扩展超文本标记语言,基于xml,和html类似,但语法更严谨。
HTML语义化
语义化 HTML 就是选择合适的标签、使用合理的代码结构来编写HTML的方式,使代码更具可读性,也使得浏览器的爬虫和机器能对代码更好地解析。
要实现HTML的语义化,就要求开发者掌握常用的HTML标签,理解各种标签所代表的含义,在不同的场景能使用合适的标签,尽量不使用没有语义信息的标签。
语义化带来的是更清晰的页面结构,使页面可读性更强;更清晰的代码结构,更利于开发团队的开发和维护;更好的适应性,可以支持更多的设备的不同表现形式;与机器更良好的沟通,使浏览器更容易渲染表现,也使搜索引擎更容易获取有效信息。
内容和样式分离
写 HTML 的时候不管样式, 重点在HTML的结构和语义化上,让 HTML 能体现页面结构或者内容。之后再去用CSS写样式。
HTML 内不允许出现属性样式,尽量不要出现行内样式。
写 JS 的时候,尽量不要用 JS 去直接操作样式,而是通过给元素添加删除class来控制样式变化。
页面展现的所有样式,都由CSS来负责实现。
分离优点:更易于维护,让其他开发者更易阅读,更规范。使页面逻辑更清晰。
常见meta
<meta charest="UTF-8"> 表示编码格式为UTF-8
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 让浏览器指定内核解析,解决兼容性
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> 适应移动端,同时初值宽度为原始,用户不可调整宽度
<meta name="keywords" content="你好啊"> 关键字,利于搜索引擎抓取
<meta name="description" content="我很好啊"> 利于搜索排名
文档声明
文档声明的作用是告诉浏览器用何种方式渲染页面。
严格模式是指用doctype告诉浏览器用何种方式渲染页面;
混杂模式是指不用doctype告诉浏览器,让其自行解析渲染。
<!doctype html>是指告诉浏览器用最新的html5规范渲染页面。
浏览器乱码
浏览器出现乱码一般是由于在制作页面时使用非英文字符时,保存的编码格式与浏览器解析时的解码格式不匹配。为了解决这个问题,就要在页面保存时就在HTML的里添加来声明编码格式,来告诉浏览器应该用什么解码格式来解码,例如使用UTF-8来编码的页面,添加<meta charset="UTF-8">来告诉浏览器使用UTF-8格式来解码,就不会出现乱码了。
常见浏览器
常见浏览器有IE、Google Chrome、Safari、opera、Firefox等,还有世界之窗、傲游浏览器、360安全浏览器、搜狗告诉浏览器、QQ安全浏览器、猎豹安全浏览器等。
Trident(IE内核):IE浏览器,很多国内浏览器,以及很多双核浏览器的其中“一核”都是Trident。
Gecko:FireFox浏览器等。
Webkit:Chrome浏览器,Safari浏览器等。
Chromium/Blink:Chromium fork 自开源引擎 WebKit,却把 WebKit 的代码梳理得可读性提高很多,Chrome浏览器就使用Chromium内核,搜狗、360、QQ浏览器等等双核浏览器的一核都是Chromium。2013年谷歌宣布 Chromium 项目中研发 Blink 渲染引擎,内置于 Chrome 浏览器之中。
Presto:Opera浏览器先前使用的内核,Opera 在 2013 年 2 月宣布放弃 Presto后使用 WebKit 分支的 Chromium 引擎作为自家浏览器核心引擎,在 Chrome 推出 Blink 引擎之后,Opera也转而使用Blink 作为浏览器核心引擎。
目前移动端系统内置浏览器的内核, iOS 平台主要是 WebKit,
Android 4.4 之前的系统浏览器内核是 WebKit;Android4.4 系统浏览器切换到了Chromium,内核是 Webkit 的分支 Blink;Windows Phone 8 系统浏览器内核则是 Trident。
常见易错标签
<q></q>定义短引用
<iframe name="" src="url"></iframe>在页面中嵌入一个页面。
<a target=""></a>当target的值为:
_blank在新窗口中打开被链接文档。
_self默认。在相同的框架中打开被链接文档。
_parent在父框架集中打开被链接文档。
_top在整个窗口中打开被链接文档。
framename在指定的框架中打开被链接文档。
其中href的锚点也可是页面中的某个锚点,比如#div
<dl><dt></dt><dd></dd></dl> 表示定义列表,定力列表的项目以及项目中的内容
常见的标签:
h1-h6 标题标签
p 段落标签
a 链接标签
href="#about" 跳转到id为about的位置
href="/test" 跳转到完整域名+test
img 图片链接
alt 图片无法展示时,显示内容,便于视力障碍人士使用
div 块标签
ul 无序列表
li ul的子标签,ul下的直接元素必须是li
ol 有序列表
li ol的子元素
dl 展示有标题和内容的自定义表格
dt 标题子标签
dl
button 按钮标签
strong 强调元素
em 中层强调元素
span 标记一段行内元素
iframe 在当前页面嵌入一个页面
table 用于展示表格,不要用来做布局
thead、tbody、tfoot 一般不用写
tr 代表表格的一行
th 代表表格第一行的列内容
td 代表表格的一列