浏览器内核与HTML基础详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44729619/article/details/103540047

本文主要介绍了浏览器内核的五大类型，包括Trident、Gecko、WebKit、Chromium/Blink和已废弃的Presto，详细阐述了各内核的代表浏览器及特点。接着，文章深入讲解了HTML的基本概念，包括双标签、单标签的语法结构，以及标签的作用，如排版标签、图像标签、表单元素和表单域的使用方法，强调了label标签在交互中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一部分浏览器内核（理解）
（1）Trident(IE内核)
①国内很多的双核浏览器的其中一核便是 Trident。
②特点:代表： IE、傲游、世界之窗浏览器、猎豹安全浏览器、360极速浏览器、百度浏览器等。

（2）Gecko(firefox)
①Gecko(Firefox 内核)： Mozilla FireFox(火狐浏览器) 采用该内核
②特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。

（3） webkit(Safari)
①Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）
② 代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器

（4） Chromium/Blink(chrome)
在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。
Chromium引擎虽然是属于WebKit的分支，却把WebKit的代码梳理得可读性提高很多，有的地方会把Chromium引擎跟WebKit区分开来，有的地方则直接把Chromium引擎归为WebKit都是可以的。

（5） Presto(Opera)
Presto（已经废弃）是挪威产浏览器 opera 的 “前任” 内核，为何说是 “前任”，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。

第二部初始Html

<HTML>   根节点
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

****1 HTML标签：****

作用所有HTML中标签的一个根节点。 最大的标签   根标签

2 head标签： 文档的头部

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

注意在head标签中我们必须要设置的标签是title

3.title标签： 文档的标题

作用：让页面拥有一个属于自己的标题。

4.body标签：文档的主体  以后我们的页面内容 基本都是放到body里面的

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

第三部分标签分类
双标签
<标签名> 内容 </标签名><html></html>
单标签
<标签名/>(<br/>)换行标签

第四部分标签作用
排版标签（字体大小以及粗细逐一递减）

 <h1>、<h2>、<h3>、<h4>、<h5>和<h6>
 注意：  h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。 
 一般h1 都是给logo使用，或者页面中最重要标题信息

段落标签

<p>  文本内容  </p>

水平线标签

<hr/>

文本格式化标签

 <b></b>和<strong></strong>	   文字以**加粗**方式显示
 <i></i>和<em></em>   **斜体**
 <s></s>和<del></del>     **加删除线**
 <u></u>和<ins></ins>   加下划线
 b i s u 只有使用没有强调的意思     strong   em  del   ins  语义更强烈

图像标签img

<img src ="图像url">
属性             属性值          描述
src              url           图片地址
alt              文本          图像不能显示时替换文本
title			 文本		   鼠标悬停时显示内容
width		     像素		   设置图像的宽度
height		     像素		   设置图像的高度
border           数字         设置图像边框的宽度

瞄点定位

1.使用“a href=”#id名>“链接文本"</a>创建链接文本**（被点击的）**
  <a href="#two">   

2.使用相应的id名标注跳转目标的位置。
  <h3 id="two">第2集</h3>

base标签 设置整体连接打开的状态

targrt="_blank";在新窗口打开的状态

相对路径

图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如img src=“logo.gif” /。
图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如img src=“img/img01/logo.gif” /。
图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如img src="…/logo.gif" /。

无须列表
ul li 相当于一个容器，可以容纳所有元素。

有序列表
ol li

自定义列表
dl dt dd

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

表格属性

<table>
<th>
<td></td>
</th>
</table>

属性名      含义    								常用属性值
border     设置表格的边框（默认border=“0”无边框） 像素值
cellspacing 设置单元格与单元格边框之间的距离  	像素值（默认值为2像素）
cellpadding 设置单元格内容与单元格边框之间的距离 	像素值（默认值为1像素）
align 设置在网页中的水平对齐方式   				left center right

表格标题 : caption
纵向合并：rowspan(肉粽) 横向合并：colspan
input控件
在这里插入图片描述
label标签
作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

方法一
<label for="male">昵称</label>
<input type="text"  id="male" />
方法二
<label>用户名<input type ="text" /><label>

textarea控件

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

下拉菜单

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

在option 中定义selected =" selected "时，当前项即为默认选中项

表单域

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

method：用于设置表单数据的提交方式，其取值为get（会把数据拼接在地址栏上的问好后面安全系数不高）或post（不会显示，直接提交）。

Html复习