2022年7月24日（HTML）_属于文本格式化标记的是-CSDN博客

标准	说明
结构	用于对网页元素进行整理和分类，现阶段主要学HTML
表现	用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	是指网页模型的定义以及交互的编写，现阶段主要学Javascripy

注：Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。

二、HTML基本的结构标签（骨架标签）

<html>                              //根标签开始
    <head>
        <title> 网页标题</title>    
    </head>
    <body>                          
        页面内容
    </body>
</html>                             //根标签结束

注：HTML文档的后缀名必须是 .html 或 .htm，通过浏览器读取此类文档，再以网页的形式显示出来。

三、VSCode开发工具

1 软件的基本用法：

创建.html文档——>输入！，用tab键选第一个（自动生成HTML骨架）——>alt + B 运行 (大小写都可)

2 常用快捷键：

ctrl n : 新建文件

！：快速生成页面骨架结构 +tab

alt b ：运行代码

ctrl + : 放大代码

ctrl - : 缩小代码

shift alt a : 多行注释

ctrl / : 单行注释

注：插件的安装：扩展中搜索，安装后重启。（暂时安装了以下俩个）

3 骨架标签新增代码：

<!DOCTYPE html>  //必须写在代码第一行

注：文档类型的声明标签，告诉浏览器使用哪种HTML版本来显示网页(html 5 )。

<html lang="en">     //英文网站
<html lang="zh-CN">  //中文网站

注：网页语言种类，en或zh-CN都可以显示中英文，告诉浏览器或搜索引擎这是一个中/英文网站。

<meta charset="UTF-8"/>

注：如果不写UTF-8打开会乱码，UTF-8又称万国码。

四、HTML常用标签

语义标签：在合适的地方给一个最合理的标签，可以让页面结构更清晰。

标签的含/语义：标签用来干嘛的。

1 标题标签

<h1>标题内容</h1>
...
<h6>标题内容</h6>

注：

① 共有6个等级<h1>至<h2>，重要性逐级递减

② 加了标题的文字更粗、字号更大

③ 一个标题独占一行

2 段落标签

<p>段落内容</p>

注：

① 每一段都需要<p>...</p>

② 显示页面的段与段之间保持一定空隙

③段落文本会根据浏览器窗口的大小自动换行

3 换行标签

<br>
或者
<br/>

注：

① break的缩写，意为打断，强制换行

② 是个单标签，另起一行

③换行没有空隙

4 文本格式化标签——加粗标签

<strong>...</strong> //语义更强烈
or
<b>...</b>

5 文本格式化标签——倾斜标签

<em>...</em> //语义更强烈
or
<i>...</i>

6 文本格式化标签——删除线标签

<del>...</del> //语义更强烈
or
<s>...</s>

7 文本格式化标签——下划线标签

<ins>...</ins> //语义更强烈
or
<u>...</u>

8 <div>和<span>标签——布局使用

这两个标签没有语义，他们相当于一个盒子，是用来装内容的。

<div>...</div>
<span>...</span>

注：

①div是division的缩写，表示分区、分割；

span表示跨度、跨距。

②一对div在显示的页面中独占一行，相当于一个大盒子；

而多个span可以在页面的同一行显示，相当于小盒子

9 图像标签

<img src="图像URT（包括图片名以及图片格式）"/>

（1）img是一个单标签

（2）src是图像标签的必须属性，用于指定图像文件的路径和文件名

（3）图像保存路径应与当前html文档存入同一路径（直接写图片名时）

（4）图像标签的其他属性：

属性	属性值	说明
alt	文本	替换文本。图片不能显示时，显示的文字
title	文本	提示文本。鼠标放到图像上时，显示的文字
width / height	像素	设置图像的宽度/高度（一般只单独设置高或宽，不同时设置，等比例缩小放大）
border	像素	设置图像的边框粗细 (学css的时候设置边框，一般不通过属性来设置)

（5）图像标签的路径问题：

目录文件夹：普通文件夹，存放作业面所需要的相关素材，如html文件、图片文件等

根目录：打开目录文件夹的第一层就是根目录

VSCode打开目录文件夹（后期管理文件很方便）

打开方式1：文件——打开文件夹——选择目录文件夹

打开方式2：直接从桌面拖拽也可以

相对路径与绝对路径

相对路径：图片相对于html文件的位置

相对路径分类	符号	说明	格式
同一级路径	无	图像文件位于html文件同一级	<img src="图片名称+图片后缀">
下一级路径	/	图像文件位于html文件下一级	<img src="images/图片名称+图片后缀">
上一级路径	../	图像文件位于html文件上一级	<img src="../图片名称+图片后缀">

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

<img src="从盘符开始的路径or完整的网络网址">

注：

①图像标签可以拥有多个属性，必须写在标签名后

②各属性之间不分先后，用空格分开

③属性采取的是键值对的形式： key="value"

10 超链接标签——从一个页面连接到另一个

注：a为anchor的缩写，意为抛锚。

<a href="跳转目标" target="目标窗口的弹出方式"> 文本</a>   //点击文本跳转到目标
<a href="跳转目标" target="目标窗口的弹出方式"> <img src="图标.png"/></a>    //点击图片跳转到目标

（1）<a>标签的内部属性分类：

href : 必须属性。用于指定链接目标的url地址，使用了href属性就代表具有了超链接的功能

target : 用于指定连接页面的打开方式

_self：为默认值，在当前窗口打开页面

_blank：在新窗口中打开页面

（2）链接分类：

①外部链接：

需要写上http

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

②内部链接:

网站内部页面之间的相互链接，直接写网页名

<a href="demo.html"> 自创页面</a>

③空链接：

没有确定链接目标时

<a href="#">半成品页面</a>

④下载链接：

href里面地址是一个文件或者.zip或者.exe等形式，会下载这个文件

<a href="猫猫.rar">点击下载压缩包</a>

⑤网页元素链接：

文本、图像、表格、音频、视频等都可以添加超链接

<a href="http://www.baidu.com"> <img src="百度图标.png"/></a>   //为图片添加链接
<a href="demo.html" target="_blank"> 自创页面</a>               //为文字添加链接

⑥锚点链接：

点击后，可以快速定位到页面中的某个位置

<a href="#live"> 个人生活</a><br/>    //设置两个地方
<h3 id="live"> 个人生活</h3>          #不要忘记了！！！！！！！！！！！！！！！！

五、HTML中的特殊字符

巧记：

空格（&nbsp）：牛逼生僻

小于(&lt)：less than them

大于(&gt)：greater than them

ps: 自整理，有错误请大胆指出！！！