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

标题: 巨朝阳-20201010-HTML基础 [打印本页]

作者: 云云 时间: 2022-10-10 22:22
标题: 巨朝阳-20201010-HTML基础
一、什么是网页 1.网页就是网站中的一页，通常是HTML格式的文件，要通过浏览器来进行阅读。
2.网站就是使用HTML等制作的内容相关的网页集合

二、什么是HTML
HTML就是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种标记语言
超文本
图片、声音、动画、多媒体等等（超越了文本限制）
链接可以跳转到另一个文件，与各地主机或者服务器进行文件链接（超链接文本）

三、网页的解析过程
首先从服务器上来下载HTML文件到浏览器中，然后再进行解析并渲染成页面
四、常用的浏览器
1.浏览器的分类
360、IE、FireFox、Chrome、edge、Safari和Opera等等
2.浏览器的内核
概念
是指浏览器的最核心的部分，负责对网页的语法进行解释，并且渲染/显示网页
2.1 IE
内核是：Trident。使用该内核的浏览器有：IE、猎豹浏览器、360、百度浏览器
2.2 firefox
内核是：Gecko
2.3 Safari
内核是：Webkit
2.4 Chrome/Opera
内核是Blink ，Blink是Webkit的分支
目前国内一般的浏览器都会采用Webkit/Blink内核，比如UC、QQ、搜狗等等，目前国内还没有自主研发的浏览器内核
五、Web标准（重要）
Web标准是有W3C组织和其他标准化组织指定的一系列网页资讯标准的集合
1. 为什么需要Web标准
因为浏览器不同，显示页面或者排版有差异，所以需要一个标准来进行统一的显示和排版的规范
2.Web标准的构成
2.1 结构（Strucure）
结构用于对网页元素进行管理和分类，主要用HTML来实现的
2.2 表现（Presentation）
表现用于设置网页元素的板式、颜色、大小等等的外观样式，主要指的是CSS
2.3 行为（Behavior）
行为指的是网页模型的定义和交互的编写，目前主要使用JavaScript

六、HTML的语法规范
1.基本的语法
HTML的标签是由尖括号包围的关键词，比如<html>
双标签：一般是成对出现的：比如<html></html>、<h1></h1>，一般这种标签我们称之为双标签，标签中的第一个标签是开始标签，第二个标签是结束标签
单标签：有一些特殊的标签必须的单个标签（情况比较少），例如<br />，我们称之为单标签
2.标签关系
包含关系（父子）
并列关系（兄弟）

七、HTML基本结构标签
1. 基本的的结构标签也称为骨架标签
1.1骨架标签含义
<html></html>是页面中最大的标签，我们一般称为根标签
<head></head>是指文档的头部区域，注意在head标签中我们必须要设置的标签是title
<title></title>是指文档的标题，让页面有一个属于自己的网页标题
<body></body>是指的文档的主体，其中包含文档内的所有内容，相关的页面内容都是放在body标签中的
1.2骨架中的新增代码
<!DOCTYPE html>声明文档类型
定义文档中应该有什么样的标签
标签之间应该如何排列
标签应该有什么样的属性
标签应该有什么格式的内容
校验文档是否复合DTD的文档类型定义的规范
DTD是定义和校验HTML的内容的，所以必须要写在HTML文件内容的最前面
DTD不是HTML的标签，是另一种专门定义标签语言的语言
2. lang语言种类
用来定义当前文档显示的语言
en定义的是语言为英语
zh-CN定义语言为中文
对于文档来说，定义成en的文档也可以显示中文，zh-CN也能显示英文
3. <meta charset="UTF-8">
字符集：是多个字符的集合，方便计算机能够识别和存储各类文字
在<head>标签中，可以用<meta>标签中charset属性来规定HTML文档应该使用哪种字符来进行编码（类似于一个大字典）
Charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符

注意：HTML文档的后缀名必须是.html或者.htm
八、开发工具
1.常用的网页开发工具
Dreamweaver
Sublime
WebStorm
VScode
2.Vscode的使用
2.1、新建文件（ctrl  + N）
2.2、保存（Ctrl + S）
2.3、Ctrl + 加号和 Ctrl + 减号可以放大和缩小视图
2.4、生成页面的骨架结构：输入英文的"!" 按下Tab键
2.5、在文件中点击鼠标右键，在弹出的窗口中点击“Open In Default Browser”  可以在浏览器中预览页面
2.6.注释的快捷键是 Ctrl + /

