HTML教程|菜鸟教程（2）

VIP文章 wqksoul

已于 2022-11-18 17:23:19 修改

阅读量340

点赞数

文章标签： html 前端 javascript

于 2022-11-17 19:43:56 首次发布

本文链接：https://blog.csdn.net/wqksoul/article/details/127909912

版权

01结构标签

<!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>
      <header></header>
      <main></main>
      <footer></footer>
      <nav></nav>
      <aside></aside>
      <article></article>
      <section></section>


      <div></div>
      <div></div>
      <div></div>

  </body>
</html>

html 搭建网页的结构：大部分的网站头部主体底部导航文章等等

html5 新增的标签，语义化更强网站的性能也会更好

布局标签（结构化标签）用来布局的标签都是块元素

header 网页的头部

main 网页的主体部分（一般就一个）

footer 网页的底部

nav 网页的导航

aside 和主体相关的内容，侧边栏

article 文章之类的

section 独立的区块，上面的标签都不合适，就用这个用来代替div

02行内与块元素

<!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>

    <div>间惊选谓，专到王得。 才越治韩打与价百秦害卅从，服在能这他死郭杨力，光思活子我降木火竟前看夹未护你颜不一玉，竟下台锐报普你统到褒保宋是极，有可珍死三的修了之而无变三气太二升感，这血是哉生惶今师打性活的我法，评名今法向哥又活的救，个太沫音忧纯风极哉他尘沫，朋太内时若夫切乏文言定郭召极，挟我高了得心报快生贼首张友更高卡孔，她活这好资关爱俭绪家极向使入不应得，其云自性畴以希韩，你责李未知灰专梵今也千秦大第洪已文，而褒支，把。
   
      <div></div>
      <p></p>

      <!--
        以下是错误的示范
        <span>
        <div></div>
      </span>
      <p>
        <h1></h1>
      </p> -->

      <img src="" alt="">
    </div>
    <p>看航不前疾，死拾能。</p>
    <span>导皇是二。</span>
    <strong>掸未</strong>
    <em>安胜作发。</em>
    <del>10000</del>
    <hr>
    <p>
      <div>
        人老貂，真将的，贼。
      </div>
    </p>

  </body>
</html>

元素分类

块元素（block element）用来布局

特点：

1、会独占一行

2、默认情况下，块元素的宽度是视口的100%

3、默认情况下，块元素的高度是被内容撑开的

常用块元素：div、p、h1-h6、header、main、footer、nav

行内元素（inline element）用来包裹文字

特点：

1、不会独占一行

2、宽高是被内容撑开的，内容有多宽它就多宽

常用行内元素：span、strong、em、del等