第一次学习Web的总结

一、认识HTML CSS

1.1什么是HTML?

• HTML 指的是超文本标记语言 (Hyper Text Markup Language)。是制作超级文本文档的简单标记语言，可以从一个平台移植到另一个平台，通常用于制作网页。html文件是asci文本，包括格式标记和超级文本链的嵌入代码。
• HTMLtext是由 HTML命令组成的描述性文本，它能够描述文字，图形，动画，声音，表格，链接等。网页结构由标题和正文两部分组成。Header描述浏览器需要的信息，并且主体包含要描述的具体内容。
• Html是网页设计的基础。在网站结构中，静态网页被称为基于 HTML的网页。过去的网页都是直接用 HTML代码编写的，但现在有许多智能网页制作软件(经常使用的 frontpage、 dream weaver等)通常都是通过这些软件自动生成的，而不是手工编写。

1.2什么是CSS？

• CSS就是层叠样式表。

• CSS是Cascading Style Sheets的简称，中文称为层叠样式表。使用过程中属性和属性值用冒号隔开，以分号结尾。

• 本质上一种用来表现HTML或XML等文件样式的计算机语言，是可以做到网页和内容进行分离的样式语言。作用是：可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制；使页面的字体变得更漂亮，更容易编排。

• 使用范围：

1、在几乎所有的浏览器上都可以使用。

2、以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

3、使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

4、你可以轻松地控制页面的布局 。

5、你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

1.3如何看到网站的原始代码？

1. 任意打开一个网页，鼠标右击会看到“查看网页源代码”，这个网页的源代码就出现在你眼前了。
   
2. 为了方便快捷，可以使用快捷键Ctrl+U来查看源码，同样可以实现。
3. 也可以在你想要查看的网页地址栏前面加上入view-source:

view-source:https://chaoshi.jd.com

1.4HTML与CSS的关系

1. 标记符,说明该文件是用超文本标记语言（本标签的中文全称）来描述的,它是文件的开头;而,则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。

2. CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

3. CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

二、关于Visual Studio Code的基本认识

2.1什么是VScode?

• VSscode是一款由微软开发，同时支持windows、linux和macos操作系统的开放代码编辑器。vscode编辑器集成了所有一款现代编辑器所应该具备的特性，包括语法高亮、可定制的热键绑定、括号匹配、以及代码片段收集等。
• vscode是一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。
• 该编辑器也集成了所有一款现代编辑器所应该具备的特性，包括语法高亮（syntax high lighting），可定制的热键绑定（customizable keyboard bindings），括号匹配（bracket matching）以及代码片段收集（snippets）。Somasegar 也告诉笔者这款编辑器也拥有对 Git 的开箱即用的支持。

2.2VScode的优点

1. 轻量级

vscode是一款轻量级的编辑器，安装包小，且启动速度快，可以提高用户体验。

2. 插件丰富

vscode拥有丰富的插件系统，可以编辑HTML、CSS、JS、TS、Vue、React等前端代码和JAVA、Python等后端代码。

3. 具有代码跟踪功能

vscode可以对代码进行标注，可以查看更改了那些文件，文件中修改了第几行的代码等。

购买使用亿速云服务器，可以极大降低初创企业、中小企业以及个人开发者等用户群体的整体IT使用成本，无需亲自搭建基础设施、简化了运维和管理的日常工作量，使用户能够更专注于自身的业务发展和创新。

2.3VScode中的快捷键

Ctel+s=保存     Ctrl+a=全选     Ctrl+x=剪切     Ctrl+c=复制     Ctrl+v=粘贴
Ctrl=z=撤销     Ctrl+y=复原     Ctrl+滚轮=放大缩小     Ctrl+0=大小复原     Ctrl+d=选择
Shift+end=从头部选中一行     Shift+home=从尾部选中一行
Shift+ait+↓=快速向下复制一行     alt+↑/↓=快速向上/向下移动
tab=向后缩进     tab+Shift=向前缩进
alt+鼠标左键=多光标
Ctrl+d=选择相同元素的下一个             

