HTML基础知识点

一、HTML基础

1.1浏览器内核

四大内核分别是:Trident(也称IE内核).webkit、Blink、Gecko。

1.2HTML简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。

1.3HTML与CSS、JS的关系

一个页面的组成部分由结构、表现、行为来组成。

其中结构对应HTML，HTML中含有很多元素标签，来控制页面中所显示的元素。

表现对应CSS，CSS可以修改HTML标签的一些属性，来改变页面中HTML的元素的样式。

行为对应JS语句，JS语句可以来控制HTML标签与用户进行一些交互动作。

以一个房子为例，我们有了新房子，需要往里面搬家具，比如：沙发，餐桌，电视，床等等家具，可以将这些家具想象成HTML中的元素。搬运完成之后，我们要给房子装饰一下，比如给墙上粉饰一下，或者铺个地毯等等。我们有了电视，当我拿遥控打开开关的时候，电视得做出相应的动作。

在上面的例子中

HTML就是搬运元素的搬运工

CSS就是粉饰墙壁的粉刷工

JS就是让用户使用家具的操作工

综合所述，HTML实现了往一个空页面搬运东西，无论是什么盒子，文本，图像等等元素。

CSS就是将这些元素，变个位置，颜色，大小等等样式。

JS就是使这些元素与用户进行交互，以按钮为例，当点击按钮时，应该出现什么结果。

1.4B/S与C/S开发方式

1.4.1B/S

B/S结构（Browser/Server，浏览器/服务器模式），是WEB兴起后的一种网络结构模式，WEB浏览器

是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简

化了系统的开发、维护和使用。客户机上只要安装一个浏览器，服务器安装SQL Server、Oracle、

MySql等数据库。浏览器通过Web Server 同数据库进行数据交互。

举些例子，现在我们在网上玩的4399，逛的淘宝都是以浏览器/服务器的开发方式来进行的，我们想玩4399不需要去下4399的客户端，只需要一个浏览器搜索4399就可以了。淘宝也是。

1.4.2C/S

C/S是Client/Server的缩写。客户端/服务器开发模式,服务器通常采用高性能的PC、工作站或小型机，

并采用大型数据库系统，如Oracle、Sybase、Informix或 SQL Server。客户端需要安装专用的客户端软

件。C/S面向特定的用户，维护成本较高，常用于局域网。

举个例子，像现在大的穿越火线，英雄联盟。我们需要先下载客户端才能玩，而当服务器更新时，我们还要升级客户端。

1.5HTML初学3大标签

1.5.1HTML标签

元素是HTML页面的根元素

此元素可告知浏览器其自身是一个HTML文档。

与 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

文档的头部由 标签定义，而主体由 标签定义。

1.5.2HEAD标签

head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系

等。

下面这些标签可用在 head 部分： , , ,

1.5.3BODY标签

body 元素定义文档的主体。

body 元素包含了可见的页面内容（比如文本、超链接、图像、表格和列表等等。）

**注：**在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

1.6head中的子标签

1.6.1link标签

定义文档与外部资源的关系，通常用于链接到样式表。

1.6.2script标签

用来引入外部js或定义内部js代码

1.6.3style标签

定义了HTML文档的样式文件引用地址，在

染 HTML 文档

1.6.4title标签

定义文档的标题，它是 head 部分中唯一必需的元素。

title 标签定义了不同文档的标题。title 在 HTML/XHTML 文档中是必须的。

定义了浏览器工具栏的标题

当网页添加到收藏夹时，显示在收藏夹中的标题

type=“image/x-icon”>显示在搜索引擎结果页面的标题

1.6.5meta标签

描述了一些基本的元数据。“元”配置，就是表示基本的配置项目。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他

Web服务。

1.7body中的子标签

按照元素是否为块级元素来区分，body中的子标签分为块级元素，行内元素，行内块元素，在css可以修改块级元素的宽和高

1.7.1块级元素

