HTML总结
HTML简介
HTML(Hyper Text Markup Language)的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
整体结构
<!--告诉浏览器，使用DOCTYPE规范-->
<!DOCTYPE html>
<html lang="en"><!--总标签-->
<!--head标签代表网页头部-->
<head>
<!--meta标签用来描述网页信息-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>
</body>
</html>基本标签
标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
段落标签
<p>hello</p>
<p>world</p>换行标签
hello<br/>
world<br/>水平线标签
<hr/>字体样式标签
斜体
<em>hi</em>字体样式
粗体
<strong>hi</strong>特殊符号标签
以&开头
以;结尾
空格
大于
>小于
<图像标签
width与height选填
<img src="图片地址" alt="图片加载失败后显示" width="300" height="200">超链接标签
target可选
target="_blank"在新网页打开
target="_self"在自己的网页打开，默认选项
a+Tab
<a href="要跳转到的页面" target="窗口在哪里打开">点击可以进行跳转，可以设置为图片</a>锚链接
需要一个锚进行标记
可以定位到所标记的位置
<!--使用name作为标记-->
<a name="top">顶部</a>
...
...
<a href="#top">回到顶部</a><!--跳转到first.html下的down标签-->
<a href="first.html#down">跳转</a>功能性链接
邮箱
<a href="mailto:surprise_a@163.com">点击联系我</a>列表标签
有序列表
<ol>
<li>Java</li>
<li>C/Cpp</li>
<li>Python</li>
<li>PHP</li>
</ol>无序列表
<ul>
<li>Java</li>
<li>C/Cpp</li>
<li>Python</li>
<li>PHP</li>
</ul>自定义列表
dl：标签
dt：列表名称
dd：列表内容
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>CPP/C</dd>
<dd>PHP</dd>
<dt>base</dt>
<dd>北京</dd>
<dd>哈尔滨</dd>
<dd>太原</dd>
</dl>表格标签
table
行 tr
列 td colspan 跨列的长度
rowspan 跨行的长度
border 边框的宽度
<table border="5px">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">xm</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">xh</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>媒体元素
视频标签
video
src：资源路径
controls：控制条,可以控制开启和关闭
autoplay：自动播放
<video src="" controls autoplay></video>音频标签
audio
src：资源路径
controls：控制条,可以控制开启和关闭
autoplay：自动播放
<audio src="" controls autoplay></audio>页面结构分析
header 标记头部区间的内容
footer 标记脚步区间的内容
nav 导航辅助内容
section Web页面中的一块独立区域
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>iframe内联框架
iframe
在网站中嵌入另一个网站
src 地址
weight 宽度
height 高度
<iframe src="https://www.baidu.com" frameborder="0" width="1000" height="800"></iframe>表单
action 表单提交的位置 可以是网站也可以是请求处理地址
method 提交方式post或者get
get提交 可以在url中看到提交的信息，不安全，高效
post提交 比较安全，可以传输大文件
表单元素格式
| 属性 | 说明 |
| type | 指定元素的类型。text，password，checkbox，radio，submit，reset，file，hidden，image，button，默认为text |
| name | 指定元素的名称 |
| value | 元素的初始值。type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。其他类型以像素为单位 |
| maxlength | type为text或password时，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否被选中 |
文本框
value默认初始值
maxlength最长能写几个字符
size文本框的长度
<input type="text" name="username" value="xm" maxlength="8" size="30"><p>名字：
<input type="text" name="text" >
</p>
<p>密码：
<input type="password" name="pwd">
</p>单选框
radio
为单选框radio指定组后就只能进行单选(通过name指定组)
checked表示默认
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女
多选框
checkbox
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
按钮
button普通按钮
image图像按钮
submit提交按钮
reset重置按钮
<input type="button" name="btn1" value="点击">
<input type="image" src="...">下拉框
<select name="列表名称">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="eth">瑞士</option>
<option value="india">印度</option>
</select>文本域
<textarea name="textarea" id="" cols="10" rows="10">文本内容</textarea>
文件域
<input type="file" name="files">
<input type="button" value="上传" name="upload">验证
邮箱
<input type="email" name="email">URL
<input type="url" name="url">数字
<input type="number" name="num" max="100" min="0" step="1">滑块
音量
<input type="range" name="voice" min="0" max="100" step="1">搜索框
<input type="search" name="serch">