九、HTML常用的标签
1.标题标签
<h1></h1>
标题标签，标签的语义为：作为网站内容的标题使用，可以依据重要性递减。
特点
被标题标签包含的文字会加粗，字号会一句h标签内的数字而进行改变。h1-h6的字体逐渐变小
一个标签会独占一行
2.段落标签
<p></p>
标签用来定义段落
p是单词paragraph的缩写，是段落的意思。标签的语义：HTML文档中分割段落的作用
特点
文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落之间保留空隙
每个p标签会单独占一行
3.换行标签
<br />
HTML中，文字会从左到右自动换行，如果需要需要强制换行，可以使用<br />标签
是单词break的缩写，意为打断的、换行
特点
<br />是一个单标签
段落与换行相比，会插入一些垂直的间距，间距更大。
<br />标签只是简单的开始新的一行
标签的语义：强制换行
4.文本格式化标签
在网页中，需要给文字设置加粗、斜体、下划线等等效果
加粗 <strong></strong>或者<b></b>
倾斜 <em></em>或者<i></i>
删除线 <del></del> 或者 <s></s>
下划线 <ins></ins>或者<u></u>
<div>和<span>标签
<div>和<span>标签是没有语义的，他们的作用就是将内容装在标签内div division的缩写，表示分割、分区的意思。  span是跨度，跨距的意思。
特点
<div>用来布局，每个div会单独占一行
<span>用来布局时，一行上可以用多个<span>，多个span在一行进行展示
5.标签属性
简单理解就是标签的特性
书写格式
在标签名后面多个属性之间要用空格来隔开
属性是用等于号“=”来分开的键值对（key=value）
属性的值必须写在双引号“”中
标签属性可以有多个且没有先后顺序
6.img标签
img是 image的缩写，意为图像
src = “图片路径”；必须属性
alt = “文本”；替换文本，图像不能显示时的文字
title = “文本”；提示文本，鼠标停留在图片上时显示的文本内容
width = “像素值”；设置图像的宽度
height = “像素值”；设置图像的高度
border = “像素值”；设置图像边框的粗细
7.路径
7.1 相对路径
去上一级目录：..
当前目录：.
下一级目录：/
7.2 绝对路径
是指资源所在绝对位置，通常是从盘符直接开始进行查找，不管当前文件在什么位置，绝对路径都可以找到所需资源的地址
8.超链接
8.1 超链接是用<a></a>标签来定义的
语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>
常用属性和属性值
href=“跳转目标”；用于指定链接目标的url地址，必须属性
target=“目标窗口的打开方式”；用于指定新页面的打开方式默认的属性值是_self,代表在当前窗口进行链接窗口，如果设置为_blank代表在新窗口中打开链接地址
8.2 链接的分类
8.1 外部链接例如直接跳转到百度链接
8.2 内部链接：网页内部页面之间的相互链接，直接写内部页面的文件名即可
8.3 空链接：如果临时需要一个链接目标，可以使用 # 来代替
8.4 下载链接：如果href的属性值是一个文件或者压缩包，那么点击链接会直接下载
8.5 网页元素链接：使用网页中的处文本以外的其他元素添加的超链接
8.6 锚点链接：点击链接，可以快速跳转到当前页面中的指定位置
8.6.1 在链接文本中href属性后设置属性值为 #名字的形式
8.6.2 在目标位置的标签后添加一个id属性=刚才的名字
9. base标签
base标签为页面上的所有的链接规定了默认的URL或者目标
9.1 href=“跳转目标”；用于指定链接目标的url地址，必须属性
9.2 target=“目标窗口的打开方式”；用于指定新页面的打开方式
   9.3  默认的属性值是_self,代表在当前窗口进行链接窗口，如果设置为_blank代表在新窗口中打开链接地址
9.4 base标签一般放在head标签内部的最上方，有且只能有一个base标签，如果有多个base标签则以第一个为准。

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