HTML第一天

1.什么是软件？
软件----计算机系统或手机运行起来程序【应用程序】，为我们的生活带来方便。
2.一个软件是由那些部分组成？
1.界面—提供操作
2.逻辑—功能
3.数据—信息
软件通过逻辑处理数据使用界面展示，让用户得到自己需要的信息。
数据—数据库—DB工程师
逻辑—后台操作
数据+逻辑=后台工程师
界面—前端开发
3.前端开发需要学习的内容？
前端开发主要完成与软件界面相关的开发。
1.按照要求制作出界面【切图/UI】
1.html基础 CSS基础 javascript基础----【基本的界面】
2.HTML5+CSS3 javascript高级-----------------【完整的界面】
2.与后台处理程序进行数据交互。
1.流行javascript框架，利用javascript框架完成数据交互
4.html基础
1.什么是HTML?
HTML 超文本标记语言,是一种用来描述网页的标记语言.
超文本—文本[文字性质的内容]—超越文本—【视频,音频,图片】
标记-----语言的基本表示符号【语言规定好的元素】—HTML元素
2.HTML的作用？
制作网页，将来可以充当软件的界面。
软件的界面界面不一定是网页，网页一定可以充当软件界面。

3. html 的编辑工具
   1.记事本
   1.在指定目录下新建一个记事本文件
   2.编辑html代码

这是我用记事本创建的第一个网页


3.修改记事本文件的名称【后缀名为.html】

缺点：没有提示功能，所有的代码内容都需要手动输入，效率极低。
2.专业的 IDE[集成开发环境]
1.Notepad++：http://www.html.cn/tool/edit/2.html
2.Sublime Text：http://www.html.cn/tool/edit/6.html
3.WebStorm: https://www.html.cn/tool/edit/8.html
4.HBuilderX: https://www.dcloud.io/hbuilderx.html
我们使用 HBuilderX 进行学习
HBuilderX 下载
https://www.dcloud.io/hbuilderx.html

HBuilderX 安装
在指定的位置解压缩这个压缩包，就安装成功。

双击HBuilder.exe文件打开
HBuilderX 打开运行
双击HBuilder.exe文件打开

文件—>新建---->html文件

工具—>设置—>常用配置—>编辑器字体大小

按住Ctrl+鼠标滚轮可以任意控制调整字体大小。
编辑文件，Ctrl+S保存

这是我使用HBuilderX创建的网页

运行--->运行到浏览器--->Chrome/IE.... 

4.浏览器
无论我是使用记事本还是 HBuilderX，创建出来的网页都是要在浏览器中运行查看结果。
浏览器就是网页的运行环境。
浏览器是用来检索、展示以及传递Web信息资源的应用程序。Web信息资源由统一资源标识符( Uniform Resource Identifier，URI)所标记，它是一张网页、一张图片、一段视频或者任何在Web上所呈现的内容。使用者可以借助超级链接( Hyperlinks)，通过浏览器浏览互相关联的信息。
浏览器的内核
浏览器的种类很多，但是主流的内核只有四种，各种不同的浏览器，就是在主流内核的基础上，添加不同的功能构成。
1、Trident内核
代表产品为Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器有：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等 [3] 。

2、Gecko内核
代表作品为Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9 。、

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VTkQluq4-1618313012333)(fi#pic_center)]

3、WebKit内核
代表作品有Safari、Chrome。WebKit是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示 。
!

4、Presto内核
代表作品Opera。Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

5.HTML 网页的基本结构

了解 html 的标记含义 1. HTML 标记--由尖括号包围的关键词 2. HTML 标记--通常是成对出现的,有开始标记和结束标记 3.开始标记没有"/"【】,结束标记有"/" 4.除过成对出现标记，也有少数几个独立出现的标记叫独立标记
5. HTML 标记不是我们自己定义的[不是自己创建的]，而是 html 语法规范预先定义好的一组元素。 我们学习 html 的主要部分也就是这些预先定义好的标记元素。 Html 的基本结构 1. Html 通过 3 个主要的标记将整个 html 文件分割成 2 个主要部分。 2. html 标记[] 表示整个 html 文件，所有需要的元素都要放在这个元素之中才有效。 3. head 标记[] 表示 html 文件的头。head 标记中定义声明的元素都是给浏览器执行html提供附加信息。 head 标记中除过标题[ ]以外，其他的元素都是对用户不可见。 5. body 标记[] 表示 html 文件的身体。body 标记中定义声明的元素都将为用户呈现其对应的 效果。 html 文件中的默认标记 1.--html 声明,指定html语法规范的版本,有助于浏览器中正确显示网页. doctype 声明是不区分大小写的,以下方式均可： 上面的 html 声明都是 html5 语法规范的版本 html4 规范版本的语法声明 2.html 标记[] 表示整个 html 文件，所有需要的元素都要放在这个元素之中才有效。 3. head 标记[] 表示 html 文件的头。head 标记中定义声明的元素都是给浏览器执行html提供附加信息。 head 标记中除过标题[ ]以外，其他的元素都是对用户不可见。 4.meta 标记[ / / ]给浏览器提供网页的字符编码，网页描述，关键词，文件的最后修改时间，作者，和其他附加信息. charset="utf-8":html 标记的属性,给 html 标记提供附加说明。 例如:<手机 品牌=”华为” 颜色=”黑色”>