前端开发 html第二课 自结束标签 注释 标签中的属性 文档声明 进制 字符编码 文档使用 VScode 实体 meta标签 语义化标签 块元素和行内元素 布局标签

1 自结束标签

标签一般成对出现,但是也存在一些自结束标签
如:
在这里插入图片描述
多“/”和没有“/”区别不大

2 注释

在这里插入图片描述

注释的作用:
注释中的内容会被浏览器忽略,不会在网页中直接显示,但是可以在源码中查看注释,注释用来对代码进行解释说明的;开发中一定要养成良好的编写注释的习惯,注释要求简单明了;注释还可以将一些不希望显示的内容隐藏。
在这里插入图片描述
源码
在这里插入图片描述

注:
注释不能嵌套!!
在这里插入图片描述
在这里插入图片描述

3 标签中的属性

属性,在标签中还可以设置属性
如:
在这里插入图片描述
font为标签,color是属性,red是属性值。
属性是一个名值对(x=y)。
属性用来设置标签中内容如何显示。
属性和标签或其他属性应该使用空格隔开。
属性名不能瞎写,属性值不能瞎写,应该根据文档中的规定编写。
有些属性有属性值,有些没有,如果有属性值应该使用引号引起来

4 文档声明

文档声明用来告诉浏览器当前网页的版本
在这里插入图片描述
写在网页的第一行,第一时间给浏览器解析,当前网页为HTML5。

HTML有一个迭代的过程,HTML4,HTML2.0,到现在的HTML5。
在这里插入图片描述

5 进制

十进制(日常使用)
特点:满10 进1
计数:0 1 2 3 4 5 6 7 8 9 10 11 12…19
单位数字:10个(0-9)
二进制(计算机的底层进制)
特点:满2进1
计数:0 1 10 11 100 101 111
单位数字:2个(0-1)
扩展:
所有数据在计算机底层都会以二进制的形式保存,可以将内存想象成为一个有多个小格子组成的容器,每一个小格子中可以存储一个1或一个0,这一个小格子在内存中被称为1位(bit)
8bit=1byte(字节)
1024 byte=1 kb(千字节)
1024 kb=1mb(兆字节)
1024mb=1gb(吉字节)
1024gb=1tb(特字节)
1024tb=1pb
可操作最小单元为1byte字节
八进制(很少用)
特点:满8进1
计数:0 1 2 3 4 5 6 7 10 …17 20
单位数字:8个(0-7)
十六进制(一般显示一个二进制数字时,都会转换为十六进制)
特点:满16进1
计数:0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12… 1a 1b …1f 20…
单位数字:16个(0-f)

6 字符编码

奥运会->10001100011110(编码的过程)
10001100011110->奥运会(解码的过程)
所有的数据在计算机中存储时都是以二进制形式存储的,文字也不例外。所以一段文字在存储到内存中时,都需要转换为二进制编码。当我们读取这段文字时,计算机会将编码转换为字符,供我们阅读
编码:将字符转换为二进制的过程称为编码
解码:将二进制码转换为字符的过程称为解码
字符集(charset):编码和解码所采用的规则称为字符集
乱码问题:编码和解码所采用的字符集不同就会出现乱码问题
常见的字符集:ASCII(美国)ISO88591(欧洲)GB2312(中国) GBK(中国)UTF-8(万国码,开发都用UTF-8)
在这里插入图片描述
用meta标签,charset属性,填写属性值UTF-8,必须和编辑器的字符集一致,不然会乱码。meta标签写在head结构里面,供浏览器解析。
在这里插入图片描述

7 文档的使用

完整的结构
在这里插入图片描述
<!doctype html> 文档声明,声明当前网页的版本。
< html> html的根标签(元素),网页中的所有内容都要写根元素的里边。
< head>是html的子元素,head中的内容不会在网页中直接出现,主要用来帮助浏览器或搜索引擎来解析网页。
< meta> meta标签用来设置网页的元数据,这里meta用来设置网页的字符集,避免乱码问题。
< title>中的内容会显示在浏览器的标题栏,搜素引擎会主要根据title中的内容来判断网页的主要内容。
< body>是html的子元素,表示网页的主体,网页中所有的可见内容都应该写在body里
< h1>网页的一级标题。

8 安装VScode及其插件

8.1 VScode安装包

https://code.visualstudio.com/
微软官方链接
在这里插入图片描述

8.2 安装中文简体包和ayu主题

在这里插入图片描述

8.3 将一个目录作为项目目录打开

在这里插入图片描述

8.4 创建一个新网页

在这里插入图片描述
!+TAB键自动写出完整结构。
在这里插入图片描述
en表示英语网页,
在这里插入图片描述
谷歌浏览器弹出是否翻译成为中文。
ch表示中文网页,不会弹出是否翻译成为中文。

8.5 安装liveServer

liveServer作用:写代码的时候,自动刷新页面,实现实时预览,但需要手动保存代码,浏览器才会刷新,所以在VScode设置自动保存。
在这里插入图片描述
使用liveserver
在这里插入图片描述
项目上到服务器,模拟最真实的情况。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值