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

标题: 王涛-20221010-HTML01 [打印本页]

作者: 黑桃K 时间: 2022-10-10 23:37
标题: 王涛-20221010-HTML01
HTML及基本标签
什么是网页

网页就是网站中的一页，通常是HTML格式的文件，要通过浏览器来进行阅读
网站就是使用HTML等制作的内容相关的网页集合
什么是HTML

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

超文本有两层含义

图片、声音、动画、多媒体等等（超越了文本限制）
链接可以跳转到另一个文件，与各地主机或者服务器进行文件链接（超链接文本）
网页的解析过程

首先从服务器上来下载HTML文件到浏览器中，然后再进行解析并渲染成页面
常用的浏览器

浏览器的分类：IE、FireFox、Chrome、edge、Safari和Opera等等
浏览器的内核

概念：是指浏览器的最核心的部分，负责对网页的语法进行解释，并且渲染/显示网页。
IE：Trident。使用该内核的浏览器有：IE、猎豹浏览器、360、百度浏览器
firefox：Gecko
Safari：Webkit
Chrome/Opera： Blink ，Blink是Webkit的分支
备注：目前国内一般的浏览器都采用webkit/Bink内核，比如UC、QQ、搜狗等，目前国内还没有自主研发的浏览器内核
web标准

web标准是由W3C组织和其他标准化组织制定的一系列网页资讯标准的集合
为什么需要web标准

因为浏览器不同，显示页面或者排版有差异，所以需要一个标准来进行统一的显示和排版规范
web标准的构成

结构strucure

结构用于对网页元素进行管理和分类，主要用html来实现
表现presentation

表现用于设置网页元素的版式、颜色、大小等的外观模式，主要应用css
行为behacior

行为指的是网页模型的定义和交互的编写，目前使用JavaScript
HTML的语法规范

基本语法

是由标签来组成的：HTML的标签是由简括号包围的关键词，比如<html>
一般是成对出现的：<html></html>、<h1></h1>，一般这种标签我们称之为双标签，标签中的第一个是开始标签，第二个是结束标签
单标签：有一些特殊的标签必须是单个标签，例如<br />换行
标签关系

包含关系
并列关系
HTML基本结构标签

基本的结构标签也称为骨架标签
骨架标签的含义

<html></html>是页面中最大的标签，称之为根标签
<head></ head>是指文档的头部区域，注意在head标签中我们必须设置title标签
<title></ title>是文档的标题，让页面有一个属于自己的网页标题
<body></ body>是指文档的主体，其中包含文档内的所有内容，相关的页面内容都在body标签中
骨架中的新增代码

<!DOCTYPC html>

DTD文档类型定义（Document Type Defintion）

定义文档中应该有什么样的标签
标签之间应该如何排列
标签应该有怎样的属性
标签应有怎样的格式内容
检验文档是否符合DTD的文档类型定义的规范
总的来说<!DOCTYPC html>是为为了告诉浏览器使用HTML5的版本标签来显示网页
注意

DTD是定义和校验HTML的内容，所以必须要写在HTML文档内容的最前面
DTD不是HTML的标签，是一种专门定义标签语言的语言
lang语言类型

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

en英文网页，zh-CN中文网页
对于文本来说en也能显示中文网页，zh-cn也能显示英文网页
<meta charset="UTF-8">

字符集：是多个字符的集合，方便计算机能存储和识别各类文字
在<head>标签中可以用<meta>标签中的charset属性规定HTML文档应该用那种字符进行编码（类似于一个大字典）
charset常用的值有：GB2312、BIG5、GBK、UTF-8，UTF-8是万国码
HTML文档的后缀名必须是.html/.htm
开发工具

常用的网页开发工具

Dreamweaver、Sublime、WebStrorm、VSCode等
vscode的使用

新建文件ctrl+n
保存ctrl+s
放大缩小 ctrl++， ctrl+-
换行：alt+z
整行复制：alt+shift+↓
注释：ctrl+/
生成页面的页面的骨架结构：!+tab
打开当前代码页面：右键弹出窗口点击 “Open In Default Browser”
HTML常用的标签

