HTML网页结构分析-CSDN博客

本文链接：https://blog.csdn.net/csgojingyu/article/details/133736517

1、网页结构分析

<!-- 注释：注释快捷键  ctrl+/  或者  shift+alt+a 
1、注释里面的内容，浏览器不会编译，目前用来写笔记
2、实际开发过程中，一定要写注释
3、注释符号不能嵌套
-->
<!-- 文档声明  告诉浏览器我们写的代码是按照html文档类型来写的
浏览器在编译代码时，也要按照html规范来编译，防止出现怪异模式
-->
<!DOCTYPE html>
<!-- html根标签  一个页面就一个根标签 所有的内容都要写在根标签里面。开始标签和结束标签中间-->
<html>
    <!-- head标签  帮助浏览器编译代码，里面的内容，用户一般看不到 -->
    <head></head>
    <!-- body标签 是书写网页主体内容，用户看到的所有内容。文字，图片，音视频等等都写在body-->
    <body>
        <!-- chinese lorem  假文  jw+数字-->
        有作洪锐领，招承如。

        <!-- lorem+数字 -->
        Lorem ipsum dolor sit amet.
        
    </body>

</html>

2、文档声明分析

<!DOCTYPE html>
<!-- h5的文档声明，声明当前的网页是按照HTML5标准编写的
编写网页时，一定要将h5的文档声明，写在网页的最上边
如果不写，则会导致有些浏览器会进入到一个怪异的模式，
进入怪异模式后，浏览器解析页面会导致页面无法正常显示，所以为了避免这种模式，一定要写文档声明 -->
<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

3、字符集分析

字符编码所有的数据在计算机存储时都会转成二进制形式存储，文字也不列外例如：王老师->0001100 ,

当我们读取这段文字时的时候，计算机会将编码转换为字符，供我们阅读，即又进行了一次转换加密解密

编码——将字符转成二进制

解码——将二进制转为字符

字符集——编码解码所采用的规则

乱码——如果编码和解码所采用的字符集不同就会出现乱码问题

常见的字符集

ASCII 美国的，ISO88591 欧洲的，GB2312 中国的，GKB 中国扩充的，UTF-8 万国码

meta标签用来设置网页的元数据，不会变的数据，给浏览器看的

（1）设置网页的字符集，<meta charset="GB2312" />，避免乱码问题

（2）meta 元素被用于规定页面的描述description/name/content、关键词keyword、文档的作者、最后修改时间以及其他元数据。

（3）使用meta可以用来做请求的重定向

<meta http-equiv="refresh" content="秒数;url=目标路径" />

<!DOCTYPE html>
<html>

<head>
    <!-- 
     学习标签的时候，一定要注意语义，而不是样式
       title标签：网站的标题  
       可以帮助推广部门进行网站推广，非常重要，一般具体内容都是推广部门来定的
        seo  搜索优化
        sem  竞价推广  

     -->
  <title>网站的标题</title>
  <!-- meta标签是根据其配置的属性和属性值来确定功能
        设置一些元信息
        -->
  <!-- 
            属性和属性值写在开始标签和自标签内部的
            charset属性="charset属性值"
            charset属性  设置字符集
             utf-8      字符集的类型-万国码
                        gb、gbk等
              
             编码：将汉字图片音视频等等转成二进制的过程
             解码：将二进制又转成汉字图片音视频等
             乱码：编码和解码参考的标准不统一，就会出现乱码
   -->
  
  <meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
  <meta charset="utf-8" />
  <meta name="keywords" content="京东，电脑，平板" />
  <meta name="description" content="京东JD.COM是国内专业的平板平板电脑网上购物商城,提供平板平板电脑价格,报价,参数,评价,图片,品牌等信息.买平板平板电脑,上京东就购了." />
</head>

<body>
  的才发，况德两则看。===》10100
</body>

</html>
<!-- 
  标签的分类
    从形式上分：
      双标签  有开始标签有结束标签，成双成对 例如 html head title
      单标签  开始标签和结束标签都是它自己  例如 meta
                <meta> 或者<meta />
 -->