关于HTML
超文本标记语言(HyperText Markup Language)是一种用于
创建网页的标准标记语言。HTML是一种基础技术，常与CSS
JS一起被网站用于设计网页、网页应用程序以及移动应用程序
网页浏览器可以读取HTML文件，并将其渲染成可视化网页
1997.1 HTML3.2
1997.12 HTML4.0
1999.12 HTML4.01
2014.10 HTML5
表现(内容)、样式、行为分离
1.写HTML的时候先不管样式，重点放在HTML的结构和语义化上
让HTML能体现页面结构或者内容，之后再去写样式
2.写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加
删除class来控制样式变化
3.HTML内不允许出现属性样式，尽量不要出现行内样式
语义化HTML
语义化HTML是一种编写HTML的方式
选择合适的标签、使用合理的代码结构，便于开发者阅读，
同时让浏览器的爬虫和机器更好的解析
常见标签：
h1-h6
h1代表页面最大的标题
h2二级标题
h3更弱的标题
p段落 表示大段文字
<p></p>
a链接 链接到一个地址
<a href="www.baidu.com" target="_blank" title="baidu">baidu.com</a> title是鼠标放到a链接上很短时间后显示的问题 _blank在新窗口打开
<a href="#">baidu.com</a> #代表锚点 这里页面不会跳转也不会刷新
<a href="#about">baidu.com</a>锚点 点击链接后会跳到id为about的内容上
<a href="/getCourse">baidu.com</a> 根路径
alt 地址有问题时会显示alt的文字 alt也有利于seo
div
语义是一大块，用于给页面划分区块，让页面更清晰
<div></div>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
id 元素的名字 唯一
class 一类的名字 多个div可以有同一个class
ul li
ul: unsort list 无序列表
用于表示并列的内容
ul的直接子元素是li 注意！！！！
可以嵌套
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li>
<a href="#">更多</a>
<ul>
<li>联系</li>
<li>地址</li>
</ul>
</li>
</ul>
ol li
order list 有序列表 用于表示带步骤或编号的并列内容
ol的直接子元素只能是li 可以嵌套
<h2>把大象关到冰箱的步骤</h2>
<ol>
<li>把大象变小</li>
<li>打开冰箱</li>
<li>把大象塞进去</li>
</ol>
dl dt dd
用于展示一系列标题：内容...的场景
dl 列表
dt标题
dd描述
<dl>
<dt>商品名称:</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圆口</dd>
<dt>商品介绍</dt>
<dd>这是一个年代久远的瓷器</dd>
</dl>
strong em span
strong：很重要 强调性更强
em：需要强调一下
span几乎没有语义
span可以处理 个别元素
题目1：##HTML、XML、XHTML 有什么区别
HTML超文本标记语言，是语法较为松散的、不严格的Web语言
XML 可扩展标记语言，主要用于存储数据和结构参考
XHTML 可扩展超文本标记语言，基于XML，和HTML类似
但语法更为严格
题目2：怎样理解 HTML 语义化
语义化HTML是一种编写HTML的方式，
选择合适的标签，使用合理的代码结构，便于开发者阅读
同时让浏览器的爬虫和机器更好的解析
合理的标签、命名、属性
题目3：怎样理解内容与样式分离的原则
1.写HTML的时候先不管样式，重点放在HTML的结构和语义化上，
让HTML能体现页面结构或者内容。之后再去写样式
2.写JS的时候尽量不要用JS去直接操作样式，而是通过给元素添加
删除class来控制样式变化
3.HTML内不允许出现属性样式，尽量不要出现行内样式。
注意不要用到上古时代的写法
题目4：有哪些常见的meta标签
<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写
<head lang=”en”> 标准的 lang 属性写法
<meta charset=’utf-8′> 声明文档使用的字符编码
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 优先使用 IE 最新版本和 Chrome
<meta name=”description” content=”不超过150个字符”/> 页面描述
<meta name=”keywords” content=””/> 页面关键词
<meta name=”author” content=”name, email@gmail.com”/> 网页作者
<meta name=”robots” content=”index,follow”/> 搜索引擎抓取
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin
<meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/> 设置苹果工具栏颜色
<meta name=”renderer” content=”webkit”> 启用360浏览器的极速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免IE使用兼容模式
<meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不让百度转码
<meta name=”HandheldFriendly” content=”true”> 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
<meta name=”MobileOptimized” content=”320″> 微软的老式浏览器
<meta name=”screen-orientation” content=”portrait”> uc强制竖屏
<meta name=”x5-orientation” content=”portrait”> QQ强制竖屏
<meta name=”full-screen” content=”yes”> UC强制全屏
<meta name=”x5-fullscreen” content=”true”> QQ强制全屏
<meta name=”browsermode” content=”application”> UC应用模式
<meta name=”x5-page-mode” content=”app”> QQ应用模式
<meta name=”msapplication-tap-highlight” content=”no”> windows phone 点击无高光
设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
题目5：文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。在HTML中 doctype 有两个主要目的。
对文档进行有效性验证。
它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载DTD 并检查合法性，只有当手动校验页面时才启用。
决定浏览器的呈现模式
对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响html 排版布局。浏览器有三种方式解析HTML文档。
非怪异（标准）模式
怪异模式
部分怪异（近乎标准）模式
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
题目6：浏览器乱码的原因是什么？如何解决
编写代码时，如果没有事先设置采用 utf-8编码（中文）或者是保存时没有以该种编码保存，那么再打开浏览器时，则由浏览器默认去进行解析您的代码，并呈现给使用者，这个时候很大可能就会出现乱码。
所以，在编写网页代码时，<meta charset = "utf-8"> 是必要的。
题目7：常见的浏览器有哪些，什么内核
IE浏览器 Trident内核
Safari浏览器 Webkit内核
Firefox浏览器 Gecko内核
Chrome浏览器 Webkit内核
题目8：列出常见的标签，并简单介绍这些标签用在什么场景
h1-h6
h1代表页面最大的标题
h2二级标题
h3更弱的标题
p段落 表示大段文字
<p></p>
a链接 链接到一个地址
<a href="www.baidu.com" target="_blank" title="baidu">baidu.com</a> title是鼠标放到a链接上很短时间后显示的问题
<a href="#">baidu.com</a> #代表锚点 这里页面不会跳转也不会刷新
<a href="#about">baidu.com</a>锚点 点击链接后会跳到id为about的内容上
<a href="getcourse">baidu.com</a> 根路径
<img src="jirengu.com/img/1.png" alt="图片">地址有问题时会显示alt的文字
自闭合标签
语义是一大块，用于给页面划分区块，让页面更清晰
<div></div>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
id 元素的名字 唯一
class 一类的名字 多个div可以有同一个class
ul li 一般搭配使用
ul unsort list无序列表
用于表示并列的内容
ul的直接子元素是li
可以直接嵌套
ol li
order list 有序列表 用于表示带步骤或编号的并列内容
ol的直接子元素只能是li 可以嵌套
dl dt dd
用于展示一系列标题：内容...的场景
dl 列表
dt标题
dd描述
button <button>click</button>
strong em span
strong：很重要 强调性更强
em：需要强调一下
span几乎没有语义
span可以处理 个别元素
iframe用于嵌入一个页面，注意跨域操作问题
table 用于展示表格，不要用来做布局 thead tbody tfoot可省略
浏览器会自动添加border-collapse：collapse；用于合并边框
网友评论