前端页面三层构成及作用
- 结构层：由 HTML 类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。
- 表示层：由
CSS负责创建，解决了页面“如何显示内容”的问题。 - 行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。
meta
-
meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务
-
meta标签共有两个属性，分别是http-equiv属性和name属性
- name属性主要用于描述网页
- http-equiv属性向浏览器传回一些有用的信息，让网页显示正确的信息
HTML5新增标签
<header> ：标记定义一个页面或一个区域的头部
<nav> 标记定义导航链接
<section> 标记定义一个区域
<aside> 标记定义页面内容部分的侧边栏
<article> 标记定义一篇文章
<hgroup> 标记定义文件中一个区块的相关信息
<figure> 标记定义一组媒体内容以及它们的标题
<figcaption>标记定义 figure 元素的标题。
<dialog> 标记定义一个对话框(会话框)类似微信
<footer> 标记定义一个页面或一个区域的底部
<video src="...">
<audio src="...">
<ruby> 标记定义注释或音标
<rp> 告诉那些不支持 ruby元素的浏览器如何去显示
<rt> 标记定义对ruby的注释内容文本
<mark> 标记定义有标记的文本 (黄色选中状态)
<output> 标记定义一些输出类型，计算表单结果配合oninput事件
<keygen> 标记定义表单里一个生成的键值(加密信息传送)
<time> 标记定义一个日期/时间，目前所有主流浏览器都不支持
HTML5语义化标签
- header – 标题
- nav – 导航
- article – 文章
- section – 节或段
- aside – 侧边栏
- footer – 页脚
语义化的好处
- 在
没CSS样式的情况下，页面整体也会呈现很好的结构效果 代码结构清晰，易于阅读，利于开发和维护方便其他设备解析（如屏幕阅读器）根据语义渲染网页。有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重
html5新增的表单元素有以下几种：
datalist：datalist 元素规定输入域的选项列表
keygen：keygen 元素的作用是提供一种验证用户的可靠方法
output：output 元素用于不同类型的输出，比如计算或脚本输出
表单中readonly和disabled的区别
- 共同点：能够使用户不能改变表单中的内容
- 不同点： 1、readonly只对input和textarea有效，但是disabled对所有的表单元素都是有效的，包括radio、checkbox 2、readonly可以获取到焦点，只是不能修改。disabled设置的文本框无法获取焦点 3、如果表单的字段是disabled，则该字段不会发送（表单传值）和序列化
Html5中的置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
img、input、textarea、select、object
不可替换元素：其内容直接表现给用户端（如浏览器）
GBK和UTF-8文字编码的区别：
GBK包含全部中文字符；
UTF-8则包含全世界所有国家需要用到的字符。
GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准；（好像还不是国家标准）
UTF-8编码的文字可以在各国各种支持UTF8字符集的浏览器上显示。
比如，如果是UTF8编码，则在外国人的英文IE上也能显示中文，而无需他们下载IE的中文语言支持包。
所以，对于英文比较多的论坛 ，使用GBK则每个字符占用2个字节，而使用UTF－8英文却只占一个字节。
[input]
text 单行文本框（注意这个是单行文本框并且还是input里type属性的值。多行文本框是一个标签）
password 密码域（这个会将输入将输入的文本用粗黑点表示）
checkbox 复选框
radio 单选框
file 文件域（file后面是要有name的在file中name是只读的）
name 数据的名字（相当于给数据写名字）
value 提交数据（如果给了一个value还给了属性值那么这个属性值会默认的出现在input中的。如果要将input中的数据提交要有一个那么name）
button 提交按钮（这个要配合js使用）
submint 提交按钮（为保险起见不同浏览器编译出的不同在写这个属性是后面要加value属性）
reset 重置按钮（（为保险起见不同浏览器编译出的不同在写这个属性是后面要加value属性）
image 图像域（会将form表单的数据进行点击图片提交，同时会将鼠标的坐标进行提交，这个的作用主要就是可以把一张图片当成一个提交按钮）
hideden 隐藏域(常用场景：不想让用户看到的地方使用。主要作用是将input隐藏)
img中title和alt
一、什么是alt属性
alt属性，是图片内容的等价描述，用于图片无法加载时显示或读屏器阅读图片（帮助盲人了解图片内容）。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。 作用是当无法显示文档中的图片是，可以为浏览者提供文字说明，是用来替代图片的，而不是提供额外说明文字的
二、什么是title属性
title属性是global attribute之一，作用是提供建议性的信息，通常是鼠标滑动到元素上是显示。 title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。 title属性可以为链接添加描述性文字，来更加清楚的表达链接的目的
块级元素和行内元素
img属于行内替换元素，效果与块元素一致
-
块级元素
-
独占一行；
-
宽度缺省是它父级元素的100%，除非设定一个宽度；
-
高度、行高、外边距、内边距都可以设置
-
可以容纳其他内联元素或者其他块元素，一般用于配合css完成网页的基本布局；
div – 常用块级容器，也是CSS layout的主要标签 p – 段落 h-标题标签和水平线 pre – 格式化文本 form – 交互表单 ol – 有序表单 ul – 无序列表 li dl – 定义列表 menu – 菜单列表 table – 表格 address – 地址 blockquote – 块引用 center – 举中对齐块 dir – 目录列表 div – 常用块级容易，也是CSS layout的主要标签 dl – 定义列表 fieldset – form控制组 form – 交互表单 h1 – 大标题 h2 – 副标题 h3 – 3级标题 h4 – 4级标题 h5 – 5级标题 h6 – 6级标题 hr – 水平分隔线 isindex – input prompt menu – 菜单列表 noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容 noscript – 可选脚本内容（对于不支持script的浏览器显示此内容） ol – 有序表单 p – 段落 pre – 格式化文本 table – 表格 ul – 无序列表
-
-
行内元素
-
不会独占一行，遇到父级元素边界会自动换行；
-
高、行高以及内外边距都不可以改变
-
宽度与内容一样宽，且不可改变
-
行内元素只能容纳文本或者其他行内元素
-
对于行内元素，设置宽高无效，可以通过设置line-height来设置，
-
设置margin和padding只有左右有效，上下无效
a – 锚点 span – 常用内联容器，定义文本内区块 img – 图片 input – 输入框 button-按钮 label – 表格标签 textarea – 多行文本输入框 select – 项目选择 br – 换行 strong – 粗体强调 a – 锚点 abbr – 缩写 acronym – 首字 b – 粗体(不推荐) bdo – bidi override big – 大字体 br – 换行 cite – 引用 code – 计算机代码(在引用源码的时候需要) dfn – 定义字段 em – 强调 font – 字体设定(不推荐) i – 斜体 img – 图片 input – 输入框 kbd – 定义键盘文本 label – 表格标签 q – 短引用 s – 中划线(不推荐) samp – 定义范例计算机代码 select – 项目选择 small – 小字体文本 span – 常用内联容器，定义文本内区块 strike – 中划线 strong – 粗体强调 sub – 下标 sup – 上标 textarea – 多行文本输入框 tt – 电传文本 u – 下划线
-
