HTML5语言的学习使用（一）
一、基本介绍
1、HTML是干什么的
-
HTML：用于创建网页的超文本标记语言(Hyper Text Markup Language)
-
HTML语言是Web的基础，可以说Internet是建立在HTML基础之上的。
-
HTML5是新一代HTML标准，大部分浏览器已经支持。**
2、HTML的基本结构
<!DOCTYPE html><!-- html5的文档声明：表示当前页面采取的是html5版本 -->
<!--
<html>是HTML页面根标签
lang属性：定义当前页面的语言类型，"en"英文，"zh"中文
-->
<html lang="en">
<!-- <head>是文档头部标签，可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等 -->
<head>
<!--
<meta>是元数据标签
charset属性：设置网页的字符编码 UTF-8 称为万国码
注：元数据不会显示在客户端但会被浏览器解析
-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <!-- <title>标签设置文档标题 -->
</head>
<body>
<!-- <body>标签包含文档的所有内容 -->
</body>
</html>
3、HTML语法规范
-
HTML标签是由尖括号包围的关键词，例如：
<html> -
标签不区分大小写，推荐使用小写，例如：
<html><HTML>都可以 -
标签通常是成对出现的(双标签)： 例如：
<body>和</body>，第一个是开始标签，第二个是结束标签，/在结束标签的前面。 -
两个标签之间的部分称为标签体。
-
有些特殊的标签是单标签，例如：
<br>也可以写成<br /> -
标签可以有若干属性，也可以不带属性，例如：
<head>没有带属性 -
标签可以嵌套，但不要交叉嵌套： 例如：
<div><a></a></div>不要写成：<div><a></div></a>
二、基本标签
1、文本相关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 标题标签：<h1> 至 <h6></h6> -->
<!-- left左对齐，center居中，right右对齐 -->
<h1 align="center">标题文字</h1>
<!-- align属性不推荐使用，用 style="text-align:center;" 样式代替 -->
<h2 style="text-align: center;">小标题</h2>
<!-- 段落标签：<p> 一段文字 </p> -->
<!-- 不要在<p>里嵌套块级元素，如嵌套p或div -->
<p>一大段文字</p>
<!-- 换行标签：<br>或<br /> -->
<p>一大段文字<br>另一大段文字</p>
<!-- 格式标签：
粗体：<b></b>或<strong></strong>
斜体：<i></i>
下划线：<u></u>
下标：<sub></sub> 上标：<sup></sup>
突出显示(黄色背景)：<mark></mark>
-->
</body>
</html>
特殊符号(实体标签)：参考 菜鸟教程-HTML字符实体
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>首金！00后杨倩为中国夺得第一块金牌！</h1>
<h4>数据统计：杨倩251.8环夺得东京奥运会女子10米气步枪金牌</h4>
<p>刚刚结束的射击女子10米气步枪，中国运动员<strong>杨倩</strong>为中国队夺得<mark>首金</mark>！</p>
<p>四场选拔赛都是冠军，最后的决赛，杨倩也是冠军！</p>
<h4>对决过程：杨倩给对手造成压力</h4>
<p>10米气步枪赛制，要想获得冠军，必须打满24枪。在第23枪结束后，杨倩还落后俄罗斯选手0.2环。结果最关键的
第24环，俄罗斯选手出现超级失误！只打出了8.9环。杨倩虽然也有失误，只打出了9.8环。</p>
<p>但是这已经足够了！<u>从落后0.2环，到反超0.7环！</u></p>
<p>作者：©新华社 小明<br> 2021-07-24 </p>
</body>
</html>
运行效果
2、图片
<!--
src="图片路径" width="宽度值"(单位是像素点px)
height="高度值"(单位是像素点px)
title="提示文字"(鼠标放在图像上显示的文本)
alt="替换文本"(无法载入图像时显示alt信息)
-->
<img src="https://s3.pstatp.com/toutiao/static/img/logo.271e845.png" title="hello" alt="今日头条" height="50px" width="200px">
关于路径:
同一级路径 图像文件位于HTML文件同一级 如 <img src="baidu.gif" >
下一级路径 / 图像文件位于HTML文件下一级 如 <img src="images/baidu.gif" >
上一级路径 …/ 图像文件位于HTML文件上一级 如 <img src="../baidu.gif">
绝对路径：是指目录下的绝对位置,直接到达目标位置，通常是从盘符开始的路径。
3、超链接
<!--
超链接标签： <a href="url" target="_self"> 链接文字 </a>
target 指定链接打开方式，默认为"_self"
_blank 在新窗口中打开被链接文档
_self 默认，在相同的框架中打开被链接文档
_parent 在父框架集中打开被链接文档
_top 在整个窗口中打开被链接文档
-->
<a href="http://www.wust.edu.cn" target="_blank" >武汉科技大学</a>
<!--
跳转到当前页的某一个位置(锚点，一般用id值)：
<a href="#id值">链接文字</a>
<a href="#">页面的最上部</a>
-->
<a href="#">跳到页面的顶部</a>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>首金！00后杨倩为中国夺得第一块金牌！</h1>
<img src="https://pics6.baidu.com/feed/1f178a82b9014a906ffbe3e8a8f3e31ab21bee2f.jpeg?token=babe29c782b41f8ed3b86d05a10e216a" alt="杨倩图片" title="小萌" width="200" height="268">
<h4>数据统计：杨倩251.8环夺得东京奥运会女子10米气步枪金牌</h4>
<p>刚刚结束的射击女子10米气步枪，中国运动员<strong>杨倩</strong>为中国队夺得<mark>首金</mark>！</p>
<p>四场选拔赛都是冠军，最后的决赛，杨倩也是冠军！</p>
<h4>对决过程：杨倩给对手造成压力</h4>
<p>10米气步枪赛制，要想获得冠军，必须打满24枪。在第23枪结束后，杨倩还落后俄罗斯选手0.2环。结果最关键的
第24环，俄罗斯选手出现超级失误！只打出了8.9环。杨倩虽然也有失误，只打出了9.8环。</p>
<p>但是这已经足够了！<u>从落后0.2环，到反超0.7环！</u></p>
<p>作者：©新华社 小明<br> 2021-07-24 <a href="#">top</a></p>
<p><a href="https://baijiahao.baidu.com/s?id=1706132004425990360">原文连接</a></p>
</body>
</html>
运行效果
4、div和span
<div> 标签：块级元素，可用于组合其他HTML 元素的容器
-
div 没有特定的含义，通常用于对文档结构进行逻辑上的分块
-
div 的前后会换行
<span> 标签：行内元素（内联元素），可用作文本的容器
span 没有特定的含义，span 的前后不会换行
示例（自行调式运行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="top">
<h1>首金！00后<span style="color: red;">杨倩</span>为中国夺得第一块金牌！</h1>
<img src="images/杨倩.jpg" alt="杨倩图片" title="小萌" width="200" height="268">
</div>
<div id="content">
<h4>数据统计：杨倩251.8环夺得东京奥运会女子10米气步枪金牌</h4>
<p>刚刚结束的射击女子10米气步枪，中国运动员<strong>杨倩</strong>为中国队夺得<mark>首金</mark>！</p>
<p>四场选拔赛都是冠军，最后的决赛，杨倩也是冠军！</p>
<h4>对决过程：杨倩给对手造成压力</h4>
<p>10米气步枪赛制，要想获得冠军，必须打满24枪。在第23枪结束后，杨倩还落后俄罗斯选手0.2环。结果最关键
的第24环，俄罗斯选手出现超级失误！只打出了8.9环。杨倩虽然也有失误，只打出了9.8环。</p>
<p>但是这已经足够了！<u>从落后0.2环，到反超0.7环！</u></p>
</div>
<div id="footer">
<p>作者：©新华社 小明<br> 2021-07-24 <a href="#">top</a></p>
<p><a href="https://baijiahao.baidu.com/s?id=1706132004425990360">原文连接</a></p>
</div>
</body>
</html>
5、列表
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul style="list-style-type: none;"><!-- 去掉实心圈 -->
<li><a href="http://www.wust.edu.cn">武汉科技大学</a></li>
<li><a href="http://www.hust.edu.cn">华中科技大学</a></li>
<li><a href="http://www.whu.edu.cn">武汉大学</a></li>
</ul>
</body>
</html>
运行效果
6、HTML表格
示例（应聘面试登记记录）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简介</title>
</head>
<body>
<div class="bodystyle">
<table align=center border="1" bordercolor="0x4C96FF" cellpadding="10" width="800" >
<caption style="background-color: rgb(234, 243, 243);">
<h2>应聘面试登记记录</h2>
</caption>
<tr>
<td colspan="12" style="background-color: rgb(234, 243, 243);">基本信息</td>
</tr>
<tr align="center">
<td>姓名</td>
<td>h</td>
<td>性别</td>
<td>男</td>
<td>出生日期</td>
<td>2002-2-2</td>
<td rowspan="5"><img
src="https://dar-1305869431.cos.ap-shanghai.myqcloud.com/communication-platform-photo/02-2.jpg"
alt="大头照" width="160" height="180"></td>
</tr>
<tr align="center">
<td>政治面貌</td>
<td>共青团员</td>
<td>籍贯</td>
<td>安徽</td>
<td>民族</td>
<td>汉</td>
</tr>
<tr align="center">
<td>婚姻状况</td>
<td>未婚</td>
<td>学历</td>
<td>本科</td>
<td>专业</td>
<td>计算机</td>
</tr>
<tr align="center">
<td>联系电话</td>
<td colspan="2">1234567890x</td>
<td>邮箱</td>
<td colspan="2">02yyds···</td>
</tr>
<tr align="center">
<td>身份证号</td>
<td colspan="2">wxyydsyydsyydsyyds</td>
<td>通讯地址</td>
<td colspan="2">湖北省武汉市</td>
</tr>
<tr align="center">
<td rowspan="2">相关证书</td>
<th colspan="2">获取时间</th>
<th colspan="3">相关证书</th>
<th>发放单位</th>
</tr>
<tr align="center">
<td colspan="2">2021-9-9</td>
<td colspan="3">毕业证书</td>
<td colspan="1">wust</td>
</tr>
<tr>
<td colspan="12" style="background-color: rgb(234, 243, 243);">教育经历</td>
</tr>
<tr>
<th colspan="2">起止时间</th>
<th colspan="2">学校名称</th>
<th colspan="2">学历/专业</th>
<th>证明人</th>
</tr>
<tr align="center">
<td colspan="2">2020-2021</td>
<td colspan="2">wust</td>
<td colspan="2">本科/计算机</td>
<td>zz</td>
</tr>
<tr>
<td colspan="12" style="background-color: rgb(234, 243, 243);">工作经历</td>
</tr>
<tr>
<th colspan="2">起止时间</th>
<th colspan="2">公司名称</th>
<th colspan="2">部门/岗位</th>
<th>证明人</th>
</tr>
<tr align="center">
<td colspan="2">2020-2021</td>
<td colspan="2">wust</td>
<td colspan="2">学生</td>
<td>zz</td>
</tr>
<tr align="center">
<td colspan="2">2021-2022</td>
<td colspan="2">wust</td>
<td colspan="2">学生</td>
<td>zz</td>
</tr>
<tr>
<td colspan="12" style="background-color: rgb(234, 243, 243);">家庭信息</td>
</tr>
<tr>
<th colspan="1">姓名</th>
<th colspan="1">称谓</th>
<th colspan="1">年龄</th>
<th colspan="3">工作单位</th>
<th colspan="1">联系方式</th>
</tr>
<tr align="center">
<td colspan="1">巴尔</td>
<td colspan="1">dar</td>
<td colspan="1">2000</td>
<td colspan="3">稻妻</td>
<td colspan="1">1234567890x</td>
</tr>
<tr align="center">
<th colspan="1">紧急联系人</th>
<td colspan="2">八重樱</td>
<th colspan="2">与紧急联系人关系</th>
<td colspan="3">dar</td>
</tr>
<tr>
<td colspan="12" style="background-color: rgb(234, 243, 243);">录用情况</td>
</tr>
<tr>
<th colspan="1">所属部门</th>
<th colspan="1">职务</th>
<th colspan="1">到岗时间</th>
<th colspan="1">试用期薪资</th>
<th colspan="1">转正薪资</th>
<th colspan="1">上级领导</th>
<th colspan="1">部门负责人</th>
</tr>
<tr align="center">
<td>稻妻</td>
<td>将军</td>
<td>2020</td>
<td>0</td>
<td>0</td>
<td>巴尔</td>
<td>八重樱</td>
</tr>
<tr align="center">
<td colspan="1">人事经理意见:</td>
<td colspan="3"></td>
<td colspan="1">总经理意见:</td>
<td colspan="2"></td>
</tr>
</table>
<table align=center border="0" cellpadding="10" width="800">
<tr>
<td colspan="3">是否因违法犯罪受过处理:
<input type="radio" name="no" value="y"> 是
<input type="radio" name="no" value="n">否
</td>
<td colspan="4">是否有数额过万的未清偿债务:
<input type="radio" name="yes" value="y"> 是
<input type="radio" name="yes" value="n">否
</td>
</tr>
<tr>
<td colspan="7">本人承诺以上信息均为真实有效，如若造假或情况不实，自愿承担一切后果。</td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="1">本人签名:</td>
<td colspan="1"></td>
<td colspan="1">日期:</td>
<td colspan="1"></td>
</tr>
</table>
</body>
<style type="text/css">
.bodystyle {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
width: 100%;
position: absolute;
background: url(https://dar-1305869431.cos.ap-shanghai.myqcloud.com/communication-platform-photo/background1.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 1;
}
</style>
</html>
运行效果（部分）
内容参考：老师上课的PPT
280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
