html基础

Lsyyy777

于 2022-10-07 10:44:04 发布

阅读量136

点赞数

文章标签： html servlet 前端

本文链接：https://blog.csdn.net/qq_45928437/article/details/127191884

版权

1 什么是HTML
HTML：HyperText Markup Language 超文本标记语⾔。

普通文本：只包含文字。最简单的案例：txt文件。

标记：即标签。

举个例子：服装店买衣服，每个衣服上都有⼀个标签或者吊牌，写着多大，啥牌子，棉的还是绒的还是丝的。这个标签就有⼀个标记的作用。

在HTML中，HTML标签的作用就是标记内容的语义。告诉浏览器，这段内容是干什么的。

人与人之间的语言，叫自然语言。

2 HTML作用
定义网页的结构，通俗的说：定义网页中有什么内容。

3 什么是HTML标签
给网页中的内容添加语义的特殊文本。

基本语法：

<标签名>标签体</标签名> 双标签

<标签名 /> 单标签，⾃闭和标签

第⼀个标签是开始标签，第⼆个标签是结束标签，结束标签的标签名前使⽤/标注。

4 HTML文件的创建
在电脑中任意位置点击鼠标右键，选择新建文本文档，然后修改新建文本的后缀为.html，保存后就完成了HTML文件的创建。

5 HTML基本结构
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
DTD：doctype definition 文档声明类型。

作用：告诉浏览器使用HTML5.0的语法规范。

HTML从1993年的1.0版本，发展到现在的5.0版本。它和css，js的规范都是由⼀个非盈利的组织 w3，来制定和维护的。 4.0版本之后，将结构与样式进行了分离。 XHTML 1.0 语法要求比较严格。标签必须是小写，所有的属性都必须用双引号封闭，结束标签必须有反斜杠。

严格程度：XHMTL1.0 strict > HTML4.01Strict > XHTML 1.0transitional > HTML4.01transitional

<html lang="en">
当前页面使用的语言

lang="en" 英文页面使用

lang="zh-CN" 中文页面使用

常见的字符集：

UTF-8：国际通用字库，涵盖了几乎所有人类的语言文字。

gb2312/gbk：中国字库，所有简体字，⼀些特殊符号；gbk：繁体。

UTF-8和gb2312的比较

UTF-8（更臃肿、加载更慢）> gb2312 （更小巧，加载更快）

UTF-8：字多，有各种国家的语⾔，但是保存尺寸大，文件臃肿；

gb2312：字少，只⽤中文和少数外语和符号，但是尺寸小，⽂件小巧。

比如：你们公司是做⽇本动漫的，经常出现⼀些⽇语动漫的名字，网页要使用UTF-8，如果用gb2312将无法显示日语。

腾讯网、支付宝都是使用gb2312。搜狐、京东、天猫使用的是UTF-8，保证字符集的数量。

6 HTML基础语法
HTML标签写法
<标签名>标签体</标签名> 双标签

第⼀个标签是开始标签，第⼆个标签是结束标签，结束标签的标签名前使用/标注。

每⼀个标签都有自己特定的属性。

位置：双标签的开始标签或者单标签中。

与标签名用空格隔开，与其他属性也用空格隔开。

属性名与属性值用=连接，中间不能有空格。

属性值必须⽤双引号包括起来。

⼀个标签内，可以有⼀个或多个属性。

⼀个属性可以有多个属性值，全部在双引号内部，使⽤空格隔开。

属性写法格式：

<标签名属性名=“属性值”></标签名>

<标签名属性名=“属性值” />

7 HTML基础标签
标题标签
h标签 headline的缩写。

h1-h6 表示⼀到六级标题。

作⽤：给⽂本添加⼀到六级标题语义，告诉浏览器，这些文字是标题。容器级标签。

格式：

<h1></h1>
<h2></h2>
知识点：

级别依次降低，重要性也随之降低。

都会被加粗，字体从大到小。

会独占一行。

h标签虽然是容器级，但是没有嵌套关系。

h标签慎用，特别是h1标签，⼀个网页最多只能出现⼀个，会影响SEO。

段落标签
p标签：给⽂本添加⼀个段落的语义，告诉浏览器，哪些⽂字是⼀个段落。

格式： <p>内容</p>

知识点：

段落的⾸⾏以及尾⾏会进⾏换⾏。

⽂本级标签。⽂本/图⽚/超链接

链接标签
a标签超链接

基本格式：

