目录
W3C标准:
细节:
基础标签
图片、音频、视频标签
超链接标签
列表标签
表格标签
布局标签
表单标签
type取值
演示样例
W3C标准:
结构:HTML
表现:CSS
行为:JavaScript
| <HTML> | 定义 HTML 文档 |
| <head> | 定义关于文档的信息 |
| <title> | 定义文档的标题 |
| <body> | 定义文档的主体 |
细节:
不区分大小
语法松散
基础标签
h1> ~ <h6> | 定义标题,h1最大,h6最小 |
<font> | 定义文本的字体、字体尺寸、字体颜色 |
<b> | 定义粗体文本 |
<i> | 定义斜体文本 |
<u> | 定义文本下划线 |
<center> | 定义文本居中 |
<p> | 定义段落 |
<br> | 定义折行 |
<hr> | 定义水平线 |
<!DOCTYPE html>是html5 的标识
<meta charset="utf-8">定义字符集
HTML 原代码 | 显示结果 | 描述 |
< | < | 小于号或显示标记 |
> ; | > | 大于号或显示标记 |
& | & | 可用于显示其它特殊字符 |
" | “ | 引号 |
® | ® | 已注册 |
© | © | 版权 |
™ | ™ | 商标 |
| 不断行的空白 |
图片、音频、视频标签
标签 | 描述 |
<img> | 定义图片 |
<audio> | 定义音频 |
<video> | 定义视频 |
- img:定义图片
- src:规定显示图像的 URL
- height:定义图像的高度
- width:定义图像的宽度
- audio:定义音频。支持的音频格式:MP3、WAV、OGG
- src:规定音频的 URL
- controls:显示播放控件
- video:定义视频。支持的音频格式:MP4, WebM、OGG
- src:规定视频的 URL
- controls:显示播放控件
超链接标签
标签 | 描述 |
<a> | 定义超链接,用于链接到另一个资源 |
- href:指定访问资源的URL
- target:指定打开资源的方式
- _self:默认值,在当前页面打开
- _blank:在空白页面打开
例:<a href="http://www.baidu.com" target="_blank">黄牛</a>
列表标签
标签 | 描述 |
<ol> | 定义有序列表 |
<ul> | 定义无序列表 |
<li> | 定义列表项 |
- type:设置符号的类型
表格标签
标签 | 描述 |
<table> | 定义表格 |
<tr> | 定义行 |
<td> | 定义单元格 |
<th> | 定义表头单元格 |
- table:设置符号的类型* table:定义表格 * width:宽度 * border:边框 * cellpadding:定义内容和单元格的距离 * cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、 * bgcolor:背景色 * align:对齐方式 * tr:定义行 * bgcolor:背景色 * align:对齐方式 * td:定义单元格 * colspan:合并列 * rowspan:合并行 * th:定义表头单元格 * <caption>:表格标题
<table border="1" cellspacing="0" width="500">
<tr align="center">
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center">
<td>001</td>
<td>a</td>
<td>nan</td>
</tr>
<tr align="center">
<td>002</td>
<td>b</td>
<td>nv</td>
</tr>
</table>
布局标签
标签 | 描述 |
<div> | 定义 HTML 文档中的一个区域部分,经常与 CSS 一起使用,用来布局网页 |
<span> | 用于组合行内元素。 |
表单标签
标签 | 描述 |
<form> | 定义表单 |
<input> | 定义表单项,通过type属性控制输入形式 |
<label> | 为表单项定义标注 |
<select> | 定义下拉列表 |
<option> | 定义下拉列表的列表项 |
<textarea> | 定义文本域 |
<form action="#">
<input type="text" name="username">
<input type="submit" name="">
</form>
目录
W3C标准:
细节:基础标签
图片、音频、视频标签
超链接标签
列表标签
表格标签
布局标签
表单标签
type取值
演示样例
type取值
type 取值 | 描述 |
text | 默认值。定义单行的输入字段 |
password | 定义密码字段 |
radio | 定义单选按钮 |
checkbox | 定义复选框 |
file | 定义文件上传按钮 |
hidden | 定义隐藏的输入字段 |
submit | 定义提交按钮,提交按钮会把表单数据发送到服务器 |
reset | 定义重置按钮,重置按钮会清除表单中的所有数据 |
button | 定义可点击按钮 |
演示样例
<form action="#" method="post">
<label for="username">用户名:</label>
<input type="text" name="username" id="username"><br>
<br>
<label for="password">密小码:</label>
<input type="password" name="password" id="password"><br><br>
<!-- 保持gender一样,才不会两个同时都可以选择-->
性别:
<input type="radio" name="gender" value="1" id="male"><label for="male">nan</label>
<input type="radio" name="gender" value="0" id="female"><label for="female">nvnv</label>
<br><br>
爱好:
<input type="checkbox" name="hobby" value="1">luyou
<input type="checkbox" name="hobby" value="2">youxi
<br><br>
头像:
<input type="file" ><br><br>
城市:
<select id="city">
<option value="xianggang">香港🇭🇰</option>
<option value="aomen">澳门🇲🇴</option>
<option>台湾</option>
</select><br><br>
个人描述:
<textarea cols="15" rows="2" name="desc"></textarea><br><br>
<input type="submit" value="注册">
<input type="reset" value="重置">
<input type="button" value="一个按钮">