Web培训第一天 html基础 vscode写代码
Web培训
第一天
vscode干嘛用的
VisualStudioCode（简称VSCode）是Microsoft开发的代码编辑器，它支持Windows，Linux和macOS等操作系统以及开源代码。它支持测试，并具有内置的Git版本控制功能以及开发环境功能，例如代码完成（类似于IntelliSense），代码段和代码重构等。编辑器支持用户定制的配置，例如仍在编辑器中时，可以更改各种属性和参数，例如主题颜色，键盘快捷键等，内置的扩展程序管理功能。
1、vscode基本操作
（1） 插件:
安装好vscode以后要进行插件的安装才能正常的使用
插件1： chinese … 汉化
插件2：open in browser … 打开网页快捷方式
（2） 设置：
- 设置 - 字体 – font size
- 设置 - 自动保存 – auto save – afterdelay
- 设置 - 折行 – on
- 颜色主题
2、常用浏览器及内核（渲染引擎）（背）
谷歌 chrome – webkit – blink
微软 IE – trident
mozila firefox(火狐) – gecko
360/昆仑万维 opera(欧朋) – presto – webkit – blink
苹果 safari – webkit
杂牌浏览器：uc 、猎豹、360、qq、百度…,这些浏览器没有自主研发的内核,都是用webkit内核或者trident内核区进行二次开发而来的。
3、网页构成
（1） 界面元素： 文字、图片、音频、视频、超链接、表单…
（2）三层结构： 结构层、表现层、行为层
（3）三门核心语言：HTML、CSS、JavaScript
（4）W3C组织：万维网联盟，制定web标准的机构
（5）web标准（W3C标准）：w3c组织针对web的开发语言制定的一系列的规范
4、HTML简介
超文本标记语言（HyperText Markup Language）
（1）用来描述网页
（2）不是编程语言
（3）由一套标记标签组成
5、html文档
html文档就是一个网页， 后缀名 ’ .html’
基本结构生成（快捷方式）： 英文! + enter键
（1）文档基本结构说明:
<!DOCTYPE html> <!-- html5的文档类型声明：告诉浏览器使用html的哪个标准去解析网页 -->
<html lang="zh-CN">
<!-- 页面根元素，代表网页的开始和结束 lang="en" 指定网页语言， en英文，zh-CN中文 -->
<head>
<!-- 网页头标签：通常用来放网页的一些元信息，通常不会显示在页面中 -->
<meta charset="UTF-8">
<!-- 字符集声明：统一编码方式避免乱码, utf-8 国际编码（万国码），gb2312(国标)只支持简体中文 , gbk (国标扩) 支持简体和繁体中文 -->
<title>hello world</title>
<!-- 网页标题，用来概括网页主题，显示在浏览器选项卡以及收藏夹书签页上 -->
</head>
<body>
<!-- 网页主体：显示在浏览器可视区的内容都放在body中 -->
</body>
</html>
6、html基本语法
6.1标签分类
（1）双标签
标签通常是成对出现，这样的标签叫做双标签
例如：
<html> ... </html>
<head> ... </head>
<body> ... </body>
<title> ... </title>
以上标签的格式是：<开始标签> … </结束标签>
（2）单标签（空标签）
某些特殊的标签，只有开始标签没有结束标签,这样的标签叫做单标签（空标签）
例如：<meta>，<img>等等。
6.2 标签属性
标签属性是：用来给标签添加一些附加信息。
6.2.1 使用
（1）属性都在开始标签上定义
例如：<p style="text-align: center;"></p>
设置该p标签中的内容格式为居中。
（2）多组属性用空格分隔
例如：<p style="text-align: center;color: blue;"></p>
设置设置该p标签中的内容格式为居中，并且内容颜色为蓝色。
（3）一组属性由 属性名=“值” 组成
例如：<user id="01" name="Jack" age="18"> </user>
user标签的id属性的等号后面的值用双引号括起来。
6.3 注释
<!-- html注释 -->
7、常用标签 （背）
7.1 标题标签
7.1.1 一级到六级标题 （h1~h6）<h1></h1>
h1标签在一个页面中只能使用一次，通常用来放网站的标题或者logo
<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
<h3> 三级标题 </h3>
<h4> 四级标题 </h4>
<h5> 五级标题 </h5>
<h6> 六级标题 </h6>
效果：
7.1.2 段落 <p></p>
该标签通常用来放主体文字，在效果上，段落上下会自带16像素的外边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<P style="background: burlywood;"> 段落文字效果</P>
</body>
</html>
效果：
7.1.3 区块<div><div>
div是一个典型的无语义标签，通常用来划分页面的模块， 里面可以包含任何标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
成都
<P style="background: burlywood;"> 段落文字效果</P>
</div>
</body>
</html>
效果：
7.1.4 水平分割线 (单标签) <hr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
水平分割线
<hr color="red" >
</body>
</html>
效果：
7.1.5 换行 (单标签) <br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
此次500强榜单入围门槛312亿元 <br>
相比去年同期提高60亿元
</body>
</html>
效果：
7.1.6 文字特殊样式 <span></span>
无语义标签,通常用来给一段文字中的指定文字添加特殊样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
其中一大行动就是“开展网络达人成长计划，运用“短视频+网红”模式，加强短视频制作和应用推广”打造短视频网红小镇湖北基地及湖北网红达人成长发展计划。 在此指引下，两省农业厅分别发出了举办“千名村播”培训活动的通知;在此次活动中，<span style="color: red;">由中公教育携手广东省农业农村厅、湖北省农业农村厅，联合阿里巴巴举办“鄂粤同心 抗疫发展”千名村播在线培训!</span>为两省培养一批直播人才，助力开拓农产品网络营销渠道，激起两省农业网络直播热潮，促进鄂粤两省农产品销售。
</body>
</html>
效果：
8、文本格式化标签
<b></b>
b : 样式加粗，没有语义
<strong></strong>
strong : 样式加粗，具有强调的作用
<i></i>
i : 样式斜体，没有语义
<em></em>
em : 样式斜体，具有强调的作用
<sup></sup>
sup : 上标文本
<sub></sub>
sub : 下标文本
<del></del>
del : 删除文本
<u></u>
u : 下划线
9、网页特殊符号
| 代码 | 效果 | 描述 |
|---|---|---|
< |
< | 小于号或显示标记 |
> |
> | 大于号或显示标记 |
& |
& | 可用于显示其它特殊字符 |
® |
® | 已注册 |
© |
© | 版权 |
™ |
™ | 商标 |
|
不断行的空白 |
10、网页图片 （掌握）
10.1 使用
<img src="图片路径" alt="图片加载不出来时的替换文本" title="提示文本" width="宽度" height="高度">
-alt 属性 ： 用来定义图片无法显示时的替换文本
- title属性： 用来定义鼠标悬停时的提示文本
（1）图片路径分两种
①相对路径 （重点）
./表示当前目录 ，可以省略
../表示 上一级目录
../../表示向上两级目录
路径开头的/ 表示根目录
例如：
<img src="dilireba.jpg" alt="">
<img src="./dilireba.jpg" alt="">
<img src="./images/Lisa.jpg" alt="">
<img src="../wyb.jpg" alt="">
<img src="../../cxk.jpg" alt="">
②绝对路径
本地的绝对路径：
<img src="C:\Users\Administrator\Desktop\0914一阶段\wyb.jpg" alt="">
网络地址：
`<img src="http://www.ujiuye.com/uploadfile/2020/0807/20200807044412710.jpg" alt="">`
练习
第一题
要求的效果图
解：
<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<head>
<title>百度汉语诗词网页</title>
<style>
p{
color: #9B9999;
}
.line{
/* text-decoration: underline; */
padding-bottom: 3px;
border-bottom: 1px solid blue;
}
.line2{
border-bottom: 3px solid blue;
padding-bottom: 7px;
}
.line3{
border-bottom: 3px solid #8B8B8B ;
padding-bottom: 7px;
}
</style>
</head>
<body>
<h2>春晓</h2>
<p>
【作者】<span style="color: blue;">孟浩然</span> 【朝代】唐
<hr>
</p>
<h4>春眠不觉<font class="line">晓</font>，处处闻<font class="line">啼鸟</font>。</h4>
<h4>夜来风雨声，花落<font class="line">知多少</font>。</h4>
<p>
标签：
<span style="color: blue;background-color: rgb(155, 175, 175);">小学古诗</span>
<span style="color: blue;background-color: rgb(155, 175, 175);">情感</span>
<span style="color: blue;background-color: rgb(155, 175, 175);">写景</span>
<span style="color: blue;background-color: rgb(155, 175, 175);">唐诗三百首</span>
<span style="color: blue;background-color: rgb(155, 175, 175);">惜春</span>
<span style="color: blue;background-color: rgb(155, 175, 175);">景色</span>
</p>
<h4>
<font class="line2">释文</font>
<font class="line3">注释</font>
<hr>
</h4>
<p>
春日里贪睡不知不觉天已破晓，搅乱我酣睡的是那啁啾的小鸟，昨天夜里风声雨声一直不断，那娇美的春花不知被吹落了多少？
</p>
<h4><font class="line2">赏析</font><hr> </h4>
<P>《春晓》这首诗，小，初读似平淡无奇，反复读之,便觉诗中别有天地。它的艺术魅力不在于华丽的辞藻,不在于奇绝的艺术手法，而在于它的韵味。整首诗的风格就像行云流水一样平易自然,然而悠远深厚,独臻妙境。 千百年来，人们传诵它,探讨它,仿佛在这短短的四行诗里,蕴涵着开掘不完的艺术宝藏。<br>
自然而无韵致,则流于浅薄;若无起伏,便失之平直。《春晓》 既有悠美的韵致,行文又起伏跌宕,所以诗味醇永。诗人要表现他喜爱春天的感情,却又不说尽,不说透,“迎风户半开”,让读者去捉摸、去猜想,处处表现得隐秀曲折。<br>
“情在词外日隐,状溢目前日秀。”( ..<font class="line">古诗文网>></font>
</p>
</body>
</html>
第二题
效果图：
解：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>京东退换服务说明页</title>
<style>
p {
color: #7E8388;
}
.jz {
text-align: center;
}
</style>
</head>
<body>
<h2 class="jz">京东售后退换无忧服务上线</h2>
<hr>
<p class="jz">时间：2016-11-11 10:49:05</p>
<P>亲爱的各位京东网友：
<br><br><br>
为了给您提供更优质的购物体验，京东售后全新上线“退换无忧服务”。
<br><br><br>
您在购买京东自营商品且购买‘"退换无忧服务”后,在签收商品后的15天内产生的退换货,可享受1次免费上门]取件服务;如果您购买的是第三方商家商品且购买“退换无忧服务”后,在签收商品后的15天内产生退换货,将按照赔付标准赔付一次退换货时产生的运费(最高可赔付20元/单)。钻石会员和会员PLUS无需购买,直接字受此服务。
<br><br><br>
相对于行业内传统运费险,退换无忧服务具有多、快、好、省几大优势,即,退换都管保障多、上门取件响应快、 品质服务体验好、超值*费用省、钻石会员免费字。
<br><br><br>
惊喜不断,期待您的体验,请点击: https://help.jd.com/user/issue/list-429-480.html
<br><br><br>
祝您购物愉快!
</p>
</body>
</html>
第三题
效果图：
解：
<!doctype html>
<html>
<meta charset="utf-8">
<head>
<title>中公教育资讯详情页</title>
<style>
p {
text-indent: 2em;
}
div {
text-align: center;
}
</style>
</head>
<body>
<h2>中公教育集团与芜湖市*签署战略合作协议</h2>
<p>
10月31日,中公教育集团与芜湖市*在北京签署了战略合作协议。双方拟通过建立长期、全面的战略伙伴关系,将在非学历职业培训、航空教育合作、芜湖总部项目建设等方面开展良好合作,实现资源共享、共赢发展。<br>
</p>
<div>
<img width="500px" height="320" src="D:\培训\自己做的作业\阶段一\day01\img\签约仪式现场.png" alt="签约仪式现场"><br>
</div>
<div>签约仪式现场</div>
<p>
芜湖市委副书记、市*市长贺懋燮,矮常委、市*常务副市长曹哨兵,市*秘书长汤德余, 芜湖县县长韦秀芳,中公教育集团董事长李永新,高级副总裁王振东,高级副总裁王学军等集团高管出席签约仪式。<br>
</p>
<div>
<img width="500px" height="320" src="D:\培训\自己做的作业\阶段一\day01\img\双方签署战略合作协议.png" alt="双方签署战略合作协议"> <br>
</div>
<div>双方签署战略合作协议</div>
<P>
仪式现场,曹哨兵副市长与王振东副总裁代表双方签署了合作协议。<br>
</P>
<p>
芜湖市作为安徽省第二大城市、长三角区域一体化成员城市、*通用航空综合示范区,具有优越的区位优势及资源优势。中公教育将结合芜湖市产业快速发展带来的人才需求,发挥自身综合优势和教育协同效应,在当地继续巩固非学历职业培训业务,提升芜湖市职业教育人才培养质量。此外,芜湖市*还将支持中公教育在政策范围内与安徽师范大学皖江学院寻求合作。支持中公教育集团建设芜湖总部。<br>
</p>
<div>
<img width="500px" height="320" src="D:\培训\自己做的作业\阶段一\day01\img\芜湖市一行领导出席签约仪式.png" alt="芜湖市一行领导出席签约仪式"></div>
<div>芜湖市一行领导出席签约仪式</div><br>
<div>
<img width="500px" height="320" src="D:\培训\自己做的作业\阶段一\day01\img\中公教育高管出席签约仪式.png" alt="中公教育集团高管出席签约仪式"><br>
</div>
<div>中公教育集团高管出席签约仪式</div>
<p>贺懋燮市长表示,中公教育探索出了一条独特的民办教育发展之路
,是一个充满正能量的企业。此次战略合作签约,将助推芜湖市教育产业的发展,为芜湖市未来长远发展储备坚实的人才基础。希望中公教育的“微讲台、广课堂"模式能与芜湖的产业链发展方向实现高度融合。<br></p>
<div>
<img width="240px" height="340px" src="D:\培训\自己做的作业\阶段一\day01\img\芜湖市委副书记、市*市长贺懋燮讲话.png"
alt="芜湖市委副书记、市*市长贺懋燮讲话"><br>
</div>
<div>
芜湖市委副书记、市*市长贺懋燮讲话
</div>
<p>李永新董事长谈到,此次与芜湖市达成战略合作,中公教育集团将把握发展机遇,融合现代教育理念,将质量和特色作为出发点，办好人民满意的教育。<br>
</p>
<div>
<img width="240px" height="340px" src="D:\培训\自己做的作业\阶段一\day01\img\中公教育李永新董事长讲话.png" alt="中公教育集团李永新董事长讲话"><br>
</div>
<div>
中公教育集团李永新董事长讲话
</div>
<p>
芜湖市投资促进中心主任、市商务局局长周浩,
芜湖市*驻京办主任吕美忠,芜湖市投资促进中心副主任夏磊,芜湖市教育局副局长周自强,芜湖县航空产业发展服务中心主任张文昌,芜湖市*办秘书-科副科长范玉龙,芜湖市投资促进中心经合科副科长李俊,芜湖县航空产业发展中心股长管志强,中公教育集团高管桂红植、胡雪、张璞、吕胜林及郑勇敢等也一同见证:了签约仪式。<br>
</p>
</body>
</html>
div>
芜湖市委副书记、市*市长贺懋燮讲话
李永新董事长谈到,此次与芜湖市达成战略合作,中公教育集团将把握发展机遇,融合现代教育理念,将质量和特色作为出发点，办好人民满意的教育。
中公教育集团李永新董事长讲话
芜湖市投资促进中心主任、市商务局局长周浩,
芜湖市*驻京办主任吕美忠,芜湖市投资促进中心副主任夏磊,芜湖市教育局副局长周自强,芜湖县航空产业发展服务中心主任张文昌,芜湖市*办秘书-科副科长范玉龙,芜湖市投资促进中心经合科副科长李俊,芜湖县航空产业发展中心股长管志强,中公教育集团高管桂红植、胡雪、张璞、吕胜林及郑勇敢等也一同见证:了签约仪式。
上一篇： 用命令行创建Django项目