HTML-常用标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--标题标签-->
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
		<!--段落标签-->
		<p>段落标签</p>
		<!--水平线标签-->
		<hr />
		<!--换行标签-->
		<br />
		<br />
		<!--i标签-->
		<i>倾斜字体</i><br />
		<!--b标签-->
		<b>加粗字体</b><br />
		<!--u标签-->
		<u>字体下划线</u><br />
		<!--strong标签-->
		<strong>重要文本</strong><br />
	</body>
</html>

结果图:

2.媒体标签

(1)图片标签

通过使用 <img>标签，可以在文档中显示图像.

图片标签常用属性:

src:指定图片的地址

alt:图片无法加载时替换文本

title:鼠标放到图片上的提示文字

width,height:设置图片的宽高

<img src="图片路径" alt="加载不出时显示的文字" title="鼠标放上去显示的文字" width="宽度" height="高度"/>

(2)视频标签

通过使用 <video>标签，可以在文档中播放视频.

图片标签常用属性:

src指定视频的地址

controls: 控制按钮

autoplay: 自动播放

loop: 循环播放

<video src="视频路径" controls autoplay loop></video>

(3)音频标签

通过使用 <video>标签，可以在文档中播放音频.

音频标签常用属性:

src指定音频的地址

controls: 控制按钮

<audio src="音频路径" controls></audio>

3.超链接标签

<a href="跳转路径"></a>

作用:

a.本地跳转

b.外部跳转

c.锚点

使用方式：

(1)定义锚点：<a name="锚点名"></a>

(2)使用锚点: <a href="#锚点名"></a>

4.列表标签

(1)有序列表 ol li

<ol>

        <li>CSS</li>

        <li>JavaScript</li>

        <li>HTML</li>

</ol>

(2)无序列表 ul li

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始

于 <ul> 标签。每个列表项始于 <li> 。

<ul>

        <li>CSS</li>

        <li>JavaScript</li>

        <li>HTML</li>

</ul>

(3)定义列表 dl dt dd

<dl>

        <dt>开始</dt>

        <dd>所有程序</dd>

        <dd>QQ音乐</dd>

        <dd>腾讯QQ</dd>

        <dd>钉钉</dd>

</dl>

5.容器标签

(1)div标签

div标签是一个典型的块级容器标签。是网页布局中最经常用的容器标签。

<div>

内容（标签或文字都可以）

</div>

(2)span标签

<span> 标签被用来组合文档中的行内元素，通常会用来作为文本的容器。 span标签本身没有任何固定的格式，必须结合CSS设置样式，它才会产生视觉上的变化

<span style="color:red;">some text</span>

6.button标签

定义一个按钮。

<button>这是一个按钮</button>

7.table标签

<table> 标签定义 HTML 表格。

(1)table的相关标签：

tr ：表格中的行
caption：表格的标题
th：表格中的表头单元格，表头的列
td：表格中的标准单元格，标准列
thead：表格的表头内容
tbody ：表格的主体内容
tfoot ：表格的页脚内容

(2)table的相关属性：

border：设置边框宽度
cellpadding: 单元格与边框的距离
cellspacing：单元格之间的距离
style：设置单元格样式，width:宽度；height:高度；text-align:表格内容对其方式

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="5px">
        <caption>学生信息表</caption>
        <thead>
        <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>班级</th>
        </tr>
        </thead>
        <tbody>
        <tr>
        <td>张三</td>
        <td>男</td>
        <td>16</td>
        <td>高一三班</td>
        </tr>
        <tr>
        <td>李四</td>
        <td>女</td>
        <td>16</td>
        <td>高一二班</td>
        </tr>
        <tr>
        <td>王五</td>
        <td>男</td>
        <td>16</td>
        <td>高一四班</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
        <td>Sum</td>
        <td>48</td>
        </tr>
        </tfoot>
    </table>
</body>
</html>

结果：

8.表单标签

form 标签用于为用户输入创建 HTML 表单，用于向服务器传输数据(即收集数据，进行数据传输，到服务器中)。

(1)常见属性

enctype: 设置表单编码
method: 表单的提交方式
- get: 不安全数据量较少
- post: 安全，可以提交较多数据
action: 设置表单提交的地址

(2)常用组件

文本框

<input name="xx" type="text" />

密码框

<input name="xx" type="password" />

单选框

<input type="radio" name="组名" value="值">

复选框

<input type="checkbox" name="组名" value="值">

下拉列表

<select name="sexs">

        <option value="-1">性别</option>

        <option value="0" selected>男</option>

        <option value="1">女</option>

        <option value="2">其他</option>

</select>

文本域(多行文本框)

<textarea name="名字" cols="列" rows="行"></textarea>

文件域

<input type="file" >

提交按钮

<input type="submit" value="登录" />

重置按钮

<input type="reset" value="重置" />

(3)hmtl5新增元素

邮箱

<input type="email" name="user_email" />

数字

<input type="number" min="最小值" max="最大值" step="步数">

进度条

<input type="range" min="最小值" max="最大值" step="步数"/>

日期

<input type="date">

总结

(1)按照语法结构划分

单标签
- <br/> 、 <hr> 、 <img> 、 <input>
双标签
- <html>、<head>、<title>、<body>、<table>、<tr>、<td>、<span>、<p>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<b>、<strong>、<i>、<div>、<a>、<ul>、<ol>、<li>

(2)按照特性来划分

行元素
- 特性：a.不会独占一行。b.不支持通过css设置宽、高。
- 代表元素：<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>
块元素
- 特性：a.独占一行。b.支持通过css设置宽、高。
- 代表元素：
  <div> 、 <body> 、 <table> 、 <p> 、 <form> 、 <h1> 、 <h2> 、 <h3> 、 <h4> 、 <h5> 、
  
  <h6> 、 <ul> 、 <ol> 、 <li>
行内块元素
- 特性：a.不会独占一行。b.支持通过css设置宽、高。