HTML基础知识1

搬砖搬到互联网

已于 2023-07-13 21:10:52 修改

阅读量77

点赞数 3

文章标签： html 前端

于 2023-07-12 17:54:34 首次发布

本文链接：https://blog.csdn.net/m0_64204485/article/details/131686912

版权

本文详细介绍了HTML的基础知识，包括浏览器内核的种类，HTML的基本结构，B/S和C/S架构的区别。接着深入讲解了HTML标签，如块级标签、行内元素和行内块元素，以及不同类型的长度单位。此外，还讨论了HTML注释和一些快捷语法。内容覆盖了从基础概念到实际应用的多个方面。

摘要由CSDN通过智能技术生成

一丶HTML基础知识

1.1 浏览器的内核

Trident（也称IE内核）
webkit
Blink
Gecko

五大主流浏览器以及各自的内核:

IE浏览器内核：Trident内核，也是俗称的IE内核；
Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
Firefox浏览器内核：Gecko内核，俗称Firefox内核；
Safari浏览器内核：Webkit内核；
Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

1.2 HTML概述

HTTP(超文本传输协议)
URL(统一资源定位器)，由协议+服务器地址+端口号+路径组成

二丶HTML基础

2.1网页的三部分

结构HTML
表现CSS
行为JS

2.2B/S和C/S架构的区别

B/S结构（Browser/Server，浏览器/服务器模式）,可以直接通过浏览器实现对服务器的访问。
- B/S最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件，只要有一台能上网的电脑就能使用，客户端零安装、零维护。系统的扩展非常容易。
C/S是Client/Server的缩写。客户端/服务器开发模式。不能通过浏览器直接访问服务器，而是需要使用者在使用终端（PC/Phone）上安装专用的客户端软件，从而由客户端实现对服务器的访问。
- 客户端需要安装专用的客户端软件。C/S面向特定的用户，维护成本较高，常用于局域网。

2.3标签

<link>：定义文档与外部资源的关系，通常用于连接到样式表，以及网页logo。

<link rel="shortcut icon" href="./images/emblem_red.png" type="image/png">

<link rel="stylesheet" href="./css/public.css">

  其中href为图片路径，type为引入的资源类型，通常使用image/png

<script>:用来引入外部js或定义内部js代码。
<style>:定义了HTML文档的样式文件引用地址，在<style>中添加样式渲染HTML文档
<title>:定义文档的标题，他是head部分中唯一必须的元素。

<meta> :描述了一些基本的元数据。“元”配置，就是表示基本的配置项目。content不会显示在浏览器中，但会被解析，有利于SEO（搜索引擎优化）

<!-- meta写的和声明的不匹配，浏览器就会出现乱码 -->
<meta charset="UTF-8">
<!-- 页面描述，name为名字，content为内容，只要设置了页面描述，南无百度搜索结果，就能够显示这些 -->
<meta name="description" content="">
<!-- 关键字，提高搜索命中率 -->
<meta name="keywords" content="手机、数码、电商">
<!-- 5秒刷新当前页面 -->
<meta http-equiv="refresh" content="5">

2.4标签分类

2.4.1块级标签

特点：本身的属性为display:block;

独占一行或多行
默认宽度为100%，不设置高度时高度为子元素撑开。
可以设置宽度和高度
可以包含其他元素

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

2.4.2行内元素

特点：本身的属性为display: inline;

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

标签	描述
span	定义文本内区块
a	锚点，超链接
b	加粗
strong	加粗强调
i	斜体
em	斜体强调
del	删除线文本
br	强制换行
u	下划线
textarea	多行文本输入框
input	输入框

2.4.3行内块

特点：本身的属性为display: inline-block ;

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

标签	描述
img	图片标签

2.5HTML和CSS中的长度单位

2.5.1绝对长度单位

in：英寸（Inch），绝对长度单位
cm：厘米（Centimeter），绝对长度单位。
mm：毫米（Millimeter），绝对长度单位。
q: 1/4毫米
pt：点（Point），绝对长度单位。
pc：派卡（Pica），绝对长度单位。相当于我国新四号铅字的尺寸。
px：像素（Pixel）,相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。

换算比例:
$1 in = 2.54 c m = 25.4 mm = 101.6 q = 72 pt = 6 p c = 96 p x$

2.5.2相对字体的长度

em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
ex：相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
ch:数字“0”的宽度
rem:相对于根元素(即html元素)font-size计算值的倍数

2.5.3可视区百分比长度单位

vw:相对于视口的宽度。视口被均分为100单位的vw （1vw 等于视口宽度的1%）
vh:相对于视口的高度。视口被均分为100单位的vh （ 1vh 等于视口高度的1%）
vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin:相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmax
在移动端开发的时候可以使用vmin来实现横屏和竖屏的时候字体大小一致。

2.5.4离奇的长度单位

%：百分比适配中经常用，我通常会和rem适配结合一起用

