HTML

# 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> 实现页面跳转和 锚点跳转

a标签的默认外观样式

在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

a标签详细属性：https://www.w3school.com.cn/tags/tag_a.asp

# 锚点跳转

href 值为 http/#Name/#Id 跳转到指定目的地（属性 name和id 均可兼容

注意： 前提 a标签的 target属性(打开方式) 值设置为 _self (也是默认的)，主要作用：在相同窗口中打开链接

<body>
    <a href="#C2" name="C1">最底</a>
    <div style="height: 9999px;"></div>
    <a href="#C1" id="C2">最顶</a>
</body>

# 表格

<table><\table> 定义表格 <tr><\tr> 行数 <td><\td> 列数

表格详细说明 (opens new window)

# 规则表格

<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> 表单标签点击属性说明 (opens new window) 属性

功能属性	值	说明
action	URL	提交目的地
method	get post	提交方式
name	form_name	表单名称
enctype	···	表单编码类型
···	···	···

# 表单标签

<input></input> 用于搜集信息点击属性说明 (opens new window)

基本属性	说明
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> 内嵌框架，创建包含另外一个文档的内联框架点击属性说明 (opens new window)

# 框架集

<frameset></frameset> 框架集，它被用来组织多个窗口点击属性说明 (opens new window)

<!-- html4 -->
<frameset rows="20% , *">
	<frame src="top.html">
	<frameset cols="20% , *">
		<frame src="left.html">
		<frame src="right.html">
	</frameset>
</frameset>

# 媒体

展示媒体信息 <source></source> 媒介资源 (视频/音频) 点击属性说明 (opens new window)

# 音频

<audio></audio> 定义音频流，支持 MP3、Ogg、Wav 等格式使用前提需要 type属性指定类型点击属性说明 (opens new window)

<!--音频源 1.MP3 在项目根路经-->
<audio controls>
	<source src="1.mp3" type="audio/mp3" >
	不支持
</audio>

# 视频

<video></video> 定义视频流，支持 MP4、Ogg、WebM等格式使用前提需要 type属性指定类型点击属性说明 (opens new window)

<video controls>
	<source src="01.mp4" type="audio/mp4"></source>
	不支持
</video>

# 转义符

HTML ASCLL表 (opens new window)

#HTML

上次更新: 2023/03/12, 00:43:49

CSS→