HTML标签

最新推荐文章于 2025-05-30 22:33:54 发布

无掺杂

最新推荐文章于 2025-05-30 22:33:54 发布

阅读量298

点赞数

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/weixin_53968665/article/details/121964990

版权

1.标题标签<h1>到<h6>

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

2.段落标签<p>

<!--一个<p>标签内一个段落，与换行无关-->
<p>
    程序是以数据为中心存储的。目前，我们所学习到SE和数据结构阶段的数据主要存储于内存。
    内存存储的特点有：容易丢失（易失性存储）；相对于持久化存储（硬盘，光盘，磁带等），内存存储的读写速度更快；相对于持久化存储，内存存储支持O(1)的下标访问。相对的，持久化存储具有以下特点：存储持久化；读写速度相对更慢；更多的支持顺序访问。
    持久化存储（硬盘）的数据，被操作系统抽象成一个概念：文件。因此我们以文件的形式管理数据的存储。
    利用应用程序直接进行文件存储时，需要很多的专业知识点来管理数据。所以我们抽象出了一类软件，专门帮助应用程序，普通用户来管理持久化存储上的数据（以文件形式），这类软件，我们称为数据库管理软件（database manage system DBMS），例如MySQL，Oracle，MS SQL Server，Postgres等等。
    DBMS在管理数据时，总是存在共性的，关于数据的建模与抽象问题，一般应用广泛的被称为关系模型（relationship model）
</p>
<p>
    程序是以数据为中心存储的。目前，我们所学习到SE和数据结构阶段的数据主要存储于内存。
</p>
<p>
    内存存储的特点有：容易丢失（易失性存储）；相对于持久化存储（硬盘，光盘，磁带等），内存存储的读写速度更快；相对于持久化存储，内存存储支持O(1)的下标访问。相对的，持久化存储具有以下特点：存储持久化；读写速度相对更慢；更多的支持顺序访问。
    持久化存储（硬盘）的数据，被操作系统抽象成一个概念：文件。因此我们以文件的形式管理数据的存储。
</p>
<p>
    利用应用程序直接进行文件存储时，需要很多的专业知识点来管理数据。所以我们抽象出了一类软件，专门帮助应用程序，普通用户来管理持久化存储上的数据（以文件形式），这类软件，我们称为数据库管理软件（database manage system DBMS），例如MySQL，Oracle，MS SQL Server，Postgres等等。
    DBMS在管理数据时，总是存在共性的，关于数据的建模与抽象问题，一般应用广泛的被称为关系模型（relationship model）
</p>

3.换行标签<br>

<!--<br>是一个单标签-->
<p>
    程序是以数据为中心存储的。目前，我们所学习到SE和数据结构阶段的数据主要存储于内存。<br>
    内存存储的特点有：容易丢失（易失性存储）；相对于持久化存储（硬盘，光盘，磁带等），内存存储的读写速度更快；相对于持久化存储，内存存储支持O(1)的下标访问。<br>
    相对的，持久化存储具有以下特点：存储持久化；读写速度相对更慢；更多的支持顺序访问。<br>
    持久化存储（硬盘）的数据，被操作系统抽象成一个概念：文件。因此我们以文件的形式管理数据的存储。<br>
    利用应用程序直接进行文件存储时，需要很多的专业知识点来管理数据。所以我们抽象出了一类软件，专门帮助应用程序，普通用户来管理持久化存储上的数据（以文件形式），这类软件，我们称为数据库管理软件（database manage system DBMS），例如MySQL，Oracle，MS SQL Server，Postgres等等。
    DBMS在管理数据时，总是存在共性的，关于数据的建模与抽象问题，一般应用广泛的被称为关系模型（relationship model）
</p>

4.图片标签<img>

img标签必须带src属性，表示图片路径

<!--图片与HTML文件在同级目录下-->
<img src="OIP-C%20(1).jfif">

关于路径：

相对路径：以html文件所在位置的相对路径

同级目录：直接写文件名

上一级：../图所在文件夹名/文件名

