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

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

  • 结构:HTML
  • 样式:CSS
  • 行为:JavaScript

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

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

	<body>//主体:网页中的主要内容
	</body>
</html>
  1. 过程:
  1. 首先创建一个文件夹,将所有的网站文件都放在这个文件夹里面。
  2. 可以先在文件夹中创建一个文本文档,写入内容后将后缀改成.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 插件安装

emmet插件安装

  • ctrl+shift+p,输出Install Package Control后,点击enter,再在弹出来的对话框中输入emmet,安装即可。
    在这里插入图片描述
    在这里插入图片描述

Sublime Text3的操作

  • 生成文件结构:
  1. 新建一个文件(ctrl+N),ctrl+s保存为html文件。
  2. 输入英文字符!,
    在这里插入图片描述
    按下Tab键或者ctrl+e进行扩展:在这里插入图片描述
  • 生成注释:
  1. 选中要注释的内容
    在这里插入图片描述
  2. ctrl+/ 即可注释:
    在这里插入图片描述
  3. 撤销注释也是选中内容后,ctrl+/ 即可。
  • 生成标签
  1. 输入标签后,以段落p为例:
    在这里插入图片描述
    2.按Tab键进行拓展即可:
    在这里插入图片描述
  • 添加标签的同时规定标签的内容
  1. 以段落p为例,输入标签后,添加{},在{}中添加规定标签的内容即可:
    在这里插入图片描述
  2. 再按Tab键进行拓展即可:
    在这里插入图片描述
  • 添加标签的同时规定标签的属性

输入标签的名字,输入[],在[]中输入规定标签的属性,再按Tab键进行拓展,以img标签为例:
在这里插入图片描述
按Tab键进行拓展: 在这里插入图片描述

  • 标签的嵌套
  1. 在标签1后面添加>,再添加标签2,以p标签中嵌套span标签为例:
    在这里插入图片描述
  2. 再按Tab键进行拓展:
    在这里插入图片描述
  • 同级标签的添加
  1. 标签1+标签2,以p标签中同时嵌套img标签和a标签为例,
    在这里插入图片描述
  2. 再按Tab键进行拓展:
    在这里插入图片描述
    其中,p标签中嵌套img标签和a标签,img和a标签为同级标签。
  • 标签的分组

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

  1. 以两个区域标签为例,第一个div标签中嵌套一个段落p,第二个div标签中嵌套一个img标签:
    在这里插入图片描述
    按Tab键进行拓展:
    在这里插入图片描述
  • 快速生成多个元素
  1. 以无序列表为例:
    在这里插入图片描述
  2. 按Tab键进行拓展:
    在这里插入图片描述
  • 快速生成文本内容
  1. 输入lorem
    在这里插入图片描述
    2. 按Tab键进行拓展,此时会快速生成文本:
    在这里插入图片描述
    - 如果是输入lorem后面加一个数字进行拓展,那么就会生成带有几个单词的文本,例:下列分别为输入lorem2 lorem3 lorem4拓展后的内容:在这里插入图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值