HTML笔记知识点

L'.

已于 2023-07-12 20:59:23 修改

阅读量188

点赞数 2

文章标签： html 笔记前端

于 2023-07-12 20:47:21 首次发布

本文链接：https://blog.csdn.net/m0_74359055/article/details/131690010

版权

目录导航

一、五大主流浏览器及其内核
二、web基础概念
三、HTML文档结构
四、HTML标签元素
1、HTML文档结构和标签
- 2、HTML的基础块标签

一、五大主流浏览器及其内核

1.IE浏览器内核：Trident内核，也是俗称的IE内核；

2 Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

3.Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4.Safari浏览器内核：Webkit内核；

5.Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核

二、web基础概念

1、网站的构成

网站由三个主要部分组成：

1.网站域名：访问网站所用的网址，如metinfo.cn;

2.网站程序：包括用户浏览网站所看到的页面和网站后台管理程序，现在一般都是用成熟的网站管理系统。

3.网站空间：可以是虚拟主机或服务器，用于存储网站程序及资料，并提供网站程序运行所需要的环境。

2、页面的构成

页面的构成被分为三个主要部分：结构(Structure)、表现(Presentation)和行为(Behavior)。

3、B/S和C/S

B/S结构（Browser/Server，浏览器/服务器模式），是WEB兴起后的一种网络结构模式，WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。客户机上只要安装一个浏览器，服务器安装SQL Server、Oracle、 MySql等数据库。浏览器通过Web Server 同数据库进行数据交互。 B/S最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件，只要有一台能上网的电脑就能使用，客户端零安装、零维护。系统的扩展非常容易。

C/S是Client/Server的缩写。客户端/服务器开发模式,服务器通常采用高性能的PC、工作站或小型机，并采用大型数据库系统，如Oracle、Sybase、Informix或 SQL Server。客户端需要安装专用的客户端软件。C/S面向特定的用户，缺点是维护成本较高，常用于局域网。

4、常见互联网名词

HTTP：

超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。

**URL：**Uniform Resource Locator; 统一资源定位器（URL）指的是Internet文件在网上的地址。

它从左到右由下述部分组成：

协议：http通信协议。
服务器地址（host）：指出WWW页所在的服务器域名。
端口（port）：有时（并非总是这样），对某些资源的访问来说，需给出相应的服务器提供端口号。
路径（path）：指明服务器上某资源的位置（其格式与DOS系统中的格式一样，通常有目录/子目录/文件名这样结构组成）。与端口一样，路径并非总是需要的。

常见的URL Scheme:

Scheme	访问	用于…
http	超文本传输协议	http://开头，不加密
https	安全超文本传输协议	安全网页，加密所有信息交换
ftp	文件传输协议	将文件下载/上传到网站上
file		计算机上的文件

三、HTML文档结构

1.HTML文件定义

网页文件既HTML文件，任何一个类型的文件都有指定的后缀，那么html文件的后缀名就是.html 或 .htm；

以上两种后缀名没有区别，都可以使用。

2.HTML的结构

无论是html还是其它后缀的动态页面[jsp]其html语言结构都是这样的，只是在命名网页文件时以不同的后缀结尾

2.1、HTML文档声明

任何一个标准的HTML页面，第一行一定是一个以标签之前。声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中，声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

1.HTML5 文档声明

<!DOCTYPE html>

2.2、HTML文档根标签

<html>元素是 HTML 页面的根元素: 此元素可告知浏览器其自身是一个 HTML 文档。与标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。文档的头部由标签定义，而主体由标签定义。

2.3、HTML头部标签

下面这些标签可用在 head 部分：<base>,<link>,<script>,<style>,<title>。

<head>标签的子标签

<base>描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接：base会对Html文档中所有URL产生作用，慎用！

<link>定义文档与外部资源的关系，通常用于链接到样式表。 link标签的另外一个重要作用：定义浏览器窗口tab页的logo图标；

<script>用来引入外部js或定义内部js代码。

<style>：定义了HTML文档的样式文件引用地址，在 <style>元素中你也可以直接添加样式来渲染 HTML 文档。

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

1.title 标签定义了不同文档的标题。

2.title 在HTML/XHTML 文档中是必须的。

定义了浏览器工具栏的标题当网页添加到收藏夹时，
显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

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

<meta>标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

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

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

<!-- 1、指定字符集,charset就是charactor set（即“字符集”） 浏览器就是通过meta来看网页是
什么字符集的。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。 -->
<meta charset="utf-8">
<!-- 2、页面描述,name即“名字”，content即“内容”。只要设置Description页面描述，那么百度搜索结
果，就能够显示这些语。 -->
<meta name="description" content="具体描述。。。">
<!-- 3、关键字：就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。有助于搜索引擎SEC优
化，。 -->
<meta name="Keywords" content="网易，邮箱，游戏，新闻">
<!-- 4、重定向 -->
<meta http-equiv="refresh" content="3,http://www.baidu.com">
<meta http-equiv="refresh" content="30"> 30s刷新当前页面
<!-- 5、页面刷新 -->
<meta http-equiv="refresh" content="3">
<!-- 6、定义网页作者 -->
<meta name="author" content="Jimbo"

