HTML常用标签方法_html pub-CSDN博客

本文链接：https://blog.csdn.net/qq1292605147/article/details/123737082

结构

<!DOCTYPE html>
<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        内容主体
    </body>
</html>

文本

标题：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落：

<p>新段落</p>

粗体与斜体

<b>粗体</b>
<i>斜体</i>

上标和下标

<pub>上标</pub>
<sub>下标</sub>

空白

&nbsp
&ensp
&emsp
&thinsp

换行符与水平线

<br />换行
<hr />水平线

其他

<strong>加强语气，默认粗体</strong>
<em>强调，默认斜体</em>

<blockquete>长引用</blockquete>
<q>短引用</q>

<abbr title="缩写内容">缩写</abbr>

<cite>引文</cite>
<dfn>定义</dfn>

<address>设计者详细信息</address>

<ins>插入内容，通常带下划线</ins>
<del>删除内容，通常带删除线</del>
<s>不准确但不应去除的内容，带删除线</s>

列表

有序列表

<ol>
    <li>1.abc</li>
    <li>2.ABC</li>
</ol>

无序列表

<ul>
    <li>*.abc</li>
    <li>*.ABC</li>
</ul>

定义列表

<dl>
    <dt>术语</dt>
    <dd>定义</dd>
</dl>

链接

<a href="http://www.baidu.com">链接指向其他网站，绝对URL</a>

<a href="index.html">链接指向同网站其他页面，相对URL</a>

<a href="mailto:Jon@example.org">Email链接，通过邮箱想Jon发送邮件</a>

<a href="http://www.baidu.com" target="_blank">新窗口打开链接</a>

<a href="#user-content">通过id特性链接到特定位置</a>
<p id="user-content">
    链接位置
</p>

图像

<img src="img/logo.jpg" alt="website logo" title="a cat picture as the website logo" width="100px" height="100px" />

图像常用特性

src 图像资源位置
alt 图像文本说明，无法查看图片时显示
title 图像附加信息，光标悬停图像上时显示
width 图像宽度
height 图像高度

通过

标签组对图片进行说明

<figure>
    <img src="img/logo.jpg" alt="website logo" />
	<figcaption>图像说明，一般在图片下方</figcaption>
</figure>

表格

基本表格结构

<table>
    <tr>
        <th></th>
        <th scope="col">第1列</th>
        <th scope="col">第2列</th>
    </tr>
    <tr>
        <th scope="row">第1行</th>
        <td>1-1</td>
        <td rowspan="2">1-2 2-2</td>
    </tr>
    <tr>
        <th scope="row">第2行</th>
        <td>2-1</td>
    </tr>
    <tr>
        <th scope="row">第3行</th>
        <td colspan="2">3-1 3-2</td>
    </tr>
</table>

实际效果

	第1列	第2列
第1行	1-1	1-2 2-2
第2行	2-1	1-2 2-2
第3行	3-1 3-2

基础表格总结

通过建立表格
表示行，表示~~列~~单元格
为表标题，可通过scope特性值区分行(row)列(col)
空白位置要留空标签
通过 rowspan 和 colspan 特征完成跨行列，特征值为跨的行列数

长表格

通过嵌入表头，主体，表尾。

<table>
    <thead>
        <tr>
        	<th>第1列</th>
        	<th>第2列</th>
    	</tr>
    </thead>
    <tbody>
        <tr>
        	<td>1-1</td>
        	<td>1-2</td>
    	</tr>
        <tr>
        	<td>...</td>
        	<td>...</td>
    	</tr>
        <tr>
        	<td>n-1</td>
        	<td>n-2</td>
    	</tr>
    </tbody>
    <tdoot>
        <tr>
        	<td>total—1</td>
        	<td>total-2</td>
    	</tr>
    </tdoot>
</table>

表单

表单结构

<form action="http://www.baidu.com" method="get">
    <p>表单内容</p>
</form>

通过创建表单
通过action特征值来指定页面接收提交的表单信息
通过method特征来确定请求方式
- get方法，表单值附加在URL末尾，适用于短表单和只从服务器检索数据信息的情况。
- post方法，表单放入HTTP头信息，适用于长表单、敏感信息、允许上传文件、对服务器中数据信息进行删改的情况。

