HTML常用标签-CSDN博客

本文链接：https://blog.csdn.net/best_wan/article/details/120159430

本文详细介绍了HTML的基础标签和用法，包括结构标签、排版标签、块级和行内标签、文字处理、文本格式化、标题、列表、图形、音频、表格、链接、表单、框架以及特殊字符等。通过实例展示了如何创建网页、处理文本样式、引入多媒体内容以及创建交互式表单。此外，还提及了HTML在框架布局中的应用。

摘要由CSDN通过智能技术生成

简介

通常网页都是以html或htm后缀结尾的文件

Hyper Text Markup Language（超文本标记语言）

HTML基本标签

结构标签

<html>:根标签
    <head>:网页头标签
        <title></title>：网页的标题
    </head>: 
    <body></body>：网页正文
</html>

排版标签

换行标签：<br>

段落标签：<p>文本文字</p>

水平线标签：<hr>

<html>

    <head>
        <title>this is titlte</title>
    </head>

    <body bgcolor="pink">//设置背景颜色
        this is text01<br />
        this is text02<br />
        this is text03<br />
        <hr />
        <hr size="500" color="blue" />
        <hr size="500" color="blue" width="300" align="right" />
        <p align="center">this is p1<p />
        <p>this is p2<p /><br />
        <p align="right">this is p3<p />
    </body>
</html>

块标签

<div><div/>:行级块标签，独占一行，换行

<span></span>:行内块标签，所有内容都在同一行

基本文字标签

font标签处理网页中文字的显示方式（可对属性进行赋值）

<HTML>
<HEAD>
<TITLE> images </TITLE>
</HEAD>

<BODY>
    <font size="6" color="blue" face="方正舒体333"><b>this is a text.</b></font>
    <font size="6" color="blue" face="方正舒体333"><Strong>this is a text.</Strong></font>
    <font size="6" color="blue" face="方正舒体333"><i>this is a text.</i></font>
    <font size="6" color="blue" face="方正舒体333">this is a text.</font>
    <h1>this is h1</h1>
</BODY>
</HTML>

文本格式化标签

b strong em i粗体标签、加粗、强调字体、斜体等标签

标题标签

h1、h2、h3、h4、h5、h6共6级，h7无效

<html>
    <head>
        <title>this is my first html page.</title>
    </head>

    <body>
        <h1>this is head 01</h1>
        <h2>this is head 02</h2>
        <h3>this is head 03</h3>
        <h4>this is head 04</h4>
        <h5>this is head 05</h5>
        <h6>this is head 06</h6>
        <h7>this is head 07</h7><br />
        this is text.
    </body>
</html>

列表标签

无序列表<ul></ul>：使用一组无序的符合定义

有序列表<ol></ol>：使用一组有序的符合定义

列表标签之间可以相互嵌套使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<BODY>
    <ol type="disc">
        <li>打开冰箱门</li>
        <li>把大象装进去</li>
        <li>关上冰箱门</li>
    </ol>
    
    <ul type="disc">
        <li>Java</li>
        <li>html5</li>
        <li>python</li>
        <li>testing</li>
        <li>Java</li>
        <li>html5</li>
        <li>python</li>
        <li>testing</li>
        <li>Java</li>
        <li>html5</li>
        <li>python</li>
        <li>testing</li>
    </ul>
</BODY>
</HTML>

图形标签

<img/>：在页面指定位置处引入一副图片

并可以对图片的地址、宽度、高度、边框、对齐方式等属性进行赋值

<HTML>
<HEAD>
<TITLE> html demo </TITLE>
</HEAD>

<BODY background="imgs/2222.jpg">
    this is a test.
    <img src="imgs/2222.jpg" width="800" height="600" align="right" />
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE> images </TITLE>
</HEAD>
alt和title用于图片无法正常显示时提示作用
<BODY>
    <img src="imgs/a.jpg" width="200" alt="快来看美女" />
    <img src="imgs/b.jpg" width="200" title="快来看美女" />
    <img src="imgs/c.jpg" width="200" title="快来看美女" />
    <img src="imgs/d.jpg" width="200" title="快来看美女" />
    <img src="imgs/e.jpg" width="200" title="快来看美女" />
