HTML基础

一、 什么是html5、以及能做什么？（了解）

\1. html5就是一门技术的总称，围绕着html所衍生出来的技术都统称为html，而后面的这个数字5就代表的是版本的一个意思，目前是发展到了第5个版本。

\2. 在这门技术中包含了html、CSS、js等。html只是这门技术中的冰山一角。

\3. html5能做的东西：

a) 网页开发，只要是用浏览器能打开的，都需要用到html5或者也可叫做web前端

b) 小程序

c) 公众号

d) 手机app

e) 电脑软件

f) 小游戏

g) 后端开发（node.js）

二、 网站建站流程（了解）

\1. 下图就是网站的一个建站流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IyzsEkSQ-1640524051581)(file:///C:/Users/sifeng/AppData/Local/Temp/msohtmlclip1/01/clip_image002.png)]

\2. 比如我们在浏览器中输入一个百度、或者输入一个淘宝、京东的一个网址，他会经历哪些步骤呢?

a) 比如我们现在要去开发一个淘宝的网站，首先我们需要去注册一个域名（就是一个网址，这个是公司要去准备备案的，否则不能使用）

b) 第二步需要去租用空间，在服务器商那里去租一个地方存我们网站的一些资源。这样将来别人输入你这个网址的时候才可以看到内容（有钱可以自己去买一台服务器）备注：服务器就是一台电脑。

c) 第三步需要去建设网站。

d) 最后做推广

三、 项目开发流程（了解）

在公司中做一个项目开发经常跟我们打交道的人有（产品、UI美工、前端开发、后端开发、测试）

四、 网站的组成部分（掌握）

\1. 随便打开一个网页观察这个页面上都有哪些东西，你在这个页面上看到了什么？

\2. 可以看到有图片、文字、视频、线条等这些东西组成一个网页，这个我们一般称为网页的结构（由哪些东西堆起来的）

\3. 再次观察网页我们可以发现这些图片、文字等东西在页面中都不是随意去摆放的，都是有页面排版的，文字颜色、大小等也都是不一样的。这样做的一个目的是想让网页更美观一点。让网页美观我们一般称为网页的表现。

\4. 让网页中的某一些东西动起来就称为网页的行为。

三要素：

html（搭建骨架===页面结构）

css（美化网页的—表现）

js（JavaScript===实现网页的交互效果—行为）

结构 表现 行为（js=JavaScript）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eq5RWd7M-1640524051584)(file:///C:/Users/sifeng/AppData/Local/Temp/msohtmlclip1/01/clip_image004.png)]

\5. 组织机构（指定标准的机构）w3c万维网指定html和css的语法标准，ECMA组织机构制定js标准

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kmlMCEIY-1640524051585)(file:///C:/Users/sifeng/AppData/Local/Temp/msohtmlclip1/01/clip_image006.png)]

1.W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。W3C (制定了结构(xhtml、xml)和表现(css)的标准，非赢利性的。)

2.ECMA(European Computer Manufactures Association) 欧洲电脑场商联合会。ECMA制定了行为(DOM(文档对象模型)，ECMAScript)标准

3.WHATWG网页超文本应用技术工作小组是：一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

五、 html发展史

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FJODDbVr-1640524051585)(file:///C:/Users/sifeng/AppData/Local/Temp/msohtmlclip1/01/clip_image008.png)]

六、 开发工具（编辑器）sublime 记事本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8fqA0aVM-1640524051586)(file:///C:/Users/sifeng/AppData/Local/Temp/msohtmlclip1/01/clip_image010.png)]

七、 本地站点、本地建站流程（掌握）

什么是站点：站点其实就是一个存放你项目资源的文件夹，在这个资源文件夹当中放着你这个项目中素有的素材（图片、html、css、js等）

站点的作用：站点就是用来整合项目资源的。

建立本地站点的步骤：

a) 创建项目根目录

b) 创建子文件和文件夹（css、images、js、还有一些html文件）这几个文件之间是并列关系。

c) 项目创建好了就可以写代码了。

\2. 命名规范

a）尽量使用英文，不要使用中文。(目前我们处于学习，为了方便大找到每一个文件，我会使用中文)