<a href="跳转的目标地址">需要给用户展示的内容</a>
常用属性：

href：规定链接跳转指向的页面的URL。 URL可以是外部链接，比如https://www.baidu.com 也可以是⼀个内部连接。网站内部网页之间的相互连接。在src中填写网页的相对路径或绝对路径即可。⽐如：ul.html。如果href⾥⾯地址是⼀个exe或压缩包，会下载这个⽂件。

target：目标的意思，跳转后的网站是否在新标签页打开。

a. _self：当前标签页跳转，也就是不打开新页面，a标签默认的target属性。

b. _blank：打开⼀个新的页面，在新的页面进行跳转。

base标签为⻚⾯上的所有链接规定默认地址或默认目标。

<head>
<base target="_blank" />
</head>
提示：

a标签不仅可以给⽂字添加超链接，也可以给图⽚，视频，⾳频，表格等添加超链接。

如果通过a标签的href属性指定⼀个URL，那么必须在地址前加上http://或者https://。

如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。

文本格式化标签
<i>定义斜体字</i>
<b>定义文本加粗</b>
<small>定义小号字</small>
<strong>定义加重语气</strong>
<sub>定义下标字</sub>
<sup>定义上标字</sup>
<del>定义删除字</del>
列表标签
ol 标签

作用：定义⼀个有序列表。给网页内容加有序列表的语义。

<ol>
<li>1</li>
<li>2</li>
</ol>
ul 标签

作用：定义⼀个无序列表。

<ul>
<li>1</li>
<li>2</li>
</ul>
ul标签中尽量不要包含其他标签。

dl 标签

添加⼀个定义列表的结构，里面有定义主题，对主题的解释。

dl：定义列表。 dt：定义标题。 dd：定义说明、解释。对前⾯最近这个dt（标题）的解释。

嵌套关系：dl>dt+dd.

每⼀个dt后⾯可以跟多个dd，表示多次解释。

也可以不跟dd。只有主题，没有解释。（彪悍的⼈⽣不需要解释）

<dl>
<dt></dt>
<dd></dd>
</dl>
图片标签
img标签：在当前⻚⾯中引⼊⼀个外部的图⽚。

单标签。 img image的缩写。

可插⼊图⽚的类型：JPG，PNG，gif。

src source的缩写，来源，表示图⽚的来源、路径。必须的属性。

alt 当图⽚资源加载不出来的时候，会显示出来。搜索引擎会根据alt的内容去收录图⽚。

width 宽指定图⽚的宽属性值是数字，单位是px（像素）。

height ⾼指定图⽚的⾼若不指定了图⽚的宽和⾼，浏览器会根据图⽚本身的宽和⾼加载图⽚。

只需要指定图⽚的宽或者⾼，浏览器会⾃动按照图⽚本身的⽐例去设置⾼或者宽。

<img src="../img/logo.png" alt="网站logo">
8 路径问题
相对路径
查找⽬标⽂件时，从当前⽂件出发，⽬标⽂件所在的路径。

相对路径：查找⽬标⽂件时，从当前⽂件出发，⽬标⽂件所在的路径。

从盘符出发寻找⽬标⽂件。（本地⽂件）

以https://开头的路径也是绝对路径。（⽹络⽂件）

查找⽬标⽂件时，从当前⽂件出发，⽬标⽂件所在的路径。

同级查找

当前⽂件夹与⽬标⽂件夹在同⼀个⽬录下。

子级查找

当前⽂件与⽬标⽂件的上级⽬录在同⼀⽬录下。书写对应的⽂件夹的名字，后⾯⽤/表示进⼊⽂件夹，最后直接书写⽬标⽂件的⽂件名。

父级查找

当前⽂件的上级⽬录与⽬标⽂件的上级⽬录在同⼀根⽬录下。..表示上⼀级⽬录，退回⼏级就书写⼏次。 src=“../⽂件夹/图⽚全称” 注意：不能跨盘符进⾏查找。

绝对路径
从盘符出发寻找目标文件（本地文件）

<img src="E:/代码/第⼀天/img/游泳.jpg" alt="">
以 https:// 开头的路径也是绝对路径（网络文件）

<img src="https://vsd-picture.cdn.bcebos.com/2af118c6d26f2a537a459 61b73bb1ac14d2a937c.jpg" alt="">
————————————————
版权声明：本文为CSDN博主「李同学上课啦」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/DGL_CSDN/article/details/119956435