前端开发 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
项目上到服务器,模拟最真实的情况。
实现自动保存。
9 实体
需要在网页中书写特殊符号,则需要使用html中的实体(转义字符)
实体的用法:
&实体的名字;
如
  ; 空格
> ;大于号
& lt;小于号
& copy; 版权符号
更多查看一下网站:
点击了解更多实体
要求:输入连续的空格
解决方法:使用实体
Q:为什么不直接打空格呢?
A:网页多个连续的空格都被识别为一个空格,所以使用实体。
10 meta标签
meta主要用于设置网页中的一些元数据
写在head标签中
10.1 charset属性
<meta charset="UTF-8">
指定网页的字符集
10.2 name content属性
name 指定的数据的名称
content 指定的数据的内容
<meta name="keywords" content="HTML5,CSS3,JS">
举例,在搜索引擎输入,网上购物。
就会显示出京东的网页的链接。
原因:使用了meta标签,name属性,属性值为keywords,内容有“网上购物”这个关键字。
10.3 description属性
用于指定网站的描述,网站的描述会显示在搜索引擎的搜索的结果中。
原因:使用了meta标签,name属性,属性值为description,内容为
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家,囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类,满足各种购物需求。"/>
10.4 title标签(不在meta标签中)
title标签的内容会作为搜索结果的超链接上的文字显示
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title>
10.5 http-equiv属性
将页面重定向到另一个网站
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
3秒之后,跳转到百度网站。
11 语义化标签
11.1 h1系列标签
在网页中HTML专门用来负责网页的结构,所以在使用html标签中,应该关注的是标签的语义,而不是它的样式。
标题标签:
h1~h6 一共六级标题;
h1最重要,h6最不重要;
h1在网页中的重要性仅次于title标签;
一般情况下标题标签只会使用h1~ h 3,h 4~h 6很少使用。
标题标签都是块元素,在页面中独占一行的元素称为块元素(block element)。
11.2 p标签
在p标签中的内容就表示一个段落。属于块元素。
<p>在p标签中的内容就表示一个段落</p><p>在p标签中的内容就表示一个段落</p>
11.3 hgroup标签
<hgroup><h1>一级标题</h1><h2>二级标题</h2></hgroup>
11.4 em标签
在页面中不会独占一行的元素称为行内元素。
em标签用于语音语调的加重,属于行内元素。
<p>今天天气真<em>不错</em></p>
“不错”斜体。
11.5 strong标签
strong表示强调,重要内容,属于行内元素。
鲁迅说:<q>这句话我是<strong>从来没有</strong>说过的!</q>
11.6 blockquote标签
blockquote表示一个长引用。
鲁迅说:<blockquote>这句话我是从来没有说过的!</blockquote>
11.7 q标签
q表示一个短引用。
鲁迅说:<q>这句话我是从来没有说过的!</q>
11.8 br标签
br换行。
鲁迅说:<q>这句话我是从来没有说过的!</q><br><br><p>今天天气很好,没有下雨!</p>
12 块元素和行内元素
块元素(block element),在网页只呢个通过块元素来对页面进行布局。
行内元素(inline element),行内元素主要用来包裹文字。
规则:
1 在块元素中放行内元素,而不会再行内元素放块元素
2 块元素中什么都可以放
3 p元素中不能放任何块元素
4 浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正。
比如不规范的写法:标签写在根元素的外部。
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><title>test</title>
</head>
<body>
</body>
</html>
<h1>yyds</h1>
显示效果:
按F12,显示网页在储存中的结构
p元素中嵌套块元素
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><title>test</title>
</head>
<body><p><h1>yyds</h1></p>
</body>
</html>
显示效果:
按F12,显示网页在储存中的结构
13 布局标签(结构化语义标签)少用!
header 表示网页的头部
mian 表示网页的主体部分(一个页面中只会有一个main)
footer 表示网页中的底部
nav 表示网页中的导航
aside 和主要相关的其他内容(侧边栏)
article 表示一个独立的文章
section 表示一个独立的区块,上边的标签都不能表示时使用section
div 没有语义,表示一个区块,div还是我们主要的布局元素。
span 行内元素,没有任何语义,一般用于网页中选中文字。
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><title>test</title>
</head>
<body><header>aa</header><main>bb</main><footer>cc</footer><nav>dd</nav><aside>ee</aside><article>ff</article><section>gg</section><div>hh</div><span>ii</span>
</body>
</html>
前端开发 html第二课 自结束标签 注释 标签中的属性 文档声明 进制 字符编码 文档使用 VScode 实体 meta标签 语义化标签 块元素和行内元素 布局标签相关推荐
- HTML5笔记Day_01注释;标签;特殊符号;块元素和行内元素
1.什么是HTML? HTML是一种超文本标记语言,是一种标识性语言.他包括一系列标签,通过标签使网络上的文档格式统一,使分散的资源链接成为一个逻辑整体. 2.常用的工具 记事本,idea,WebSt ...
- css标签显示特性(块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例)
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
- css中标签显示模式、块元素、行内元素、行内块元素、显示模式转换
标签显示模式display: HTML标签一般分为块标签(块元素:block-level)和行内标签(行内元素:inline-level)两种类型,但是还有第三种说法行内块元素:table-row-g ...
- HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
文章目录 一.闭合标签和空标签 二.位置特性(块级元素,行内元素,行级块元素) 块级元素(block) 行级元素(inline) 行内块元素(inline-block) 三.元素之间的转化 四.可替换 ...
- Web前端,CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言 持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素 特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...
- 前端:HTML/02/排版标记,块元素,行内元素,html字符实体,列表标记,图片标记
html排版标记 <p></p> :表示一个段落 常用属性:align :水平对齐方式,取值:left(左),center(居中),right(右) 换行标记<br> ...
- [HTML/CSS]盒子模型,块级元素和行内元素
目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- html 盒子模型添加图片,[HTML/CSS]盒子模型,块级元素和行内元素
目录 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
最新文章
- 我的第一篇paper
- Python应用实战案例-Pythongeopandas包详解(附大量案例及代码)
- C#中使用DbHelper连接SqlServer数据库
- c 和php 加密,加载由blenc加密的页面时出错(C和PHP代码)
- 玻璃体浑浊的分子原理
- xs128 双定时器PIT0和PIT1
- 简述yolo1-yolo3_使用YOLO框架进行对象检测的综合指南-第一部分
- Android Studio 自定义Gradle Plugin
- 一篇文章详解大数据技术和应用场景
- 《天天数学》连载42:二月十一日
- Python计算有向图中所有节点出度和入度
- 使用sharepoint自带的文本编辑器2
- java写数据库连接_JAVA写简单的数据库连接池
- Apple Mach-O Linker Error _sqlite3_exec, referenced from: _sqlite_open, referenced from: _sqlit
- CSS文件在jsp 文件中应该放的位置
- 脚本实现为一系列账号生成随机密码
- 软考高项-了解软考高项
- Spell Checker
- 笔记本连接显示器后没有声音_电脑连接HDMI电视/显示器后没声音怎么解决
- 奇怪的sqlconnection.open错误