HTML5-----网页结构

小猪VS恒哥

已于 2022-06-06 20:58:17 修改

阅读量489

点赞数

分类专栏： HTML5 文章标签： html5

于 2022-06-06 16:00:25 首次发布

本文链接：https://blog.csdn.net/qq_42263859/article/details/125148205

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

01 网页结构

02 实体

03 常用的标签

01 软件介绍

使用的是VSCode-64，以下为软件安装包：

链接：https://pan.baidu.com/s/1iHdWUdnp8ZarCl-NuET9hw
提取码：gglu

注：百度网盘链接。

02 网页结构

1.使用快捷键Shift+!，然后回车，生成模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.解析：

（1）文档声明告诉浏览器我是按照html规范编写，如果不写的话，会让页面陷入一种怪异模式，从而出现乱码

（2）html标题：根标签/根元素一个页面就一个html，所有内容必须写在html中

（3）head标签：保存一些元信息，不会在页面中展示，只是帮助浏览器解析页面

（4）body标签网页主体内容都写在body里面

（5）meta 标签，自结束标签设置一些元信息，标签里可以放属性，属性值（例如UTF-8）

charset属性：设置字符集

编码：将字符转成二进制

解码：将二进制转成字符显示

编码和解码参考的密码本就是字符集

常用的字符集：

UTF-8：万国码

GB ：中国的

GBK ：中国扩展码

（6）title标签：标题标签，默认显示在浏览器的标题栏中；

最重要的功能: 帮助浏览器收录页面，然后显示给用户，对我们的网站推广，非常重要

以下为上述代码解析总和解析界面

<!--注释快捷键：ctrl+/   和  alt+shift+A  
    注意： 1：注释不能嵌套
          2：养成注释的习惯 
-->
<!-- <!DOCTYPE html>   文档声明 告诉浏览器我是按照html规范编写，
    如果不写的话，会让页面陷入一种怪异模式，从而出现乱码 -->
<!DOCTYPE html> 
<!-- html标题  根标签/根元素 一个页面就一个html，所有内容必须写在html中-->

<html lang="en">  
    <!-- head标签  保存一些元信息，不会在页面中展示，只是帮助浏览器解析页面 -->
<head>
    <!-- meta 标签 设置一些元信息
        标签里可以放属性，属性值
        charset属性：设置字符集

            编码：将字符转成二进制
            解码：将二进制转成字符显示

            编码和解码参考的密码本就是字符集
            常用的字符集：
                UTF-8：万国码
                GB   ：中国的
                GBK  ：中国扩展码
    -->
    <meta charset="UTF-8">
    <!-- 以下两个配置：移动端（手机端、平板端等） -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- title 标签  默认显示在浏览器的标题栏中
            最重要的功能: 帮助浏览器收录页面，反馈给用户
    -->
    <title>你看我在哪里</title>
</head>
    <!--body标签  网页主体内容都写在body里面  -->
<body>
    这是我的第一个界面
</body>
</html>

03 实体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 实体
        1.什么是实体
            浏览器会有预留字符，例如：空格、大于号、小于号，没有办法直接写
            要用特殊的，额外的字符来表示
        2.实体的语法
            &实体的名字；
        3.常用的实体
            空格:&nbsp;
            大于号：&gt;
            小于号：&lt;
            版权符号：&copy;

            更多的实体
            https://www.w3school.com.cn/html/html_entities.asp
    
    -->

    何张恒，    完
    何张恒,&nbsp;&nbsp;&nbsp;&gt;&gt;&lt;&lt;&lt;&copy;&copy;&copy;&copy;完

</body>
</html>

04 常用的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用的标签</title>
</head>
<body>
    <!-- 1:标题标签 h1-h6
        从样式看：一级标签最大，六级最小
        从语义上看，一级标签的语义最重

        标题标签对于搜索引擎收录页面来说，他的重要性仅次于title
    -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>

    <!-- 2:段落标签 P标签表示一个自然段 段落和段落之间有间距-->
    <p>低端货卡接电话较好的卡合电机</p>
    <p>gshacbkjcdsj电视剧防水层地方会绝世风华好发 合肥会带动</p>

    <!-- 3：hgroup标题分组的 从语义上做区分-->
    <hgroup>
        <h1>古诗</h1>
        <h3>作者</h3>
    </hgroup>

    <!-- 4：em强调标签：会有一点斜体  强调语音语调-->
    <!-- 5：strong强调标签：会加粗    强调内容的重要性-->
    今天天气<em>真热</em>
    今天天气<strong>真热</strong>

    <!-- 6：换行标签 br -->
    黄金时代差多少分VN孙女士科，<br/>
    技部海上繁花上端均反倒是减,<br/>
    肥上开设VS就设计费设计费VS飞机杯v就还是不是.

    <!-- 7：分割线 hr  在页面中就会有一条水平线 -->
    <hr>

    <!-- 8：center 产生居中效果 -->
    <center>
        <h1>何张恒</h1>
        <p>恒哥</p>
        <p>恒哥</p>
    </center>

    <!-- 9：引用标签 q标签，blockquote -->
    <q>
        电视剧粉红色的
    </q><br>

    孔子曰：
    <blockquote>
        换肤大师解封了看发可怜上方
    </blockquote>

</body>
</html>