前端HTML基础笔记

最新推荐文章于 2024-07-15 20:17:17 发布

Toublemaker_

最新推荐文章于 2024-07-15 20:17:17 发布

阅读量281

点赞数

前端浏览器内核的理解

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

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

前端浏览器内核分类

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则是“兼容浏览模式”，用户可以来回切换。
Gocko（Firefox内核）
常见浏览器有Mozilla Firefox
Presto(Opera前内核)
常见浏览器有Opera7，现Opera已改用Google Chrome的Blink内核
Webkit(Safari内核，Chrome内核原型，开源)
常见浏览器有遨游浏览器3、Apple Safari(Win/Mac/IPhone/ipad)、Android默认浏览器
Blink(Google Chrome内核，Webkit的分支)
常见浏览器有GoogleChrome、Opera

html基本结构

<!DOCTYPE html>
放在html标签前面，告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
!DOCTYPE document.type文档类型，遵循哪个版本的HTML
!DOCTYPE html 表示使用的是HTML5的语法可以兼容上个版本的HTML
标准模式与兼容模式各有什么区别?
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
HTML5 为什么只需要写 <!DOCTYPE HTML>？
HTML5 不基于 SGML(即标准通用标记语言)，因此不需要对DTD(文档类型定义)进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型
<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 target='_blank'/>
总结
base可以设置整体链接的打开状态
base写到<head></head>之间
把所有的连接都默认添加到target='_blank'·

表格标签

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

<table border=1>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>

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

<table width="400" border="1">
<caption>表格的标题</caption>
<col align="left"/>
<col align="left"/>
<col align="left" />
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>脚注1</td>
<td>脚注2</td>
<td>脚注2</td>
</tr>
</tfoot>
</table>

属性

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

label功能标签

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

使用label标签包裹要设置的表单元素和文本内容，增加可点击区域
<label> <input type="checkbox">请阅读本网站的<a href="#">服务条款和协议</a> </label>
利用label标签中的for属性，点击文字可到选择框中
<label for="username">用户名：</label><input="text" id="username">

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

表单中操作的区域
语法
<form action="存放数据的服务器地址xxx.php">
<input type="" name="userName" methood="post">
<input type="reset">配合表单域使用
</form>
属性：
action 存放接收数据的服务器地址
method 设置数据的传输方式
*get 在url地址中通过明文的方式传输数据
*post 报文将内容放在HTTP头部
name：给表单域设置一个名称
给不想要提示的 form 或某个 input 设置为 autocomplete=off。’