1. html结构：html 根包括head body
    html标签通常是成对出现的，有开始就有结束;以尖括号包围的关键字； 包含成对标签、独立标签;不区分大小写,建议小写 ;

    1.  主要有两部分组成：声明字符集<meta charser="utf-8">+网页标题<title>

  3. 显示正文的内容 ```html

    <!doctype html>

一级标题

  2. 4. **常用标签 ** [https://blog.csdn.net/lyf1997115/article/details/82317411](https://blog.csdn.net/lyf1997115/article/details/82317411)
  4.                             [https://www.w3school.com.cn/html/html_elements.asp](https://www.w3school.com.cn/html/html_elements.asp) (W3C)    或者 Zeal 
  5. <a name="uQpI8"></a>
  6. ### 一、[进制](https://so.csdn.net/so/search?q=%E8%BF%9B%E5%88%B6&spm=1001.2101.3001.7020)
  7. 1.十进制（日常使用）：<br />特点：满10进1<br />计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 14…19 20<br />单位数字：10个（0-9）<br />2.[二进制](https://so.csdn.net/so/search?q=%E4%BA%8C%E8%BF%9B%E5%88%B6&spm=1001.2101.3001.7020)（计算机底层的进制）：<br />特点：满2进1<br />计数：0 1 10 11 100 101 110 111<br />单位数字：2个（0-1）<br />扩展：所有数据在计算机底层都会以二进制的形式保存。可以将内存想象成一个含有多个小格子的容器，每一个小格子中可以存储一个0或一个1，这一个小格子在内存中被称为1位（bit）。<br />8bit = 1byte（字节）<br />1024byte = 1kb（千字节）<br />1024kb = 1mb（兆字节）<br />1024mb = 1gb（吉字节）<br />1024gb = 1tb（特字节）<br />1024tp = 1pb<br />3.八进制（很少用）<br />特点：满8进1<br />计数：0 1 2 3 4 5 6 7 10 11 12 13 14…17 20<br />单位数字：8个（0-7）<br />4.十六进制（一般显示一个二进制数字时，都会转换为十六进制）<br />特点：满16进1<br />计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12…1a 1b 1c 1d 1e 1f 20…<br />单位数字：16个（0-f）
  8. <a name="FhT6w"></a>
  9. ### 二、字符编码
  10. 周杰伦→110000110110（编码）<br />110000110110→周杰伦（解码）<br />字符集（charset）：编码和解码所采用的规则称为字符集。可以通过meta标签来设置网页的字符集，避免乱码问题。<br />码问题：如果编码和解码所采用的字符集不同就会出现乱码问题。<br />常见的字符集：ASCII、ISO88591、GB2312、GBK、**UTF-8**（在开发时我们使用的字符集都是UTF-8）
  11. <a name="VAUBJ"></a>
  12. ### 三、实体
  13. 在HTML中有些时候，我们不能直接书写一些特殊符号，比如，多个连续的空格，字母两侧的大于小于号等等。常用的实体名字：<br />**&nbsp；空格**
  14. ```html
  15. <p>落霞与孤鹜齐飞，秋&nbsp;&nbsp;&nbsp;水共长天一色</p>

&gt>；大于号（great）
&lt<；小于号（little）
&copy；版权符号（©）

四、meta标签—里

meta主要用于设置网页中的一些元数据，元数据不是给用户看,是给浏览器看的；

  1. charset指定网页的字符集。
  2. name=” “数据的名称 content=” “内容。
  3. keywords表示网站的关键字，可以同时指定多个关键字，关键字之间使用逗号隔开。
    description用于指定网站描述，网站的描述会显示在搜索引擎的搜索的结果中。
  4. http-equiv 将页面重新定义到另一个网站；
  5. title标签的内容会作为搜索结果的超链接上的文字显示。

    五、块和行内

    1.块元素（block element） 在网页中一般通过块元素来对页面进行布局；一块一块的；
    2.行内元素（inline element）行内元素主要用来包裹文字；一般情况下会在块元素中放行内元素，而不会在行内 元素中放块元素；块元素中基本上什么都能放；p元素中不能放任何的块元素。
    3.浏览器在解析网页时，会自动修正不符合规范的内容。比如：标签写在了根元素的外部；
    p元素中嵌套了块元素；根元素中出现了除head和body以外的子元素；

    六、语义化标签

    HTML专门用来负责网页的结构，所以在使用HTML标签时，应该关注的是标签的语义，而不是它的样式。
    1.标题标签：

    ~

    一共有六级标题；从h1~h6重要性递减，h1最重要，h6最不重要；
    h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1；
    （一般情况下标题标签只会使用到h1~h3）标题标签都是块元素。
    2. 在页面中独占一行的元素称为块元素（block element）。
    3.
    标签用来为标题分组，可以将一组相关的标题同时放入到hgroup。
    4.

    标签表示页面中的一个段落。p标签是一个块元素。
    5.标签用于表示语音语调的一个加重。eg:真 ；
    6.在页面中不会独占一行的元素称为行内元素（inline element）—就是不会自动换行；
    7.表示强调内容的重要。
    8.

    表示一个长引用,块元素； 表示一个短引用，行元素；
    10.
    标签表示页面中的换行。
    11.布局标签（结构化语义标签）。
    头部；
    网页的主体部分（一个页面中只会有一个main）;< footer>底；