单行文本框

<input type="text" name="username" maxlength="15" />

密码框

<input type="password" name="password" maxlength="15" />

文本域（多行文本框）

<textarea name="textarea">默认显示内容</textarea>

单选按钮

<input type="radio" name="gender" value="Male" checked="checked"/>男
<input type="radio" name="gender" value="Female"/>女

复选框

<input type="checkbox" name="need" value="water" checked="checked"/>水
<input type="checkbox" name="need" value="food"/>食物

下拉列表框

<select name="devices">
    <option value="ipad" selected="selected">ipad</option>
    <option value="phone">phone</option>
    <option value="computer">computer</option>
</select>

多选框

<select name="devices" size="3" multiple="multiple">
    <option value="ipad" selected="selected">ipad</option>
    <option value="phone">phone</option>
    <option value="computer">computer</option>
</select>

文件上传域

<input type="file" name="song" />

提交按钮

<input type="submit" name="subscribe" value="subscribe" />

图像按钮

<input type="image" src="img/logo.jpg" width="10" height="10" />

按钮

<button>
    <img src="img/logo.jpg" width="10" height="10" />按钮
</button>

隐藏控件

<input type="hidden" name="web1" value="site1" />

标签表单控件

<lable>username:<input type="text" name="username" /></lable>

Lable: <input id="id1" type="radio" name="lable" value="lable1"/>
<lable for="id1">Lable1</lable>

Lable: <input id="id2" type="radio" name="lable" value="lable2"/>
<lable for="id2">Lable2</lable>

组合表单元素

<fieldset>
    <legend>
        标题
    </legend>
    <lable>username:<br />
        <input type="text" name="username" /></lable><br />
    <lable>password:<br />
        <input type="password" name="password" maxlength="15" /></lable><br />
</fieldset>

表单验证

<input type="text" name="username" required="required"/>

日期控件

<input type="date" name="depart"/>

电子邮件和URL输入控件

<input type="email" name="email"/>
<input type="url" name="website"/>

搜索输入控件

<input type="search" name="search" placeholder="Enter keyword"/>

其他标记

文档类型

<!DOCTYPE html>

注释

<!-- 这是注释 -->

id特性

<p id="pid">
    id特性
</p>

class特性

<p class="pclass">
    class特性
</p>

块级元素

<h1></h1>
<p></p>
<ul>
    <li></li>
</ul>

内联元素

<a></a>
<b></b>
<em></em>
<img />

集中元素于块级元素

<div></div>

集中元素于内联元素

<span></span>

内联框架

<iframe src="https://www.baidu.com" width="100" height="100" seamless>
    
</iframe>

页面信息

<meta name="description" content="description content">
<meta name="keywords" content="keywords content">
<meta name="robots" content="robots content">

<meta http-equiv="author" content="author content">
<meta http-equiv="pragma" content="pragma content">
<meta http-equiv="expires" content="expires content">

转义字符

&copy &#169
...

Flash、视频和音频

通过Flash

<!-- 先将视频或音频文件转换为swf格式 -->

<div id="myflash">视频或音频文件会放在这里</div> 

<script type="text/javascript" src="swfobject.js"></script> 
<script type="text/javascript">
swfobject.embedSWF("test.swf", "myflash", "300", "120", "9.0.0"); 
</script>

通过html5

<video src="htmls/2_1.mp4" poster="3.jpg" width="600" height="400" controls loop>
    你的浏览器不支持video元素
    <!-- MP4有3种编码，mpg4(xdiv),,mpg4(xvid)，avc(h264)，只有h264才是公认的MP4标准编码 -->
</video>

<audio src="htmls/1.mp3"  controls loop preload >
    你的浏览器不支持audio元素
</audio>

<audio controls loop preload >
    <source src="htmls/1.mp3" />
    <source src="htmls/2.mp3" />
    <source src="htmls/3.mp3" />
    <p>
		你的浏览器不支持audio元素
    </p>
</audio>