HTML06-10

HTML(Hyper Text Markup Language)-超文本标记语言

06-10

行内元素和块元素

块元素

无论内容多少，该元素独占一行

<!--段落标签-->
<p>琥珀色黄昏像糖在很美的远方</p>

<!--标题标签-->
<h1>一级标签</h1>

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行

<!--字体样式标签-->
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong> I LOVE YOU </strong>
斜体：<em> I LOVE YOU </em>

列表

什么是列表

信息资源的一种展示方式，使信息结构化和条理化，以列表的样式显示出来

列表的分类

无序列表

<!--无序列表:
应用范围：导航，侧边栏...
-->
<ul>
    <li>JAVA</li>
    <li>Python</li>
    <li>前端</li>
    <li>运维</li>
    <li>C++</li>
</ul>

有序列表

<!--
有序列表：
应用范围：试卷，问答...
-->
<ol>
    <li>JAVA</li>
    <li>Python</li>
    <li>前端</li>
    <li>运维</li>
    <li>C++</li>
</ol>

自定义列表

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>linux</dd>
    <dd>C</dd>

    <dt>位置</dt>

    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>新疆</dd>
</dl>

表格标签

简单通用，结构稳定

基本结构：单元格，行，列，跨行，跨列

<!--
表格：table
行 tr table rows
列 td
-->
<table border="3px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="4">1-1</td>
<!--        <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
-->
    </tr>
    <tr>
        <!--rowspan 跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

媒体元素

视频元素

video

音频元素

audio

<!--音频和视频
src:资源路径
controls:控制条
autoplay：自动播放
-->

<video src="../resource/video" controls autoplay></video>

<audio src="../resource/audio" controls autoplay></audio>

页面结构分析

元素名 描述

header 标题头部区域的内容（用于页面或页面中的一块区域）

footer 标记脚步区域的内容（用于页面或页面中的一块区域）

section Web页面中的一块独立区域

article 独立的文章内容

aside 相关内容或应用

nav 导航类辅助内容

<!--
<h2>二级标题
-->
<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>