1.网站HTML篇
无论是在什么生态中进行开发 , 我们必须必须学习的基础语言之一就是HTML结构语言.
1）站点的创建
创建一个站点，通常有img文件夹，css文件夹，js文件夹，html文件夹；和一个页面文件：index.html文件。
2）快速创建页面结构
快捷键:shift+!+tab
快捷键：html:5
3）结构注释语句
快捷键：ctrl+?
4）标签的含义
HTML标签，也称之为元素，也称之为记号。三个名字意思相同
5）标签的基本语法
单标签
基本语法：<标签名字 属性="属性值" 属性="属性值" 属性="属性值">
双标签
基本语法：<标签名字 属性="属性值" 属性="属性值" 属性="属性值" ></标签名字>
6）标签的特点
1) 所有的标签都需要使用尖角号
2) 单标签只有开始没有结束, 双标签有开始有结束
3) 属性和属性值放在开始位置处
4) 属性和标签名字之间必须带空格
5) 属性和属性值之间使用等号链接
6) 属性值需要带引号
7) 每一组属性和属性值之间需要带空格
8) 标签可以带一个属性也可以带多个属性甚至一个都不带
7）常见的单标签
1) 图像标签
<!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>
<!-- 单标签 img 和图片相关 src属性 这个属性的属性值是一个路径-->
<!--
路径: 相对路径和绝对路径
相对路径：相对的是当前页面01_img.html 同级目录 img/716.jpg ./img/716.jpg
绝对路径：跟当前页面没有关系，直接访问的一个文件 根目录里面找 / 网络路径 一个完整的网络路径
-->
<img src="img/716.jpg" />
<img src="./img/716.jpg" />
<img src="/course01-html/img/716.jpg" />
<img
src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msG11.img"
/>
</body>
</html>运行得：
2) 换行标签
<!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>
<!-- 单标签 <br/> 空格 空格键（只能一个空格） -->
<!-- 如果空格的大小是一个字符的宽度，可以考虑使用全角-->
千锋郑州鸿蒙生态开发2403班开幕典礼<br />千锋郑州鸿蒙生态开发2403班开幕典礼 千锋郑州鸿蒙生态开发2403班开幕典礼<br />
用户名:<br />
密 码:
</body>
</html>运行得：
3) 水平线标签
<!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>
<!-- 单标签 hr 水平分割线-->
这是一块内容
<hr color="red" width="100px" align="left" />
这是另一块内容
</body>
</html>（其中align会报红，这是不推荐的意思，并非错误）
运行得：
4) input输入框标签
<!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>
<!-- 单标签 input 输入框（文本框）表单中一个常见的标签 -->
<!-- 不加type属性和加next一样-->
<input />
<!-- 文本框输入的文本能正常显示-->
<input type="text" />
<!-- 密码框输入的文本会以小圆点显示-->
<input type="password" />
</body>
</html>运行得：
8) 常见的双标签
1) 加粗标签
<!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>
<!-- 双标签 strong 强调-->
千锋教育的企业价值观是：<strong>初心至善，匠心育人</strong>
<!-- 双标签 b 加粗-->
<b>千锋教育</b>的企业价值观是：<strong>初心至善，匠心育人</strong>
</body>
</html>运行得：
2) 倾斜标签，下划线标签，删除线
<!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>
<!-- 双标签 em 强调斜体-->
<em>被em标签包含的文本</em>会以斜体展示
<!-- 双标签 i 斜体-->
<i>被em标签包含的文本</i>会以斜体展示
<!--<div>
随便<span><em>写的一些文本</em> 随便写的一<strong>些文本 随便</strong>写的一些文本
随便写的一些文本 随便写的一些文本 随便写的一些文本</span>
</div>-->
<!-- 下划线 语义化ins 样式u-->
<ins>测试下划线</ins>这些文字没有下划线 <u>测试下划线</u>这些文字没有下划线
<!-- 删除线 语义化del 样式s-->
<del>这些文档已经不再重要或者是被删除的内容</del>后续有更新的内容替换
</body>
</html>运行得：
3) 角标标签
<!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>
<!-- 双标签 sup 上角标-->
<!-- m2 -->
m<sup>2</sup> 千锋教育©版权所有
千锋教育<sup>®</sup>
<!-- 双标签 sub 下角标-->
H<sub>2</sub>O
</body>
</html>运行得：
4）font标签
<!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>
<!-- 双标签 font 字体相关，目前用的不多-->
<font color="blue" size="4" face="楷体">通过属性对这段文字进行修饰</font>
</body>
</html>运行得：
5）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 普通的块级元素-->
<!-- 块级元素会独占一行-->
<!-- 行内元素会在同一行显示，除非到达了边界-->
<div>区块1</div>
<div>区块2</div>
<div>区块3</div>
</body>
</html>运行得：
6）p标签
<!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 段落 语义化标签 一pain文章中需要划分自然段，就在这段文本的外边报一个p-->
<h3>标题部分</h3>
<p>
对于我们绝大多数普通人，我们不太需要弄懂那些美学的专业知识，而且也极为难懂。我们只要懂得什么是美？如何欣赏美？如何发现美？也就足够了。而这正是朱光潜发表的一系列关于美学的科普文章的用意所在。他向广大的中国读者传递着最朴素的美学常识，这些文章被收录在一系列的美学散文集之中。
</p>
<p>
《谈美》是朱光潜对于青年美学普及的重要著作之一，它是继《给青年的12封信》之后最系统的关于美学常识的普及。而我今天拿到的这一本最新版的《谈美》，是对于朱光潜的几本美学科普著作《谈美》、《谈美书简》、《给青年的12封信》的汇编版。这让这本书的理论框架更清晰，也更系统。阅读这本书，我们可以完完全全的进入朱光潜的美学世界，接受他的美学教育。
</p>
</body>
</html>运行得：
7）span标签
<!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>
<!-- 双标签 span 普通行内元素-->
这是一行文本，这个名字<span>玉渊潭天</span>在这一行中显示
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>运行得：
作业展示
<!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>
<h3>前端组成的部分</h3>
<ul>
<li><font color="red">HTML-结构层</font></li>
<li><font color="green">CSS-样式层</font></li>
<li><font color="orange">JavaScript-行为交互层</font></li>
</ul>
<b>HTML</b><br />
是一种超文本标记语言，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言，是网页制作所必备的
<br /><b>CSS</b><br />
CSS英文全称为CasCading Style Sheet，几个单词产开翻译，Cascading有大量的意思，Style有风格样式的意思，Sheets有表格的意思，<ins>整合在一起中午以为“层叠样式表”。</ins>
<br /><b>JavaScript</b><br />
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的脚本动态语言，并且支持面向对象、命令式、声明式、函数式编程范式。<sup>[1]</sup>
</ul>
</body>
</html>运行得：
<!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>
<h4 align="center">将于第三季度上市 上汽斯柯达新款速派官图</h4>
<p>
日前，我们从官方获悉，上汽通用别克昂科拉GX内饰将于6月3日首次亮相。新车在2019上海车展期间首发，但国内并未开放，官方宣布其将于下半年上市。
<br />·教师资格语文备考·现代文阅读技巧<br />
·确定语素的方法
</p>
<img src="img/716.jpg" />
<img src="img/716-02.jpg" />
<img src="img/716-03.jpg" />
<img src="img/716-04.jpg" />
<br />1.不用砸锅卖铁也能开上X3 赶紧提一辆<br />
2.点点滴滴历历在目 长安CS55迟到的提车作业
<hr color="gray" />
<p align="center">互联网新闻信息服务许可证10120170001 | 增值电信业务经营许可证B1-20060139<br />
信息网络传播视听节目许可证0104065 | 广播电视节目制作经营许可证（广媒）字第127号
</p>
</body>
</html>运行得：
<!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>
<h3>有带颜色的诗句</h3>
<font color="green">绿</font>杨烟外晓寒轻，<font color="red">红</font>杏枝头春意闹<b>————宋宋祁《春意闹》</b><br />
一道残阳铺水中，半江瑟瑟半江<font color="red">红</font><b>————唐白居易《暮江吟》</b><br />
<font color="yellow">黄</font>梅时节家家雨，<font color="cyan">青</font>草池塘处处蛙<b>>————宋赵师秀《有约》</b><br />
一水护田将<font color="green">绿</font>绕，两山排闼送<font color="cyan">青</font>来<b>————宋王安石《书湖阴先生壁》</b><br />
日出江花<font color="red">红</font>胜火，春来江水<font color="green">绿</font>如<font color="blue">蓝</font><b>————唐白居易《忆江南》</b><br />
等闲识得东风面，万<font color="purple">紫</font>千<font color="red">红</font>总是春<b>————宋朱熹《春日》</b>
</body>
</html>运行得：
<!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>
<h3>手游排行榜</h3>
1.王者荣耀<br />
2.<ins>吃鸡战场</ins><br />
3.<b>英雄联盟</b><br />
4.<del>开心消消乐</del><br />
5.炉石传说<sup>No.1</sup><br />
<h3>王者荣耀人物介绍</h3>
<ul>
<li>【中路】<font color="red">王昭君</font>、<font color="green">小乔</font>、<font color="blue">司马懿</font></li>
<li>【上路】亚瑟、露娜、花木兰</li>
<li>【下路】伽罗、后裔、虞姬</li>
<li>【游走】李白、澜、阿珂</li>
<li>【辅助】瑶姬、桑启、蔡文姬</li>
</ul>
</body>
</html>运行得
