HTML个人笔记

品茶观山

已于 2024-03-13 20:45:55 修改

阅读量1.1k

点赞数 37

文章标签： html 笔记前端

于 2024-03-13 20:42:52 首次发布

本文链接：https://blog.csdn.net/r1031953160/article/details/136690946

版权

本文详细介绍了HTML的基础知识，包括标签语法、基本骨架、注释、标题、换行、文本格式化、图像、超链接、音频和视频标签。此外，还深入讲解了列表、表格、表单的创建与应用，以及如何使用CSS进行样式控制，是前端初学者的实用教程。

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

HTML在编辑器里写代码，在浏览器里查看效果。

HTML——超文本标记语言

超文本——链接

标记——标签（带尖括号的文本）

标签语法

（1）标签成对出现，中间包裹着内容

（2）< > 里面放置英文字母（标签名）

（3）结束标签比开始标签多 / 。

例：

<strong> 需要加粗的文字 </strong>
开始标签                结束标签

拓展

（1）双标签：成对出现的标签。（要包裹内容的标签）

（2）单标签：只有开始标签，没有结束标签。（只需要效果的标签）

例：

<br> : 换行
<hr> : 水平线

HTML基本骨架

HTML基本骨架为网页模板

<html>
<head>
<title>网页标题</title>
<body>
网页主体
</body>
</html>

（1）html ：整个网页

（2）head ：网页头部，存放给浏览器看的代码，例如 CSS

（3）body ：网页主体，存放给用户看的代码，例如图片、文字。

（4）title ：网页标题。

VSCode快速生成骨架：

在 HTML 文件（.html）中，! （英文）配合 Enter 或 Tab 键

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

标签关系

作用：明确代码的书写位置

（1）父子关系（嵌套关系）

（2）兄弟关系（并列关系）

向后缩进：Tab

向前缩进：Shift + Tab

例：

<html>
    <head></head>
    <body>
    
    </body>
</html>

注释

< ! - - . . . - ->

添加/删除快捷键：Ctrl + /

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这是文字<br>
    <strong>这是加粗文字</strong>
    <!-- 这是注释文字 -->
</body>
</html>

标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等。

标签名：h1~h6（双标签）（从一级标签到六级标签）

显示特点：

（1）文字加粗

（2）字号逐渐显小

（3）独占一行（换行）

经验分享

（1）h1 标签在一个网站中只能用一次，用来放新闻标题或网页logo。（网页最主要内容）

（2）h2~h6没有使用次数的限制。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6> 
</body>
</html>

换行与水平线标签

（1）换行：< br > （单标签）

（2）水平线：< hr >（单标签）

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换行与水平线</title>
</head>
<body>
    第一行内容
    <br>
    <br>
    <hr>
    <br>
    第二行内容
</body>
</html>

文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

标签的主要部分有：

（1）开始标签：包含元素的名称（本例为 p ），被左、右括号所包围。表示元素从这里开始或者开始起作用——本例中即段落由此开始。

（2）结束标签：与开始标签相似，只是其在元素名之前包含了一个斜杠。这代表着元素的的结尾——在本例中即段落在此结束。

（3）内容：输入的文本本身。

效果	标签名	标签名
加粗	strong	b
倾斜	em	i
下划线	ins	u
删除线	del	s

文本格式化标签（左边的标签名）自带强调含义（语义），上面表格中一般用左边的标签名。

图像标签

作用：在网页中插入图片（等号前为属性名等号后为属性值）

<img src="图片的URL">

src 用于指定图像的位置和名称，是 < img > 的必须属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./图片/崩崩小圆帽.jpg">
    <img src="./图片/钟离.jpg">
</body>
</html>

图像标签-属性：属性不区分先后顺序

属性	作用	说明
alt	替换文本	图片无法显示的时候显示的文字
title	提示文本	鼠标悬停在图片上面的时候显示的文字
width	图片的宽度	值为数字，没有单位
height	图片的高度	值为数字，没有单位

浏览器缩放图片默认等比缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./图片/崩崩小圆帽.jpg">
    <img src="./图片/钟离.jpg">
    <img src="./图片/崩崩小圆帽1.jpg" alt="页面被散猫猫吃了，并给了你一个藐视的眼神">
    <img src="./图片/钟离.jpg" alt="页面被岩王爷吃了，