b）名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符

c）不要以数字开头

d）尽量做到见名知意。

e）首页命名最好是index.html不能是shouye.html

\3. 网页的文件后缀名成是.html或者.htm

a) 如何查看后缀名称：

b) 如果你得电脑是win8/win10====打开任何一个文件夹，点击上面得查看，再二级菜单中勾选文件后缀名

c) 如果你电脑是win7系统=点击我的电脑左上角得组织弹窗里面选择查看找到文件夹选择项==需要把隐藏后缀名文件前面得小对勾取消掉；点击确定

常用快捷键

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bqm6lnFj-1640524051587)(file:///C:/Users/sifeng/AppData/Local/Temp/msohtmlclip1/01/clip_image012.png)]

八、 html理论基础（掌握）

(一) html网页基本结构（架构）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-akUk9MAH-1640524051588)(file:///C:/Users/sifeng/AppData/Local/Temp/msohtmlclip1/01/clip_image014.png)]

\1. html就是一门可扩展超文本标记语言

\2. 从基本结构上可以看到html是由尖角号组成，这种形式的我们一般称为标签、标记、元素。

\3. 基本结构分为2个部分

a) 头部描述区域

b) 身体内容区（只要在页面中能看到的东西全都写在body中）

(二) Html标签基本语法

\1. 标签的分类：

a) 单标签：只有开始，没有结束。

语法： <标签名称 属性1=“属性值”… />

b) 双标签：有开始有结束

语法：<标签名称 属性1=”属性值” 属性2=“属性值”>内容</标签名称>

\2. 由2个部分组成

a) 标签：写在尖角号里面的第一个单词就是标记、标签或者也叫作元素

b) 属性：标记和属性是用空格隔开的，属性和属性值用等号连接，属性值必须放在引号内。一个标签是可以有多个属性的，属性和属性之间用空格隔开，不分先后顺序

理解：可以把一个标签就看做成一个盒子，标签名称就是盒子的名称，属性可以理解为这个盒子的特征、盒子里所要展示的内容是写在开始标签和结束标签之间的。

九、 常用标签

\1. 文本标题标签（h1-h6）

a) 特点：有加粗效果，文字大小从大到小的一个变化、独占一行

b) h1比较特殊，有唯一性，同一个页面内只能出现1次，一般是用来放网站logo的。

\2. 段落标签（p标签）

a) 一般用来放一大段文字

b) 特点：双标签、段落标签和段落标签之间是有距离的

c) 默认情况下，p标签里面的文本是从左到右依次显示，当一行放不下的时候就会换行。

\3. 文字倾斜（i或者em标签）

a) 作用：让文本实现倾斜效果的

b) 标签：i和em标签

c) 语法：文本 文本

d) 两者的区别：后者更加具有语义化，更加具有强调作用

\4. 文字加粗标签

a) 作用：让文本实现加粗效果

b) 标签：双标签 b和strong

c) 语法：文本 文本

d) 两者的区别：后者更加具有语义化，更加具有强调作用

\5. 下划线（u标签）

a) 作用：给文本添加下划线标注

b) 标签：双标签、u

c) 语法：文本

\6. 删除线：

a) 作用：给文本添加删除线效果

b) 使用场景：打折促销，原价的位置

c) 标签：双标签 s和del

d) 语法：文本 文本

e) 二者的区别：后者更加具有语义化，更加具有强调作用

\7. 上标（sup）、下标（sub）

==========================================================

\8. 换行符：br

\9. 水平线：hr

\10. 特殊符号(记住空格即可)：

a) 空格符

​ i.  （英文的一个半角）

​ ii.  全角空格(一个emsp就占一个汉字的距离)

b) ©版权

c) ®商标

d) >大于号

e) <小于号

\11. 列表：

a) 无序（ul-li）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KZrS3MIM-1640524051588)(file:///C:/Users/sifeng/AppData/Local/Temp/msohtmlclip1/01/clip_image016.png)]

特点：1个li独占一行。默认列表符号实心圆点

无序列表符号可通过type属性更改：

circle是空心圆

square是实心方块

disc是实心圆

none====取消列表符号

经常是使用none

b) 有序（ol-li）

[外