三、五大浏览器

3.1IE浏览器

• 
• ternet Explorer（简称：IE）是微软公司推出的一款网页浏览器。原称Microsoft Internet Explorer（6版本以前）和Windows Internet Explorer（7、8、9、10、11版本）。在IE7以前，中文直译为“网络探路者”，但在IE7以后官方便直接俗称"IE浏览器"。
• 2015年3月微软确认将放弃IE品牌。转而在Windows 10上，用Microsoft Edge取代了Internet Explorer 。2016年1月12日，微软公司宣布于这一天停止对Internet Explorer 8/9/10三个版本的技术支持，用户将不会再收到任何来自微软官方的IE安全更新；作为替代方案，微软建议用户升级到IE 11或者改用Microsoft Edge浏览器 。
• 2022年6月15日21:00，微软停止支持Internet Explorer。浏览器的最新可用版本IE 11，转而只提供其当前的浏览器Microsoft Edge。
• 主要特色

1. 组件对象模型
   组件对象模型（COM）技术在Internet Explorer里被广为使用。它允许第三方厂商通过浏览器帮助对象 (BHO)添加功能；并且允许网站通过ActiveX提供丰富的内容。由于这些对象能拥有与浏览器本身一样的权限（在某种情形之下），对于安全就有很大的担心。最新版的Internet Explorer提供了一个加载项管理器以控制ActiveX控件和浏览器帮助对象，以及一个“无加载项”版本（在所有程序/附件/系统工具之下）。 [15]
2. 安全架构
   Internet Explorer使用一个基于区域的安全架构，意思是说网站按特写的条件组织在一起。它允许对大量的功能进行限制，也允许只对指定功能进行限制。 [16]
   对浏览器的补丁和更新通过Windows更新服务以及自动更新定期发布以供使用。
   最新版的Internet Explorer提供了一个下载监视器和安装监视器，允许用户分两步选择是否下载和安装可执行程序。这可以防止恶意软件被安装。用Internet Explorer下载的可执行文件被操作系统标为潜在的不安全因素，每次都会要求用户确认他们是否想执行该程序，直到用户确认该文件为“安全”为止。
3. 群组原则
   Internet Explorer可通过组策略进行完全配置。Windows服务器域管理员可以应用并强制一系列设定以改变用户界面（例如禁止某些菜单项和独立的配置选项），以及限制安全功能（例如下载文件），零配置，按站点设置，ActiveX控件行为，等等。策略设置可以按每用户和每机器为基础进行设置。 [17]
4. 网页标准
   Internet Explorer使用了Trident排版引擎，几乎完整支持HTML 4.01，CSS Level 1、XML 1.0和DOM Level 1，只是有一些排版错误。它亦部分支持CSS Level 2 和DOM Level 2。它自带的XML解释器支持XHTML，但是微软从IE 5.0以后取消了这一支持，使它变得难以访问。如其它浏览器一样，当MIME类型标识为“text/html”，它能解释为XHTML。当MIME类型标识为“application/xml”和“text/xml”时，它也能解释把XHTML解释为XML，但需要一个小的XSLT度量来重新启用XML对XHTML的支持。当把它定义为偏好类型如“application/xhtml+xml”时，它假装不理解XHTML，相反把它当成一种不了解的供下载的文件类型来对待。
   Internet Explorer依靠DOCTYPE判断一个网页应该按老版本渲染还是按W3C标准渲染。根据MSXML的版本不同，它可以完全支持XSLT1.0或1998年12月的XSL草案。Internet Explorer有一个自己的ECMAScript变体，名为JScript。 [15]
5. 延展元件
   Internet Explorer引进了一系列专利的网页标准延伸，包括HTML、CSS和DOM。这令到一些网站只可被Internet Explorer正常显示。 [15]
6. 相关插件
   HttpWatch是一款常用的抓包工具，它与Internet Explorer有着良好的兼容性，所以通常把HttpWatch安装在Internet Explorer上。 [15]

