Web前端学习笔记（1）
文章目录
- 一、第一部分
-
- 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内容二
结构,样式,行为
七、第七部分
7.1内容一
HTML基本结构与属性
超文本：文本内容+非文本内容（图片、视频、音频等）
标记：<单词>
单标签：
双标签：
语言：编程语言
7.2内容二
创建标签的快捷键
单词+tab–><单词>
7.3内容三
HTML常见标签
标签写法
<标签 属性=“值” 属性2=“值”>
八、 第八部分
8.1内容一
HTML的初始代码
!+tab创建html原始代码
Document
九、第九部分
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标签,body中标题)
段落–>双标签：
11.2内容二
个人简介
Document
我的简介
个人技能(一）
熟练html语言,css技术开发；
熟练使用 Ajax,JavaScript,JQuery，easyui等；
熟练使用Javaee主要技术模块(Jsp/Servlet/JavaBean/jdbc等)技术的软件开发；
了解Activiti工作流；
熟悉Spring、SpringMVC、MyBatis等开源框架以及SSM框架的整合开发；
了解PL/SQL，存储过程；
熟练操作MySQL、Oracle数据库，熟悉SQL语句；
熟练使用Eclipse、MyEclipse等开发工具；
熟悉掌握Java编程思想，具有良好的编码设计规范习惯；
个人技能（二）
熟练使用PHP脚本语言，LAMP架构，具备后台开发能力熟练使用Laravel、ThinkPHP
等框架，能再此基础上进行开发熟悉掌握MySQL相关操作熟悉掌握Linux系统进行基
本的操作和配置掌握HTML+CSS+JavaScript+Ajax技术设计前台页面了解Git等版本
控制器的基本命令和使用。
十二、第十二部分
12.1内容一
文本修饰标签
强调–>双标签：
加粗：
下标：
上标：
a2+b2=c H20
删除：
插入：
促销：原价300,现价100
北京著名的高档百货店——赛特购物中心即将关闭。
如果手上有购物卡尽快到店里消费
十三、图片标签与图片属性
13.1内容一
图片标签
img–>单标签
src:引入图片的地址
alt:当图片出现问题，可以显示一段友好的提示文字
title:提示信息
width、height:图片大小
![]()
十四、第十四部分
14.1内容一
引入文件的地址路径
相对路径
.在路径中表示当前路径
…在路径中表示上一级路径
绝对路径
十五、第十五部分
15.1内容一
跳转链接
a–>双标签
href属性：链接的地址
target属性:可以改变链接打开方式。默认情况下：在当前页面打开
-self 新窗口打开-blank
给图片附上链接，代码如下（在当前页面）：
访问百度
访问百度
base–>单标签：作用就是改变链接的默认行为（都可在新页面内打开）
Document