标签的语义

指的是标签的含义，合理的标签可以让页面的结构更加清晰
标题标签

<h1></h1>标题标签，标签的语义为：作为网站内种的标题使用
被标题标签包含的文字会加粗，字号会依据标签内的数字而改变h1~h6逐渐变小
每个标签都会独占一行
段落标签

<p></p>标签是用来定义段落

p是单词paragraph的缩写，是段落的意思，用来分割段落
特点

文本在一个段落中会根据浏览器窗口大小自动换行
段落与段落间保留间隙
每个p标签会独占一行
换行标签<br /> 空格br空格

HTML中、文字会从左到右自动换行，如果需要强制换行，可以使用<br />标签
是单词break的缩写，意为打断，换行
标签的含义：强制换行
段落与换行相比，行间距更大
<br />标签只是简单的开始新的一行
文本格式化标签

在网页中，需要给文字设置加粗、斜体、下划线等
加粗：<strong></strong>或<b></b>
倾斜：<em></em>或<i></i>
删除线：<del></del>或<s></s>
下划线：<ins></ins>或<u></u>
<div>和<span>标签

<div>和<span>标签是没有语义的，他们的作用说就是将内容装在标签内
div divsion的缩写，表示分割，分区的意思 span是跨度，跨距的意思
<div>用来布局时，每个div独占一行
<span>用来布局时，一行可以用多个span用来展示
标签属性

简单理解就是标签特性
书写格式

在标签后面多个属性之间要用空格来隔开
属性是用=来分开的键值对（key=value）
属性的值必须写在""之中
标签属性可以有多个且没有先后顺序
图像标签

img标签

img和image的缩写意为图像
常用的属性和属性值如下

src="图片路径";必须属性
alt="文本";替换文本，图像不能正常显示时的替换的文字
title="文本";提示文本，鼠标停留在图片上时显示的文本内容
width="像素值";设置图像的宽度
height="像素值";设置图像的高度
border="像素值";这只图像边框的粗细
路径问题

相对路径

就是资源相对HTML页面的位置，以当前文件所在的位置为基础，参考建立出的文件路径
去上级目录：..
当前目录：.
下一级目录：/
绝对路径

是指资源所在的绝对位置，通常是从盘符直接开始查找，不管文件在什么位置，绝对路径都可以找到所需资源
超链接

超链接是用<a></a>标签来定义的
超链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>
常用属性和属性值

href=“跳转目标”；用于制定链接的url地址，必须属性
target=“目标窗口的打开方式”；用于指定新页面的打开方式

默认的模式值是_self，在当前窗口打开，设置为_blank代表新页面打开链接地址
链接的分类

外部连接：跳转值其他连接
内部连接：网页内部之间的互相连接，之间写内部页面文件名即可
空连接：如需临时需要一个链接目标，可以用#代替
下载链接：如果href的属性值是一个文件或者压缩包（图片除外），那么点击链接会直接下载
网页元素连接：使用网页中的除文本以外的其他元素添加的链接
锚点链接：点击链接，可以快速调转到当前页面的指定位置

在链接文本的href属性后设置属性值为#名字的格式
在目标位置的标签后添加一个id属性=刚才的名字
base标签

base标签为页面上的所有元素都规定了默认的url或者目标
常用属性和属性值

href=“跳转目标”；用于制定链接的url地址，必须属性
target=“目标窗口的打开方式”；用于指定新页面的打开方式

默认的模式值是_self，在当前窗口打开，设置为_blank代表新页面打开链接地址
base标签一般放在head标签内部的最上方，有且只能有一个base标签，如果有多个base标签则以第一个为准。
HTML的注释

作用：如果在HTML文档中添加一些便于阅读和理解但又不需要在页面中进行展示的文字，就需要使用我们的注释标签
一般注释都是以结束
快捷键：CTRL+/
特殊字符

常用的特殊字符（百度）

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