HTML学习的第二天

最新推荐文章于 2023-08-16 22:29:39 发布

Niederhog

最新推荐文章于 2023-08-16 22:29:39 发布

阅读量105

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/Niederhog/article/details/118852117

版权

第一部分 VScode的基础使用

1、安装方法：，点击标识出来的这个按钮，然后搜索所需要的的插件名称，如：Chinese（），然后点击install即可安装。

2、适合安装的插件：
①Open in Browser（在浏览器中打开html，可选择打开的浏览器
②Chinese（中文语言包）
③Auto Rename Tag （自动重命名配对的HTML/XML标签）
④CSS peek（追踪至样式）

3、如果不需要插件，点击卸载即可。

4、插件安装完毕需重启软件来启用插件或者点击重新加载插件。

1、文档类型声明标签：<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页，必须写在最开头，并且不属于html。

<!DOCTYPE html> 用html5来显示网页

2、lang语言种类：
①en定义语言为英文
②zh-CN定义语言为中文

3、字符集
字符集（Character set）是多个字符的集合。以便计算机能够识别和存储各种文字。
charset常用的值有：GB2312、BIG5、GBK和UTF-8。其中UTF-8被称为万国码，基本包含全世界所有国家需要用到的字符。

如果不写，会出现乱码情况。

1、标签语义：简单来说就是指标签的含义，即这个标签是用来干什么的。例如：标题标签和段落标签。
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

2、标题标签<h1>-<h6>
①表示一级到六级标题标签，标题标签为双标签。（h为head的缩写）
②标题标签的标签语义：作为标题使用，并且依据重要性递减。
③特点：（1）加了标题的文字会变粗，字号也会依次变大。（2）一个标题是独占一行的。

3、段落标签<p></p>
①段落标签的标签语义：可以把HTML文档分隔为若干段落。
②特点：（1）文本在一个段落中会根据浏览器窗口大小自动换行。（2）段落和段落之间保有空隙。

4、换行标签<br/>
①换行标签的标签语义：强制换行
②特点：（1）<br/>是一个单标签。（2）<br/>标签知识简单的开始新的一行，跟段落不同，段落之间会插入一些垂直的距离。

5、一个简单的案例测试

1、文本格式化标签
①文本格式化标签的标签语义：突出重要性，比普通文字更重要
②常用的文本格式化标签

③重点格式化标签：加粗和倾斜

2、<div>和<span>标签
①<div>和<span>标签没有具体的语义，类似于一个盒子，用于装内容的，主要用于布局
②特点：(1)<div>标签用来布局，但是一行只能放一个<div>,相当于一个大盒子。（2）<span>标签也是用来布局，一行上可以有多个<span>，相当于一个小盒子。

3、图像标签和路径（重要）
①图像标签
（1）<img src="图像URL"/>，其中src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。图片要放到和网页一个文件夹下。
（2）<img>标签为单标签
（3）img的常用属性以及说明

alt属性（图像不能显示时用文字替代）

title属性（将鼠标移到图片上出现文字）

width和height属性（一般更改一个，另一个会随着改变，两个都改会出现图片失真）

border属性

4、注意点：（1)图像标签可以拥有多个属性，必须写在标签名后面。（2）属性之间不分先后顺序，标签名与属性、属性与属性之间均要以空格分开。（3）属性采取键值对的格式，即key="value"的格式，属性=“属性值”。

1、目录文件夹和根目录：
①目录文件夹：就是普通文件夹，里面存放了做网页所需的相关素材，比如html文件、图片等等。
②根目录：打开文件夹的第一层称之为根目录。

根目录

2、VScode 打开目录文件夹
文件→打开文件夹→选择目录文件夹，这样操作便于后期管理文件

可以直接在此处新建文件，新建的文件自动保存到打开的文件夹中。

关注