菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: HTML-彭婉嘉-20230411 [打印本页]

作者: 鱼小仙 时间: 2023-4-11 23:51
标题: HTML-彭婉嘉-20230411

一．今日学习内容

1. HTML简介

a. 网页：网页就是网站中的一页，通常是HTML格式文件，它要通过阅览器来进行阅读。

b. 网站：就是使用HTML等内容制作的网页集合。

c. 什么是HTML：HTML（Hyper Text Markup Language）超文本标记语言，它是用来描述网页的一种标记语言。

d. 什么是超文本：

1. 图片、声音、动画等内容（超越文本的限制）

2. 超链接可以跳转到其他的网页（超级链接文本）

3. 网页的解析过程：从服务器下载HTML文件到浏览器中进行解析并渲染成页面。

2. 常用的浏览器

a. 六大浏览器: IE（微软）、edge（微软）、Firefox（火狐）、Chrome（谷歌浏览器）、Safari（苹果）、Opera。

b. 浏览器的内核:

指的是浏览器最核心的部分，负责对网页的语法解释，渲染页面。

IE（Trident） firefox（Gecko）、Safari（Webkit）、Chrome/Opera（Blink、其实是Webkit内核的分支）。

国内的浏览器一般都是使用Webkit或者Blink内核，所以我们后期考虑兼容性的时候也主要考虑这两个内核即可。

3. Web标准

a. Web标准是由W3C组织和其他的一些标准化的组织指定一系列的网页标准。

b. 为什么我们需要web标准: 因为浏览器不同，解析出来的网页排版会有差异，所以如果没有标准，开发者就需要根据不同的浏览器开发不同的网页，工作量巨大，有了WEB标准，那么针对不同的浏览器只需要一套网页即可。

c. Web标准主要包括

1. 结构（Structure）: 结构用于对网页元素进行整理和分类，主要使用HTML

2. 表现（Presentation）: 用于设置网页元素的板式、颜色、大小等外观样式。主要使用css

3. 行为（Behavior）: 行为指的是网页中的交互内容，现阶段主要学习的是JavaScript

4. HTML的语法规范

a. 基本的语法

1. 标签组成:HTML的标签是由尖括号包围的关键词组成的，例如<html>

2. 成对出现: HTML的标签通常是成对出现的，比如<html></html>，称之为双标签。标签中的第一个标签是开始标签，第二个标签是结束标签

3. 单标签: 有一些特殊的标签必须是单标签（情况较少），例如<br>标签，就是一个单标签。

b. 标签的关系

1. 并列关系（兄弟标签）

2. 包含关系（父子标签）

5. HTML的基本结构标签

a. <html></html>标签是页面中最大的标签，也叫做根标签

b. <head></head>标签是页面的头部标签，其中必须要写的标签是<title></title>

c. <title></title>页面的顶部区域标题的内容，让页面能有一个自己的标题

d. <body></body>页面中的主体内容都是放在body标签中的

6. HTML的文档的后缀

HTML的文档后缀必须是.html或者.htm，浏览器的作用是读取HTML文档，并通过内核渲染显示内容。

7. 开发工具

a. Dreamweaver、Sublime、WebStorm、Hbuilder、VSCode

b. VSCode基本使用:

1. 新建文件 Ctrl + N

2. 保存Ctrl+s，保存文件的时候文件名要以.html结尾

3. ctrl + 加号和 ctrl+减号可以放大或者缩小视图

4. 生成页面的骨架标签：输入英文感叹号“!” 按下tab键即可

5. 利用插件在浏览器中预览页面，右键点击鼠标，选择openin default Browser。

6. alt+shift+f 快速格式化代码

7. alt+shift+下键快速复制上一行代码

8. 骨架新增标签

a. <!DOCTYPE html>

1. 是DTD文档类型定义

2. DTD文档声明

3. 这个声明就是告诉浏览器使用HTML5的标签来显示网页。

4. 注意点：DTD文档定义代码应该要写在HTML文件的最前面; DTD不是HTML的标签，是另一种专门来定义标签语言的语言。

b. lang语言种类

用来定义当前文档的显示语言:

1. en代表是英语

2. zh-CN定义语言为中文

3. 但是目前不管是定义成中文还是英文，浏览器对于这两种语言都能正常显示。

c. charsert字符集

1. 字符集是多个字符的集合，方便计算机识别和存储各类文字

2. 常用的字符集有：GB2312、GBK和UTF-8，其中UTF-8也被称为万国码，基本包括了全世界所有国家需要用到的字符。

9. HTML常用标签

a. 标签的语义:就是指标签的含义，说明这个标签是用来干嘛的。

b. 标题标签<h1></h1>…<h6></h6>

c. 段落标签<p></p>

d. 换行标签<br>

e. 文本格式化标签

1. 文本加粗<storg></storg>;<b></b>

2. 倾斜<em></em>;<i></i>

3. 下划线<ins></ins>;<u></u>

4. 删除线<del></del>;<s></s>

f. div标签和span标签

1. div标签和span标签没有特殊的语义，简单来说就是在网页上划分区域的盒子。

2. div特点：每一行只有一个div

3. span特点：一行可以显示多个span

g. 标签属性

1. 指的是这个标签的特性

2. 在标签名之后用空格分开

3. 属性名和属性值是用=号进行连接的

4. 属性值必须要写在双引号之中

5. 标签的属性可以有多个而且没有先后顺序

h. 图像标签

1. <img>引入图像

2. Src图像路径是必须属性

3. Alt替换文本当图片加载失败时显示的文字内容

4. Title提示文本

5. Width“像素值”宽度

6. Height：像素值“高度

7. Border边框宽度

10. 相对路径和绝对路径

a. 相对路径：以我们当前的文件为起始参考点，一级一级的建立目录路径

1. ../代表上一级目录

2. /代表下一级目录

3. .代表当前目录

b. 绝对路径

从盘符的根目录下开始一步一步的建立文件路径，和当前文件的路径是无关的。

11. 超链接

a. 在html标签中使用<a></a>标签来定义超链接

b. 超链接的语法

1. a是单词anchor 意为锚

2. 常用属性:href 用于指定链接目标的URL地址，是必须属性。target 用于指定链接页面的打开方式，如果是默认值"_self"，代表在当前页面打开，如果是“_blank”，代表在新窗口中打开页面

c. 超链接的分类

1. 外部链接

2. 内部链接，网站内部的页面跳转用到的就是内部链接，直接写网站内部的页面名称即可

3. 空链接，如果没有确定目标链接时，可以暂时用空链接来代替

4. 下载链接，当链接的地址是一个文件或者压缩包时，点击之后会直接下载相关内容

5. 网页元素链接，页面中的各种元素，比如图片、视频、音频等等，都可以作为超链接使用

6. 锚点链接，当我们点击链接时，可以快速定位到当前页面中的某一个位置。

12. base标签

a. 语法规范

b. base标签一般会写在<head></head>标签中，作用是对所有的相对链接规定一个默认的url地址，或者提供一个默认目标。

13. HTML的注释和特殊字符

a. 注释

HTML中注释标签的格式，注释的快捷键是ctrl + /

b. HTML的特殊字符

实体引用是用“&”符开头，以“;”结尾，中间是实体引用的名称。

eg: (空格)

(空一个字符)

©(注册商标)

二．今日问题

无

三．解决方案

无

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)