HTML标签笔记-上（B站黑马程序员）

yapple223

已于 2024-01-16 20:24:32 修改

阅读量398

点赞数 7

分类专栏： HTML 文章标签：笔记

于 2024-01-16 20:16:07 首次发布

本文链接：https://blog.csdn.net/m0_64180838/article/details/135632558

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了Web标准的构成，包括HTML、CSS和JavaScript的角色，以及HTML的语法规范，如标签结构、语法特点和常用标签，还涵盖了VSCode的快捷键操作。

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

一、web标准

1、是什么

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

2、构成

（1）结构：结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。

（2）表现：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。

（3）行为：行为指的是网页模型的定义及交互的编写，现阶段主要学的是JavaScript。

Web 标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解：结构写到 HTML 文件中，表现写到 CSS 文件中，行为写到 JavaScript 文件中。

二、HTML语法规范

1、HTML 标签是由尖括号包围的关键词，例如 <html>。
2、HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为单标签。

3、双标签关系：包含关系、并列关系

例如，<html>与<head><body>为包含关系，<head>与<body>为并列关系。

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

4、骨架标签：！加 Tab （vscode）快速生成

<!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>

<!DOCTYPE html>：文档类型声明标签。

<html lang=”en”>：定义当前文档显示的语言；定义为英文，也可以写中文内容，这个标签仅告诉浏览器为中文网站还是英文网站。

<meta charset=”UTF-8”>：规定文档使用何种字符编码，避免乱码。例如，GB2312、BIG5、GBK、UTF-8（万国码）。

三、HTML常用标签

1、标题标签

作为标题使用，并且依据重要性递减。

<h1>标题一共六级选</h1>
<h2>文字加粗一行显</h2>
<h3>由小到大依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>

2、段落标签

段落与段落之间有空隙。

<p>我是一个段落标签</p>

3、换行标签

强制换行。

后面的文字另起一行<br />这就是另一行了

4、文本格式化标签

各有两组标签，推荐使用第一组，语气更加强烈。

（1）加粗

我是<strong>加粗</strong>的文字
这也是<b>加粗</b>的文字

（2）倾斜

我是<em>倾斜</em>的文字
这也是<i>倾斜</i>的文字

（3）删除线

我是<del>删除线</del>
这也是<s>删除线</s>

（4）下划线

我是<ins>下划线</ins>
这也是<u>下划线</u>

5、图像标签

（1）src：<img>标签的必须属性，它用于指定图像文件的路径和文件名。

相对路径：图片相对于HTML页面的位置。

同一级路径：图片文件位于HTML文件同一级文件夹。

下一级路径：图片文件位于HTML文件下一级文件夹。

上一级路径：图片文件位于HTML文件上一级文件夹。

绝对路径：图片文件在电脑中的绝对路径

绝对路径、相对路径斜杠方向不一样

  <img src="img.jpg" />

（2） alt：设置替换文本，图像显示不出来的时候用文字替换。

<img src="img1.jpg" alt="我是刘德华" />

（3）title：设置提示文本，鼠标放到文件上，提示的文字。

<img src="img.jpg" alt="我是刘德华" title="刘德华照片" />

（4）width：设置图片宽度。

<img src="img.jpg" alt="我是刘德华" title="刘德华照片" width="500" />

（5）height：设置图片高度。

<img src="img.jpg" alt="我是刘德华" title="刘德华照片" height="100" />

（6）border：设置图片边框。

<img src="img.jpg" alt="我是刘德华" title="刘德华照片" width="500" border="15" />

6、超链接标签

target：设置打开窗口的方式，默认值是_self，当前窗口打开页面；_blank，新窗口打开页面。

（1）外部链接

<a href="http://www.qq.com" target="_blank">腾讯</a>

（2）内部链接

<a href="gongsijianjie.html" target="_blank">公司简介</a>

（3）空链接

<a href="#">公司地址</a>

（4）下载链接：地址链接是文件.exe 或者是 zip 等压缩包形式

<a href="img.zip">下载文件</a>

（5）网页元素的链接：图片、表格、音频、视频

<a href="http://www.baidu.com" target="_blank"><img src="img.jpg" /></a>

（6）锚点链接

<a href="#live">个人生活</a><br />
<h3 id="live">个人生活</h3>

7、无语义标签

<div></div>：一行只能有一个div标签

<span></span>：一行可以有多个span标签

没有语义，就是一个盒子，用来装内容，布局。

8、注释标签

<!-- 我想喝手磨咖啡 -->
我不想喝手磨咖啡<br>

9、特殊字符

空格：&nbsp；

<：&lt；

>：&gt；

四、vscode快捷键

！加 Tab：生成骨架标签
Shift alt 下箭头：复制一行
双击某单词，Ctrl d：同时选定修改所有相同单词
Ctrl 上箭头/下箭头：同时添加多个光标
Ctrl h：全局替换查找
Ctrl g：快速定位到某一行
Shift alt，拖动光标：选定特定区块
Ctrl + / - ：放大/缩小界面
Ctrl / ：单行注释
Ctrl shift / ：多行注释