</BODY>
</HTML>

音频标签

embed:在页面指定位置处引入一个视频

<HTML>
<HEAD>
<TITLE> images </TITLE>
</HEAD>
//autoplay是音频的播放方式属性，true是播放，false是暂停
<BODY>
    <embed src="video/1.mp4" width="600" autoplay="false" />
    <embed src="video/2.mp4" width="600" autoplay="false" />
    <embed src="video/3.mp4" width="600" autoplay="false" />
    <embed src="video/4.mp4" width="600" autoplay="false" />
    <embed src="video/5.mp4" width="600" autoplay="false" />
    <embed src="mp3/1.mp3" />
</BODY>
</HTML>

source:在页面指定位置处引入一个音乐

<HTML>
<HEAD>
<TITLE> images </TITLE>
</HEAD>

<BODY>
    <video width="320" height="240" controls>
        <source src="video/1.mp4" type="video/mp4">
    </video>
    <audio controls>
      <source src="mp3/1.mp3" type="audio/mpeg">
      <source src="mp3/2.mp3" type="audio/mpeg">
      <source src="mp3/3.mp3" type="audio/mpeg">
      <source src="mp3/4.mp3" type="audio/mpeg">
      Your browser does not support this audio format.
    </audio>
</BODY>
</HTML>

表格标签

普通表格：(table,tr,td)

表格的列标签（th）：内容有加粗和居中效果

表格的列合并属性（colspan）：同行合并多列

表格的行合并属性（rowspan）：同列多行合并

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
    <table border="1" align="center" width="80%">
        <tr>
            <th colspan="4">score</th>
        </tr>
        <tr align="center" >
            <th>sid</th>
            <th>name</th>
            <th>age</th>
            <th>score</th>
        </tr>
        <tr align="center">
            <td>9527</td>
            <td>tangbohu</td>
            <td>18</td>
            <td>100</td>
        </tr>
        <tr>
            <td>9527</td>
            <td>tangbohu</td>
            <td>18</td>
            <td>100</td>
        </tr>
        <tr>
            <td>9527</td>
            <td>tangbohu</td>
            <td>18</td>
            <td>100</td>
        </tr>
        <tr>
            <td>9527</td>
            <td>tangbohu</td>
            <td>18</td>
            <td>100</td>
        </tr>
        <tr>
            <td>9527</td>
            <td>tangbohu</td>
            <td>18</td>
            <td>100</td>
        </tr>
        <tr>
            <td>9527</td>
            <td>tangbohu</td>
            <td>18</td>
            <td>100</td>
        </tr>   
        <tr>
            <td colspan="3" align="right">total</td>
            <td>900</td>
        </tr>   
    </table>
</BODY>
</HTML>

链接标签

<a href="跳转页面的地址"></a>:跳转到指定的地址页面

设置跳转页面的页面打开方式：

target_blank在新窗口打开

target_self在原窗口打开

_top

_parent

指向同一页面中指定位置：

定义位置：<a name="名称"></a>

指向：<a href="#名称"></a>

<HTML>
<HEAD>
<TITLE> html page1</TITLE>
</HEAD>

<BODY>
    <h1>this is first page.</h1>
    <a href="Demo02.html" target="_blank">second page</a>
    <a href="#e">view</a>
    <a href="mailto:zhangsan@qq.com">contact us</a>
    <a name="top"></a>
    <img src="imgs/a.jpg" />
    <img src="imgs/1.jpg" />
    <img src="imgs/b.jpg" />
    <img src="imgs/c.jpg" />
    <img src="imgs/d.jpg" />
    <a name="e"></a>
    <img src="imgs/e.jpg" />
    <a href="#top">back to top</a>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE> html page2</TITLE>
</HEAD>

<BODY>
    <h1>this is second page.</h1>
    <a href="Demo01.html">first page</a>
    <a href="Demo01.html#e">first page view</a>
    <img src="imgs/a.jpg" />
    <img src="imgs/1.jpg" />
    <img src="imgs/b.jpg" />
    <img src="imgs/c.jpg" />
    <img src="imgs/d.jpg" />
    <img src="imgs/e.jpg" />