<style>
        #box{
            width: 50%;
            background: red;
        }
        #box2{
            width: 33%;
            height: 200px;
            background: blue;
        }
        #box3{
            width: 20%;
            height: 200px;
            background: greenyellow;
        }
</style>
<body>
    <div id="box">
        我占Body的50%
         <div id="box2">
            我占box的33%
         </div>
         <div id="box3">
            我占box的20%
         </div>
    </div>
</body>

%单位简介

body下的1vw是否等于body下的1%

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 1%;
            height: 100px;
            background: red;
        }
        .box2{
            width: 1vw;
            height: 100px;
            background-color: aqua;
        }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

vw和%的区别

<style>
                /* *{
            margin: 0;
            padding: 0;
        } */
        .box1{
            width: 1%;
            height: 100px;
            background: red;
        }
        .box2{
            width: 1vw;
            height: 100px;
            background-color: aqua;
        }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

vw和%的区别

由此可见如果没有程序干预则百分比不等于vw。

2.6HTML注释

不管什么注释直接ctrl+/就行

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
    
<!-- <div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div> -->

2.7HTML快捷语法

使用div.box直接生成类名div#box直接生成id

<div class="box"></div>
<div id="box"></div>

父子关系用ul>li*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

兄弟之间用+, p+span，ul+div

<p></p>
<span></span>

寻找父亲或者上级用^,反一层用一个，反两层用两个div>h2+ul>li*3+span

<div>
        <h2></h2>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <span></span>
</div>

内容用{} .box>ul>li{这是第$行数据}*10

<div class="box">
    <ul>
        <li>这是第1行数据</li>
        <li>这是第2行数据</li>
        <li>这是第3行数据</li>
        <li>这是第4行数据</li>
        <li>这是第5行数据</li>
        <li>这是第6行数据</li>
        <li>这是第7行数据</li>
        <li>这是第8行数据</li>
        <li>这是第9行数据</li>
        <li>这是第10行数据</li>
    </ul>
</div>

使用[]标记其他属性div[id=header],div[id=box$]*3

<div id="header"></div>


<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

三丶HTML标签元素

3.1块标签

3.1.1标题标签

<h1>~<h6>标签可以定义标题。由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

<body>
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h4>四级标题</h4>
	<h5>五级标题</h5>
	<h6>六级标题</h6>
</body>

3.1.2段落标签

<p></p>用来修饰一段文字的标签

<body>
    <p>我是一个非常非常非常非常长的一段文字</p>
</body>

3.1.3水平线标签

<hr>用来分割文档

<body>
	<h1>北京欢迎你</h1>
	<hr>
	<p>北京欢迎你，有梦想谁都了不起！</p>
	<p>有勇气就会有奇迹。</p>
</body>

3.1.4块标签练习

<body>
    <h1>唐诗三百首</h1>
    <hr>
    <h2>目录</h2>
    <p>第一首:静夜思</p>
    <p>第二首:忆江南</p>
    <p>第三首:长恨歌</p>
    <hr>
    <h3>静夜思</h3>
    <p>作者:李白</p>
    <p>床前明月光,疑是地上霜。举头望明月，低头思故乡。</p>
    <hr>
    <h4>【李白简介】</h4>
    <p>李白，字太白，号青莲居士，自称与李堂皇室同宗，祖籍陇西成纪（今甘肃天水附近)，剩余暗喜碎叶</p>
</body>

唐诗三百首实例

3.2行内标签

3.2.1换行标签

<br>插入一个换行符，并且它是一个单标签

3.2.2 span标签

<span></span>可以用来修饰p标签中的某几个字

<p>商品价格:仅售<span style="color:red;font-size:70px;">10</span>元</p>

3.2.3超链接

<a></a>实现页面与页面之间的跳转

基本语法：

<a href="链接地址" target="打开方式"> 链接热点文本或图像 </a>

属性的意义：

href：

链接本地文档，href=“本地文档的路径”；
友情链接，href=“友情链接网站的网址”，必须加上http或https；
图片链接，超链接的标签内容是图片；
建立电子邮箱的链接，href=“mailto:邮箱地址”；
链接本页面的某个位置；
- 设置锚点<a name="box">内容</a>
- 链接指向锚点<a href="#box”>跳转到某点

<style>
    .ppp{
        width: 200px;
        height: 1500px;
        background-color: aqua;
    }
</style>

<body>
    <a href="#box">跳转到指定位置</a>
    <div class="ppp">
    </div>
    <a name="box">内容</a>
</body>

锚点定位:

通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

(1) 使用<a href="#id名">链接文本</a>创建链接文本：

(2) 使用相应的 id名标注跳转目标的位置：

<style>
    .ppp{
        width: 200px;
        height: 1500px;
        background-color: aqua;
    }
</style>
<body>
    <a href="#box2">跳转到指定位置</a>
    <div class="ppp">
    </div>
    <div id="box2">我是盒子</div>
</body>