HTML知识点
2017-04-08 本文已影响0人
勃王
HTML
HTML是一种用于创建网页标记语言，与CSS,JavaScript一起被众多网站用于设计网页，网页应用程序以及移动应用程序的用户界面。浏览器可以读取HTML文件，并将其渲染成可视化网页。
XML
XML也是一种标记语音， 不过XML的主要功能不在如何数据，而是如何存储数据和结构。语法比较严谨
XHTML
XHTML即为可拓展超文本标记语言，像是HTML与XML的结合，作用与HTML类似，但是比HTML得语法更加严谨
如何理解HTML语义化
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
为什么要语义化
- 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看
- 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
- 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化
怎样理解内容与样式分离的原则
内容与样式分离可以试代码更便于阅读，也可以使代码更便于修改，既提高了效率，也增强了简洁性和灵活性，减少了修改代码的成本。详情请看这里.
常见的meta标签
-
<meta charset="utf-8">规定 html文档的字符编码utf-8，用于使浏览器能够正确编码——识别我们HTML内容的语言 -
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本 -
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">使HTML代码在移动端合理地展示 -
<meta name="keywords/discription content="">利于搜索引擎更好的搜索你的页面
文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
1.文档声明用于告诉浏览器用什么样的HTML版本解析我们写的代码，或者说告诉浏览器我们使用的是什么标记语言。
2.严格模式：浏览器使用W3C标准解析代码。如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。
3.混杂模式：浏览器使用自己的标准解析代码。DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。
4.<!DOCTYPE HTML>的含义是使用HTML5的标准解析代码。
浏览器乱码的原因是什么？如何解决
首先了解我们写入文件到展示文件的4个流程
1.我们使用编辑器编写 HTML 文件
2.保存编写的HTML文件
3.使用浏览器打开HTML文件
4.HTML文件在浏览器展示
问题发生在第二步和第四步，当我们保存HTML文件的时候，我们的编辑器会用某种编码方式保存我们的文件，然后我们保存的文件被浏览器解析的时候，浏览器默认的编码方式与我们原本编辑器的编码方式发生冲突，变引发了浏览器乱码。
如何规避乱码？
- 首先，在文件保存的时候你自己要清楚是用哪种编码方式保存的。
- 在你的代码中添加meta标签告诉浏览器你使用的编码方式解码。
关于编码与乱码 详情参见聊一聊编码与乱码
常见的浏览器及其内核
- 使用Trident的是internet explorer，国产的绝大部分浏览器。Trident是就是IE
- 使用Gecko的是Mozilla Firefox，使用 Gecko 内核的浏览器也有不少，如 Netscape MozillaSuite/SeaMonkey 等
- 使用Presto的是opera，这是目前公认网页浏览速度最快的浏览器内核
- 使用WebKit的又苹果的Safari，谷歌的Chrome，还有国产的大部分双核浏览器其中一核就是WebKit.
HTML常见的标签
-
<i><b><u>分别是斜体，加粗，和下划线。其中<b>和<strong>效果类似。<b>元素现在描述为在普通文章中仅从文体上突出的不包含任何额外的重要性的一段文本。例如：文档概要中的关键字，评论中的产品名。或者代表强调的排版方式。<strong>有更强的语义 -
<!DOCTYPE HTML>用于声明文档类型 -
<html></html>在这个标签里面书写html代码，html有个lang属性，用来告诉浏览器编者使用的语言如<html lang=zn>表示页面使用的中文 -
<head></head>网页的头标签，用于存放一些关于页面本身的信息，如<title></title>标签和<meta>标签 -
<body></body>网页的内容，html大部分标签都是嵌套在这个标签内部 -
<h1-6></h>标题标签，数字1到6代表了6个等级的标题，数字越小代表嵌套在里面的文本像素越大 -
<p></p>段落标签，用来存放一段或几段文字 -
<div></div>块级标签，通常用来标记目标代码块，方便对目标区域代码进行修改。 -
<span></span>行内级标签，用来标记目标代码块，方便对目标区域代码进行修改。 -
<ul></ul><ol></ol><li></li>列表标签，ul代表无序列表，ol代表有序列表。li标签即为对应列表中的项目 -
<strong><em>强调标签，strong表示很重要，em表示较重要 -
<a></a>锚标签，用来指向外部链接或者内部链接，其中herf属性代表所指向的url,target属性可以控制herf中的链接以什么方式打开 -
<img>图片链接，src属性用来存放图片的链接，title属性用于在图片出错的情况下用文字描述该图片 -
<iframe>标签，用于嵌入页面。src属性表示你想要嵌入页面的url，name属性可以用来控制嵌入的页面
<table><theader><tbody><tfoot><tr><th>标签为表格标签，theader表示表头，tfoot表示表尾，在tbody里面有多少个tr就表示有多少行，每个tr里面有多少个th标签就表示每一行有多少列.但一般不用thead,tbody,tfoot这些鬼东西 但是使用css操作table里面的标签的时候用类似tabel>tr这样的语法不管用，因为在html结构里，tr和rd默认都是在tbody里面的所以要用table>tbody>tr才管用.
-
<dl><dt><dd>用于展示一系列 “标题：内容...”的场景 dt表示标题，dd表示内容