3.2Firefox浏览器

• 
• 其使用Gecko排版引擎，支持多种操作系统，如Windows、macOS及GNU/Linux等。Firefox有两个升级渠道：快速发布版和延长支持版（ESR）。快速发布版每四周发布一个主要版本，此四周期间会有修复崩溃和安全隐患的小版本。延长支持版每42周发布一个主要版本，期间至少每四周才有修复崩溃、安全隐患和政策更新相关的小版本。由于该浏览器开放了源代码，因此还有一些第三方编译版供使用，如pcxFirefox、苍月浏览器、tete009等。
• 英国防病毒公司Sophos在2015年的调查数据显示，Firefox连续三年成为互联网用户最受信赖的浏览器。
• Mozilla Firefox正式版各版本可到Mozilla官方FTP站下载。
• 主要特色
  irefox的开发目标是“尽情地上网浏览”和“对多数人来说最棒的上网体验”。
  网络标准

1. Firefox支持非常多的网络标准，如标准通用标记语言下的子集HTML和XML、XHTML、SVG 1.1（部分的）、CSS（除了标准之外，还有扩充的支持）、ECMAScript（JavaScript）、DOM、MathML、DTD、XSLT、XPath和PNG图像文件（包含透明度支持）。
   在Firefox 3.0 Alpha 2时通过Acid2测试和Acid3 71/100项测试，Firefox 3.1的版本可通过Acid3 93/100项测试，Firefox 3.6达到Acid3 94/100的标准，到Firefox 7.0版本更已达到Acid3 100/100满分标准。
2. 隐私保护
   实时站点 ID 检查 ：通过不同颜色提醒，实时检查网站 ID，排查恶意网站。
   安全浏览系统：Firefox 内建了基于 Google Safe Browsing 的安全浏览系统，能帮助您远离恶意网站和钓鱼网站的威胁。
   与本地杀毒软件整合：当您进行下载时，Firefox 能与本地杀毒软件无缝整合，下载完成后自动调用本地杀毒软件进行查杀。
   插件检查：第三方插件是火狐主要的安全隐患，火狐提供简单的插件检查机制，以便发现含有危险的过期插件，提醒用户升级。
   请勿跟踪：许多网站跟踪您的上网行为并将这些数据出售给广告商。Firefox 让您告诉网站不希望您的行为受到跟踪。
   隐私浏览：有时候，需要上网彻底不留痕迹。那么隐私浏览会非常适合您，这个功能将完全保护隐私，不会在本地留下任何个人数据。
   清除当前历史：简单点击几下，就能清除个人数据或者浏览历史。
3. 个性化
   选择外观：主题
   用户可以从几万个出自全世界不同国家设计师设计的火狐皮肤主题中挑选适合的主题，也可以自己动手制作主题。
4. 自定义：附加组件
   用户可以通过安装附加组件来新增或修改Firefox的功能。附加组件的种类包罗万象：像鼠标手势、广告拦截、加强的标签页浏览等等。用户可以从Mozilla官方维护的附加组件官方网站下载，或是从其他的第三方开发者处取得。
5. 插件更新检查
   插件是由类似 Adobe Systems 或者 Apple 这些公司制作的第三方软件，用来播放视频、实现动画或者制作游戏（例如 Flash Player 或者 Quicktime）。它们可能导致浏览器的崩溃或者在一段时间后被发现安全漏洞，所以火狐开发了一个简单的工具来确保用户使用的插件是最新版。
6. 调整您的界面
   可以把界面调整到符合您的喜好：按您的想法重排、组织、添加或删除按钮，从而改善浏览体验。
   保持同步
   通过火狐同步功能，您可以实现电脑和移动设备的火狐之间的无缝同步，包括您的浏览历史、密码、书签、和打开的标签页等。累积多年的桌面浏览器上的访问数据，即刻同步到您的手机上，也可以共用桌面版浏览时保存的密码，省去了在手机上输入的麻烦。
   您可以随时终止在电脑上的上网冲浪，将当前打开的标签页同步到手机或 pad 的火狐中，这样即便离开了当前使用的电脑，也可以毫无改变的继续当前浏览。
