1、HTML简介
HTML（Hyper Text Markup Language）的全称为超文本标记语言，是一种标记语言。它包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字，图形、动画、声音、表格、链接等。
- HTML5
html5 提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。HTML5基本取代了Flash。
2、基础标签
<!DOCTYPE html> <!-- 告诉浏览器 我们使用什么规范 -->
<!--<html lang="en">-->
<head>
<meta charset="UTF-8">
<title>基本标签学习</title> <!-- 网页标题 -->
</head>
<body>
<!-- 标题标签 -->
<h2>二级标签</h2>
<h1>一级标签</h1>
<!-- 段落标签 -->
<p>ieodeoi</p>
<p>wkjkodsem</p>
<p>edkne3</p>
<!-- 换行标签 -->
odiejiedjekbr <br/>
ejdieoj3 <br/>
edekon3ked <br/>
<!-- 水平线标签 -->
<hr/>
<hr/>
<!-- 粗体，斜体 -->
粗体：<strong>酷酷酷</strong> <br/>
斜体：<em>酷酷酷</em> <br/>
<!-- 特殊符号 -->
空格: :空格: <br/>
大于：> <br/>
小于：< <br/>
版权：© <br/>
</body>
</html>
3、行内元素和块元素
4、页面结构分析
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>页面结构学习</title>
</head>
<body>
<header>
<h2>网页头部</h2>
<p>swdwq</p>
</header>
<section>
<h2>网页主体</h2>
<p>wdwsw</p>
</section>
<footer>
<h2>网页脚步</h2>
<p>wdqw</p>
</footer>
</body>
</html>
5、图像标签
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<img src="/Picture/1.jpg" alt="图片加载失败" title="好看吗？" width="300px" height="200px">
<a href="链接标签.html#down">跳转</a>
</body>
</html>
6、链接标签
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!-- 锚标记 -->
<a name = "top1">顶部</a>
<p>南昌航空大学：<a href="https://www.nchu.edu.cn" target="_blank">传送门</a></p> <br/>
<a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%C0%C5%AE%CD%BC%C6%AC&fr=ala&ala=1&alatpl=cover&pos=0&hs=2&xthttps=000000" target="_blank">
<img src="/Picture/1.jpg" alt="图片加载失败" width="300px" height="200px">
<br/> 点击我查看更多
</a>
<p><a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%C0%C5%AE%CD%BC%C6%AC&fr=ala&ala=1&alatpl=cover&pos=0&hs=2&xthttps=000000" target="_blank">
<img src="/Picture/3.jpg" alt="图片加载失败" width="300px" height="200px">
<br/> 点击我查看更多
</a></p>
<p><a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%C0%C5%AE%CD%BC%C6%AC&fr=ala&ala=1&alatpl=cover&pos=0&hs=2&xthttps=000000" target="_blank">
<img src="/Picture/4.jpg" alt="图片加载失败" width="300px" height="200px">
<br/> 点击我查看更多
</a></p>
<p><a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%C0%C5%AE%CD%BC%C6%AC&fr=ala&ala=1&alatpl=cover&pos=0&hs=2&xthttps=000000" target="_blank">
<img src="/Picture/5.jpg" alt="图片加载失败" width="300px" height="200px">
<br/> 点击我查看更多
</a></p>
<p><a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%C0%C5%AE%CD%BC%C6%AC&fr=ala&ala=1&alatpl=cover&pos=0&hs=2&xthttps=000000" target="_blank">
<img src="/Picture/1.jpg" alt="图片加载失败" width="300px" height="200px">
<br/> 点击我查看更多
</a></p>
<p><a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%C0%C5%AE%CD%BC%C6%AC&fr=ala&ala=1&alatpl=cover&pos=0&hs=2&xthttps=000000" target="_blank">
<img src="/Picture/2.jpg" alt="图片加载失败" width="300px" height="200px">
<br/> 点击我查看更多
</a></p>
<a href = "#top1">回到顶部</a>
<a name = "down">底部</a>
<!-- 邮箱功能性链接 -->
<a href="mailto:2625445438@qq.com">点击联系我</a> <br/>
<!-- qq推广 -->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2625445438&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:2625445438:51" alt="你好，加我领取小电影" title="你好，加我领取小电影"/></a>
</body>
</html>
7、列表标签
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>列表标签学习</title>
</head>
<body>
<ol>
<li>Java</li>
<li>C/C++</li>
<li>Python</li>
<li>Spring</li>
<li>运维</li>
</ol>
<hr/>
<ul>
<li>Java</li>
<li>C/C++</li>
<li>Python</li>
<li>Spring</li>
<li>运维</li>
</ul>
<hr/>
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dt>语言</dt>
<dd>Java</dd>
<dd>C/C++</dd>
<dd>Python</dd>
<dd>Spring</dd>
<dd>运维</dd>
</dl>
</body>
</html>
8、表格标签
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>表格标签学习</title>
</head>
<body>
<table border="1px">
<tr>
<!-- colspan跨列 -->
<td colspan="4" >1-1</td>
</tr>
<tr>
<!-- rowspan跨行 -->
<td rowspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
</table>
</body>
</html>
9、媒体元素
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<video src="/Video/18207320-刘翔-实验三.mp4" controls autoplay width="300px" height="200px"></video>
<audio src="/Audio/1.mp3" controls></audio>
</body>
</html>
10、iframe内联框架
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>内联框架学习</title>
</head>
<body>
<iframe src="//player.bilibili.com/player.html?aid=629607053&bvid=BV1Yb4y197wv&cid=309342005&page=1"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="400px" height="400px" >
</iframe>
<iframe src="https://www.baidu.com/" frameborder="0" width="400px" height="400px"></iframe>
<iframe src="" name = "hello" frameborder="0" width="320px" height="280px" ></iframe>
<a href="表格.html" target="hello">点击跳转</a>
</body>
</html>
11、表单
<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!-- 表单form action表单提交的位置 -->
<form action="基础标签.html" method="GET">
<p>名字：<input type="text" name="username" placeholder="请输入用户名" readonly></p>
<p>密码：<input type="password" name="password" maxlength="8" hidden></p>
<p>
性别：
<input type="radio" value="boy" name="sex" checked disabled>男
<input type="radio" value="girl" name="sex">女
</p>
<p>
爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="eat" name="hobby">吃
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="eat" name="hobby">吃
</p>
<p>
<input type="button" name="btn1" value="点击变长">
<input type="image" src="/Picture/3.jpg" width="300px" height="200px">
</p>
<p>下拉框：
<select name="列表名称" id="">
<option value="china">中国</option>
<option value="meiguo">美国</option>
<option value="ruis">瑞士</option>
<option value="yd">印度</option>
</select>
</p>
<p>反馈
<textarea name="textarea" id="" cols="10" rows="20" required>文本内容</textarea>
</p>
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<p>邮箱：
<input type="email" name="email" required>
</p>
<p>DIY邮箱：
<input type="text" name="diyemail" pattern=".*\\@.*">
</p>
<p>URL:
<input type="url" name="url">
</p>
<p>数字验证：
<input type="number" name="num" max="100" min="0" step="1">
</p>
<p>滑块：
<input type="range" name="voice" max="100" min="0" step="2">
</p>
<p>
<input type="search" name="search">
</p>
<p>
<!-- 增强鼠标可用性 -->
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p><input type="submit"> <input type="reset" value="清空表单"></p>
</form>
</body>
</html>