下一级：图所在文件夹名/文件名

绝对路径：一个完整的磁盘路径或者网络路径

5.格式化标签

加粗: strong 标签和 b 标签

倾斜: em 标签和 i 标签

删除线: del 标签和 s 标签

下划线: ins 标签和 u 标签

<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

6.超链接标签<a>

href: 必须有, 表示点击后会跳转到的页面

<!--跳转到百度，默认自跳转-->
<a href="http://www.baidu.com">百度</a>
<!--跳转到百度，新的空白页面跳转-->
<a href="http://www.baidu.com" target="_blank">百度</a>

7.表格标签<table>

table 标签: 表示整个表格

tr: 表示表格的一行

td: 表示一个单元格

th: 表示表头单元格. 会居中加粗

thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)

tbody: 表格得到主体区域.

 <table>
        <thead>
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>身高</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>堆堆</td>
                <td>23</td>
                <td>158</td>
            </tr>
            <tr>
                <td>2</td>
                <td>准准</td>
                <td>33</td>
                <td>179</td>
            </tr>
            <tr>
                <td>3</td>
                <td>淮淮</td>
                <td>17</td>
                <td>188</td>
            </tr>
        </tbody>
    </table>

合并单元格：

跨行合并: rowspan="n"

跨列合并: colspan="n"

<table border="10">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td rowspan="2">年龄</td>
    </tr>
    <tr>
        <td>谁谁</td>
        <td>男</td>
    </tr>
    <tr>
        <td>推推</td>
        <td>女</td>
        <td>23</td>
    </tr>
</table>

8.列表标签

无序列表： ul li

有序列表：ol li

自定义列表： dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.

<h1>有序列表</h1>
<ol>
    <li>香菜</li>
    <li><a href="https://www.baidu.com/">百度</a></li>
    <li><img src="微信图片_202111162349075.jpg" height="120"></li>
</ol>
<h1>无序列表</h1>
<ul>
    <li>香菜</li>
    <li><a href="https://www.baidu.com/">百度</a></li>
    <li><img src="微信图片_202111162349075.jpg" height="120"></li>
</ul>
<h1>自定义列表</h1>
<dl>
    <dt>标题</dt>
    <dd>项1</dd>
    <dd>项2</dd>
    <dd>项3</dd>
</dl>

9.排版标签

<div>：会换行，块级元素，可以嵌套

<span>：不会换行

<!-- 每个 div 都是独立的，结束后必须跟换行 -->
<div>111</div><div>222</div>
<!-- span 不换行 -->
<span>AAA</span>
<span>BBB</span>
<span>CCC</span>
<div>
    <div>
        <h3>...</h3>
        <p></p>
    </div>
    <div>
        <h3>...</h3>
        <p></p>
    </div>
    <div>
        <h3>...</h3>
        <p></p>
    </div>
</div>

10.input标签

type(必须有), 取值种类很多多, button（按钮）, checkbox（多选框）, text（文本）, file（文件）, image（图片）, password（密码）, radio（单选框）等

name: input 的名字.。对于单选按钮, 具有相同的 name 才能多选一

value: input 中的默认值

checked: 默认被选中

11.select标签

option 中定义 selected="selected" 表示默认选中

<select>
    <option>--请选择年份--</option>
    <option>1991</option>
    <option>1992</option>
    <option>1993</option>
    <option>1994</option>
    <option>1995</option>
</select>

12.textarea 标签

<textarea rows="5" cols="50">

</textarea>

13.在没有学习js之前，我们所有的用户提交的内容，必须包含在一个form（表单）之中。把用户输入，并且将内容发送给服务器的这个动作，表述提交（submit）动作。form表单也可以实现资源之间的关联（用户点击提交按钮，浏览器会请求另外的资源）。请求哪个资源，是通过action属性中url确定，可以是外部资源，不写时，默认是当前资源。要让form表单可以提交，必须有提交按钮，提交按钮形式可以有：

提交的时候，以<key,value>形式进行提交，其中，key就是input标签的name属性，value就是用户输入框中输入的内容。