HTML：结构与语义

版本提示：align、部分 table/hr 的表现属性属于旧式写法，现代页面优先使用 CSS 控制外观；本章保留课堂对照示例。

tip:快速填充框架，输入!回车

1. 标题介绍与应用

<!-- 快速生成六个标题 h$*6 -->
<h1>标题一</h1>

<h2>标题二</h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

<!-- 属性 -->
align="left/center/right"

2. 段落、换行、水平线

<!-- 段落 -->
<p>我是段落标签</p>

<!-- 换行 -->
<p>我不想这么长，<br>这里要换行</p>

<!-- 水平线 -->
<hr>
属性：color="red" width="300px" size="10px" align="left"

3. 图片——img

<!-- 图片标签 -->
<img src="路径" width="200px" height="200px" alt="不能正常显示的提示信息" title="这是图片标题">

4.超文本链接——a

<!-- 超文本链接 -->
<a href="https://www.baidu.com">这是百度的地址</a>

5. 文本标签——

<!-- 文本标签 -->
<em>这是着重语气标签</em>

<b>粗体文本</b>

<i>定义斜体字</i>

<strong>加重语气</strong>

<del>定义删除字</del>

<span>没有特定的含义</span>

6.列表

<!-- 有序列表ol -->
<!-- type="类型" 1,a,A,i,I -->
<ol type="1">
    <li>苹果</li>

    <li>橘子</li>

    <li>西瓜</li>

    <li>香蕉</li>

</ol>

<!-- 无序列表（可以实现导航栏效果） -->
<!-- type="类型" 实心圆:disc 空心圆:circle 小方块:square 不显示:none -->
<ul>
    <li>苹果</li>

    <li>橘子</li>

    <li>西瓜</li>

    <li>香蕉</li>

</ul>

7. 表格——table

标签
表格<table>  行<tr>  单元格（列）<td>  表头<th>
快捷键：table>tr*3>td*3{单元格}
<!-- 表格 -->
<table border="2" width="300px" height="300px">
    <tr>
        <td>单元格</td>

        <td>单元格</td>

        <td>单元格</td>

        <td>单元格</td>

    </tr>

    <tr>
        <td>单元格</td>

        <td>单元格</td>

        <td>单元格</td>

        <td>单元格</td>

    </tr>

    <tr>
        <td>单元格</td>

        <td>单元格</td>

        <td>单元格</td>

        <td>单元格</td>

    </tr>

</table>

单元格合并
<table border="2" width="300px" height="300px">
    <tr>
        <td>单元格</td>

        <td colspan="2">单元格</td> 行合并
        <td rowspan="2">单元格</td>  列合并
    </tr>

    <tr>
        <td>单元格</td>

        <td>单元格</td>

        <td>单元格</td>

    </tr>

    <tr>
        <td>单元格</td>

        <td>单元格</td>

        <td>单元格</td>

        <td>单元格</td>

    </tr>

</table>

8. 表单——form

<!-- 表单 -->
<form action="url提交的地址" name="表单名称" method="提交方式:get/post">
    <!-- 表单元素 -->
    用户名:<input type="text" name="username"><br>
    密码:<input type="password" name="password"><br>
    <input type="submit" value="按钮">
</form>

9. 新标签

<!-- 传统 -->
<div id="header"></div>

<div id="nav"></div>

<div id="article">
    <div id="section"></div>

</div>

<div id="silder"></div>

<div id="footer"></div>

<!-- H5新标签 -->
<header>头部</header>

<nav>导航</nav>

<article>独立的内容块</article>

<aside>侧边栏</aside>

<footer>页脚</footer>

<section>定义文档的节</section>

1. 标题介绍与应用

2. 段落、换行、水平线

3. 图片——img

4.超文本链接——a

5. 文本标签——

6.列表

7. 表格——table

8. 表单——form

9. 新标签

系列章节