【从0-1的HTML】第2篇：HTML标签

文章目录

1.标题标签
2.段落标签
3.文本标签
- br
- b
- strong
- sub
- sup
4.超链接标签
5.图片标签
6.表格标签
7.列表标签
8.表单标签
9.音频标签
10.视频标签
11.HTML元素分类
- 块级元素
- 内联元素
12.HTML布局
13.内联框架
13.内联框架

1.标题标签

标题标签：h1、h2、h3...h6,1-6表示标题层级，最大h1,最小h6

html 复制代码

<h1>title1</h1>
<h2>title2</h2>
<h3>title3</h3>
<h4>title4</h4>
<h5>title5</h5>
<h6>title6</h6>

2.段落标签

可以使用段落标签来将内容分成若干个段落

html 复制代码

<p>This is a paragraph</p>
<p>This is another paragraph</p>

3.文本标签

br

一个空的HTML元素,关闭标签没有任何意义，但在HTML之后的版本中，不允许使用没有结束标签的HTML元素，所以推荐使用

b

仅加粗文本

strong

加粗文本，表示标签中的内容的重要性，两者在显示并没有差别

sub

下标文本

sup

上标文本

html 复制代码

<p><b>Everything happens for a reason!</b> <br/> <strong>You can change your odds!</strong> <br> <strong>You can change your life!</strong></p>
<!--下标文本-->
<sub>下标文本</sub>
<!--上标文本-->
<sup>上标文本</sup>

4.超链接标签

超链接（Hyperlink）通常简称为链接（Link），是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以是当前网页中的其它位置，还可以是图片、文件、应用程序等

html 复制代码

<!--href属性：1、可以指向网页，2、可以指向图片，3、可以指向压缩文件，4、可以指向本地文件，指向可以是相对路径，也可以是绝对路径-->
<a href="http://www.w3school.com.cn/" target="_blank">访问 W3School</a>

5.图片标签

HTML 使用标签插入图片，img 是 image 的简称，自闭和标签，只包含属性，没有结束标签

html 复制代码

<!--图片-->
<!--src：必填属性，指定图片的地址（网络图片）或者路径（本地图片）-->
<!--alt：可选属性，当图片无法正常显示的时候，会显示alt属性中的信息-->
<img src="64960446_p0.jpg" alt="wlop">

6.表格标签

在 HTML 中，我们使用标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的，都包括行、列、单元格、表头等元素。

html 复制代码

<!--table表格-->
<!--tr：行-->
<!--th：表头-->
<!--td：表格单元格标签-->
<!--border-collapse：表格边框合并-->
<table border="1" style="border-collapse: collapse">
    <tr>
        <th>朝代</th>
        <th>开国皇帝</th>
    </tr>
    <tr>
        <td>秦</td>
        <td>嬴政</td>
    </tr>
    <tr>
        <td>汉</td>
        <td>刘邦</td>
    </tr>
</table>

7.列表标签

HTML 列表（List）可以将若干条相关的内容整理起来，让内容看起来更加有条理

有序列表ol

html 复制代码

<!--有序列表：ol order list缩写-->
<ol>
    <li>有序1</li>
    <li>有序2</li>
</ol>

无序列表ul

html 复制代码

<!--无序列表：ul unordered list缩写-->
<ul>
    <li>无序1</li>
    <li>无序2</li>
</ul>

定义列表dl

html 复制代码

<!--定义列表：dl definition list缩写
            dt definition term缩写，标题
            dd definition description缩写，描述
-->
<dl>
    <dt>标题1</dt>
    <dd>标题1的描述</dd>
    <dt>标题2</dt>
    <dd>标题2的描述</dd>
</dl>

8.表单标签

表单属于 HTML 文档的一部分，其中包含了如输入框、复选框、单选按钮、提交按钮等不同的表单控件，用户通过修改表单中的元素（例如输入文本，选择某个选项等）来完成表单，通过表单中的提交按钮将表单数据提交给后端程序。

html 复制代码

<!--表单-->
<!--action属性：表示将表单数据提交的url，默认是当前页面，当姓名和年龄输入点击提交时，提交到当前网页-->
<!--http://localhost:63342/FrontEnd/HTML/%E6%A0%87%E7%AD%BE.html?username=kii&age=25-->
<!--input：表示定义输入框-->
<!--method：表示表单数据提交方式，主要是get和post方式-->
<!--    get：请求数据直接拼接在路径后面 ?username=kii&age=25，大小有限制-->
<!--    post：请求数据通过请求体传递 username=lisi&age=19, 大小无限制-->
<!--    如果要提交数据,必须添加name属性-->
<form action="" method="get">
    姓名：<input type="text" name="username" id="1">
    年龄：<input type="number" name="age" id="2">
    <input type="submit" value="get提交">
</form>
<form action="" method="post">
    姓名: <input type="text" name="username">
    年龄: <input type="text" name="age">
    <input type="submit" value="post提交数据">
</form>

9.音频标签

html 复制代码

<!-- 音频标签audio
    src: 设置视频资源路径
    controls: 播放控件 [注意: 当值和key一样的时候,可以省略值]
-->
 <audio src="./audio/news.mp3" controls></audio>

10.视频标签

html 复制代码

<!-- 视频标签
        src属性：视频路径
        controls属性：播放控件
-->
<video src="./video/news.mp4" controls width="950px" ></video>

11.HTML元素分类

HTML元素主要分为两个类别，块级元素和内联元素

块级元素

html 复制代码

通常是以新行来开始，块级元素主要包括div、h、table、p

内联元素

html 复制代码

通常不会以新行开始，内联元素主要包括span、a-

12.HTML布局

HTML4布局主要通过div实现

HTML5布局有很多其他标签：header、nav...稍微了解就行，具体使用可以查看手册

html 复制代码

<div>
    <li>HTML教程</li>
    <li>CSS教程</li>
    <li>JS教程</li>
    <li>Java教程</li>
    <li>Python教程</li>
</div>

13.内联框架

iframe：可以在网页中显示网页，可以设置width和height

html 复制代码

<iframe src="https://www.w3school.com.cn/" frameborder="0"></iframe>
>CSS教程</li>
    <li>JS教程</li>
    <li>Java教程</li>
    <li>Python教程</li>
</div>

13.内联框架

iframe：可以在网页中显示网页，可以设置width和height

html 复制代码

<iframe src="https://www.w3school.com.cn/" frameborder="0"></iframe>