</BODY>
</HTML>

HTML表单标签

用于收集不同类型的用户输入数据

form元素常用属性

action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理

method：请求方式：get和post。get不安全、效率高。post安全、效率低

enctype：表示是表单提交的类型

默认值：application/x-www-form-urlencoded普通表单

multipant/form-data多部分表单（一般用于文件上传）

input元素

作为表单中的重要元素，可根据不同type值呈现为不同状态

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<BODY>
    <form action="Demo01.html" method="POST">
        username: <input type="text" name="useranme" /><p />
        password: <input type="password" name="password" /><p />
        file <input type="file" name="file" /><p />
        sex: <input type="radio" name="sex" checked>boy <input type="radio" name="sex">girl <p />
        hobby: <input type="checkbox" name="hobby">singing
        <input type="checkbox" name="hobby">jump&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jump2
        <input type="checkbox" name="hobby">rap
        <input type="checkbox" name="hobby">basketball<p />
        month: <select multiple="multiple">
                    <option value="0">pls select a month:</option>
                    <option value="1">jan</option>
                    <option value="2">feb</option>
                    <option value="3">mar</option>
                    <option value="4">apr</option>
                    <option value="5">may</option>
                    <option value="6" selected>jun</option>
                    <option value="7">jul</option>
                    <option value="8">aug</option>
                    <option value="9">sep</option>
                    <option value="10">oct</option>
                    <option value="11">nov</option>
                    <option value="12">dec</option>
                </select><p />
        birth:<input type="date" name="birth" /><p />
        number:<input type="number" name="number" /><p />
        birth2:<input type="datetime-local" name="birth2" /><p />
        aaa:<input type="time" name="aaa" /><p />
        protocal:<textarea cols="30" rows="10">this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.this is protocal.</textarea><p />
        <input type="submit" value="register" />
        <input type="reset" value="reset" />
        <input type="button" value="button" /><p />
        <button type="button">register</button><p />
    </form>
</BODY>

select元素（下拉列表）

单选下拉列表：<select></select>

默认选中属性：selected=“selected”

多选下拉列表：<select multiple="multiple"></select>

textarea元素（文本域）

多行文本框：<textarea cols="列" rows="行"></textarea>

button标签本身具有提交功能

HTML框架标签

通过使用框架，你可以在同一个浏览器窗口显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他框架。
使用框架的缺点：
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面

框架结构标签frameset

框架结构标签用于定义如何将窗口分割为框架
每个frameset定义了一系列行或列
rows/columns的值规定了每行或每列占据屏幕的面积
- <frameset rows=“”></frameset>
- <frameset cols=“”></frameset>

框架标签frame

每个框架引入一个html页面

基本的注意事项

不能将<body></body>标签与<frameset></frameset>标签同时使用
加入一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在<frame>标签中加入：noresize=“noresize”

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<frameset rows="10%, 60%, *">
    <frame src="top.html">
    <frame src="center.html">
    <frame src="bottom.html">
</frameset>
</HTML>

<HTML>
<HEAD>
<TITLE> top </TITLE>
</HEAD>

<BODY>
    <h1>this is top</h1>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE> top </TITLE>
</HEAD>

<BODY>
&lt; &gt; <>
    <h1>this is bottom京ICP证030173号 &copy; 2021qianfeng </h1>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE> top </TITLE>
<style>
    @import url(css/all.css);
</style>
</HEAD>

<BODY>
    <h1>this is center</h1>
</BODY>
</HTML>

框架中还可以插入框架

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<nobody>
<frameset rows="10%, 80%, *" noresize border="1">
    <frame src="top.html" noresize>
    <frameset cols="10%, *" noresize>
        <frame src="left.html" noresize>
        <frame src="main01.html" name="mainFrame" noresize>
    </frameset>
    <frame src="bottom.html" noresize>
</frameset>
</nobody>
</HTML>

其他标签和特殊字符

特殊字符

占位符：空格-&nbsp

其他标签