hooyantsing's Blog

学习总结

字数统计: 1.5k阅读时长: 7 min
2020/05/06

A 学习总结

#页面结构


内容标题

h1~h6

标题最好不要嵌套如 h1内部包含 h2

1
2
3
4
5
6
<h1>后盾人</h1>
<h2>houdunren.com</h2>
<h3>hdcms.com</h3>
<h4>houdunwang.com</h4>
<h5>doc.houdunren.com</h5>
<h6>www.hdcms.com</h6>

页眉页脚

header

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
    <header>
        <nav>
            <ul>
                <li><a href="">系统学习</a></li>
                <li><a href="">视频库</a></li>
            </ul>
        </nav>
    </header>
    <article>
        <h2>后盾人网站动态</h2>
        <ul>
            <li><a href="">完成签到 开心每一天</a></li>
            <li><a href="">完成签到 来了,老铁</a></li>
        </ul>
    </article>
        ...
</body>

footer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    ...
    <article>
        <h2>后盾人网站动态</h2>
        <ul>
            <li><a href="">完成签到 开心每一天</a></li>
            <li><a href="">完成签到 来了,老铁</a></li>
        </ul>
    </article>
    <footer>
        <p>
            我们的使命:传播互联网前沿技术,帮助更多的人实现梦想
        </p>
    </footer>
</body>

导航元素

nav

1
2
3
4
5
6
7
8
9
10
11
12
<header>
        <nav>
            <ul>
                <li>
                    <a href="">系统学习</a>
                </li>
                <li>
                    <a href="">视频库</a>
                </li>
            </ul>
        </nav>
</header>

主要区域

main

一个页面中main元素最好只出现一次。

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
                ...
    <main>
        <article>
            <h2>网站动态</h2>
            <ul>
                <li><a href="">完成签到 开心每一天</a></li>
                <li><a href="">完成签到 来了,老铁</a></li>
            </ul>
        </article>
    </main>
    ...
</body>

内容区域

article

1
2
3
4
5
6
7
8
9
<main>
        <article>
    <h2>后盾人网站动态</h2>
    <ul>
      <li><a href="">完成签到 开心每一天</a></li>
      <li><a href="">完成签到 来了,老铁</a></li>
    </ul>
        </article>
</main>

区块定义

section

1
2
3
4
5
6
7
8
9
10
<main>
   <article>
     <section>
       <h2>锁机制</h2>
     </section>
     <section>
      <h2>事物处理</h2>
     </section>
   </article>
</main>

附加区域

aside

1
2
3
4
5
6
7
8
9
10
11
12
<body>
  <main>
    <article>
      ...
    </article>
    </main>
    <aside>
      <h2>社区小贴</h2>
      <p>后盾人是一个主张友好、分享、自由的技术交流社区。</p>
    </aside>
  </main>
</body>

通用容器

div

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div>
  <header>
    <nav>
      <ul>
        <li><a href="">后盾人</a></li>
        <li><a href="">系统课程</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <article>
      <section>
        <h2>事物处理</h2>
      </section>
    </article>
    <aside>
      <h2>社区小贴</h2>
      <p>后盾人是一个主张友好、分享、自由的技术交流社区。</p>
    </aside>
  </main>
  
  <footer>
    <p>
    我们的使命:传播互联网前沿技术,帮助更多的人实现梦想
    </p>
  </footer>
</div>

#文本相关


正文

p

1
2
3
<p>
录制视频是一个很费时的工作,老师需要时间录制更多高质量的视频教程。不可能做到随时解答问题,我们希望大家可以互相帮助提升技术,而不是直接简单的获取答案。
</p>

pre

原样显示文本内容包括空白、换行等。

1
2
3
4
<pre>
        这是pre标签的显示效果
            这是换行后的内容,空白和换行都会保留
</pre>

换行

br

无语义

span

span标签和div标签都是没有语义的。

描述文本

small

用于描述、声明等文本。

1
<small> 半年付 </small>

时间

time

标签定义日期或时间,或者两者。

1
<time> 2019-07-26 </time>

缩写内容

abbr

1
在WWW上,每一信息资源都有统一的且在网上唯一的地址,该地址就叫 <abbr title="Uniform Resource Locator">URL</abbr> 统一资源定位符。

**

**

下标

sub

1
水的化学式为H<sub>2</sub>O

e20994ea4aa939218acb3a73d374392f.png

上标

sup

1
请计算5<sup>2</sup>平方

41b68283bce962ebe3732b3915909b22.png

删除

del

del 标签表示删除的内容,ins 一般与 del 标签配合使用描述更新与修正。

1
原价 <del>200元</del> 现价 <ins>100元</ins>

s

s 标签显示效果与 del 相似,但语义用来定义那些不正确、不准确或没有用的文本。

1
2
<s>A 太阳是方的</s>
B 地球是圆的

代码

code

加粗

strong

斜体

em

标记

类似生活中的马克笔。

953d88347b3d880252f8c8eff0bea62b.png

引用

cite

通常表示它所包含的文本对某个参考文献的引用,或文章作者的名子。

1
最新版PHP视频教程已经在 <cite>后盾人</cite> 录制完成。

blockquote

用来定义摘自另一个源的块引用

1
2
3
4
下而是来自某一个大叔,对失败的认知
<blockquote cite="https://www.houdunren.com">
        在坚持的人面前,失败终将被踏过。
</blockquote>

q

用于表示行内引用文本,在大部分浏览器中会加上引号。

1
最新课程 <q>HTML开启WEB征途</q> 已经发布了

联系信息

address

用于设置联系地址等信息,一般将address 放在footer 标签中。

1
2
3
<address>
        感谢您提交建议到 2300071698@qq.com
</address>
CATALOG