HTML
HTML是HyperText Markup Language的简称，也是 超文本标记语言 ，是 解释型语言 解释给浏览器展现出来！
html文件,基本构架
<!DOCTYPE HTML> 声明文档 HTML5文档
<hmlt></html> 根元素
<head></head> 头元素
<meta> 编码集
<body></body> 主体内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>页面标题</title>
</head>
<body>
</body>
</html>
基本标签
属性详细可自行查询！！
文本
展示文本内容 和 添加效果的功能
标题
<h></h> 共有 1 - 6号 大小的标题
段落
<p></p> 展示一行文本内容，自动换行
换行
<br/> 使文本换行
水平线
<hr/> 分割线
图片
图片
<img/> 展示图片
热点区域
<map></map> 热点地图，由于指定区域 跳转 或 呈现功能
列表
有序列表
<ol><\ol>
无序列表
<ul><\ul>
列表内容
<li><\li>
<ol>
<li>内容<\li>
<li>内容<\li>
<li>内容<\li>
<\ol>
描述
<dl><\dl> 定义描述
<dt><\dt> 标题
<dd><\dd> 描述
<dl>
<dt>标题</dt>
<dd>描述</dd>
<dd>描述</dd>
</dl>
容器
<div><\div> 容纳其他标签的标签
标签分类
html标签分为两种类型
块级元素： 独占一行、宽度100%、可容纳其他标签、可调方框宽高
行内元素： 和相邻行内元素在一行上、宽高限于内容范围、方框不可调
块级元素有：h 、 p 、 hr 、 ol-li 、 ul-li 、 dl-dt-dd 、 div
行内元素有：span 、 img
超链接
<a><\a> 实现页面 跳转 和 锚点跳转
链接跳转
属性href 指定链接值 进行跳转
锚点跳转
href 属性值 #+跳转目地 跳转 ，前提需要 属性target 实现跳转方式
跳转 链接锚点 需要 链接+#锚点目的
跳转目的地 属性可以是 name 、id
<a href="http://www.baidu.com">百度一下</a>
<br/>
<a href="#C1" target ="_self">锚点跳转测试</a>
<div style="height: 4000px; border: 4px solid #B6DF48;"></div>
<a name="C1">目的地</a>
<a href="https://blog.csdn.net/weixin_45963193/article/details/115058351#t11">博客测试</a>
表格
<table><\table> 定义表格
<tr><\tr> 行数
<td><\td> 列数
属性说明
规则表格
<table border="1">
<tr>
<td>商品</td>
<td>说明</td>
<td>价格</td>
</tr>
<tr>
<td>电饭煲</td>
<td>煮饭</td>
<td>100</td>
</tr>
<tr>
<td>热水器</td>
<td>加热水</td>
<td>1200</td>
</tr>
<tr>
<td>电风扇</td>
<td>散热</td>
<td>230</td>
</tr>
</table>
不规则表格
<table border="1" cellspacing="0">
<tr>
<td colspan="6">个人简历</td>
</tr>
<tr>
<td>姓名</td><td>柏竹</td>
</tr>
<tr>
<td>电话</td><td>18182200384</td>
</tr>
<tr>
<td>年龄</td><td>20</td>
</tr>
<tr>
<td>邮箱</td><td>123213213</td>
</tr>
</table>
逻辑分区
<caption><\caption> 表格标题
<thead><\thead> 表头
<tbody><\tbody> 主体
<tfoot><\tfoot> 页脚
<!-- 标题 -->
<table border="1" cellspacing="0">
<caption>零花钱花销情况</caption>
<!-- 表头 -->
<thead style="background-color: #DD4A68;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<!-- 页脚 -->
<tfoot style="background-color: #A1D6FE;">
<tr>
<td>count</td>
<td>$180</td>
</tr>
</tfoot>
<!-- 主体 -->
<tbody style="background-color: #aaff7f;">
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
表单
于和服务器数据交互
<form></form> 表单标签 点击属性说明
属性
| 功能属性 | 值 | 说明 |
|---|---|---|
| action | URL | 提交目的地 |
| method | get post |
提交方式 |
| name | form_name | 表单名称 |
| enctype | ··· | 表单编码类型 |
| ··· | ··· | ··· |
表单标签
<input></input> 用于搜集信息 点击属性说明
| 基本属性 | 说明 |
|---|---|
| id | 元素的唯一标识 |
| name | 元素名称 |
| value | 元素值 |
| type | 元素呈现方式 |
| class | 样式名称 |
| ··· | ··· |
<h1>注册账号</h1>
<!-- 提交结果示意图http://127.0.0.1:8848/Web/%E6%B5%8B%E8%AF%95/%E6%B5%8B%E8%AF%95.html?
userId=001&
userName=123&
password=456&
gender=man&
hobby=basketball&
hobby=tennis&
headImg=department.sql&
birthdayTime=2000-02-10T12%3A31&
age=20
-->
<form action="测试.html" enctype="get" name="Myform">
<input type="hidden" name="userId" value="001">
<label for="userName">账号： </label>
<input type="text" id="userName" name="userName">
<br>
<label for="password">密码： </label>
<input type="password" id="password" name="password">
<br>
性别：
<input type="radio" name="gender" value="man">男
<input type="radio" name="gender" value="woman">女
<br>
爱好：
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="tennis">网球
<input type="checkbox" name="hobby" value="badminton">羽毛球
<input type="checkbox" name="hobby" value="pingpong">乒乓球
<br>
头像：
<input type="file" name="headImg">
<br>
生日：
<input type="datetime-local" name="birthdayTime">
<br>
年龄：
<select name="age">
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
<br>
协议说明
<br>
<textarea rows="10" cols="50">注册说明
············································
············································
············································
············································
············································
············································
············································
············································
</textarea>
<br>
<input type="submit" value="注册">
<input type="reset" value="重置">
<input type="button" value="测试">
</form>
框架
同一窗口显示多个页面
<iframe></iframe> 内嵌框架，创建包含另外一个文档的内联框架
点击属性说明
框架集
<frameset></frameset> 框架集，它被用来组织多个窗口
点击属性说明
<!-- html4 -->
<frameset rows="20% , *">
<frame src="top.html">
<frameset cols="20% , *">
<frame src="left.html">
<frame src="right.html">
</frameset>
</frameset>
媒体
展示媒体信息
<source></source> 媒介资源 (视频/音频)
点击属性说明
音频
<audio></audio> 定义音频流，支持 MP3、Ogg、Wav 等格式
使用前提需要 type属性指定类型
点击属性说明
<!--音频源 1.MP3 在项目根路经-->
<audio controls>
<source src="1.mp3" type="audio/mp3" >
不支持
</audio>
视频
<video></video> 定义视频流，支持 MP4、Ogg、WebM等格式
使用前提需要 type属性指定类型
点击属性说明
<video controls>
<source src="01.mp4" type="audio/mp4"></source>
不支持
</video>