参考: 参考1
参考2
参考3
关于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段落 表示大段文字
a链接 链接到一个地址
baidu.com title是鼠标放到a链接上很短时间后显示的问题 _blank在新窗口打开
baidu.com #代表锚点 这里页面不会跳转也不会刷新
baidu.com锚点 点击链接后会跳到id为about的内容上
baidu.com 根路径
alt 地址有问题时会显示alt的文字 alt也有利于seo
div
语义是一大块,用于给页面划分区块,让页面更清晰
id 元素的名字 唯一
class 一类的名字 多个div可以有同一个class
ul li
ul: unsort list 无序列表
用于表示并列的内容
ul的直接子元素是li 注意!!!!
可以嵌套
ol li
order list 有序列表 用于表示带步骤或编号的并列内容
ol的直接子元素只能是li 可以嵌套
把大象关到冰箱的步骤
- 把大象变小
- 打开冰箱
- 把大象塞进去
dl dt dd
用于展示一系列标题:内容...的场景
dl 列表
dt标题
dd描述
- 商品名称:
- 青花瓷
- 特征:
- 白色
- 圆口
- 商品介绍
- 这是一个年代久远的瓷器
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标签
H5标准声明,使用 HTML5 doctype,不区分大小写
标准的 lang 属性写法声明文档使用的字符编码
优先使用 IE 最新版本和 Chrome
页面描述
页面关键词
网页作者
搜索引擎抓取
为移动设备添加 viewport
iOS 设备 begin
添加到主屏后的标题(iOS 6 新增)
是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏
添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)
设置苹果工具栏颜色
启用360浏览器的极速模式(webkit)
避免IE使用兼容模式
不让百度转码
针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓
微软的老式浏览器
uc强制竖屏
QQ强制竖屏
UC强制全屏
QQ强制全屏
UC应用模式
QQ应用模式
windows phone 点击无高光
设置页面不缓存
题目5:文档声明的作用?严格模式和混杂模式指什么? 的作用?
声明位于位于HTML文档中的第一行,处于 标签之前。在HTML中 doctype 有两个主要目的。
对文档进行有效性验证。
它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动作是被动的,每次页面加载时,浏览器并不会下载DTD 并检查合法性,只有当手动校验页面时才启用。
决定浏览器的呈现模式
对于实际操作,通知浏览器读取文档时用哪种解析算法。如果没有写,则浏览器则根据自身的规则对代码进行解析,可能会严重影响html 排版布局。浏览器有三种方式解析HTML文档。
非怪异(标准)模式
怪异模式
部分怪异(近乎标准)模式
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
题目6:浏览器乱码的原因是什么?如何解决
编写代码时,如果没有事先设置采用 utf-8编码(中文)或者是保存时没有以该种编码保存,那么再打开浏览器时,则由浏览器默认去进行解析您的代码,并呈现给使用者,这个时候很大可能就会出现乱码。
所以,在编写网页代码时, 是必要的。
题目7:常见的浏览器有哪些,什么内核
IE浏览器 Trident内核
Safari浏览器 Webkit内核
Firefox浏览器 Gecko内核
Chrome浏览器 Webkit内核
题目8:列出常见的标签,并简单介绍这些标签用在什么场景
h1-h6
h1代表页面最大的标题
h2二级标题
h3更弱的标题
p段落 表示大段文字
a链接 链接到一个地址
baidu.com title是鼠标放到a链接上很短时间后显示的问题
baidu.com #代表锚点 这里页面不会跳转也不会刷新
baidu.com锚点 点击链接后会跳到id为about的内容上
baidu.com 根路径
地址有问题时会显示alt的文字
自闭合标签
语义是一大块,用于给页面划分区块,让页面更清晰
id 元素的名字 唯一
class 一类的名字 多个div可以有同一个class
ul li 一般搭配使用
ul unsort list无序列表
用于表示并列的内容
ul的直接子元素是li
可以直接嵌套
ol li
order list 有序列表 用于表示带步骤或编号的并列内容
ol的直接子元素只能是li 可以嵌套
dl dt dd
用于展示一系列标题:内容...的场景
dl 列表
dt标题
dd描述
button
strong em span
strong:很重要 强调性更强
em:需要强调一下
span几乎没有语义
span可以处理 个别元素
iframe用于嵌入一个页面,注意跨域操作问题
table 用于展示表格,不要用来做布局 thead tbody tfoot可省略
浏览器会自动添加border-collapse:collapse;用于合并边框