HTML初体验
HTML、XML、XHTML有什么区别
- HTML
- 超文本标记语言（Hypertext Markup language），是一种用于创建网页的标准标记语言，常与CSS,JavaScript一起用于设计网页、网页应用程序以及移动应用程序的用户界面。为语法较为松散的、不严格的Web语言，HTML是一种标记语言而不是编程语言。
- XML
- 可扩展标记语言（Extensible Markup Language），主要用于存储数据和结构，不用来表现或展示数据
- XHTML
- 可扩展超文本标记语言（eXtensible HyperText Markup Language，XHTML），基于XML，作用与HTML类似，但语法更严格
HTML语义化
- 语义化是一种编写HTML的方式，本质上是指在写一个页面的时候，选择合适的标签，使用合理的代码结构。即根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
- 好处：
- 清晰的页面结构：去掉或样式丢失的时候，也能让页面呈现清晰的结构，增强页面的可读性。
- 支持更多的设备：屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。 如果你使用的含语义的标记，屏幕阅读器会根据你的标签来判断网页的内容，而不是一个字母一个字母的拼写出来。
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
- 便于团队开发和维护：在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。
怎样理解内容与样式分离的原则
- 一个网页分为三个部分：HTML——结构，CSS——表现，javascrip——行为。内容也就是html，样式也就是css。所以内容和样式的分离，就是指在网页编码的过程中，要将html和css两大部分分开。
- 写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上，让 HTML 能体现页面结构或者内容。之后再去写样式。
- 写 JS 的时候，尽量不要用 JS 去直接操作样式，而是通过给元素添加删除class来控制样式变化
- HTML 内不允许出现属性样式，尽量不要出现行内样式
分离原则的优点
1.浏览器加载网页页面速度变快。分离原则下，大部分页面代码写在了CSS当中，页面体积容量变得更小。
2.网页修改设计时，效率、省时。根据html标签内ID或class的标记，到CSS里找到相应的ID或class，可以快速替换指定位置的样式，不会破坏页面架构和其他部分的样式。典型的应用就是网页换肤，使用相同的 html 结构，不同的 css 样式。
3.更好地被搜索引擎收录。基于内容与样式分离的原则，html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
4.css样式的分离，它可以根据不同的浏览器，达到显示效果的统一。保证网页架构不变形的前提下，放心在不同浏览器渲染显示样式。
有哪些常见的meta标签
meta标签有三个属性，分别是
name,http-equiv,charset
<head>
<meta name="description" content="免费web教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="W3Cschool">
<meta charset="UTF-8">
</head>
- 标签定义及使用说明
- 元数据（Metadata）是数据的数据信息。
- meta标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。
- meta元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
- 元数据可以被浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
- 示例1
定义文档关键词，用于搜索引擎：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
- 示例2
定义web页面描述：
<meta name="description" content="Free Web tutorials on HTML and CSS">
- 示例3
定义页面作者：
<meta name="author" content="Hege Refsnes">
- 示例4
每30秒刷新页面：
<meta http-equiv="refresh" content="30">
- 示例5
屏幕的缩放
<meta name="viewport" content="">
content的几个属性：
width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持，但是iOS支持；
height – viewport 的高度 （范围从 223 到 10,000 ）
user-scalable [yes | no]是否允许缩放
initial-scale [数值] 初始化比例（范围从 > 0 到 10）
minimum-scale [数值] 允许缩放的最小比例
maximum-scale [数值] 允许缩放的最大比例
target-densitydpi 值有以下（一般推荐设置中等像素密度或者低像素密度，后者设置具体的值dpi_value，另外webkit内核已不准备再支持此属性）
-- dpi_value 一般是70-400//没英寸像素点的个数
-- device-dpi设备默认像素密度
-- high-dpi 高像素密度
-- medium-dpi 中等像素密度
-- low-dpi 低像素密度
完整案例:<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">
- 示例6
声明文档使用的字符编码
<meta charset='utf-8'>
- 示例7
设置作者姓名及联系方式
<meta name="author" contect="name, xxx@163.com" />
- 示例8
声明文档兼容模式，指示IE以目前可用的最高模式显示内容
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
文档声明的作用?严格模式和混杂模式指什么?<!Doctype html> 的作用?
文档声明的作用
- 用来声明文档对象模型，用来告诉浏览器应该使用哪种方式来解析渲染页面。
严格模式和混杂模式
- 严格模式就是使用<!Doctype>标签来显式声明该用哪种方式来渲染页面
- 混杂模式即允许浏览器使用自己的方式来渲染页面。
<!Doctype html> 的作用
- <!Doctype html>即就是声明使用HTML5来解析渲染页面
浏览器乱码的原因是什么？如何解决
- 浏览器乱码原因
- 保存的文档的编码格式和浏览器解析时的解码格式不匹配导致的。
- 乱码一般是英文以外的字符才会出现。
- 如何解决
- 首先，在文件保存的时候你自己要清楚是用哪种编码方式保存的，然后在html文档中加入
<meta charset="">标签，声明页面编码方式
- 首先，在文件保存的时候你自己要清楚是用哪种编码方式保存的，然后在html文档中加入
常见的浏览器有哪些，什么内核
- 常见浏览器
- chrome，Firefox，ie，360，Safari、opera等
- 内核
- Trident(IE内核)：IE浏览器，很多国内浏览器，以及很多双核浏览器的其中“一核”都是Trident。
- Gecko：FireFox
- Webkit：Chrome，Safari
- Presto：Opera
列出常见的标签，并简单介绍这些标签用在什么场景
| 常见标签 | 场景 |
|---|---|
<h1>...</h1> |
表示标题,h1到h6分别代表六级标题 |
<p>...</p> |
段落，表示大段文字 |
<a>...</a> |
链接，链接到下一个地址，有href, target,title三个属性,分别表示链地址（或#锚点，#about，/路径），页面打开方式，网页标题 |
<img> |
展示图片，属性src：图片地址，属性alt:描述图片的注释.ps:只闭合标签，最后不需要 / |
<div>...</div> |
表示一大块，用于给页面划分区域，让结构更清晰。属性：id,表示给一个元素取名；class:表示给一类元素取名 |
<ul>...</ul> |
无序列表，用于表示并列的内容，ul的直接子元素是li,可以嵌套 |
<ol>...</ol> |
有序列表 |
<li>...</li> |
列表项，与ul,ol结合使用 |
<dl>.</dl>,<dt>.</dt>,<dd>.</dd> |
用于展示一系列 “标题:内容... ”的场景 |
<button>点我</button> |
按钮 |
<strong>.</strong> ,<em>.</em> |
em 需要强调一下strong 很重要、强调性更强 |
<span>...</span> |
给某个需要加样式的元素添加标记，无强调语义 |
<iframe>...</iframe> |
用于嵌入一个页面 |
<table>..</table> |
用于展示表格，不要用来做布局，thead tbody tfoot可省略 |
<tr>..</tr> |
行，与<table>..</table>一起用于展示表格 |
<th>..</th> |
标题的列 |
<td>..</td> |
内容的列 |
<!Doctype html> |
文档对象模型 |
<br> |
换行 |
<html>..</html> |
整个页面的根节点，一个页面只能有一个html标签，所有内容应位于html标签内 |
<head>..</head> |
用于定义文档的头部信息，它是所有头部元素的容器 |
<title>...</title> |
文档的标题 |
<meta>...</meta> |
提供有关页面的元信息 |
<body>...</body> |
文档的内容,即可视页面内容 |
