前端HTML基础笔记

前端浏览器内核的理解

浏览器内核又叫排版引擎、解释引擎、渲染引擎，负责读取网页的内容，整理讯息，计算网页的显示方式并显示页面。
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

1. 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不1. 所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
2. JS引擎则：解析和执行javascript来实现网页的动态效果。 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

前端浏览器内核分类

1. Trident（IE内核）
   常见的浏览器有IE6、IE7、IE8(Trident4.0)、IE9(Trient5.0)、IE9(Trient 6.0)；360安全浏览器(1.0-5.0为Trient，6.0为Trient+Webkit，7.0为Trient+Blink) ，360极速浏览器(7.5之前为Trident+Webkit，7.5为Trident+Blink)，搜狗高速浏览器（1.x为Trident，2.0及以后版本为Trident+Webkit）
   其中部分浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”，而Trident则是“兼容浏览模式”，用户可以来回切换。
2. Gocko（Firefox内核）
   常见浏览器有Mozilla Firefox
3. Presto(Opera前内核)
   常见浏览器有Opera7，现Opera已改用Google Chrome的Blink内核
4. Webkit(Safari内核，Chrome内核原型，开源)
   常见浏览器有遨游浏览器3、Apple Safari(Win/Mac/IPhone/ipad)、Android默认浏览器
5. Blink(Google Chrome内核，Webkit的分支)
   常见浏览器有GoogleChrome、Opera

html基本结构

1. 
   放在html标签前面，告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
   !DOCTYPE document.type文档类型，遵循哪个版本的HTML
   !DOCTYPE html 表示使用的是HTML5的语法 可以兼容上个版本的HTML
2. 标准模式与兼容模式各有什么区别?
   标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
3. HTML5 为什么只需要写 ？
   HTML5 不基于 SGML(即标准通用标记语言)，因此不需要对DTD(文档类型定义)进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
   而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型
4. <meta charset="UTF-8">
   设置页面的字符串(字符编码)
   UTF-8：字符集
   UTF-8是一种通用的一种字符集，基本包含了全世界所有国家的文字
   GBK：只包含中文
   GB2312：只包含简体中文
   BIG5：只包含繁体中文
   出现乱码，可改换字符集

简述一下你对HTML语义化的理解？

• 用正确的标签做正确的事情。

• html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

• ​即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

• ​搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
  ​使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

a标签设置在浏览器窗口的打开方式

在当前窗口打开页面target="self"
在新建窗口打开页面·target="_blank·
base标签用于优化多条·target='_blank' 属性，可减少target='_blank'属性命令
语法

总结
base可以设置整体链接的打开状态
base写到之间
把所有的连接都默认添加到target='_blank'·

表格标签

简单表格由table元素以及一个或多个tr（行标签）、th（表头单元格标签）、td（普通单元格标签）

表头1
表头2


内容1
内容2

复杂的表格还包括caption（表格标题）、col(定义列)、colgroup(对表格中的列进行组合)、thead（组合表头的内容）tbody(组合表格的主题内容)、tfoot(组合表格的脚注内容

表格的标题





表头1
表头2
表头3




内容1
内容2
内容3




脚注1
脚注2
脚注2

属性

1. width:规定表格的宽度、height:规定表格的高度
2. align属性：规定表格相对周围元素的对齐方式（left/center/right）
3. bgcolor属性：规定表格的背景颜色
4. background属性：规定表格的背景图像
5. border属性：规定表格边框的宽度
6. cellspacing属性：规定单元格之间的间距（控制单元格与边框的距离）
   注意：cellspacing设为0时,表格间没有间距,表格边框将紧挨着显示,若要使表格边框合并,则需使用CSS的border-collapse:collapse
7. cellpadding属性：规定单元格边界与单元格内容之间的间距,默认为0（控制单元格内文字的距离）
8. frame属性：规定外侧边框的那个部分是可见的
   void：不显示外侧边框
   box：显示所有外侧边框
   above：显示上部的外侧边框
   below：显示下部的外侧边框
   lhs：显示左侧边框
   rhs：显示右侧边框
   hsides:显示上下侧的外侧边框
   vsides:显示左右侧的外侧边框
9. rules属性：规定内侧边框的那个部分是可见的
   none:内部没有线条
   all:显示内部所有的线条
   rows:显示行之间的线条
   cols:显示列之间的线条
   groups:显示行组和列组之间的线条
10. rowspan属性:规定单元格横跨的行数（合并行，夸行合并）
11. colspan属性:规定单元格横跨的列数（合并单元格，夸列合并）
    删除的单元格=要合并的单元格-1

label功能标签

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

• 使用label标签包裹要设置的表单元素和文本内容，增加可点击区域
  请阅读本网站的服务条款和协议
• 利用label标签中的for属性，点击文字可到选择框中
  用户名：

HTML5的form如何关闭自动完成功能？

表单中操作的区域
语法

配合表单域使用

属性：
action 存放接收数据的服务器地址
method 设置数据的传输方式
*get 在url地址中通过明文的方式传输数据
*post 报文 将内容放在HTTP头部
name：给表单域设置一个名称
给不想要提示的 form 或某个 input 设置为 autocomplete=off。’