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

标题: 张锐杰-20221010-HTML第1天 [打印本页]

作者: 张锐杰 时间: 2022-10-10 19:58
标题: 张锐杰-20221010-HTML第1天
一、今日学习内容：

HTML

什么是网页
网页就是网站中的一页，通常是HTML格式的文件，要通过浏览器来进行阅读。
网站就是使用HTML等制作的内容相关的网页集合。
什么是HTML
HTML就是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种标记语言。
什么是超文本（超越了文本限制）
1.图片，声音，动画、多媒体等
2.链接可以跳转到另一个文件，与各地主机或服务器进行文件链接（超文本）
网页解析过程
首先从服务器上来下载HTML文件到浏览器中，然后进行解析和渲染成页面
常用的浏览器
浏览器分类：360、IE、FireFox、Chrome、edge、Safari和Opera等等
浏览器的内核：是指浏览器的最核心的部分，负责对网页的语法进行解释，并且渲染/显示页面。
Safari：内核是：Webkit
Chrome/Opera：内核是Blink ，Blink是Webkit的分支
备注：目前国内一般的浏览器都会采用Webkit/Blink内核，比如UC、QQ、搜狗等等，目前国内还没有自主研发的浏览器内核。

Web标准（重要）
Web标准是由W3C组织和其他标准化组织指定的一系列网页资讯标准的集合
为什么需要Web标准：因为浏览器不同，显示页面或排版有差异，所以需要一个标准进行统一的显示和排版规范
Web标准构成
结构（Strucure）
用于对网页元素进行管理和分类，主要用HTML来实现
表现（Presentation）
用于设置网页元素的板式、颜色、大小等等的外观样式，主要指CSS
行为（Behavior）
指的是网页模型的定义和交互的编写，目前主要使用JavaScript。

HTML的语法规范
基本语法
是由标签组成的：HTML由尖括号包围的关键词
一般是成对出现：比如，<html></html>,<h1></h1>一般这种标签我们称之为双标签开头，结束
单标签：特殊，例如<br />换行
标签关系
包含关系（父子）
并列关系（兄弟）
HTML基本结构标签
也称为骨架标签
<html></html>根标签
<head></head>文档头部，必须设置<title>标题</title>
<body></body>身体内容
骨架中的新增代码
<!DOCTYPE html>声明文档类型、DTD文档类型定义（Document Type Definition）意义：定义文档中应该有什么样的标签、标签之间应该如何排列、标签一应该有什么格式的内容、校验文档是否复合DTD文档类型定义的规范。、

开发工具的介绍
常用的网页开发工具：Dreamweaver、Sublime、WebStorm、VScode等
VScode的使用
1.新建文件（ctrl + N）
2.保存（ctrl + S）
3.Ctrl + 加号 + 减号可以放大和缩小试图
4.生成页面骨架结构：输入英文！ + Tab键
Charset常用的值有：GB2312、BIG5、GBK和UTF-8称为万国码。

HTML常用的标签
标签语义（含义）
标题标签：<h1></h1>
段落标签：<p>定义段落</p>paragraph的缩写。
段落标签
<p></p>标签用来定义段落
      p是单词paragraph的缩写，是段落的意思。标签的语义：HTML文档中分割段落的作用
      特点：
         文本在一个段落中会根据浏览器窗口的大小自动换行
         段落和段落之间保留空隙
         每个p标签会单独占一行

换行标签
<br />标签
      HTML中，文字会从左到右自动换行，如果需要需要强制换行，可以使用<br />标签
      是单词break的缩写，意为打断的、换行。
      标签的语义：强制换行。
      特点
         <br />是一个单标签
         段落与换行相比，会插入一些垂直的间距，间距更大。
         <br />标签只是简单的开始新的一行

文本格式化标签
在网页中，需要给文字设置加粗、斜体、下划线等等效果，可以使用如下标签
      加粗
         <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在一行进行展示。

标签属性
简单理解就是标签的特性
书写格式
      在标签名后面多个属性之间要用空格来隔开
      属性是用等于号“=”来分开的键值对（key=value）
      属性的值必须写在双引号“”中
      标签属性可以有多个且没有先后顺序

图像标签
img标签
      img是 image的缩写，意为图像
      常用的属性和属性值如下
         src = “图片路径”；必须属性
         alt = “文本”；替换文本，图像不能显示时的文字
         title = “文本”；提示文本，鼠标停留在图片上时显示的文本内容
         width = “像素值”；设置图像的宽度
         height = “像素值”；设置图像的高度
         border = “像素值”；设置图像边框的粗细

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

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

超链接
超链接是用<a></a>标签来定义的
超链接的语法格式
      <a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>
      常用属性和属性值
         href=“跳转目标”；用于指定链接目标的url地址，必须属性
         target=“目标窗口的打开方式”；用于指定新页面的打开方式
            默认的属性值是_self,代表在当前窗口进行链接窗口，如果设置为_blank代表在新窗口中打开链接地址

链接的分类
      1、外部链接例如直接跳转到百度链接
      2、内部链接：网页内部页面之间的相互链接，直接写内部页面的文件名即可
      3、空链接：如果临时需要一个链接目标，可以使用 # 来代替
      4、下载链接：如果href的属性值是一个文件或者压缩包，那么点击链接会直接下载
      5、网页元素链接：使用网页中的处文本以外的其他元素添加的超链接
      6、锚点链接：点击链接，可以快速跳转到当前页面中的指定位置
         （1）在链接文本中href属性后设置属性值为 #名字的形式
         （2）在目标位置的标签后添加一个id属性=刚才的名字

base标签
      base标签为页面上的所有的链接规定了默认的URL或者目标
      常用属性和属性值
         href=“跳转目标”；用于指定链接目标的url地址，必须属性
         target=“目标窗口的打开方式”；用于指定新页面的打开方式
            默认的属性值是_self,代表在当前窗口进行链接窗口，如果设置为_blank代表在新窗口中打开链接地址

      base标签一般放在head标签内部的最上方，有且只能有一个base标签，如果有多个base标签则以第一个为准。

HTML的注释
意义：
      如果在HTML文档中添加一些便于阅读和理解但又不需要在页面中进行展示的文字，就需要使用我们的注释标签。

一般注释都是以结束，中间的内容都是注释内容。
注释的快捷键是 Ctrl + /

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