2.4、HTML5的语法变化

标签不再区分大小写
元素可以省略结束标签

允许省略属性值的属性(不是所有属性)

<!-- 例如： -->
<input checked type = "checkbox"/>
<!-- 严格的语法定义： -->
<input checked = "checked" type = "checkbox"/>

允许属性值不使用引号

<label><input type=text name=price id=price/></label>

2.5、HTML5的特点和优势

优点:

网络标准统一、HTML5本身是由W3C推荐出来的。
多设备、跨平台
即时更新。
提高可用性和改进用户的友好体验；
有几个新的标签，有助于开发人员定义重要的内容；
可以给站点带来更多的多媒体元素(视频和音频)；
可以很好的替代Flash和Silverlight；
涉及到网站的抓取和索引的时候，对于SEO很友好；
被大量应用于移动应用程序和游戏。

缺点:
1. 安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、 web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。
2. 完善性：许多特性各浏览器的支持程度也不一样。
3. 性能：某些平台上的引擎问题导致HTML5性能低下。
4. 浏览器兼容性：最大缺点，IE9以下浏览器兼容不了。

2.6、HTML标签的分类

2.6.1、块级标签

块级元素是指本身样式属性为display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建。

块级元素的特点：（独占一行，可以设置宽高）。

独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
可以直接控制宽度、高度以及盒子模型的相关css属性
在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
在不设置高度的情况下，块级元素的高度是它本身内容的高度

常见的块级元素：

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

<!-- <div class="box">box1</div>
    <div class="box">box2</div> -->

2.6.2、行内元素

内联元素是指本身属性为display:inline;的元素。因为它自身的特点，我们通常使用块级元素来进行文字、小图标（小结构）的搭建。行内元素的特点:（有多大占多大，不可以设置宽高）

和其他内联元素从左到右在一行显示
不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的
内联元素的宽高是由本身内容的大小决定（文字、图片等）
内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）

常见的行内元素：

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

<!-- <span class="a">点我</span>
    <span class="a">也点我</span> -->

2.6.2、行内块元素

**行内块元素是指本身属性为display:inline-block;的元素。 **

行内块元素的特点:（有多大占多大，可以设置宽高）。

元素排列在一行
宽度默认由内容决定
元素间默认有间距
支持宽高、外边距、内边距的所有样式的设置

常用的行内元素：

img	图片标签

例：
在这里插入图片描述

2.7、HTML和CSS中的长度单位

2.7.1、绝对的长度单位

px：wrap { width: 400px; }

在web上，像素仍然是典型的度量单位，很多其他长度单位直接映射成像素，最终，他们被按照像素处理，javascript语言里的单位就是使用的像素。

绝对单位，不会受视口改变而发生改变，可以理解为直接固定下来的一个长度。

例:

<div style="width:100px;height100px;border:1px solid red;font-size:20px">box1</div>

in：.wrap { width: 4in; }

1in == 96px

cm：.wrap { width: 20cm; }

对于世界上大多数的人来说，厘米是比较熟悉有用的物理度量单位。它也映射成像素。 1cm == 37.8px

mm：wrap { width: 200mm; }

毫米是个小数量级的物理度量单位。 1mm == 0.1cm == 3.78px

2.7.2、相对字体的长度

em：.wrap { width: 40em; }

em 相对单位，相对于当前元素的font-size值，font-size值发生改变则em最终值也会改变

例：

<div style="font-size:10px;width:10em;height:10em;border:1px solid red;">box2</div>

在没有任何CSS规则的前提下，1em的长度是：1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm 浏览器默认字体大小16px

rem：.wrap { width: 40rem; }

rem 相对单位相对于根元素的font-size值

例：

<div style="width:10rem;height:10rem;border:1px solid red;">box3</div>

rem和em一样也是一个相对单位，但是和em不同的是rem总是相对于根元素(如:root{})，而不像 em一样使用级联的方式来计算尺寸。这种相对单位使用起来更简单

points：.wrap { width: 12pc; }

2.7.3、可视区百分比长度单位

vw：vw是可视区宽度单位。1vw等于可视区宽度的百分之一。 vw单位跟百分比很相似，不同的是vw的值对所有的元素都一样，与他们父元素或父元素的宽度无关。有点像rem单位那样总是相对于根元素。

vw 相对于视口的百分比

例：

