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

最新推荐文章于 2024-03-26 10:48:03 发布

十旬叶大叔

最新推荐文章于 2024-03-26 10:48:03 发布

阅读量832

点赞数

分类专栏：前端开发文章标签： html css web

本文链接：https://blog.csdn.net/qq_45059457/article/details/119175436

版权

前端开发专栏收录该内容

7 篇文章 2 订阅

订阅专栏

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.4 创建一个新网页

在这里插入图片描述
!+TAB键自动写出完整结构。

en表示英语网页，

谷歌浏览器弹出是否翻译成为中文。
ch表示中文网页，不会弹出是否翻译成为中文。

8.5 安装liveServer

liveServer作用：写代码的时候，自动刷新页面，实现实时预览，但需要手动保存代码，浏览器才会刷新，所以在VScode设置自动保存。
在这里插入图片描述
使用liveserver

项目上到服务器，模拟最真实的情况。

实现自动保存。

9 实体

需要在网页中书写特殊符号，则需要使用html中的实体（转义字符）
实体的用法：
&实体的名字;
如
&nbsp ; 空格
&gt ;大于号
& 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>

在这里插入图片描述

十旬叶大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发 html第二课自结束标签注释标签中的属性文档声明进制字符编码文档使用 VScode 实体 meta标签语义化标签块元素和行内元素布局标签

1 自结束标签标签一般成对出现，但是也存在一些自结束标签如：多“/”和没有“/”区别不大2 注释注释的作用：注释中的内容会被浏览器忽略，不会在网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明的；开发中一定要养成良好的编写注释的习惯，注释要求简单明了；注释还可以将一些不希望显示的内容隐藏。源码注：注释不能嵌套！！3 标签中的属性属性，在标签中还可以设置属性如：属性是一个名值对（x=y）属性用来设置标签中内容如何显示属性和标签或其他属性应该使
复制链接

扫一扫