HTML
目录
一、初识HTML
1. 什么是HTML
超文本标记语言
3. 优势
所有浏览器都支持，提供统一标准
4. W3C标准
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 标签栏 -->
<title>第一个网站</title>
</head>
<!--网页主体-->
<body>
我的第一个html
</body>
</html>
二、网页基本信息
<!--我们要使用的规范-->
<!DOCTYPE html>
<html lang="en">
<!--head代表网页头部-->
<head>
<!-- 描述字符集编码 -->
<!-- meta用来描述网站的一些信息 -->
<meta charset="UTF-8">
<meta name="keywords" content="xiaowei9s">
<!-- 标签栏 -->
<title>第一个网站</title>
</head>
<!--网页主体-->
<body>
我的第一个html
</body>
</html>
三、网页基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>第一段 第一句</p>
<p>第二段 第三句</p>
<p>第三段 第四句</p>
<p>第五段 第六句</p>
<!--换行标签-->
第一段 第一句 <br>
第二段 第三句 <br>
第三段 第四句 <br>
第五段 第六句 <br>
<!--粗体、斜体-->
粗体：<strong>粗体</strong>
斜体：<em>斜体</em>
<!--特殊符号-->
空 格
空 格
<!--不熟悉的版权符号直接百度或者&加字母自动提示-->
</body>
</html>
四、图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--
src:图片路径
相对地址（推荐使用） 绝对地址
../ :返回相对于自己上一级的目录
-->
<img src="../resources/image/a.png" alt="图像标签">
</body>
</html>
五、超链接标签及应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<!--a标签
href：链接url，跳转到的地方
target :
_self:在当前页打开
_blank:在新得页面打开
锚链接：需要一个锚和一个链接
-->
<body>
<!--锚-->
<p name="top">顶部</p>
<a href="第一个html.html" target="_blank">a</a>
<a href="https://www.baidu.com">a</a>
<a href="https://www.baidu.com">
<img src="../resources/image/a.png" alt="">
</a>
<p><img src="../resources/image/a.png" alt=""></p>
<p><img src="../resources/image/a.png" alt=""></p>
<p><img src="../resources/image/a.png" alt=""></p>
<p><img src="../resources/image/a.png" alt=""></p>
<p><img src="../resources/image/a.png" alt=""></p>
<p><img src="../resources/image/a.png" alt=""></p>
<!--定位到锚在的地方-->
<a href="#top">回到顶部</a>
<!--功能性链接-->
<a href="mailto:244097861@qq.com">点击联系</a>
<!--qq链接-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="啊是大" title="啊是大"/>
</a>
</body>
</html>
六、块元素和行内元素
1. 块元素
无论内容多少，改元素独占一行
p、 h1~h6、div...
2. 行内元素
内容撑开宽度左右都是行内元素的可以排在一行
em、strong、a
七、列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ol>
<!--无序列表-->
<ul>
<li>第*个</li>
<li>第*个</li>
<li>第*个</li>
</ul>
<!--自定义列表
dl：容器
dt：标题
dd：列表内容
-->
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
<dd>理综</dd>
<dt>层次</dt>
<dd>普通</dd>
<dd>良好</dd>
<dd>优秀</dd>
<dd>天才</dd>
</dl>
</body>
</html>
八、表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table
行 tr
列 td
border 边框
跨行 rowspan=""
跨列 colspan=""
-->
<table border="1px">
<tr>
<td colspan="2">单元格</td>
<td>单元格</td>
<td rowspan="2">单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>
九、媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--音频和视频
controls 控制条
autoplay 自动播放
-->
<video src="../resources/video/1.mp4" controls autoplay></video>
<audio src="../resources/music/1.mp3" controls autoplay></audio>
</body>
</html>
十、页面结构分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header><h2>网页头部</h2></header>
<section><h2>网页主体/h2></section>
<footer><h2>网页脚部</h2></footer>
</body>
</html>
十一、iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe内联框架</title>
</head>
<body>
<!--
iframe
scr：页面地址
name：页面标识
width：宽
height：高
-->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
</body>
</html>
十二、初始表单post提交和get提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交</title>
</head>
<body>
<!--form
action:表单处理提交的地址，可以是网站，也可以是一个请求处理的地址
method：
get：在url中提交的信息，不安全，高效
post：安全，可以传输大文件
-->
<form method="get" action="第一个html.html">
<!-- 文本输入框-->
<p>名字 <input type="text" name="username" value="请输入名字" maxlength="8" size="30"></p>
<!-- 密码框-->
<p>密码 <input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
十三、文本框和单选框
十四、按钮和多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮和多选</title>
</head>
<body>
<form action="第一个html.html">
<!--多选框 input type="checkbox"-->
<input type="checkbox" name="hobby" value="1">第一个选项
<input type="checkbox" name="hobby" value="2">第二个选项
<input type="checkbox" name="hobby" value="3">第三个选项
<input type="checkbox" name="hobby" value="4">第四个选项
<!--按钮
普通按钮 type="button"
提交按钮 type="submit"
重置按钮 type="reset" 重置表单内的内容
图片按钮 type="image"
-->
<p><input type="button" value="这是一个普通按钮"></p>
<p><input type="submit" ></p>
<p><input type="reset" ></p>
<p><input type="image" src="../resources/image/a.png"></p>
</form>
</body>
</html>
十五、下拉框文本域和文件域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉框、文本域、文件域</title>
</head>
<body>
<form action="Demo02.html">
<!-- 下拉框-->
<p>
<select name="food">
<option value="1">苹果</option>
<option value="2" selected>肉</option>
<option value="3">米</option>
<option value="4">巧克力</option>
</select>
</p>
<!-- 文本域
cols 列数
rows 行数
maxlength 最大字符数量
-->
<p>
<textarea name="content" cols="50" rows="10" maxlength="30">文本内容</textarea>
</p>
<!-- 文件域-->
<p>
<input type="file" name="file">
<input type="button" value="上传">
</p>
</form>
</body>
</html>
十六、搜索框滑块和简单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索滑块和简单验证</title>
</head>
<body>
<form action="Demo02">
<!-- 邮件验证-->
<p>邮件：<input type="email" name="email" ></p>
<!-- url验证-->
<p>url：<input type="url" name="url" ></p>
<!-- 数字-->
<p>数字：<input type="number" name="number" max="100" min="0" step="10"></p>
<!-- 滑块-->
<p><input type="range" name="voice" value="15" step="5"></p>
<!-- 搜索框-->
<p><input type="search" name="search"></p>
<p><input type="submit"></p>
</form>
</body>
</html>
十七、表单的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单应用</title>
</head>
<body>
<!-- readonly：只读
hidden：隐藏
disable：禁用
不需要确定布尔值，只需要在标签内声明即可使用
-->
<!--增强鼠标可用性-->
<p>
<!-- for锁定的是id，而不是name-->
<label name="lbe1" for="mark">点试试</label>
<input name="mark" id="mark" type="text">
</p>
</body>
</html>
十八、表单初级验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单初级应用</title>
</head>
<body>
<form action="Demo02.html">
<!-- 为什么要表单验证
减轻服务器负担
安全
placeholder：提示框
require：不能为空
pattern：正则表达式，需要用就直接查
-->
<p><input type="text" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" placeholder="请输入邮箱" required></p>
<p><input type="submit"></p>
</form>
</body>
</html>
知识来源：kuangstudy.com