<div style="width:50vw;border:1px solid blue;font-size:5vw;">box4</div>

vh：vh和vw（viewport widht）单位一样，不同的是vh是相对于可视区的高度。

vmin：vmin的值是当前vw和vh中较小的值。在标准尺寸类型的使用实例中，和由自己确定屏幕大小的vw、vh单位相比，vmin是一个更有用的度量标准。

例：

<div style="width:30vmin;boeder:1px solid blue;font-size:5vmin;">box5</div>

2.7.4：百分比长度单位

以百分比为长度单位，是相对于父元素的值，如果没有父元素，则参考的是body–
在这里插入图片描述

2.8:注释的用法

可以将注释放入代码中，可以更容易阅读代码，容易被人理解。并且浏览器会忽视他们。

注释写法为：ctrl+？

2.9：HTML文档的快速写法

写出指定的规则，然后按Tab就可以快速创建文档。

方法如下：

标签名：快速创建标签
标签名{标签内容}：快速创建标签及内容
标签名[属性名=属性值][…]{内容}：快速创建标签、标签属性及内容
$表示一个具体的递增的数值，一般情况下*结合使用，创建多个相同标签的时候使用

2.10、标签和属性语法

HTML元素以开始标签起始，以结束标签终止。
开始标签和结束标签中间是元素的内容。
有些元素具有空内容(empty content)。
空元素在开始标签中进行关闭（以开始标签的结束而结束）。
大多数 HTML 元素可拥有属性。

双标签:

<开始标签 属性=”” .....> 标签内容 </结束标签>

单标签（空标签）:

<开始标签 属性=”” ...../>

2.10.1、属性语法规则

属性是 HTML 元素提供的附加信息。

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

四、HTML标签元素

1、HTML文档结构和标签

可去2.3查看具体内容。

2、HTML的基础块标签

2.1、标题标签

1.<h1>-<h6>标签可以定义标题

2.<h1>定义最大的标题。

3.<h6>定义最小的标题。

**注意！**HTML标签，标题只用于标题。不能用来生成粗体或大号的文本。

2.2、段落标签

标签是用来定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

段落可以在任何有合适的文本流的地方出现。
段落不可以出现在头部、锚或者其他严格要求内容必须只能是文本的地方。

例：

<h1>这是标题</h1>
<p>这是段落</p>
<p>这是段落</p>

2.3、水平线标签

<hr>标签在HTML页面中创建一条水平线。

水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

例：

<body>
    <h1>这是标题</h1>
    <hr>
    <p>这是段落</p>
    <p>这是段落这是段落</p>
</body>

2.4、HTML基础布局标签

HTML<div>元素是块级元素，可以用来组合其他的HTML元素的容器。与CSS一块用，可用来对大内容块设置样式属性。

例：

<div style="width:300px;height:200px;backgroud:blue">
    <p>内容</p>
    <h3>标题</h3>
    <ul>
        <li>内容</li>
        <li>内容</li>
    </ul>
    <p>内容</p>
</div>

2.5、HTML基础行内标签

2.5.1、范围标签

<span>标签被用来组合文档中的行内元素。

<P>最后名额只剩<span style="color:red;font-size:70px;">5</span>名了！</P>

2.5.2、换行标签

<br>可以插入一个简单的换行符。他是一个空标签，也就是说他是没有结束标签的。错误写法 <br></br>。

**注意：**在HTML中让文本换行直接通过回车是没用的，要使用 <br>来实现换行。

例：一个 <br>标签标签代表一个换行，多个这样标签代表多个换行。

<p>
    这是一句话<br>
    这是一句话<br>
    这是一句话<br>
    这是一句话<br>
    这是一句话<br>
</p>

如果要实现中间的间距效果的话，不推荐直接使用br，可以通过CSS来处理。

2.5.3、超链接

**定义：**HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

**注意：**如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

基本语法如下：

<a href="链接地址" target="目标窗口位置"> 链接热点文本或图像 </a>

在这里插入图片描述

超链接的用法以及例句：

1… 链接本地文档，href=“本地文档的路径”

<a href="本地文档路径">打开</a>

2… 友情链接，href=“友情链接网站的网址”，必须加上http或https

<a href="https://www.jd.com">京东</a>

3… 图片链接，超链接的标签内容是图片

<a href="图片的路径">图片</a>

4… 建立电子邮箱的链接，href=“mailto:邮箱地址”

<a href="mailto:邮箱地址">发邮件</a>

5…链接本页面的某个位置。

有两种方法，分别为：

一、

1.设置锚点，在要跳转的目标处进行埋点

例：

<a name="锚点名称"></a>

2.在点击的地方添加超链接

<a href="#描点名称"></a>

二、

1.在要跳转的目标点进行埋点

<标签 id="id名称"></标签>