7. 出色性能
   更快的上网速度
   更快的启动速度，高速的图形渲染引擎，更加增进的页面加载速度，使用最新版 Firefox 你会立刻感受到性能上的显著提升。
   网页应用，比如电子邮件、视频、游戏，让网络变得更有魅力，但要更加流畅的运行它们，也对浏览器的处理能力提出了更高的要求。为了满足这些与日俱增的复杂需求，从 Firefox 4 开始，采用了改进的 JavaScript 引擎 —— JägerMonkey。
8. 硬件加速
   无论您是在 Windows 7，Vista，XP 或 Mac OS X 上使用 Firefox，您都会在进行观看视频、玩网络游戏等多种操作的同时享受到硬件加速支持。
9. 全球通用
   支持 Web 字体
   支持多语言
   改进的文字渲染
   无障碍访问
   自定义全球化
10. 智能地址栏
    快速寻找您喜欢的站点的方法──即便是那些您不太记得地址的站点。在地址栏中输入一些词语，自动补全的功能会马上开启并提供一系列从您的浏览历史中提取出来的匹配的站点，同样也包括您曾经加入书签和使用标记的站点。
    智能地址栏（Awesomebar）会根据您的使用来自动学习。随着时间的推移，他逐渐会适应您的首选项并提供最合适的结果。您还可以对智能地址栏拥有更多的控制能力，包括隐私设定等。

3.3Chrome浏览器

• 
• Google Chrome是一款由Google公司开发的网页浏览器，该浏览器基于其他开源软件撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
• 软件的名称来自称作Chrome的网络浏览器GUI（图形使用者界面）。软件的beta测试版本在2008年9月2日发布，提供50种语言版本，有Microsoft Windows、macOS、Linux、Android、以及iOS版本提供下载。 谷歌将在Chrome上推出“小程序”增强型网页应用（Progressive Web Apps，简称 PWA）。 2018年11月，Google宣布，将从2018年12月份开始在其Chrome 71网络浏览器上移除持续提供滥用使用体验的网站上的所有广告。
• 受2020年新型冠状病毒疫情影响，谷歌于2020年3月暂停向Chrome浏览器系统增加新功能，以保证软件尽可能平稳运行。
• 2022年2月7日讯，Google 再次修改 Chrome 浏览器图标。
• 主要特点

1. 不易崩溃
   Chrome最大的亮点就是其多进程架构，保护浏览器不会因恶意网页和应用软件而崩溃。每个标签、窗口和插件都在各自的环境中运行，因此一个站点出了问题不会影响打开其它站点。通过将每个站点和应用软件限制在一个封闭的环境中这种架构，这进一步提高了系统的安全性。
   速度快
2. 使用WebKit引擎。WebKit简易小巧，并能有效率的运用存储器，对新开发者来说相当容易上手。Chrome具有DNS预先截取功能。当浏览网页时，“Google Chrome”可查询或预先截取网页上所有链接的IP地址。目标网页。Chrome具有GPU硬件加速：当激活GPU硬件加速时，使用“Google Chrome”浏览那些含有大量图片之网站时可以更快渲染完成并使页面滚动时不会出现图像破裂的问题。
   32013年4月份，Google宣布称将为Chrome浏览器开发新的自主浏览器引擎Blink，在最新的Chrome开发版本中，Blink已经正式现身。
3. 几乎隐身
   说Chrome的界面简洁不足以说明其简洁程度。Chrome几乎不像是一款应用软件，屏幕的绝大多数空间都被用于显示用户访问的站点，屏幕上不会显示Chrome的按钮和标志。Chrome的设计人员表示，他们希望用户忘记自己在使用一款浏览器软件，他们的目标基本上实现了。
