文章目录
- 一、第一部分
- 1.1内容一
- Web前端导入
- 二、第二部分
- 2.1内容一
- HTML和CSS的定义
- 三、第三部分
- 3.1内容一
- 宇宙第一编译器Vs Code
- 3.2内容二
- 快捷键的使用
- 四、第四部分
- 4.1内容一
- Chrome浏览器
- 4.2内容一
- 五大浏览器
- 五大浏览器的介绍
- 五、第五部分
- 5.1内容一
- 深入了解网站开发
- 5.2内容二
- JV与HTML与CSS的关系
- 第六部分
- 6.1内容一
- web的三大核心技术
- 6.2内容二
- 结构,样式,行为
- 七、第七部分
- 7.1内容一
- HTML基本结构与属性
- 7.2内容二
- 创建标签的快捷键
- 7.3内容三
- HTML常见标签
- 标签写法
- 八、 第八部分
- 8.1内容一
- HTML的初始代码
- 九、第九部分
- 9.1内容一
- HTML的注释
- 9.2内容二
- 注释意义
- 9.3内容三
- 快捷键注释的添加与删除
- 十、第十部分
- 10.1内容一
- HTML语义化
- 10.2内容二
- 屏幕阅读器
- 十一、第十一部分
- 11.1内容一
- 标题与段落
- 11.2内容二
- 个人简介
- 十二、第十二部分
- 12.1内容一
- 文本修饰标签
- 十三、图片标签与图片属性
- 13.1内容一
- 图片标签
- 十四、第十四部分
- 14.1内容一
- 引入文件的地址路径
- 十五、第十五部分
- 15.1内容一
- 跳转链接
- 15.2内容二
- 跳转链接的练习
- 十六、第十六部分
- 16.1内容一
- 跳转锚点（本页内跳转）
- 十七、第十七部分
- 17.1内容一
- 特殊笔记
- 十八、第十八部分
- 18.1内容二
- 无序列表
- 18.2内容二
- 小练习
- 十九、第十九部分
- 19.1内容一
- 有序列表
- 19.2内容二
- 小练习
- 二十、第二十部分
- 20.1内容二
- 定义列表
- 20.2内容二
- 创建定义列表
提示：以下是本篇文章正文内容，下面案例可供参考
一、第一部分
1.1内容一
Web前端导入
1.拨云见日
基础入门：HTML、CSS
切图流程：传统切图、智能切图、公司里比较流行的一些切图方式等
实战阶段：PC企业站布局、PC游戏站布局
2.溯本求源
扩展知识点（细致、深入、一些新的内容）：扩展HTML、扩展CSS，
HTML5新语法（在浏览器中十分成熟，情况不错）CSS3新语法、兼容与hack（不同浏览器之间的一些兼容问题和一些解决方案）
3.风生水起
现在流行的布局：弹性布局、网格布局
移动端布局：流式布局、rem布局等
响应式布局 (如何用一套代码适应多种不同的设备）Bookstrap（基于响应式布局的框架，利用它快速搭建网页）
4.巧夺天工
工程方面：预编译CSS（Less和Css）postcss、CSS架构、高级功能、CSS与JS交互
二、第二部分
2.1内容一
HTML和CSS的定义
HTML：中文称为超文本标记语言，从语义上来说，它只是一种是一种标识性的语言，并不是一种编程语言。
CSS：Cascading Style Sheets，中文称为：层叠样式表或者级联样式表。它是一种负责页面样式的语言，也就是来修饰HTML（超文本标记语言）的。简单的来说也就是设定网页是以什么样子来表现的。HTML和它的区别在于，HTML只是用来编写网页的结构和内容，而它可以决定网页的表现样式。
三、第三部分
3.1内容一
宇宙第一编译器Vs Code
主要功能
该编辑器也集成了所有一款现代编辑器所应该具备的特性，包括语法高亮（syntax high lighting），可定制的热键绑定（customizable keyboard bindings），括号匹配（bracket matching）以及代码片段收集（snippets）。Somasegar也告诉笔者这款编辑器也拥有对Git的开箱即用的支持。
Visual Studio Code 提供了丰富的快捷键，用户可通过快捷键[Ctrl]+[K]+[S]（按住Ctrl键不放，再按字母K键和S键）调出快捷键面板，查看全部的快捷键定义。也可在面板中双击任一快捷键，为某项功能指定新的快捷键。一些预定义的常用快捷键包括：格式化文档（整理当前视图中的全部代码），[Shift]+[Alt]+[F]；格式化选定内容（整理当前视图中被选定部分代码），[Ctrl]+[K]+[F]；放大视图，[Ctrl]+[Shift]+[=]；缩小视图，[Ctrl]+[Shift]+[-]；打开新的外部终端（打开新的命令行提示符）：[Ctrl]+[Shift]+[C]。
该编辑器支持多种语言和文件格式的编写，截止2019年9月，已经支持了如下37种语言或文件
相关事件：
Visual Studio Code及其商标均为微软公司所有，并在《微软软件许可协议》下发布，为专有软件。而vscode(Code-OSS)为MIT许可证下的开源软件。前者在后者基础上经一定自定义构建操作得来。
3.2内容二
快捷键的使用
ctrl+s:保存
ctrl+a:全选
ctrl+x·ctrl+c·ctrl+v:剪切·复制·黏贴
ctrl+z·ctrl+y:撤销·前进
shift+end:从头选中一行
shift+home:从尾部选中一行
shift+alt+↓:快速复制一行
alt+↑或↓：快速移动一行
tab:向后缩进
tab+shift:向前缩进
多光标：alt+鼠标左键
ctrl+d:选择相同元素的下一行
四、第四部分
4.1内容一
Chrome浏览器
Google浏览器，Google Chrome，中国大陆官方译名：酷容浏览器（原网上叫做谷歌浏览器，官方给谷歌浏览器定名为酷容浏览器），台湾官方译名：Google Chrome，香港官方译名：Google浏览器，是一个由Google（谷歌）公司开发的开放原始码网页浏览器。该浏览器是基于其他开放原始码软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
4.2内容一
五大浏览器
什么是五大主流浏览器？
1.IE浏览器，2.Chrome浏览（谷歌浏览器），3.FirFox（火狐浏览器）4.Safari浏览器（苹果浏览器），5.Opera浏览器（欧朋浏览器）。
五大浏览器的介绍
IE浏览器：它是微软公司为对抗网景公司于1994年夏天开始研发的一款浏览器 ，但微软并没有时间从零开始，而是微软和Spyglass合作，于是IE从早期一款商业性的专利网页浏览器Spyglass Mosaic派生出来的，最好的版本是IE6。目前微软已经放弃IE品牌，在Windows10上用Microsoft Edge取代了IE。并且停止对IE11以前版本的技术支持。
Chrome浏览器：是一款由Google公司开发的网页浏览器，最开始Chrome采用webkit作为浏览器内核，直到2013年，Google宣布不再使用苹果的webkit内核，开始使用webkit的分支内核Blink。它的特点是简洁、快速。它有IOS,Android，Windows、Ponne等多个系统的浏览器。
FirFox浏览器：它由Mozilla基金会与数百个志愿者所开发的，原名“Phoenix”（凤凰），之后改名“Mozilla Firebird”（火鸟）再改为现在的名字Firefox。目前最新的正式版本为Firefox 53.0.2。Firefox采用Gecko作为内核。Gecko是一个开源的项目，代码完全公开，因此受到很多人的青睐。
火狐浏览器是可以自由定制的，一般电脑技术爱好者都喜欢用。它的插件又是世界上最丰富的，这点得到了网友公认。下载来的火狐一般是纯净版，功能比较少，要根据自己的喜好进行定制！最后，Firefox的问世加快了第二次浏览器大战的开始。也自此打破了IE浏览器从98年网景被收购后独步浏览器市场的局面。
Safari浏览器：是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。第二次浏览器大战也是从苹果公司发布Safari浏览器开始的，2003年苹果公司在手机上发布Safari浏览器，苹果公司利用其得天独厚的手机市场份额使Safari浏览器成为世界主流浏览器，Saf
五、第五部分
5.1内容一
深入了解网站开发
UI设计师：设计稿
web前端开发工程师（H5开发）
设计稿–>代码
数据库里的数据–>显示到页面
HTML:结构
CSS：样式
web后端开发工程师
5.2内容二
JV与HTML与CSS的关系
HTML用于控制网页的结构，
CSS用于控制网页的外观，
JavaScript控制的是网页的
第六部分
6.1内容一
web的三大核心技术
HTML:结构
CSS:样式
Javescript:行为
6.2内容二
结构,样式,行为
<style></style>
<div></div>
<script></script>
七、第七部分
7.1内容一
HTML基本结构与属性
超文本：文本内容+非文本内容（图片、视频、音频等）
标记：<单词>
单标签：<header>
双标签：<header></header>
语言：编程语言
7.2内容二
创建标签的快捷键
单词+tab–><单词>
7.3内容三
HTML常见标签
标签写法
<标签 属性=“值” 属性2=“值”>
八、 第八部分
8.1内容一
HTML的初始代码
!+tab创建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></body>
</html>
九、第九部分
9.1内容一
HTML的注释
<!--注释的内容-->
9.2内容二
注释意义
1.把暂时不用的代码注释起来方便使用
2.对开发人员进行显示
9.3内容三
快捷键注释的添加与删除
1.ctrl+/
2.shift+alt+a
十、第十部分
10.1内容一
HTML语义化
1.在没有CSS的情况下，页面也能呈现出很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析(如屏幕阅读器、盲人阅读器等)。
4.便于团队开发与维护。
10.2内容二
屏幕阅读器
屏幕阅读器（将H50vo.12.4拖拽网页书签栏，显示网页标题）
十一、第十一部分
11.1内容一
标题与段落
h标题–>双标签：<h1></h1>......<h6></h6>
(在一个网站中，只有一个h1标签,body中标题)
段落–>双标签：<p></p>
11.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>Document</title>
</head>
<body><h1>我的简介</h1><h2>个人技能(一）</h2><p>
熟练html语言,css技术开发；
熟练使用 Ajax,JavaScript,JQuery，easyui等；
熟练使用Javaee主要技术模块(Jsp/Servlet/JavaBean/jdbc等)技术的软件开发；
了解Activiti工作流；
熟悉Spring、SpringMVC、MyBatis等开源框架以及SSM框架的整合开发；
了解PL/SQL，存储过程；
熟练操作MySQL、Oracle数据库，熟悉SQL语句；
熟练使用Eclipse、MyEclipse等开发工具；
熟悉掌握Java编程思想，具有良好的编码设计规范习惯；<h2>个人技能（二）</h2><p>
熟练使用PHP脚本语言，LAMP架构，具备后台开发能力熟练使用Laravel、ThinkPHP
等框架，能再此基础上进行开发熟悉掌握MySQL相关操作熟悉掌握Linux系统进行基
本的操作和配置掌握HTML+CSS+JavaScript+Ajax技术设计前台页面了解Git等版本
控制器的基本命令和使用。</p>
</body>
</html>
十二、第十二部分
12.1内容一
文本修饰标签
强调–>双标签：<strong></strong>
加粗：<em></em>
下标：<sub><sub>
上标：<sup></sup>
a<sup>2</sup>+b<sup>2</sup>=c<sup></sup> H<sub>2</sub>0
删除：<del></del>
插入：<ins></sub>
<p>促销：原价<del>300</del>,现价<ins>100</ins>
</p>
<p>北京著名的高档百货店——<em>赛特购物中心</em>即将关闭。
<strong>如果手上有购物卡尽快到店里消费</strong>
</p>
十三、图片标签与图片属性
13.1内容一
图片标签
img–>单标签
src:引入图片的地址
alt:当图片出现问题，可以显示一段友好的提示文字
title:提示信息
width、height:图片大小
<img src=""C:\Users\86198\Desktop\屏幕截图(6).png"">
十四、第十四部分
14.1内容一
引入文件的地址路径
相对路径
.在路径中表示当前路径
…在路径中表示上一级路径
绝对路径
十五、第十五部分
15.1内容一
跳转链接
a–>双标签
href属性：链接的地址
target属性:可以改变链接打开方式。默认情况下：在当前页面打开
-self 新窗口打开-blank
给图片附上链接，代码如下（在当前页面）：
<a href="http://www.baidu.com">访问百度</a><a href="http://www.qfedu.com"></a><img src="./img/animal/dog.jpg" alt="">
<a href="http://www.baidu.com"target="_blank">访问百度</a>
base–>单标签：作用就是改变链接的默认行为（都可在新页面内打开）
<title>Document</title><base target="_blank">
</head>
<body><a href="http://www.baidu.com">访问百度</a><a href="http://www.baidu.com">访问百度</a><a href="http://www.baidu.com">访问百度</a>
</body>
</html>
15.2内容二
跳转链接的练习
分别建立一个首页、列表页、详情页
并让他们之间实现相互跳转
每个页面至少包含一张图片
图片在images文件内
列表和详情在html文件夹内，首页在根目录下
代码如下：
链接的综合测试
html
1.list.html
2.detail.html
images
1.png
2.png
3.png
index.html
<a href="./html/list.html">列表页</a><img src="./images/t011a1797c8886af308.jpg" alt=""> <a href="./detail.html">详情页</a><img src="../images/v2-3cac2e5b2a78d25aea7a631cee7306ad_r.jpg" alt="">
<a href="../index.html">返回首页</a><img src="../images/屏幕截图(2).png" alt="">
十六、第十六部分
16.1内容一
跳转锚点（本页内跳转）
#号
id属性
<a href="#html">HTML</a><a href="#css">CSS</a><a href="#Javascript">Javascript</a><h2 id="html"> HTML超文本标记语言</h2><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><h2 id="css">CSS层叠样式表</h2><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><h2 id="Javascript">JS脚本</h2><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p>
#号
name属性
<a href="#html">HTML</a><a href="#css">CSS</a><a href="#Javascript">Javascript</a><a name="html"></a><h2> HTML超文本标记语言</h2><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><a name="css"></a><h2>CSS层叠样式表</h2><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><a name="Javascript"></a><h2>JS脚本</h2><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p>
十七、第十七部分
17.1内容一
特殊笔记
&+字符
（避免冲突，加入多个空格）
十八、第十八部分
18.1内容二
无序列表
<ul><li>列表的最外层容器、列表项
type属性：改变前面标记的样式
| 值 | 描述 |
|---|---|
| dise | 默认值，实心圆 |
| circle | 空心圆 |
| square | 实心方块 |
18.2内容二
小练习
<ul><li><a href="#"><strong>啦啦操</strong></a></li><li><a href="#">啦啦操</a></li><li><a href="#">啦啦操</a></li><li><a href="#">奔驰</a></li></ul>
十九、第十九部分
19.1内容一
有序列表
<ol><li>
| 值 | 描述 |
|---|---|
| 1 | 默认值，数字有序列表（1、2、3、4） |
| a | 按字母顺序排列的有序列表，小写（a、b、c、d） |
| A | 按字母顺序排列有序列表，大写（A、B、C、D） |
| i | 罗马字母，小写（i,ii,iii,iv） |
| I | 罗马字母，大写（I,II,III,IV） |
19.2内容二
小练习
<ol><li><a href="#">都说</a></li><li><a href="#">我的啦啦操</a></li><li><a href="#">夜空中最亮的星</a></li></o<li>二十、第二十部分
20.1内容二
定义列表
<dl>:定义列表
<dt>:定义专业术语
<dd>：对名词进行解释和描述
20.2内容二
创建定义列表
<dl><dt>html</dt><dd>超文本标记语言</dd><dt>css</dt><dd>层叠样式表</dd><dt>Javascript</dt><dd>网页脚本语言</dd></dl>
