HTML常用标签及其用法详解
1. HTML简介
HTML是一种用于描述网页结构的语言。
<!-- html标签表示html的开始，通常分为head和body两部分 -->
<html lang="zh_CN">
<head>
<meta charset="UTF-8"> <!-- 表示当前页面使用UTF-8字符集 -->
<title>某东</title>
</head>
<body>
</body>
</html> <!-- 表示整个html页面的结束 -->
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
2. HTML全局属性
| 属性 | 描述 |
|---|---|
| class | 为HTML元素定义一个或多个类名（从样式文件引入） |
| id | 定义元素的唯一标识符 |
| style | 规定元素的行内样式 |
| title | 鼠标悬停在元素上时显示的提示文本 |
| hidden | 隐藏某些内容 |
| tabindex | 指示元素是否可以聚焦以及它是否/在何处参与顺序键盘导航 |
3. HTML文本格式化
3.1 字体标签font
font标签用于修改文本的字体、颜色和大小。
<font color="red" face="宋体" size="7">我是字体标签</font>
3.2 换行标签br
br标签用于换行。此外，`<`表示小于号，`>`表示大于号， 表示空格。
我是 <>大师兄<br/>
3.3 标题标签h1-h6与对齐标签align
标题标签 h1-h6，h1最大，h6最小。
<h1 align="center">标题1</h1>
<h3>标题3</h3>
<h6>标题6</h6>
3.4 段落标签p
p标签用于定义段落。浏览器会自动在段落前后添加空行。
<p>段落标签</p>
4. 超链接标签a
a标签用于创建超链接。
<a href="http:www.baidu.com" target="_self">百度一下</a>
<a href="http:www.baidu.com" target="_blank">百度一下</a>
| 属性 | 说明 |
|---|---|
| href | 设置链接的地址 |
| target | 设置跳转的目标，_self表示在当前页面跳转，_blank表示打开新页面 |
| title | 鼠标悬停在元素上时显示的提示文本 |
5. 列表标签ul和ol
ul标签用于无序列表，ol标签用于有序列表，li标签用于列表项。
<ul type="none">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
6. 图片标签img
img标签用于显示图片。
| 属性 | 说明 |
|---|---|
| src | 设置图片的路径 |
| width | 设置图片的宽度 |
| height | 设置图片的高度 |
| border | 设置图片的边框大小 |
| alt | 当指定路径找不到图片时，用来替代显示的文本内容 |
<img src="D:/zjsdata/pic/1.jpg" width="220" height="280">
<img src="D:/zjsdata/pic/2.jpg" width="220" height="280">
<img src="D:/zjsdata/pic/3.jpg" width="220" height="280">
<img src="D:/zjsdata/pic/4.jpg" width="220" height="280">
<img src="D:/zjsdata/pic/5.jpg" width="220" height="280">
<img src="D:/zjsdata/pic/9.jpg" alt="找不到该图片">
7. 表格标签table
table标签用于创建表格，tr是行标签，th是表头标签，td是单元格标签。
| table属性 | 说明 |
|---|---|
| border | 设置表格的边框大小 |
| width | 设置表格的宽度 |
| height | 设置表格高度 |
| cellspacing | 设置单元格间距 |
| align | 设置单元格文本对齐方式 |
| td属性 | 说明 |
|---|---|
| align | 设置单元格文本对齐方式 |
| rowspan | 设置单元格占几行 |
| colspan | 设置单元格占几列 |
<table align="center" border="10" width="300" height="300" cellspacing="20">
<tr>
<th rowspan="2">姓名</th>
<th>身高</th>
<th>体重</th>
</tr>
<tr>
<td align="center">小龙女</td>
<td>172</td>
<td>46</td>
</tr>
<tr>
<td colspan="2">西施</td>
<td><b>168</b></td>
<td>45</td>
</tr>
</table>
8. div标签和span标签
div标签是块级元素，每个div标签都会从新的一行开始显示；span标签是行内元素，在一行内显示。
<div>
<span>hello</span>
<span>world</span>
</div>
9. iframe标签
iframe标签可以在页面上开辟一个小区域显示一个单独的页面。
<iframe src="" width="500" height="400" name="abc"></iframe>
<ul>
<li><a href="http:www.baidu.com" target="abc">百度一下</a></li>
<li><a href="http:www.douyin.com" target="abc">抖音</a></li>
<li><a href="http:www.bilibili.com" target="abc">哔哩哔哩</a></li>
</ul>
10. 表单标签
form标签用于创建表单，action属性设置提交的服务器地址，method属性设置提交的方式get（默认值）或post。
| input标签type属性值 | 说明 |
|---|---|
| text | 文本输入框，value设置默认显示内容 |
| password | 密码输入框，value设置默认显示内容 |
| radio | 单选框，设置name属性进行分组，checked="checked"表示默认选中 |
| checkbox | 复选框，checked="checked"表示默认选中 |
| reset | 重置按钮，value属性修改按钮上的文本 |
| submit | 提交按钮，value属性修改按钮上的文本 |
| button | 按钮，value属性修改按钮上的文本 |
| file | 文件上传域 |
| hidden | 隐藏域 |
注：input标签中的autocomplete属性会自动补全之前填写的内容，默认为on，对于文本应设置autocomplete = "off"，对于密码应设置autocomplete = "new-password"。placeholder属性用于提示信息，如placeholder="请输入用户名"。
表单提交时，数据没有发送给服务器的三种情况：
- 表单项没有name属性值
- 单选、复选（下拉框表中的option标签）没有添加value属性值
- 表单项不在提交的form标签中
注：除了textarea多行文本输入框可以没有value属性，其他必须有name和value属性。
GET请求的特点：
- 浏览器地址栏中的地址是action的属性值 + 请求参数（name=value&name=value）
- 不安全，可以看到信息
- 有数据长度限制，不能超过100个字符
POST请求的特点：
- 浏览器地址栏中只有action的属性值
- 相对于GET请求更安全
- 理论上没有数据长度限制
<form action="http:www.baidu.com" method="get">
<input type="hidden" name="action" value="login">
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>用户名称:</td>
<td>
<input type="text" name="id" value="默认值"/>
</td>
</tr>
<tr>
<td>用户密码:</td>
<td>
<input type="password" name="password" value="abc" placeholder="请输入密码"/>
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" checked="checked" value="女"/>女
</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td>
<input type="checkbox" checked="checked" name="购物" value="shopping"/>购物
<input type="checkbox" checked="checked" name="追剧" value="movie"/>追剧
<input type="checkbox" checked="checked" name="美食" value="food"/>美食
</td>
</tr>
<tr>
<td>国籍:</td>
<td>
<select>
<option name="nationality" value="">--请选择国籍--</option>
<option selected="selected" name="china" value="china">中国</option>
<option name="america" value="america">美国</option>
<option name="russia" value="russia">俄罗斯</option>
</select>
</td>
</tr>
<tr>
<td>自我评价:</td>
<td>
<textarea rows="5" cols="20" name="text">我才是默认值</textarea>
</td>
</tr>
<tr>
<td><input type="reset" name="reset" value="重置"/></td>
<td><input type="submit" name="submit" value="提交"/></td>
<td><input type="button" name="button" value="按钮"/></td>
</tr>
</table>
</form>
