Html 笔记整理

VIP文章 LFY1212

已于 2022-05-08 11:52:14 修改

阅读量383

点赞数

文章标签： html 前端 css

于 2022-05-08 11:51:45 首次发布

本文链接：https://blog.csdn.net/LFY1212/article/details/124645972

版权

2022年5月5日时间：23点46分

Html基础

Html简介：

简单翻译就是网页的后台写法，书写的基本方式：

<!DOCTYPE html>

<html>

<head></head>

<body></body>

</html>

开头，加上内容，每一个代码块的结尾都要加上一个斜线表示结尾，保存以后要更改后缀名，改为.html或者.htm，然后使用网页打开。

写一个实例：

<!DOCTYPE html>

<html>

<head>

<meta charset = "utf-8">

<tile>桃李不言下自成蹊</tile>

</head>

<body>
	
	<h1>我的第一个标题</h1>
	
	<p>我的第一个段落</p>

</body>

</html>

实例解析（图解）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rVNtDVNA-1651981880187)(C:\Users\MintC\Desktop\‎\HTML\Note\实例分析.png)]

HTML标签与元素

HTML标记标签通常被称之为HTML标签（HTML tag）

HTML标签是由先括号的关键词，比如
HTM标签通常是呈对称弧线的，比如
和
标签队中的一个标签是开始标签，第二个标签是结束表述
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML元素

"HTML标签"和"HTML元素"通常都是描述同样的意思。

电视严格来讲，一个HTML元素包含了开始标签与结束标签，如下实例：

HTML元素:

<p>这是一个段落。</p>

Web浏览器

Web浏览器（如谷歌浏览器、internert Explore、Ferefox、Safari）是用于读取HTML文件，并将其作为网通也显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

HTML网页结构

下面是一个可视化的HTML页面结构[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pdMcIheC-1651981880190)(C:\Users\MintC\Desktop\‎\HTML\Note\HTML网页结构.png)]

只有在<body>区域（白色部分）才会在浏览器中显示

HTML DOM 树形结构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mzZyJrkx-1651981880191)(C:\Users\MintC\Desktop\‎\HTML\Note\HTMLDOM树形结构.png)]

HTML版本：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-96nVmmiG-1651981880191)(C:\Users\MintC\Desktop\‎\HTML\Note\HTML版本.png)]

<!DOCTYPE>声明

声明有助于浏览器正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype声明是不区分大小写的，一下方式都可以：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

因为HTML不是很严谨

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

XHTML1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文编码

目前在大部分浏览器中，直接输出会出现中文乱码情况，这时候我们就需要在头部将字符声明为UTF-8或者GBK

<!DOCTYPE html>

<html>

<head>

<meta charset = "utf-8">

<tile>桃李不言下自成蹊</tile>

</head>

<body>
	
	<h1>我的第一个标题</h1>
	
	<p>我的第一个段落</p>

</body>

</html>

HTML编辑器

HTML编辑器推荐

可以使用专业的 HTML 编辑器来编辑 HTML ，为了大家推荐几款常用的编辑器：

HBuilder：https://www.dcloud.io/
Sublime Text：https://www.sublimetext.com/
VS Code：https://code.visualstudio.com/
WebStorm：https://www.jetbrains.com/webstorm/

可以自己从官网上下载软件，按步骤安装即可（前三款目前是免费，第一款是中文的）

使用方式：

按照提示安装即可

打开一个文件夹即可

建立一个新的文件，但是后缀必须得是。html 不然就没法使用！加 Tab 的方式快捷生成文件

从软件库中找名字为 Live Server的插件，然后安装，不然没法运行代码

使用右键 Open with Live Server

提示翻译成简体中文：

是因为你的代码中有一行  

<html lang="en">

怎么解决呢？

改成：<html lang="zh—CN">

Web服务器发布？

制作的HTML传输到服务器（Web）上，用户去访问服务器（Web）查看到那个 HTML

基本标签

HTML5 注释：

在尖括号中加入叹号跟两个横线就是注释，注释中的内容不会被显示出来，但是在查看网页源代码中会有注释内容

写法：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注释</title>
</head>
<body>
    <!--注释不会被显示出来-->
</body>
</html>

也可以多行注释：

 <!--

	注释：是对当前页面元素的描述  是给程序员自己看的  并不会在页面上显示
 
 -->

HTML5标题：

标题是什么？

一般网页上会有一些大的字体，容易区分与文章内容的就叫做标题

在VS Code中怎么书写标题？以及它的格式是什么样子的？

<!DOCTYPE html>
<html>
	<head>
   		 <meta charset="UTF-8">
   <title>标题</title>
</head>
    <body>  
	    <h1>我是h1</h1>
        <h2>我是2</h2>
        <h3>我是3</h3>
        <h4>我是4</h4>
        <h5>我是5</h5>
        <h6>我是6</h6>
    </body>
</html>

格式是在body（身体中）去书写。

输出后的内容是：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v7589lOb-1651981880192)(C:\Users\MintC\Desktop\‎\HTML\Note\标题h.png)]

h1…h6可以限制标题的大小，数字越往后字体越小

HTML5段落:

段落的书写格式：

<!DOCTYPE html>
<html lang="en">
<head>
   		 <meta charset="UTF-8">
   		 <title>段落</title>
</head>
<body>
    <p>我是段落</p>
    <p>
        我是另一个段落
        <p>我是段落中的段落</p>
    </p>
</body>
</html>

段落可以在段落的里面再去写段落。

为什么使用段落？

段落与段落之间有很大的空隙，空袭空隙明显

HTML5图片

怎么去引入图片？

在 body 中输入 img 引入，在 src 中是输入图片的地址

height中调长度

width中调宽度

注意：这两个调一个就可以，它是等比例缩放的

书写方式方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
</head>
<body>
    <img src="01.jpg" >
</body>
</html>

长度调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
</head>
<body>
    <img src="01.jpg" height="300px">
</body>
</html>

宽度调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
</head>
<body>
    <img src="01.jpg" width="300px" height="300px">
</body>
</html>

鼠标悬停后出现标题内容：

再增加一个属性即可：title

书写方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
</head>
<body>
    <img src="01.jpg" width="300px" height="300px" title="这就是title的功能">
</body>
</html>

最低0.47元/天解锁文章

LFY1212

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html 笔记整理

2022年5月5日时间：23点46分Html基础Html简介：简单翻译就是网页的后台写法，书写的基本方式：<!DOCTYPE html><html><head></head><body></body></html>开头，加上内容，每一个代码块的结尾都要加上一个斜线表示结尾，保存以后要更改后缀名，改为.html或者.htm，然后使用网页打开。写一个实例：<!DOCTYPE html&gt
复制链接

扫一扫