HTML语义化、HTML标签介绍
2017-05-25 本文已影响0人
marmot_ning
HTML、XML、XHTML 有什么区别
- HTML，超文本标记语言，是语法较为松散的、不严格的Web语言；
- XML，可扩展标记语言，主要用于存储数据和结构，可扩展；
- XHTML，可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格。
怎样理解 HTML 语义化
- 语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
怎样理解内容与样式分离的原则
- HTML首先重点需要考虑结构和语义化，让HTML能体现页面的结构和内容，之后在考虑如何写样式。
- JS尽量不要直接去操作样式，通过给元素增加或者删除class来控制样式的变化。
- HTML内不允许出现属性样式，尽量不要出现行内样式。
有哪些常见的meta标签
| 标签 | 含义 |
|---|---|
| <mata charset="utf-8"> | 声明文档使用的字符编码 |
| <meta name="viewport" content="width=device-width"> | 定义页面在移动端的布局展现合理 |
| <meta name="keywords" content="your tags" /> | 页面关键词 |
| <meta name="description" content="150 words" /> | 页面描述 |
| <meta name="robots" content="index,follow" /> | 搜索引擎索引方式 |
| <meta http-equiv="refresh" content="0;url=" /> | 页面重定向和刷新 |
| <meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> | 用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。 |
文档声明的作用、严格模式和混杂模式指什么、<!doctype html> 的作用
- <!DICTYPE>声明位于文档中的最前面，处于<html>标签之前，告诉浏览器的解析器，用什么文档类型来规范解析这个文档。
- 严格模式（推荐）现在也称为标准模式，在该模式下，浏览器会严格按照 HTML 和 CSS 标准来解析、渲染你的文档。
- 混杂模式（不推荐）的由来是一个历史问题。在互联网早期，网页一般写成两个版本：一个写给网景公司的 Navigator浏览器，一个写给微软公司的IE浏览器。当W3C制定了 Web 标准后，这两个浏览器不能马上开始按标准来解析渲染页面，因为这样会破坏当时大部分页面的显示效果。所以各浏览器就引入了混杂模式，在该模式下，浏览器会模拟Navigator 4和IE5的非标准行为来解析渲染页面，这样做就是为了兼容在W3C标准出现之前就存在的那些“不标准”的页面。
-<!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，而这是我们需要注意的。
浏览器乱码的原因是什么、如何解决
- 乱码原因：html文档的编码格式与浏览器的解析的编码格式不一样造成
- 解决方法：在保存文件的时候，自己要清除是那种编码方式保存的（sublime默认保存方式是utf-8,安装了GBK Encoding support插件也可另存为gbk）。
如果你用的utf-8编码格式，在标签内加一个就好了，同理要是GBK的话就在就好了
常见的浏览器有哪些，什么内核
| 浏览器 | 内核 |
|---|---|
| Internet Explorer | IE内核 |
| Firefox | Gecko |
| Opear | Presto |
| Safari&Chromr | Webkit |
| 国内大部分浏览器 | IE内核 |
列出常见的标签，并简单介绍这些标签用在什么场景
| 标签 | 作用 |
|---|---|
| <! doctype html /> | 声明为html5文档 |
| <head> | 元素是包含页面的元（meta）数据,是头部 |
| <meta> | 标签，提供元数据，元数据不显示在页面上，被浏览器解析 |
| <title> | 元素是页面的内容显示部分，是身体 |
| <body> | 元素是页面的内容显示部分，是身体 |
| 换行标签 | |
| 横线标签 | |
| h1~h6标签 | 标签定义一级标题到六级标题，标题字体大小逐渐减小 |
| img | 图像标签通过 (src 来确定图片位置,alt来定义图片加载失败显示文字) |
| a | 超链接标签（ href 链接地址） |
| <div> | 元素是块级元素，多用于布局 |
| <span> | 是个行内元素，无实际意义，可作为文本的容器 |
| ul li | 无序列表 |
| ol li | 有序列表 |
| dl dt dd | 自定义列表 |
| <table> | 表格标签 |
| <tr> | 表格行 |
| <th> | 定义表格头行 |
| <td> | 定义每行的列 |
| <iframe> | 用于在当前页面嵌入新的页面 |
| caption | 表格的标题 |
| strong | 定义重要文本 |
| em | 强调文本 |
| <button> | 按钮 |