块级元素就是独占全行，其他元素按照代码先后顺序上下排列，两个div会按照上下排列

div	常用块级容器，也是css layout的主要标签
h1~h6	标题标签
hr	水平分隔线
ol	有序列表
ul	无序列表
li	列表项
dl	自定义列表
dd	定义描述
table	表格
p	段落
form	交互表单

1.7.2行内元素

行内元素和块级元素相对，行内元素并不会独占全行，两个行内元素之间可以显示在同一行上，行内元素不可以通过css修改宽和高

他的宽和高是通过元素内的文字大小来改变的

span	常用内联容器，定义文本内区块
a	锚点，超链接
b	加粗
strong	加粗强调
i	斜体
em	斜体强调
del	文档中已被删除的文本
br	强制换行
u	下划线
textarea	多行文本输入框
input	输入框
select	下拉列表
sub	下标
sup	上标
small	小字体文本

1.7.3行内块元素

行内块元素是特殊的一种元素，吸收了块级元素和行内元素的优点，它可以和行内元素在同一行上，也可以通过css修改宽和高

它也是通过元素内的文字大小或者图片大小来改变宽和高的

img 图片标签

1.8长度单位

1.8.1px

px像素单位，相信很多人都在电子屏幕上滴过水，透过水可以看到一些绿色的点，事实上，我们的电子屏幕是由很多个像素来呈现图像的，一个像素就是1px，属于绝对长度。

1.8.2em

在没有任何CSS规则的前提下，1em的长度是：1em == 16px == 0.17in == 12pt == 1pc ==

4.2mm == 0.42cm 浏览器默认字体大小****16px

他是相对字体大小设置 font-size来改变大下的

1.8.3rem

rem和em一样也是一个相对单位，但是和em不同的是rem总是相对于根元素(如:root{})，而不像

em一样使用级联的方式来计算尺寸。这种相对单位使用起来更简单

1.8.4vw

vw是百分比长度单位，比如一个div设置为50vw，他始终保持着浏览器窗口的50%的宽度，随着浏览器窗口的变化而变化

1.8.5vh

vh与vw一样是百分比长度单位，而vw是百分比宽度，vh是百分比高度

1.8.6vmin

vmin是取vw和vh两个值中小的值，比如手机竖屏时，667354的高与宽，此时取的是354的宽度百分比，而当横屏时，变成了354664

此时取得时354的高度百分比

1.9清除两个div默认间距的方法

1.利用浮动

利用浮动 可以将两个div 脱离文档流 并向父元素 尽可能向左或向右进行浮动 是最简单的 最容易理解的方法 但是有一个很大的缺点 就是上面说的 脱离了文档流 导致了其他元素 不再关心浮动过的元素的位置 很可能造成覆盖掉其他元素或者被其他元素覆盖的情况

2.将父元素的font-size设置为0

这种方式虽然简单 快速 但有着比第一种方式更大的弊端 他只能用于子元素内没有文本内容时进行一些布局，而当子元素中有内容时 会导致子元素内容不可见 所以一般情况下 建议用第三种方式

3.利用flex布局

利用flex布局 可以先用div把两个div包起来 在css代码中对父元素的display属性设置为flex 这样既不会脱离文档流 也不会造成子元素内容不可见的情况

1.10 a标签一些问题

a标签即超链接标签 在href属性中 输入要跳转的地址，在target中选择跳转的方式 默认为—self 也就是点了之后 当前网页进行跳转 跳转至新网页之后 旧网页需要回退才能到达 而设置为—blank是在一个新窗口跳转 旧窗口保留 尤其是京东 淘宝这些电商网页 用来做商品对比的效果会更加方便

1.11锚点定位

锚点定位有两种方式 通过name属性定位和id属性定位

<a href="#w1">点我跳转至而代价是低头</a><br>
<a href="#w2">点我跳转至高潮</a><br>
<a name="w1">而代价是低头</a><br>
<a id="w2">爱你孤身走暗巷，爱你不跪的模样</a><br>