4. 搜索简单
   Chrome的标志性功能之一是Omnibox－－位于浏览器顶部的一款通用工具条。用户可 以在Omnibox中输入网站地址或搜索关键字，或者同时输入这两者，Chrome会自动执行用户希望的操作。Omnibox能够了解用户的偏好，例如， 如果一名用户喜欢使用PCWorld网站的搜索功能，一旦用户访问该站点，Chrome会记得PCWorld网站有自己的搜索框，并让用户选择是 否使用该站点的搜索功能。如果用户选择使用PCWorld网站的搜索功能，系统将自动执行搜索操作。
5. 标签灵活
   Chrome为标签式浏览提供了新功能。用户可以“抓住”一个标签，并将它拖放到单独的窗口中。用户可以在一个窗口中整合多个标签。Chrome在启动时可以使用用户喜欢的某个标签的配置，其它浏览器需要第三方插件才能够提供这一功能。
6. 更加安全
   黑名单（Blacklists）：“Google Chrome”会定期地更新防止网络钓鱼和恶意软件的黑名单，并在用户试图浏览可能造成电脑损害的网站时予以警告。这项服务也可通过使用其他的免费自由应用程序接口（API）“GoogleSafe Browsing API” 来取得。在更新维护这些黑名单的同时，Google也会通知被列入的网站，以避免网站持有者本身不知道网站存有恶意软件。
   沙箱（Sandboxing）：“Google Chrome”中的每一个标签页都是一个沙箱（sandbox），以防止“恶意软件破坏用户系统”或“利用标签页影响其他标签页”。遵守最小权限原则，每个动作的权限都会被限制，仅能运算而无法写入文件和从敏感区域读取文件（如我的文档、桌面）。沙盒小组（Sandbox Team）是一种表示他们“使用了现有的运行程序限制，并让这些限制变成一座监狱”，例如在其中一个标签页运作的恶意软件，将无法窃取信用卡号码、干扰鼠标运作，或告诉系统在启动时运行某个程序，并且恶意软件会在标签页关闭时立即中止。
   插件（Plugins）：插件通常并没有统一的标准，且无法像标签页般沙盒化。这些通常需要运行在浏览器本身的安全等级或更高的等级。为了降低被攻击的风险，插件是独立运行的。从5.0版本起，“Google Chrome”内置Adobe Flash Player以确保使用的为最新版本降低被攻击的风险。其后在9.0版本将Flash播放器内置在沙盒中独立运行。这项技术是Chrome安全性进步的一座里程碑。对Windows XP用户特别重要，因为它是平台上唯一提供Flash嵌入沙盒运行的浏览器。从8.0版本起，“Google Chrome”内置在沙盒中独立运行的PDF阅读器。
   多进程（Multiprocessing）：能容许多个程序同时运行而互不影响，每个网页标签独立于窗口程序存在，当资源过高或崩溃时，不会因为一个停顿而整个程序当掉。
   任务管理器（Task Manager）：非常有特色的工具，用户可以查看哪些网站占用了最多的内存、下载流量和CPU资源，有利于管理各个标签页与插件，也便于用户终止恶意操作。
   诈骗和恶意程序保护：当“Google Chrome”侦测到浏览网站可能有害时，便会发出实时警告。浏览器会将造访网址的一部分传送给Google，以了解该网址是否列在诈骗与恶意网站清单中。(网络钓鱼及恶意软件的侦测功能)。
   自动更新（Auto-updates）：为确保受到最新版安全性更新的保护，“Google Chrome”会定期检查更新，以确保更新永远为最新版本。更新检查可确保会使用最新版的安全性功能与修正程序，浏览器自动更新新的版本，不需要用户采取任何动作，更新后会在下一次启动中自动使用。

3.4Safari浏览器

