【自学前端计划①】html部分-小结

html部分小结

基础知识

什么是html

hyper text makeup language,超文本标记语言

与css有什么区别

html主要控制页面的结构，css主要控制页面的显示和样式

语义化

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

主要元素

文本元素

1. 标题元素 h1~h6
2. 超链接元素 <a></a>
   重要属性:<a href="">href即为跳转的路径地址
   回到顶部：

   <a href="#"> 
   

   可以与标题元素联用，表示锚链接，可完成快速跳转（类似百度百科） 注意不要忘记#号

   <a href="#chapter1">章节1</a>
   <h2 id="chapter1">章节1</h2>
   

   可以与图片元素联用，完成点击图片的跳转

    <a href="" target="_blank">
        <img src="" alt="">
    </a>
   

3. 段落元素 <p></p>
4. 无语义元素 <span></span>
5. 域格式化文本元素 <pre></pre>解决空白折叠问题

图片元素

<figure>
    <a href="" target="_blank"><!-- target="_blank"打开新页面，_self在当前页面打开，默认是_self -->
        <img usemap="#kana" src="" alt=""><!-- src为图片地址，alt为图片无法展示时的声明，usemap和map的name属性一致，加个# -->
    </a>
    <figcaption><!-- 图片标题 -->
       <h2>nishino kana</h2> 
    </figcaption>
    <p>这是一个段落</p>
</figure>
    
    <map name="kana"><!-- 细分区域进行跳转，对哪个图进行分割靠name属性区分 -->
        <area shape="circle" coords="" href=" target="_blank"><!--圆，coords属性按顺序为坐标横轴，竖轴，半径 -->
        <area shape="rect" coords="" href="" alt=""><!--长方形，coords属性按顺序为左上角坐标，右下角坐标 -->
        <area shape="poly" coords="" href="" alt=""><!--不规则图形，coords属性为按顺序的各点坐标 -->
    </map>

列表元素

1. 有序列表

<ol>
    <li> </li>
</ol>

2. 无序列表

<ul>
    <li></li>
</ul>

3. 定义列表

<dl>
    <dt>
        <dd>
        </dd>
    </dt>
</dl>

容器元素

1. 无语义划分

<div> </div>

2. 语义化元素

<article><!--整个文章体-->
    <header><!--页头-->
        <section><!--章节-->
        </section>
        <aside><!--侧边栏-->
        </aside>
    </header>
    <footer><!--页尾-->
    </footer>
</article>

元素包含关系

概述

以前：块级元素独占一行，行级元素不会；元素包含关系：块级元素可以包含行级元素，行级元素不能包含块级元素，a元素除外。

现在元素的包含关系由元素的内容类别决定

总结

1.容器元素中可以包含任何元素

2.a元素几乎可以包含任何元素

3.某些元素有固定的子元素（ul>li,ol>li,dl>dt+dd)

4.标题元素和段落元素不能相互嵌套，并且不能包含容器元素

附录

网课链接

html+css

MDN文档

MDN