01.第一个html文件.html
<!DOCTYPE html>
<html>
<head>
<title>第一个HTML文件</title>
<meta charset="utf-8">
</head>
<body>
欢迎学习HTML
</body>
</html>
02.标签.html
<html>
<head>
<title>标签的组成</title>
<meta charset="utf-8">
</head>
<body bgcolor = "yellow" text="red">
标签的组成
<hr>
HTML从入门到精通
<hr>
<h1>html,简介，观众：xxx</h1>
<hr>
<h2>二级标题</h2>
<h1>哈哈</h1>呵呵
<hr>
<span>嘿嘿</span>吼吼
</body>
</html>
03.注释.html
<!DOCTYPE html>
<html lang="en">
<head>
<mata charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--这是我们第一个html注释-->
图书:<<HTML从入门到精通>>
<hr>
北京 上海 广州
<hr>
在html中用&lt;表示<小于号
<hr>
"HTML语言" 或者 "HTML语言&quop;
<hr>
版权所有 © 2000-2020 高教培训
<hr>
®
<hr>
×关闭符号
<hr>
&aMp; 实体字符名称是区分大小写，大小写就敏感
</body>
</html>
04. hello.html
<!DOCTYPE html>
<html>
<body>
<title>html技术</title>
</body>
<body>
大家好，欢迎学习html网页技术！
</body>
</html
0.5 word.html
<html>
<head>
<title>HTML，学习</title>
<meta charset = "utf-8">
</head>
<body>
welcome to html ！
</body>
</html>
0.6 hello.html
<!DOCTYPE html>
<html>
<head>
<title>学习HTML从入门到精通</title>
</head>
<body>
welcome to hello word!
</body>
</html>
0.7 常用标签.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Doctype</title>
</head>
<body>
hello wolde
<br>
welcome to html!
<p>
超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言 （markup language），是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
</p>
<p>
超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
</p>
<hr>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h6>六级标题</h6>
</body>
</html>
h1~h6逐渐变小，块级标签
0.8 标签2.html
<!DOCTYPE html>
<html lang ="en">
<head>
<<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<pre>
html从入门到精通
主讲：hector
</pre>
<hr>
<div style="width:400px;height:100px;background:red">导航部分</div>
<div style="width:400px;height:500px;background:yellow">正文部分</div>
<div style="width:400px;height:100px;background:blue">版权部分</div>
<hr>
iphone XR,不要8888,不要1888，只要<span style="font-size:50px;color:red">98元</span>
</body>
</html>
09. 常用标签1.html
<!DOCTYPE html>
<html>
<<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<h3>2020年网络游戏排行榜</h3>
<li>吃鸡</li>
<li>王者荣耀</li>
<li>LOL</li>
<li>WOW</li>
<hr>
<h3>可爱的同学</h3>
<ul type="circle">
<li>张三</li>
</ul>
<hr>
<h3>术语的解释</h3>
<dl>
<dt>LOL</dt>
<dd>他是腾讯公司代理的一款网络游戏，中文名叫英雄联盟</dd>
<dd>她可以分为PC端和移动端</dd>
<dt>HTML</dt>
<dd>是一种用来制作网页的标记语言</dd>
<dt>JAVA</dt>
<dd>是一种跨平台的编程语言</dd>
</dl>
</body>
</html>
10. 常用标签2.html
<!DOCTYPE html>
<<!DOCTYPE html>
<html>
<head>
<meta zharset="UTF-8">
<title>D ocument</title>
</head>
<body>
<hr color="#FF7300">
<hr size="8px" color="green">
<hr color="red" widtn="400px">
<hr color="yellow" width="50%" size=10>
<div style="width:600px;height:300px;background:#CCCCCC">
<hr color="red" eidth="50%" align="right">
</div>
</body>
</html>
11.常用标签2.html
<!DOCTYPE html>
<html lang="en">
<head>
<mata charset="UFT-8" >
<title>docutype</title>
</head>
<body>
<img src="../image/qq.jpg" alt="图片加载失败..." title="这是腾讯公司的吉祥物，它的名字叫企鹅">
<hr>
<img src="../imagr/mac.jpg" width="400px" height="100px">
<hr>
<img src="../image/mac.jpg" width="50%">
<hr>
<div sytle="width=800px;height:800px;background:red;">
<img src="../image/mac.jpg" width="50%">
</div>
</body>
</html>
12.其他标签1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
welcome <i>to</i> html!
<hr>
welcome <em>to</em> html!
<hr>
welcome to <address>上海市南京东路</address>
<hr>
HTML从<<b>入门</b>到精通！
<hr>
<hr>
原价：188元，优惠价 <span style="font-size: 40px;color:red">98元</span>
<br>
观众：<ins>学生</ins>
<hr>
水的分子表达式：H<sub>2</sub>O
<br>
2<sub>3</sub>=8
<hr>
<bdo dir="rtl">welcome to html</bdo>
<hr>
<bdo dir="rtl">上海自来水来自海上</bdo>
<br>
<abbr title="Hyoer Text Language">HTML</abbr>
<hr>
<span title="Hyoer Text Language">HTML</span>
<hr>
HTML从<small>入门</small>到精通
<br>
HTML从<big>入门</big>到精通
</body>
</html>
welcome to html!
welcome to 上海市南京东路
HTML从< 入门到精通！
<hr>
原价：188元，优惠价 <span style="font-size: 40px;color:red">98元</span>
<br>
观众：<ins>学生</ins>
<hr>
水的分子表达式：H<sub>2</sub>O
<br>
2<sub>3</sub>=8
<hr>
<bdo dir="rtl">welcome to html</bdo>
<hr>
<bdo dir="rtl">上海自来水来自海上</bdo>
<br>
<abbr title="Hyoer Text Language">HTML</abbr>
<hr>
<span title="Hyoer Text Language">HTML</span>
<hr>
HTML从<small>入门</small>到精通
<br>
HTML从<big>入门</big>到精通
13.头部标签.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置字符编码 -->
<meta charset="UTF-8">
<!-- 设置网页关键字 seo网站优化 -->
<mata name="keywords" comtent="it教育，Java开发，web前端...">
<!--设置网页的描述-->
<mata name="description" comtent="">
<!--设置网站的作者-->
<mata name="author" content="hector">
<!-- 设置网站的跳转-->
<!-- <mata http-equiv="refresh" content="2;url-https://www.baidu.com"> -->
<title>Document</title>
<style>
body{
color:red;
}
</style>
<!-- 引用外部的css样式 -->
<link rel="stylesheet" href="CSS文件的路径">
<!-- 定义或引用脚本文件 -->
<!--script>
alert("哈哈");
</script-->
<!--定义基础路径 -->
<base href="../image/">
</head>
<body>
IT教育，全国计算机等级考试-heocer
<img src="../image/heihei.gif" alt="">
<hr>
<img src="qq.jpg" alt="">
</body>
</html>
ata http-equiv=“refresh” content=“2;url-https://www.baidu.com”> -->
<title>Document</title>
<style>
body{
color:red;
}
</style>
<!-- 引用外部的css样式 -->
.
```
14.标签的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
alert("嘿嘿!")
</script>
</head>
<body>
<div style="width:200px;height:200px;background:red">
<p>
hello
</p>
</div>
<p style="width:300px;height:300px;background:green">
<div style="width:200px;height:200px;background:blue">
hello
</div>
</p>
</body>
</html>
15.超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<br>
<a href="http://www.baidu.com" target="blank">百度</a>
<hr>
<a href="d:/各种东西/b.html">b</a>
<br>
<a href="./c.html">c</a>
<!-- ./表示当前路径 -->
<br>
<a href="../d.html">d</a>
<br>
<a href="../../f.html">f</a>
</body>
</html>
16.锚链接
17.页面之间的锚链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li><a href="16锚链接.html#first">简介</a></li>
<li><a href="16锚链接.html#second">HTML版本</a></li>
<li><a href="16锚链接.html#three">特点</a></li>
<li><a href="16锚链接.html#four">编辑方式</a></li>
<li><a href="16锚链接.html#five">整体结构</a></li>
<li><a href="16锚链接.html#six">相关要求</a></li>
</ol>
</body>
</html>
18.功能链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="../image/heihei.gif">点击此处下载图片</a>
<br>
<a href="mailto.128997105@.qq.com">联系我们</a>
</body>
</html>
c.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
ccccc
</body>
</html>
01 表格.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="400px" height="200px" align="center" bordercolor="red" bgcolor="#cccccc" background="../../image/bg.gif" cellspacing="10" cellpadding="10px">
<tr align="right" valign="top">
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr align="center" valign="middle" bgcolor="blue">
<td>hello</td>
<td bgcolor="yellow" valign="bottom">hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr valign="bottom" background="../../image/heihei.gif">
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</table>
</body>
</html>
合并单元格.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- table>tr>td{hello$}*4)4 -->
<table border="1" width="500px" height="300px">
<tr>
<td colspan="4" align="center">hello1</td>
</tr>
<tr>
<td rowspan="3">hello1</td>
<td>hello2</td>
<td>hello3</td>
<td>hello4</td>
</tr>
<tr>
<td>hello2</td>
<td rowspan="2" colspan="2">hello3</td>
</tr>
<tr>
<td>hello2</td>
</tr>
</table>
</body>
</html>
03表格的高级标签.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="600px" height="300px" align="center">
<caption><h2>学生基本信息表</h2></caption>
<thead bgcolor="cyan">
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</thead>
<tbody bgcolor="#cccccc">
<tr>
<td>1001</td>
<td>阿牛</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>1002</td>
<td>阿花</td>
<td>20</td>
<td>女</td>
</tr>
<tr>
<td>1003</td>
<td>李四</td>
<td>22</td>
<td>女</td>
</tr>
<tr>
<td>1004</td>
<td>王五</td>
<td>23</td>
<td>男</td>
</tr>
</tbody>
<tfoot bgcolor="yellow" align="">
<tr>
<td width="25%">总计人数</td>
<td colspan="3" align="center">4</td>
</tr>
</tfoot>
</table>
</body>
</html>
04表单.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>用户注册</h2>
<form action="" method="get" enctype="application/x-www-form-urlencoded">
用户名:<input type="text" name="usrname" value="无名氏">
<br>
密码:<input type="password" name="pwd" size="6" maxlength="6">
<br>
年龄:<input type="text" name="age" value="18">
<br>
性别: <input type="radio" name="sex" value="male">
<img src="../../image/male.gif" alt="">
<input type="radio" name="sex" value="female" checked>
<img src="../../image/female.gif" alt="">
<br>
爱好：
<input type="checkbox" name="hobby" value="eat">吃饭
<input type="checkbox" name="hobby" value="watch">追剧
<input type="checkbox" name="hobby" value="doudou">打豆豆
<br>
头像：
<input type="file" name="head" accept="image/jpeg">
<input type="hidden" name="usr_id" value="9528">
<hr>
<input type="submit" value="注 册">
<input type="reset" value="重 置">
<hr>
<input type="image" src="../../image/submit.gif">
<input type="image" src="../../image/reset.gif">
<hr>
<input type="button" value="普通按钮">
</form>
</body>
</html>
05.特殊表单元素.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
学历：
<select name="degree">
<option value="0">--请选择学历--</option>
<option value="dazhuan">大专</option>
<option value="benke" selected>本科</option>
<option value="yanjiusheng">研究生</option>
<option value="shuoshi">硕士 </option>
</select>
城市：
<select name="city">
<optgroup lable="山西省">
<option value="">晋城</option>
<option value="">济南</option>
<option value="">太原</option>
</optgroup>
<optgroup lable="山东省">
<option value="">长治</option>
<option value="">南京</option>
<option value="">江苏</option>
</optgroup>
<optgroup label="江苏省">
<option value="">大理</option>
<option value="">上海</option>
<option value="">北京</option>
<option value="">扬州</option>
</optgroup>
</select>
<br>
服务协议：
<textarea name="inteduce" rows="10" cols="20" readonly>
请遵守本网站的相关协议和国家的法律法规
请遵守本网站的相关协议和国家的法律法规
请遵守本网站的相关协议和国家的法律法规
请遵守本网站的相关协议和国家的法律法规
请遵守本网站的相关协议和国家的法律法规
请遵守本网站的相关协议和国家的法律法规
</textarea>
<hr>
<input type="submit">
</form>
</body>
</html>
06.其他表单元素.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<fieldset>
<legend>个人信息</legend>
<label for="">用户名：</label>
<input type="text" name="usrname">
<br>
<label for="">邮 箱：</label>
<input type="text" name="email" id="email">
<br>
</fieldset>
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="image" src="../../image/submit.gif">
<input type="button" value="普通按钮">
<hr>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
<button><img src="../../image/submit.gif" alt=""></button>
<hr>
<fieldset>
<legend>院校信息</legend>
学号：<input type="text" name="stuID"><br>
学校：<input type="text" name="stuSchool"><br>
专业：<input type="text" name="stuMajor"><br>
</fieldset>
</body>
</html>
07.内嵌框架.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="./top.html" width="100%" height="200"frameborder="0" scrolling="auto"></iframe>
<h3>主体部分</h3>
<hr>
<a href="01表格.html" target="hello">01.html</a>
<a href="02合并单元格.html" target="">02.html</a>
<br>
<iframe src="./foot.html" wigth="600px" height="600px" frameborder="0" name="hello"></iframe>
</body>
</html>
top.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>网页</li>
<li>资讯</li>
<li>视频</li>
<li>图片</li>
<li>知道</li>
<li>文库</li>
<li>贴吧</li>
</ul>
</body>
</html>
foot.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>底部和版权</p>
</body>
</html>
day.01新增html.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<article>
<header>标题</header>
<section>
第一张
</section>
<section>
第二章
</section>
<footer>jiaozhu</footer>
</article>
<aside>广告</aside>
<br>
<figure>
<img src="../../image/google.png" alt="">
<img src="../../image/facebook.png" alt="">
</figure>
<nav>
<ul>
<li>网页</li>
<li>资讯</li>
<li>视频</li>
<li>图片</li>
<li>知道</li>
<li>文库</li>
<li>贴吧</li>
</ul>
</nav>
</body>
</html>
02 新增语义相关.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
welcome <mark>to</mark> html
<hr>
我和你在<time datetime="2020.3.14">情人节</time>有个约会！
<hr>
<details>
<summary>HTML简介</summary>
<p>HTML是哟们用来制作网页的标签语言</p>
<p>可以HTML包含文本、图像、音频、等各种多媒体信息</p>
</details>
<meter max="100" min="1" value="30"></meter>
<hr>
<meter max="100" min="1" value="30" high="60" low="20" optimum="10"></meter>
<hr>
<meter max="100" min="1" value="5" high="60" low="20" optimum="10"></meter>
<hr>
<meter max="100" min="1" value="90" high="60" low="20" optimum="10"></meter>
<hr>
<meter max="100" min="1" value="90" high="60" low="20" optimum="65"></meter>
<hr>
<meter max="100" min="1" value="30" high="60" low="20" optimum="65"></meter>
<hr>
<meter max="100" min="1" value="15" high="60" low="20" optimum="65"></meter>
<hr>
<meter max="100" min="1" value="15" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="10" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="30" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="90" high="60" low="20" optimum="35"></meter>
<hr>
<meter max="100" min="1" value="40" high="60" low="20" optimum="35"></meter>
<meter max="100" min="1" value="10" high="60" low="20" optimum="35"></meter>
<meter max="100" min="1" value="90" high="60" low="20" optimum="35"></meter>
<hr>
<progress value="20" max="50"></progress>
</body>
</html>
03.新增 表单.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <form action="" autocomplete="off" novalidate> -->
<form action="" autocomplete="on" id="myform">
<label for="email">邮箱：</label>
<input type="email" name="email" id="email">
<br>
<label for="home">个人主页：</label>
<input type="yrl" name="home" id="home">
<hr>
<label for="phone">电话：</label>
<input type="tel" name="phone" id="phone">
<br>
<label for="keyword">关键字：</label>
<input type="search" name="keyword" id="keyword">
<br>
<label for="num">数字:</label>
<input type="number" name="num" id="num" min="1" max="10" step="2">
<br>
<label for="birthday">出生日期：</label>
<input type="date" name="birthday" id="birthday">
<hr>
<label for="color">颜色：</label>
<input type="color" name="color" id="color">
<br>
<label for="usrname">用户名：</label>
<input type="text" name="name" id="usrname" placeholder="请输入用户名" required autocomplete="off" autofocus>
<br>
<label for="age">年龄：</label>
<input type="text" name="age" id="age" pattern="\d{1,2}">
<br>
<label for="city">城市：</label>
<input type="text" name="city" id="city" list="citylist">
<datalist id="citylist">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="tianjin">天津</option>
<option value="shandong">山东</option>
<option value="haerbin">哈尔滨</option>
</datalist>
<hr>
<input type="submit" form="myform">
</form>
</body>
</html>
04 新增 多媒体.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <audio src="../../audio/water.mp3" controls autoplay loop muted preload="none"></audio> -->
<audio>
<source src="../../audio/earth.ogg">
<source src="../../audio/water,mp3">
</audio>
<br>
<video src="../../video/volcano.mp4" controls width="600" poster="../../image/p1.jpg"></video>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
