网站学习（1）——HTML概述、文件结构、sublime text3插件和emmet安装以及sumlime text的操作

最新推荐文章于 2024-08-02 22:52:33 发布

Enchant!

最新推荐文章于 2024-08-02 22:52:33 发布

阅读量282

点赞数

分类专栏： WEB前端开发 #HTML

本文链接：https://blog.csdn.net/weixin_45634839/article/details/113419640

版权

WEB前端开发同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

#HTML

2 篇文章 0 订阅

订阅专栏

网站的网页之间通过超链接的方式连接在一起。
前端技术构成：

结构：HTML
样式：CSS
行为：JavaScript

HTML文件结构
1. 文件名后缀：.htm 或 .html
2.

<html>
	<head>
		<title>  </title>//此处出现在浏览器的名称部分
	</head>

	<body>//主体：网页中的主要内容
	</body>
</html>

过程：

首先创建一个文件夹，将所有的网站文件都放在这个文件夹里面。
可以先在文件夹中创建一个文本文档，写入内容后将后缀改成.htm或者.html即可。推荐使用sublime text3软件进行编写：
新建文本文档进行编写:

将后缀改成.html或者.htm：

打开文件:

使用sublime text3进行编写：
创建一个文本将其后缀保存为.html或者.htm，然后在该文件中写入内容即可。

<!DOCTYPE html> <!-- 文档类型：符合HTML5标准 -->
<html lang="en"> <!-- lang属性：搜索引擎，en中文，zh中文 -->
<head>
	<meta charset="utf-8"><!-- <meta>：元数据，charset属性：字符集编码方式  浏览器：UTF-8，是国际编码 -->
	<title></title>
</head>
<body>

</body>
</html>

字符集与编码

字符：文字、符号

比如：123 abc 一二三 !,%@

字符集：字符的集合

字符集——语言文字
比如：英文字符集、汉字字符集、日文汉字字符集

编码：将字符和二进制码对应起来

比如： a对应ASCII码：01000001

ASCII：数字、英文字母、符号进行了编码
GB2312:简体中文
Unicode：所有语言，但是其占有空间比较大
UTF-8：所有语言，占用空间更小。
一般都选择UTF-8编码方式。

乱码问题

源文件保存时的编码
源文件声明<meta charset="编码方式”>
上面二者不一致时，就会出现乱码问题。例如：源文件使用Unicode进行编码，而在浏览器中规定的编码方式是UTF-8编码方式，此时就会出现乱码问题。
例如：
另存为hmtl文件，选择一种与UTF-8不同的编码方式：
此时仅有部分文字能够正确解码出来：

sublime text3 插件安装

Package Control网址：https://packagecontrol.io/installation
按照网址中的提示进行安装即可。

emmet插件安装

ctrl+shift+p，输出Install Package Control后，点击enter，再在弹出来的对话框中输入emmet，安装即可。

Sublime Text3的操作

生成文件结构：

新建一个文件(ctrl+N),ctrl+s保存为html文件。
输入英文字符!,

按下Tab键或者ctrl+e进行扩展：

生成注释：

选中要注释的内容

ctrl+/ 即可注释：

撤销注释也是选中内容后，ctrl+/ 即可。

生成标签

输入标签后，以段落p为例：

2.按Tab键进行拓展即可：

添加标签的同时规定标签的内容

以段落p为例，输入标签后，添加{}，在{}中添加规定标签的内容即可：

再按Tab键进行拓展即可：

添加标签的同时规定标签的属性

输入标签的名字，输入[],在[]中输入规定标签的属性，再按Tab键进行拓展，以img标签为例：

按Tab键进行拓展：

标签的嵌套

在标签1后面添加>,再添加标签2，以p标签中嵌套span标签为例：

再按Tab键进行拓展:

同级标签的添加

标签1+标签2，以p标签中同时嵌套img标签和a标签为例，

再按Tab键进行拓展:

其中，p标签中嵌套img标签和a标签，img和a标签为同级标签。

标签的分组

用(）进行分组，()内为一组，()用+连接。

以两个区域标签为例，第一个div标签中嵌套一个段落p，第二个div标签中嵌套一个img标签：

按Tab键进行拓展:

快速生成多个元素

以无序列表为例：

按Tab键进行拓展：

快速生成文本内容

输入lorem

2. 按Tab键进行拓展，此时会快速生成文本：

- 如果是输入lorem后面加一个数字进行拓展，那么就会生成带有几个单词的文本，例:下列分别为输入lorem2 lorem3 lorem4拓展后的内容：