一、什么是HTML5
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。
二、HTML5的用途
1.网页开发（浏览器看到的页面，都需要用到前端）
2.小程序、公众号开发（微信、支付宝、字节跳动等小程序，内嵌式页面开发）
3.Hybird App(混合应用开发)
4.Native App(原生应用开发)
5.桌面应用开发（电脑软件开发）
6.游戏开发
7.后端开发（node.js实现后端开发）
三、项目开发流程以及建站流程
1.项目开发流程
产品经理确定需求及设计方案
UI设计根据功能需求设计产品
后端提供数据接口
前端制作页面调取接口
测试进行功能测试
2.网站建站流程
域名注册
租用空间
网站建设
网站推广
网站运维
四、网页组成
结构 html 网页结构部分
表现 css 网页样式
行为 js 网页功能
五、HTML基础结构语法
1.html5的基础结构
声明文档类型 doc 文件 type 类型
html超文本标记语言 描述区 定义编码格式六、练习
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>练习一</title>
</head>
<body>
<div class="body">
<div class="header">
<div class="header-title">人见人爱，花见花开，车见车爆胎--苏苏</div>
<div class="header-detail"><b>摘要:</b><span>无法描述，词穷了</span></div>
</div>
<div class="content">
<a href="https://i.bmp.ovh/imgs/2021/08/9194a2d01cc6d884.png"><img src="https://i.bmp.ovh/imgs/2021/08/9194a2d01cc6d884.png" alt=""></a>
<div class="content-detail">
<div>这是我年轻的时候，依稀记得当年还有很多小姐姐在我身边，现在也不知道咋回事，人就变成这样了，身边连个说说话的人都没有了，我太难了</div>
<div><b>怎么难了：</b>晚上一个人独守空房，一个人总感觉空落落的，睡也睡不好，吃也吃不香，就这样吧，一个人挺好</div>
<div>曾梦想仗剑走天涯，却因肥胖而无力而为<br>拼搏到无能为力，奋斗感动自己，加油小老弟小老妹们<br>键盘敲烂，薪资过万 <u><a href="https://www.baidu.com">获取更多资讯请点击百度</a></u></div>
</div>
</div>
</div>
<style>
.body{
color: black;
padding-bottom: 200px;
}
.header-title{
font-weight: 600;
font-size: 25px;
}
.header-detail{
padding: 10px 0;
font-size: 15px;
border-bottom: 2px solid #ff2828;
}
.content{
padding-top: 10px;
}
.content-detail>:nth-child(1){
font-size: 20px;
font-weight: 600;
line-height: 40px;
}
.content-detail>:nth-child(2){
font-size: 15px;
line-height: 40px;
}
.content-detail>:nth-child(3){
font-size: 15px;
line-height: 40px;
}
</style>
</body>
</html>
2.练习二
<!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="table" style="color: #d68aa2;font-weight: 600;">
<table>
<tr >
<td style="width: 15%;">会员姓名</td>
<td style="width: 35%;"></td>
<td style="width: 15%;">出生日期</td>
<td style="width: 35%;"></td>
</tr>
<tr>
<td style="width: 15%;">身份证号</td>
<td colspan="3"></td>
</tr>
<tr>
<td style="width: 15%;">通信地址</td>
<td colspan="3"></td>
</tr>
<tr>
<td style="width: 15%;">联系电话</td>
<td colspan="3"></td>
</tr>
<tr>
<td style="width: 15%;">会员卡号</td>
<td colspan="3"></td>
</tr>
</table>
</div>
<style>
table{
border-collapse:collapse;
margin: 0 auto;
width: 600px;
text-align: center;
margin-top: 200px;
}
table tr td{
border: 2px solid #d68aa2;
padding: 20px 5px;
}
</style>
</body>
</html>
3.练习三
<!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="body">
<div class="title">
2021第二学期理论课表
</div>
<div class="table">
<table>
<tr>
<th>时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<th>上午一二节</th>
<td>高数</td>
<td>大学英语Ⅱ</td>
<td>C++</td>
<td>java基础</td>
<td>web程序设计</td>
<td>思修</td>
<td rowspan="5">周末愉快</td>
</tr>
<tr>
<th>上午三四节</th>
<td>高数</td>
<td>大学英语Ⅱ</td>
<td>C++</td>
<td>java基础</td>
<td>web程序设计</td>
<td>思修</td>
</tr>
<tr>
<th>下午一二节</th>
<td>高数</td>
<td>大学英语Ⅱ</td>
<td>C++</td>
<td>java基础</td>
<td>web程序设计</td>
<td>思修</td>
</tr>
<tr>
<th>下午三四节</th>
<td>高数</td>
<td>大学英语Ⅱ</td>
<td>C++</td>
<td>java基础</td>
<td>web程序设计</td>
<td>思修</td>
</tr>
<tr>
<th>晚自习</th>
<td colspan="6">晚自习</td>
</tr>
</table>
</div>
</div>
<style>
body{
padding-top: 200px;
text-align: center;
}
table{
margin: 0 auto;
border-collapse:collapse;
text-align: center;
}
table tr{
height: 50px;
}
table tr th{
border: 2px solid #000;
padding: 0 40px;
}
table tr td{
border: 2px solid #000;
padding: 0 40px;
}
</style>
</body>
</html>
4.练习四
<!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 class="table">
<table>
<tr>
<td colspan="2">姓名</td>
<td></td>
<td>职务</td>
<td colspan="2"></td>
<td colspan="2">出差事由</td>
<td colspan="5"></td>
</tr>
<tr>
<td>起日</td>
<td>止日</td>
<td>起止地点</td>
<td>项目</td>
<td>张数</td>
<td colspan="3">金额</td>
<td>项目</td>
<td>天数</td>
<td colspan="2">金额</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>火车费</td>
<td></td>
<td colspan="2"></td>
<td></td>
<td>途中补助</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>汽车费</td>
<td></td>
<td colspan="2"></td>
<td></td>
<td>住勤补助</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>市内交通费</td>
<td></td>
<td colspan="2"></td>
<td></td>
<td>夜间乘车</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>住宿费</td>
<td></td>
<td colspan="2"></td>
<td></td>
<td>其它</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>邮电费</td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="2">小计</td>
<td colspan="2"></td>
<td></td>
<td colspan="2">小计</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">合计</td>
<td colspan="9" style="text-justify:inter-ideograph">（大写） 仟  佰  拾  元  角  分 ￥： </td>
</tr>
</table>
</div>
<style>
.table {
margin-top: 200px;
}
table {
margin: 0 auto;
border-collapse: collapse;
text-align: center;
}
table tr td {
border: 2px solid #000;
padding: 10px 20px;
}
</style>
</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>练习五</title>
</head>
<body>
<div class="table">
<div class="title">项目增补单</div>
<table>
<tr>
<td>工单号</td>
<td style="width: 100px;"></td>
<td>车牌号</td>
<td style="width: 50px; border-right: none;"></td>
<td style="width: 50px; border-left: none;"></td>
<td>车型</td>
<td></td>
<td>技师</td>
<td></td>
<td>检修时间</td>
<td style="width: 100px;"></td>
</tr>
<tr>
<td>序号</td>
<td colspan="3" >维修项目及更换配件</td>
<td >单价</td>
<td>数量</td>
<td>小计</td>
<td>工时费</td>
<td>合计</td>
<td colspan="2">故障原因</td>
</tr>
<tr>
<td>1</td>
<td colspan="3" ></td>
<td ></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td>2</td>
<td colspan="3" ></td>
<td ></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td>3</td>
<td colspan="3" ></td>
<td ></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td>4</td>
<td colspan="3" ></td>
<td ></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td>5</td>
<td colspan="3" ></td>
<td ></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td>6</td>
<td colspan="3" ></td>
<td ></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td>7</td>
<td colspan="3" ></td>
<td ></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td>8</td>
<td colspan="3" ></td>
<td ></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td>9</td>
<td colspan="3" ></td>
<td ></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td>10</td>
<td colspan="3" ></td>
<td ></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr style="text-align: left;">
<td colspan="4" >备件费用小计：</td>
<td colspan="5" >工时费用小计：</td>
<td colspan="3" >合计：</td>
</tr>
<tr style="text-align: left; ">
<td colspan="3" style="border: none;">班组长：</td>
<td colspan="3" style="border: none;">技术部：</td>
<td colspan="3" style="border: none;">服务顾问：</td>
<td colspan="3" style="border: none;">客户确认：</td>
</tr>
</table>
</div>
<style>
.table{
text-align: center;
margin-top: 150px;
}
.title{
font-size: 25px;
font-weight: 600;
letter-spacing:10px;
}
table {
margin: 0 auto;
border-collapse: collapse;
text-align: center;
}
table tr {
height: 30px;
}
table tr td {
border: 2px solid #000;
padding: 0 10px;
}
</style>
</body>
</html>
6.练习六
<!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 class="content">
<div class="title">各科小常识</div>
<div class="cloumn">
<div class="cloumn-title">语文</div>
<p>  《三国演义》中国古典四大名著之一。元末明初小说家罗贯中所著，是中国第一部长篇章回体历史演义的小说。描写了从东汉末年到西晋初年之间近100年的历史风云。</p>
</div>
<div class="cloumn">
<div class="cloumn-title">数学</div>
<p> 勾股定理直角三角形：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>。</p>
</div>
<div class="cloumn">
<div class="cloumn-title">英语</div>
<p> No pain,no gain.</p>
</div>
<div class="cloumn">
<div class="cloumn-title">化学</div>
<p> H<sub>2</sub>SO<sub>4</sub>是一种重要的工业原料，可用于制作肥料、洗涤剂等。</p>
</div>
<div class="cloumn" style="border: none;">
<div class="cloumn-title">经济</div>
<p>版权符号：©</p>
<p>注册商标：®</p>
</div>
</div>
<style>
.content {
width: 400px;
margin: 0 auto;
background-color: #fcf9d0;
font-size: 14px;
padding: 0 10px;
}
.title {
text-align: center;
font-weight: 600;
font-size: 20px;
}
.cloumn {
border-bottom: 2px solid #ccc;
}
.cloumn-title {
font-weight: 600;
}
</style>
</body>
</html>
7.练习七
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习七</title>
<link rel="stylesheet" href="https://stackedit.io/style.css" />
</head>
<body class="stackedit">
<div class="stackedit__html">
<p><strong>这套方法，是流传在衡水、黄冈、人大附等部分学霸圈子里的超牛理论。</strong></p>
<p><strong>不是费曼技巧、番茄学习法这种全网都是的操作方法，而是学霸们透过现象直达本质的思考和行为，用起来非常的爽。</strong></p>
<p><strong>我当时的高中是省重点，学校组织尖子生去几个神级学校交流，我才略知一二。至今还跪谢这次交流！</strong></p>
<p>这套方法概括来说，<strong>就五个字：真、霸、道、总、裁。</strong></p>
<h2><a id="1_8"></a>1、“真”式学习状态</h2>
<p>学霸们在学习的时候，会进入一个状态，周围的一切都变得暗淡，连隔壁同学嗑瓜子的声音你都听不见，精神完全集中于手头的事情，时间不知不觉变得很快。</p>
<p>类似于我们在打王者荣耀时候的感觉，他们称这种状态为**“真式学习状态”**。</p>
<p>在这个状态里，学习一分钟，等于别人学习十分钟。<strong>我们可能偶然进入过这种状态一两次，而学霸则是随时都可以进入。</strong></p>
<p>我们平常看似在努力学习，实际上只是低效的“假式学习状态”， 很多人会说，啊，我已经很努力了就是学不进去呀咋办，<strong>错，你不是学不进去。而是你的大脑下线了。</strong></p>
<img src="https://pic1.zhimg.com/50/v2-5b750232fad8eeaa1a9edf845df70943_720w.jpg?source=1940ef5c"
class="origin_image zh-lightbox-thumb" width="690">
<p>很多人在学习时总会感到倦意，看书不一会儿就昏昏沉沉的，这是因为，大脑神经元不活跃。看书对你来说只是一个机械的动作，没能引起大脑运转。</p>
<p>比如，我们每天上厕所，洗脸、刷牙、穿鞋、关门。都能一气呵成。</p>
<p>因为，我们在做这些的时候，都是潜意识在操作，大脑不用思考。哪天你突然想在中间插一个烧开水的步骤，就得专门去记着烧水，这时候脑子才开始转。</p>
<p>运动员赛前要做热身、电脑运行要先安驱动，<strong>大脑也需要一个明确的信号，来告知它即将进入一个更加高效、更加紧张的“真性学习状态”。</strong></p>
<p>如果，你还不清楚这个信号的重要性，我们可以举一个例子：</p>
<p>比如说，你妈每次打你的时候，都会用鸡毛掸子，久而久之你就对拿鸡毛掸子这个动作，形成了“信号记忆”，久而久之她一拿鸡毛掸子，你就直接跑没影了。</p>
<p><strong>学霸告诉我，启动大脑状态最好的信号——就是深呼吸。</strong></p>
<p><strong>因为深呼吸是一个天然的活跃脑细胞的方式，每次深呼吸之后，由于氧气的摄入变多，脑部神经会活跃起来。</strong></p>
<p><strong>这样最有利于，进入“真性学习状态”。</strong></p>
<p><strong>好下面就跟我尝试一次。</strong></p>
<p>坐直放松腹部，</p>
<p>用鼻子深呼吸，</p>
<p>平稳吸气，</p>
<p>吸到底。</p>
<p>直到肺部充满空气。</p>
<p>让空气在肺部停留3秒钟，</p>
<p>1秒</p>
<p>2秒</p>
<p>3秒</p>
<p>接下来，用嘴慢慢把气呼完。</p>
<p>好现在，你的大脑比99%的人转得快了。</p>
<p><strong>双击屏幕点个赞，让我看到你已经做完了。</strong></p>
<p>关于学习这个，我还想多说两句，很多人上大学之后，才后悔自己努力学习了好几年，最后选择了一个不适合自己的专业，还有更多的人大学上了四年，毕业之后才发现当初选的专业屁用没有。</p>
<p>咱们努力学习不就是为了能有一个好的未来么，我之前做过一套专业心理学机构出版的测试题，能够通过你对事物的判断，多种场景下的反映感受，来分析出你大学适合学习什么专业。</p>
<p>还真挺准，对你的学业生涯一定会有帮助。</p>
<p>复制：榴莲欧尼，去微信搜一搜，然后点进第一个公从号，在聊天界面跟我说：专业，就可以测试啦。</p>
<p>好了，言归正传接下来的四点将是更硬的干货，我们继续。</p>
</div>
</body>
</html>
七、小结
table里面的属性：
border 给table加边框
cellspacing 去除边框与边框之间的间距
cellpadding 去除内容与边框之间的距离
width/height 宽度/高度
td单元格的属性：
bgcolor:设置背景颜色
colspan:跨列成行
rowspan:跨行成列
扫一扫
9263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
