CSS一篇文章搞懂系列1：html 基础知识，以网页源码为参考可加深理解

---

强烈推荐

B站 尚硅谷 李立超老师讲解的 html+CSS 视频，“被代码耽误的相声演员”，讲的非常好，老师也非常强，讲起课来信手拈来。受益匪浅！此系列文章均为视频所讲内容的个人理解。

---

一、html 基础知识（不太理解的话直接打开网页查看网页源码就清晰了）

 

1. html作为网页结构的存在，语法上相当于提供标签，声明这是什么。基本单位为标签

 

2. 标签再进一步丰富内容，又加上了许多属性。通过属性来具体细化各种情况。

 

3. 主体部分为

• 实体
• 元数据
• 语义化标签

4. 语义化标签里面又可以具体细化出

• 块元素
• 行内元素
• 替换元素

1. 实体：转移符号（当某些字符需要显示但是与语法关键字冲突时使用的折中办法）
    显示空格
  >   显示大于号
  <   显示小于号
  © 显示版权符号
  在 W3CSchool 网站里面可以查找更多更全的实体

2. meta 元数据（写给浏览器看的，不会显示在网页中，具有固定格式，name = " ",content = " "）
  <meta name = "keywords",content = "这表示显示在浏览器里面的网页关键字">
  <meta name = "description",content = "这标志显示在搜索出的网站的描述">
  <title> 这部分的内容会显示在搜索显示的超链接上</title>
  <meta charset="UTF-8"> 表示网页的编码格式
  <meta http-equiv="refresh" content="3;url = 跳转网址">，表示3秒之后会自动跳转到莫某个网址

3. 语义化标签：相当于这个符号表达的意义，不必在意其格式上的不同，因为这些都可以修改
   
  3.1 块元素：独占一行，用块元素对网页布局进行编辑
   
  3.1.1 基本常用的标签
   <h1></h1>,h1-h6，表示标题的语义，可以创建一个hgroup把相关的标题放到一起
   <p></p>,表示段落的语义
   <bolckquote>,代表对别人话语内容的引用

  3.1.2 *html5新增的区块语义标签，用的并不是很多
   <header></header>块的头部  <main></main>块的主体中间部分  <footer></footer>块的底部
   <nav></nav> 导航（如学校官网上的学院 师资 招生那一栏） <aside></aside> 表示边栏（如相关导航）。。。
   最常用的还是 <div></div>这个老的,直接代表块，相当于一个总称。

  3.1.3 列表：块结构中的一种，不同的列表类型可以相互嵌套使用
   *无序列表
     <ul>
       <li> li为list item 的缩写，表示每一项，如果没有的话相当于创建了空的列表</li>
       <li> 这种是用的最多的 </li>
     </ul>
   *有序列表
     <ol>
       <li>有序列表里面的每一项，但是一般不怎么使用这个，因为不同浏览器显示会略微不一样，这样是不好的</li>
     </ol>
   *定义列表
     <dl>
       <dt> 定义名称</dt>
       <dn> 定义内容</dn>
     </dl>
   

  3.2 行内元素：和其它内容共用一行，行内元素里面不应该放块元素的标签
   
  3.2.1 基本常用的标签
   <b>加粗</b>
   <em>语音语调的加重</em>
   <q>短引用</q>
   <strong>对内容的强调</strong>
   <span></span>，与<div>相对应，就是一般的行元素语义

   注意：如果位置放错了，或者不符合要求，浏览器在渲染显示时，加载到内存中会自动对内容进行修正，
   但是不会修改源码。右键-检查，里面可以看到源码加载到内存中最后的样子。


  3.2.2 超链接：用属性 href="  " 实现跳转
    * 可以跳转站外网址（绝对路径）: <a herf="www.baidu.com">超链接的显示名字</a>
    * 也可以跳转自身网页（相对路径放在同一个项目下的网页子文件跳转）的位置:
        + ./ 表示当前文件目录，如此文件的当前文件目录就是HTML上课，可以不写。默认带上
        + ../ 表示当前文件目录的上一层文件目录
            <a herf="hello.html">超链接的显示名字</a>
    * 在本页面内跳转
       + 跳转到页面底部：<a herf="#"> 跳转到底部 </a>
       + 跳转到页面任何位置，引入属性标识 id="任意字符数字组合"，但必须独一无二.使用非常多
         <a herf="#p3"> 跳转到 id号为p3 的位置</a>
         <p id = "p3"> 跳转到 id号为p3 的位置</p>
       + 如果暂时不知道跳转到哪个位置，先设置占位符。
         <a herf="#"> 用#号标识占个位，但是会有跳转的操作</a>
         <a herf="javascript:;"> 纯占位符，无任何反应</a>

    * 设置跳转是否打开新的页面，通过属性 target 设置
       + target = "_blank",打开新的标签页显示，比如百度
       + target = "_self" ，在当前网页打开超链接，比如谷歌

  3.3 替换元素（介于行内元素与块元素之间，它并没有显示自身，而是显示了自身引用的东西）
   
   3.3.1 图片（与超链接类似）
     <img src="图片路径，可以是本项目下的路径，也可以是外部的链接路径"，alt = "图片的描述，用于搜索引擎识别">
     <img width= "设置图片的宽度，长宽是一起缩放的">
     <img heigth= "一般不建议去改图片的大小">

   3.3.2 图片格式，使用原则，效果相同用小的，效果不同用好的。
     + jpg, 颜色丰富，不支持透明。
     + gif，动图，颜色少。
     + png，颜色丰富，支持透明，内存小，专门为网页而生。
     + webp，谷歌新推出，集前三者优点于一体，问题容易出现不兼容。
     + base64, 图片经编码规则转化的的一串编码。优点是可以和网页同时加载。

   3.3.3 内联框架：直接在网页中插入一个网页显示,无法被搜索引擎搜索到
     <iframe src = "www.baidu.com" width = 800,height = "自己设定显示的宽高"></iframe>
     <iframe src = "www.baidu.com" iframeborder = "0/1，设置有无边框"></iframe>

   3.3.4 音频
     属性：
       + controls：设置是否用于用户自己控制播放
       + autoplay：自动播放，一般设置了也不会自动播放
       + loop ：循环播放
     <audio src = "路径" ></audio>
     <audio src = "路径" controls loop autoplay ></audio>

     考虑兼容的问题：一般会使用以下的方式进行
     <audio controls>
       对不起，你的浏览器格式不兼容！无法播放音频（播放不出时显示文字，可以对用户更友好）
       <source src = "路径" type="type/mp3,表示格式">
       <source src = "支持写多个路径" type="type/mp3,表示格式">
       <source src = "会从上至下的选择播放，不能播放则下一个，是应对格式不兼容的方法" type="type/mp3,表示格式">
     </audio>

     再不济，使用嵌套实现
      <embed type="video/webm" src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4"
       width="250" height="200">



   3.3.5 视频，使用完全与音频相同。
    示例：
    <video controls width="250">
        <source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm" type="video/webm">
        <source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4" type="video/mp4">
        Sorry, your browser doesn't support embedded videos.
    </video>