• 
• Safari是一款由苹果公司开发的网页浏览器，是各类苹果设备（如Mac、iPhone、iPad、iPod Touch）的默认浏览器。Safari使用WebKit浏览器引擎。
• Safari，作为苹果计算机的操作系统macOS中的浏览器，它用来取代之前的Internet Explorer for Mac。Safari 以惊人速度渲染网页。与Mac及iPod touch、iPhone、iPad兼容。让最爱网站一目了然。聪明的它还会检查拼写和语法。
• 2022年5月，苹果在一项联合计划中宣布，将致力于在未来一年，在其控制的所有移动、桌面和浏览器平台上打造无密码登录系统
• 主要特点

1. 苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 使用Webkit引擎，包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器在国内还是很安全的。
2. 限于macOS的使用不广泛和Safari浏览器曾经只是macOS的专属浏览器，这个内核本身应该说市场范围并不大；但似乎根据最新的浏览器调查表明，该浏览器的市场甚至已经超过了Opera的Presto了——当然这一方面得益于苹果转到x86架构之后的人气暴涨，另外也是因为Safari 3终于推出了Windows版的缘故吧。Mac下还有OmniWeb、Shiira等人气很高的浏览器。
3. google的chrome也使用webkit作为内核。　WebKit 内核在手机上的应用也十分广泛，例如 Google 的手机Gphone、 Apple 的 iPhone， Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。
4. Safari浏览器可以使用“接力”功能，使用同一个Apple ID的两台设备，可以互相连通浏览信息，例如，iPhone上浏览一个网页，Mac的程序坞最左侧即可显示，点击即可在Mac上继续浏览该网页。
   系统对比编辑

3.5Oprea浏览器

• 
• Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器，是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。Opera浏览器创始于1995年4月。2019.1.31日最新版本58.0(58.0.3135.53)。
• 2016年2月确定被奇虎360和昆仑万维收购。 2018年6月29日，Opera向SEC提交了上市申请。
• 主要特点：

1. Opera浏览器因为它的快速、小巧和比其他浏览器更佳的标准兼容性获得了国际上的最终用户和业界媒体的承认，并在网上受到很多人的推崇。OperaSoftware开发的Opera浏览器是一款适用于各种平台、操作系统和嵌入式网络产品的高品质、多平台产品，opera浏览器不同于其他浏览器的特点有：
2. Opera支持多种操作系统，如Windows、Linux、Mac、FreeBSD、Solaris、BeOS、OS/2、QNX等，此外，Opera还有手机用的版本，如在WindowsMobile和Android手机上安装的OperaMobile和在JAVA上的OperaMini，早在2006年更与Nintendo签下合约，提供NDS及Wii游乐器Opera浏览器软件；也支持多语言，包括简体中文和繁体中文。
3. Opera还提供很多方便的特性，包括网络同步，Wand密码管理、会话管理、鼠标手势、键盘快捷键、内置搜索引擎、智能弹出式广告拦截、网址的过滤、浏览器识别伪装和超过400种，可以方便下载更换的皮肤，界面也可以在定制模式下通过拖放随意更改。下载一个大约10M的扩展以后，它甚至可以让你用语音控制以及阅读网页（英文）。而以上的这些，包括右键菜单都是可以由用户自定义的。
4. Opera支持包括SSL2/3以及TLS在内的各种安全协议，支持256位加密，可以抵御恶意代码攻击、钓鱼攻击等网络攻击。而其网页渲染速度也可能是当今速度最快的。它支持W3C标准，此外它还可以作者模式和用户模式让有经验的使用者控制浏览网页的结构和字体等。

四、深入了解网站开发

4.1 UI设计师

• “UI”的本义是用户界面，是英文User和interface的缩写。UI设计师简称UID（User Interface Designer），指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。
  UI设计师的涉及范围包括高级网页设计、移动应用界面设计，是中国信息产业中最为抢手的人才之一
• UI表面上看是用户与界面两个组成部分，但实际上还包括用户与界面之间的交互关系。具体还包括：可用性分析、GUI（Graphic User Interface即图形用户界面）设计、用户测试等。好的UI设计不只是让软件变得有个性有品味而已，更重要的是让软件的操作变得舒适、简单、易用，并且充分体现软件的定位和特点。

