页面元素 - HTML
HTML5
HTML
定义页面元素。浏览器加载 html 文件后，会将其解析为树形结构 DOM ：每个 html 标签和属性都作为一个 DOM 树节点。在全部代码（包含引入文件）解析完成后，将 DOM 树绘制并渲染为用户可见的页面。
head 页面头部
<!DOCTYPE html> <!-- html5标识-->
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 页面的字符集-->
<title>Title</title> <!-- 页面标题-->
<style type="text/css"> <!-- 页面样式-->
body {background-color:yellow}
</style>
<link href="asserts/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <!-- 引入外部css样式-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> <!-- 引入外部脚本文件-->
<script type="text/javascript">
document.getElementById("demo").innerHTML = "My first JavaScript"; <!-- 自定义脚本-->
</script>
</head>
<body>
<!--your code-->
</body>
</html>
body 页面内容
基础标签
<h1> ~ <h6> 定义标题，h1最大，h6最小
<font> 定义文本的字体、字体尺寸、字体颜色
<b> 定义粗体文本
<i> 定义斜体文本
<u> 定义文本下划线
<center> 定义文本居中
<p> 定义段落
<br> 定义换行
<hr> 定义水平线
转义字符
| HTML 原代码 | 显示结果 | 描述 |
|---|---|---|
| < | < | 小于号或显示标记 |
| > ; | > | 大于号或显示标记 |
| & | & | 可用于显示其它特殊字符 |
| " | “ | 引号 |
| ® | ® | 已注册 |
| © | © | 版权 |
| ™ | ™ | 商标 |
| | 不断行的空白 |
图片、音频、视频标签
<img src="boat.gif" alt="Big Boat" />
<audio src="b.mp3" controls></audio>
<video src="c.mp4" controls width="500" height="300"></video>
- img：定义图片
- src：规定显示图像的 URL
- alt：图片不能加载时的替代文本
- height：定义图像的高度
- width：定义图像的宽度
- audio：定义音频。支持的音频格式：MP3、WAV、OGG
- src：规定音频的 URL
- controls：显示播放控件
- video：定义视频。支持的音频格式：MP4, WebM、OGG
- src：规定视频的 URL
- controls：显示播放控件
超链接标签
<a href="https://www.baidu.com" target="_blank">点我有惊喜</a>
* href：指定访问资源的URL
* target：指定打开资源的方式
* _self:默认值，在当前页面打开
* _blank：在空白页面打开
列表标签
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
type属性 设置符号的类型
表格标签
<table> 定义表格
<caption> 定义表格标题
<th> 定义表头单元格
<tr> 定义行
<td> 定义单元格
<table>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>0021</td>
<td>陈柏言</td>
</tr>
<tr>
<td>0022</td>
<td>邓怀瑾</td>
</tr>
</table>
table：设置符号的类型
* table：定义表格
* width：宽度
* border：边框
* cellpadding：定义内容和单元格的距离
* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
* bgcolor：背景色
* align：对齐方式
* tr：定义行
* bgcolor：背景色
* align：对齐方式
* td：定义单元格
* colspan：合并列
* rowspan：合并行
* th：定义表头单元格
布局标签
<div> 只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span> 表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现
表单标签
form 表单
<form action="action_page.php" method="GET">
Name:
<input type="text" name="name" value="Input your nane">
<br/>
Sex:
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
<br/>
<input type="submit" value="Submit">
</form>
* action：请求发送地址(URL)
* method：请求类型
表单项
- 输入框
<label for="name">Username:</label>
<input type="text" name="name" value="MrJoker" id="name">
<br/>
Password:
<input type="password" name="password">
- 选择框
Sex:
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
<br/>
Vehicle:
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a car
<input> type属性取值展示
text 默认值。定义单行的输入字段
password 定义密码字段
radio 定义单选按钮
checkbox 定义复选框
file 定义文件上传按钮
hidden 定义隐藏的输入字段
submit 定义提交按钮，提交按钮会把表单数据发送到服务器
reset 定义重置按钮，重置按钮会清除表单中的所有数据
button 定义可点击按钮
- 下拉菜单
Sex:
Your Car:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
- 文本域
<textarea name="message" rows="10" cols="30">Descript your car here.</textarea>
* 以上标签项的内容要想提交，必须得定义 `name` 属性。
* 每一个标签都有id属性，id属性值是唯一的标识。
* 单选框、复选框、下拉列表需要使用 `value` 属性指定提交的值。
浙公网安备 33010602011771号