在网页中 HTML负责结构,CSS负责表现

所以在使用 html标签的时候,因当关注的是标签的语义,而不是标签的表现样式

  块元素 (block element)在网页中使用块元素进行布局

  行内元素(inline element)行内元素主要用来包裹文字

会在块元素中放行内元素,但是不会在行内元素中放块元素

块元素中基本上什么都能放,p元素中不能放任何块元素。

浏览器在解析网页中,会自动对网页中不符合规范的内容进行修正,会在内存中纠正错误,在开发者工具中查看(右键检查 或 f12)

比如:标签写在根元素外面、p元素中嵌套了块元素、根元素中出现了除了head 或 body之外的子元素

 

块元素(block element)独占一行,并且有自动填满父元素,可以设置 margin 和 padding 以及宽度和高度

行内元素(inline element)不会独占一行,widthh 和 heighth会失效,并且在垂直方向上的 paddingy 与 margin 会失效 

标题标签:

  h1~ h6 一共有六级标题,独占一行(块元素)

  从 h1~h6 重要性递减,h1最重要,h6最不重要

  h1在网页中的重要性进次于 title 标签,一般情况下一个页面中只会有一个 h1

  一般情况下页面中的标题标签只会用到 h1~h3,h4~h6很少用到(重要性基本上可忽略不计了)

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

 

 

标题分组 hgroup

  hgroup 标签用来为标题分组,可以将一组相关的标题同时放入到 hgroup。

<hgroup>
        <h2>title 1</h2>
        <h2>title 2</h2>
 </hgroup>

 

段落标签

  p 标签表示页面中的一个段落,p元素也会独占一行,p元素也是块元素

<p>段落</p>

 

其他语义标签

语义 标签 说明
加粗 <strong></strong> 或者 <b></b> strong 标签加粗,语义更加强烈
倾斜 <em></em> 或者 <i></i> em 标签加粗,语义更强烈
删除线 <del></del> 或者 <s></s> del 标签加粗,语义更强烈
下划线 <ins></ins> 或者 <u></u> ins 标签加粗,语义更强烈

em 标签:表示语音语调的加重突出重点,表现为斜体,行内元素

<em>em 加重语气,表现为斜体</em><br>
 <i>i 斜体</i>

 strong 标签:表示强调,重要内容,表现为加粗效果,行内元素

<strong>strong 表示语气加强</strong><br>
 <b>b 加粗字体</b>

ins 下划线,语气更强烈

<ins>ins 下划线语气更强烈</ins><br>
    <u>u 下划线</u>

 del 删除线,语义上表示强调

<del>del 删除线语气更强烈</del><br>
<s>s 删除线</s>

 blockquote 便签:表示长引用,表现为另起一行的缩进,块元素

 <blockquote>blockquote 便签表示长引用,表现为另起一行的缩进</blockquote>

 q 标签:短引用,表现为双引号将内容引起来,行内元素

短引用 <q>q 表现为双引号将内容引起来</q>

 br 标签:换行标签

 

布局标签【结构化语义标签】content sectioning

HTML5 定义了8个新的HTML 语义标签(semantic),这些元素都是块级元素。(不常用)

  header 标签表示网页的头部,在网页中可以有很多头部,也可以表示网页中某一部分的头部,H5新增标签

  main 表示网页的主体部分,一个页面中只会有一个main,H5

  footer 表示网页(网页某一部分)的底部

  nav 表示网页中的导航

  side 表示和主体相关的其他内容(侧边栏)

  article 表示一个独立的文章

  section 表示一个独立的区块,上边的标签都不能表示时使用section

  footer 表示网页脚部

最常用的

div 没有语义表示一个区块,div是主流布局元素

span 行内元素,无语义,一般用于在网页中选中文字

 

列表:
有序列表:ul
    使用ul创建有序列表
    li是列表项

<ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
   </ul>

 
无序列表:ol
    使用ol创建无序列表
    li是列表项

<ol>
       <li>one</li>
       <li>two</li>
       <li>three</li>
   </ol>

 
定义列表:
    使用dl创建定义列表
    使用dt表示定义的内容
    使用dd对内容进行解释说明

<dl>
       <dt>1</dt>
       <dd>这是第一个列表项</dd>
       <dt>2</dt>
       <dd>这是第二个列表项</dd>
       <dt>3</dt>
       <dd>这是第三个列表项</dd>
   </dl>

 
嵌套的列表,项目符号会发生改变,还会自动向内缩进

   <ul>
       <li>1</li>
       <li>2</li>
        <ol>
            <li>one</li>
        </ol>
   </ul>

 

posted on 2020-04-29 14:27  Cloud%  阅读(696)  评论(1编辑  收藏  举报