4.2 Web前端开发工程师

• Web前端开发工程师，是从事Web前端开发工作的工程师。主要进行网站的开发、优化、完善的工作。网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
• 一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。现在说的重点不在于讲解技术，而是更侧重于对技巧的讲解。技术非黑即白，只有对和错，而技巧则见仁见智。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后端开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。

4.3Web后端开发师

• 负责小程序前端修改和优化升级，根据网站业务需要开发和程序修改。
• 负责网站日常运行的技术维护工作，对出现的问题积极有效的进行处理；
• 用html5，css3及JavaScript,vue或uniapp完成页面制作，对完成的页面进行维护和对网站前端性能做相应优化；
• 丰富互联网的Web开发，改善用户体验；
  +进行相关数据处理、查询，统计和分析工作。

五、HTML基本结构和属性

5.1超文本

• 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

5.2语言

• HTML是一种超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

5.3标记（标签）

• HTML标签分为三种，行内标签、块状标签和行内块状标签。使用display属性转换
• 块级标签：
  块状标签：标签独占一行，可指定宽、高。
  特性：
  能够识别宽高
  margin和padding的上下左右均对其有效
  可以自动换行
  多个块状元素标签写在一起，默认排列方式为从上至下
  可以使用margin:0 auto居中对齐
• 内联标签：
  内联(行级)标签：标签在一行内，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行。
  特性：
  无法设置宽高
  margin上下无效，只有左右有效果，padding都有效果，会撑大空间；box-sizing:border-box;无效，因为该属性针对盒模型。
  不会自动换行
• 内联块状标签：
  内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，、标签就是这种内联块状标签。
• 特性：
  不会自动换行
  能够设置宽高
  默认排列方式为从左到右
  可以使用text-align:center使内容相对于父盒子水平居中对齐，例如img标签，可以使用text-align:center，相对父盒子居中对齐、margin:0 auto无效
  水平排列，但所有元素默认会有1个空格的间隙，因为元素之间在html中书写有回车换行，浏览器解析会将其解析成一个空格。
• HTML标签类型是可以转换的：
  display:inline;转换为行内元素
  display:linline-block;转换为行内块元素
  display:block;转换为块级元素

六、初始代码

• 每个.html文件都有的代码叫做初始代码，要符合.html文件的规范写法。

DOCTYPE html>【文档声明：告诉浏览器这是一个html文件】
<html lang ="en">【html文件的最外层标签：包裹着所有html标签代码】【lang="en"表示一个英文网站，lang="zh-cn"表示一个中文网站】
<head>
           
           <meat http-equiv="X-UA-Compatible"content="ie=dage">
           <title>Documenttitle>【设置网页的标题】
head>
<body>
【显示网页内容的区域】
body>
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>Documenttitle>
head>
<body>
    
body>
html>

• 意义

1. 把暂时不用的带代码注释起来，为方便以后使用
2. 对开发人员进行提示

• 快捷添加注释与删除注释

3. Ctrl + /
4. shift + ait + a

八、HTML语义化

8.1概念及好处

• 根据网页中内容的结构选择合适的HTML标签进行编写
• 好处

1. 在没有CSS的情况下，页面也能呈现出很好的内容结构。
2. 有利于SEO，让搜索引擎爬虫呈现出更好的理解网页。
3. 方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
4. 便于团队的开发与维护。

8.2标题与段落

• 标题（双标签）

<h1>h1>...<h6>h6>

• 例如

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>Documenttitle>
head>
<body>
  <h1>这是一个大标题有且只能有一个h1>
  <h2>这是一个二级标题h2>
body>
html>

• 段落（双标签）

<p1>p1>...

• 例如

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>Documenttitle>
head>
<body>
 <p>这是一个段落p>
body>
html>

• 在网页中h1标题最重要，并且一个.html文件中只能出现一次h1标签 h5，h6不经常使用