八、超链接超链接

从一个页面跳转到另一个页面，或者当前页面的其他位置；

  1. 是行内元素，可以嵌套除了它自身以外的任何元素；

  2. href （相对路径—跟目的地址）: 指定跳转到哪个页面，可以是外部网站的地址

    1.                                                     <a href="https://www.baidu.com">超链接</a><br />       也可以跳转到内部页面的地址  <a href="07列表 . html"> 超链接</a><br />       ps：特别注意使用内部页面的时候： **./**  表示当前目录（返回一下）--可省略<br />                                                               **  ../   **当前目录的再上一层目录（返回两下）<br />          ![image.png](https://cdn.nlark.com/yuque/0/2022/png/27397782/1649207298401-e6c595e2-42f8-46d1-a751-c371836de55a.png#clientId=ude1f3640-3673-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=140&id=u0c266f82&margin=%5Bobject%20Object%5D&name=image.png&originHeight=350&originWidth=1037&originalType=binary&ratio=1&rotation=0&showTitle=false&size=47456&status=done&style=none&taskId=uea2adade-0819-4f60-bc8d-2084d296931&title=&width=415)![微信图片_20220406090704.jpg](https://cdn.nlark.com/yuque/0/2022/jpeg/27397782/1649207248891-35b2c31f-1305-492a-8e1b-646f325dfbab.jpeg#clientId=ude1f3640-3673-4&crop=0&crop=0&crop=1&crop=1&from=ui&height=141&id=u1ebefcd7&margin=%5Bobject%20Object%5D&name=%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220406090704.jpg&originHeight=594&originWidth=780&originalType=binary&ratio=1&rotation=0&showTitle=false&size=105739&status=done&style=none&taskId=u4b488c03-40c9-4e34-ad53-8be21f72020&title=&width=185)

  3. target属性，怎么打开超链接； 

    1. 可选值：**_self** 默认值 当前页面中直接打开超链接（可有效避免打开多个页面）<br />                    ** _blank **再生成一个新的页面中打开超链接（不需要回退）          
    1. <a href="../path/inner/index0.html" target="_self">自生成方式超链接</a>
    2. <a href="../path/last/index2.html" target="_blank">再生成方式超链接</a>

  4. “#” 回到顶部：回到当前页面顶部

  5. 特殊的“id”，每一个标签都可以添加一个id属性；同一个页面中不能有重复的id属性；且区分大小写； 

    1.  因此可以用来实现跳转到指定的位置；
    1. <a href="#bb">去底部（给人看的）</a> 
    2. <a href="#p3">第三段</a>
    3. <p id="p3">巴拉巴拉巴拉…</p>
    4. <a id="bb" href="#">回到顶部（给人看的）</a>

  6. 特殊的：什么也不会发生的超链接

    1. <!--可以在开发中将# 暂时作为超链接的路径的占位符使用-->
    2. <a href="#">占位符超链接</a>
    3. <!--可以用javascript:;作为herf的属性，点击这个链接什么也不会发生-->
    4. <a href="javascript:;">这又是一个超链接占位符</a>

九、图片img

行内块元素

  1. 使用img图片来引入外部图片，是一个自结束标签；是一种替换元素（块和行之间，具有两种元素特点）；
  2. src属性 ：属性指定的是图片的路径（路径规则和超链接是一样的）；

  3. alt属性 ： 图片的描述；默认的情况下不显示；有些浏览器图片识别不出来的情况下会显示汉字；

    1.      原理：搜索引擎会根据alt中的描述 来识别图片，若不写alt则图片不会被搜索引擎所收录；（私密性的考虑下有时候就不会写）

  4. width图片高度，height高度（单位是像素）；一般只写一个属性就行，另一个会等比例缩小；一般在PC不建议修改图片的大小，需要多大的图就裁多大的图；但是在移动端，经常需要对图片就行缩放（大图缩小）

    1. <!--图片标签用于向当前页面中引入一个外部图片-->
    2. <img height="200" src="../image/01.jpeg" alt="盗墓笔记">
    3. <img width="150"  src="https://img2.baidu.com/it/u=2953120618,2910211433&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=630" alt="吴邪小哥">

  5. 图片的格式 ：

    jpeg(jpg) ：支持的颜色比较丰富，不支持透明效果，不支持动图 ,一般用来显示照片
    gif : 支持的颜色比较少，支持简单透明，支持动图，颜色单一的图片，动图
    png ：支持的颜色丰富，支持复杂透明，不支持动图，颜色丰富，复杂透明图片(专为网页而生)
    webp ：这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式它具备其他图片格式的所有优点， 文件还特别的小；缺点:兼容性不好
    base64 : 将图片使用一种base64编码展现；可以将图片转换成字符，通过字符的形式来引入图片；
    类似于一种加密技术；以上四种的图片格式就可以转换成base64加载； 常用在提高需要和网页同步加载的速度时候（一般网页的图片加载存在延迟，因为要单独向服务器发起请求）通过base64在线转换获得代 

    1. <img src="ArF+OWfaVpiJpEerw0EtbEHSwACfEDnXBzn" alt="在线图">

    十、内联框架