8.3文本修饰标签

<strong>strong>

表示强调，会对文本进行加粗，是双标签

• 例如

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>Documenttitle>
head>
<body>
<strong>加粗字strong>
body>
html>

<em>em>

表示强调，会对文字进行斜体

• 例如

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>Documenttitle>
head>
<body>
<em>斜体字em>
body>
html>

• 区别

1. 写法和展示效果是有区别的，一个加粗一个斜体
2. strong强调性更强，em的强调性稍弱

8.4上下标文本标签 删除插入文本

<sub>sub> <suo>sup>:下标文本，上标文本

<del>del> <ins>ins>:删除文本，插入文本

• 例如

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>Documenttitle>
head>
<body>
    H<sub>2sub>O 
    a<sup>2sup>
body>
html>

注： 一般情况下，删除文本和插入文本配合使用

8.5图片标签与图签属性

<img>:图片 （单标签）

• 例如

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>Documenttitle>
head>
<body>
    <img src="https://img-blog.csdnimg.cn/img_convert/087304fd8160f5fa6e3f76a16e4379a9.jpeg">
body>
html>

• 图片路径：绝对路径，相对路径

  • 绝对路径：绝对路径是指文件在硬盘上真正存在的路径。

    • 例如"bg.jpg"这个图片是存放在硬盘的“E:lbook\网页布局代码\第2章"目录下，那么“bg jpg"这个图片的绝对路径就是"E:\book\网页布\代码\第2章\bg.jpg"。
    • 注意:绝对路径在实际的开发过程中很少去使用，如果使用“E:\book\l网页布\代码第2章\bg.jpg"来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用\或/字符作为目录的分隔字符

  • 相对路径：相对路径就是相对于目标文件位置。

    • 当当前文件与目标文件在同一目录下，直接书写目标文件的文件名和扩展名。
• 属性：
  src：引入图片的地址
  ait：当图片出现问题的时候，可以显示一段友好的提示文字
  title：提示信息
  width,height:图片的大小（设置好后在网速较慢的时候会优先显示框架）

8.6跳转标签

<a>a>:跳转标签

• 例如

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>Documenttitle>
head>
<body>
      <a href="http://baidu.com/">百度a>
body>
html>

• 属性：
  href：链接地址
  title：鼠标悬停上去之后的提示信息
  target：可以改变连接打开方式
  分为：
  1. 当前窗口打开_self
  2. 新窗口打开_blank

<base>单标签（写<head>中）

作用：改变连接的默认行为

• 默认情况下新窗口为_self

8.7跳转锚点

• 实现一

#号+id属性 在标签加

• 实现二

#号＋name属性 在标签上一行加< a >标签里并更改< a >为< a name " ">< / a >

8.8换行，水平线标签

<br/>

• 它是一个单表签，直接以斜杠结尾

<hr/>

• 它是一个单表签，直接以斜杠结尾
• 属性：color , width ,height ,align ,noshade(无阴影)

九、连续符号

符号	意义	书写方式
	空格符	；
©	版权符	©：
®	注册商标符	®：
<	小于号	<：
>	大于号	>：
&	和号	&：
¥	人民币	¥：
°	摄氏度	°；

十、列表

10.1无序列表

<ul>,<li>:列表的最外层容器，列表项

• 注ul和li必须是组合出现的，他们之间是不能有其他标签的
• 属性：
  type：改变前面标记的样式

语法：<ul type="   " >

• disc：默认值，实心圆
• circle：空心圆
• square: 实心方块
  等等

10.2有序列表

<ol><li>:列表的最外层容器，列表器

• 注：有序列表用的非常少，经常使用的是无序列表、无序列表可以去代替有序列表
  type：改变前面标记的样式
  有序type属性 输入 1，A，Ⅰ，a, i

10.3定义列表

<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述

• 列表项目需要添加标题进行描述的内容；
• 与
  混用可以输出图文混排，
  放图片
  书写文字。