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

标题: 赵强-20221010-前端HTML1 [打印本页]

作者: BlueFlame 时间: 2022-10-10 23:42
标题: 赵强-20221010-前端HTML1
一、今日所学内容
（1）HTML:
什么是网页？
   网页就是网站中的一页，通常是HTML格式的文件，要通过浏览器来进行阅读
   网站就是使用HTML等制作的内容相关的网页集合
什么是HTML
   HTML就是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种标记语言
什么是超文本
   超文本有两层含义
         1.图片、声音、动画、多媒体等等（超越了文本限制）
         2.连接可以跳转到另一个文件，与各地主机或者服务器进行文件链接（超链接文本）
网页的解析过程
   首先从服务器上来下载HTML文件到浏览器中，然后再进行解析并渲染成页面
常用浏览器
浏览器的分类
   360、IE、FireFox、Chrome、edge、safari和Opera等等
浏览器内核
   概念：
是指浏览器的最核心的部分，负责对网页的语法进行解释，并渲染/显示网页
IE：
      内核是：Trident，使用该内核的浏览器有IE、猎豹浏览器、360、百度浏览器
Firefox:
      内核是：Gecko
Safari
      内核是：Webkit
Chrome/Opear
      内核是Blink、Blink是Webkit的分支
            备注：目前国内一般的浏览器都会采用Webkit/Blink内核，比如UC、QQ、搜狗等等，目前国内还没有自主研发的浏览器内核
（2）Web标准（重要）
Web标准是由W3C组织和其他标准化组织指定的一系列网页资讯标准的集合
为什么需要Web标准
      因为浏览器不同，显示页面或者排版有差异，所以需要一个标准来进行显示和排版的规范
Web标准的构成
      结构（Structure）
结构用于对网页元素进行管理和分类，主要用于HTML来表现
      表现（Precaution）
表现用于设置网页元素的版式、颜色、大小等等的外观样式，主要指CSS
      行为（Behavior）
行为指的是网页模型的定义和交互的编写，目前主要只用Javascript。
（3）HTML的语法规范
基本的语法：
      是由标签来组成的：HTML的标签是由尖括号包围的关键词，比如<html>
      一般是成对出现的：比如<html></html>、<h1></h1>,一般这种标签我们称为双标签，前面的是开始标签，后面的是结束标签
      单标签：有一些特殊的标签必须的单个标签（情况比较少），例如<br\>，我们称之为单标签
      标签关系：
包含关系（父子）：
<head>
            <title></title>
</head>
并列关系(兄弟)：
<head>
</head>
<body>
</body>
HTML结构标签
      基本的结构标签也称为骨架标签
      骨架标签含义
<html></html>
      是页面中最大的标签，我们称为根标签
<head></head>
      是指文档的头部区域，注意在head标签中我们必须设置标签的div
<title><title>
      是指文档的标题，让页面有一个属于自己的网页标题
<body></body>
         是指的文档的主题，其中包含文档内的所有内容，相关的页面内容都是放在body标签中的
骨架中的新增代码
         <!DOCTYPE html>
               声明文档类型
               DTD文档类型定义（Document Type Definition）
      DTD声明的意义：
            1.定义文档中应该有什么样的标签
            2.标签之间应该如何排列
            3.标签应该有什么样的属性
            4.标签应该有什么格式的内容
            5.校验文档是否符合DTD的文档类型定义的规范
总的来说<!DOCTYPE html>是为了告诉浏览器使用HTML5的版本标签来显示
注意：
      DTD是定义和校验HTML的内容的，所以必须要卸载HTML内容的最前面
      DTD不是HTML标签，是另一种专门定义标签语言的语言
lang语言种类
      用来定义当前文档显示的语言
         1.en定义的是语言为英语
         2.zh-CN定义语言为中文
         简单来说，定义en就是英文网页，zh-CN就是中文网页
         对于文档来说，定义en的文档也可以显示中文，zh-CN也可以显示英文网页

<meta charset="UTF-8">
         字符集：是多个字符的集合，方便计算机能够识别和存储各类文字
         在<head>标签中，可以用<meta>标签中charset属性来规定HTML文档应该使用那种字符来进行编码（类似于一个大字典）
         Charset常用的值有：GB2312、GIB5、GBK和UTG-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。

备注：HTML文档的后缀名必须是.html或者.htm
（4）开发工具的介绍
   常用的网页开发工具
Dreamweaver、Sublime、WebStorm、VScode等
   VScode的使用
1.新建文件（Ctrl+ N）
2.保存（Ctrl+S）
3.Ctrl + 加号和Ctrl加减号可以放大和缩小视图
4.生成页面的骨架结构：英文“！”按下Tab键
5.在文件中点击鼠标右键，在弹出的窗口中点击"Open in Default Browser "可以在浏览器中预览页面
（5）HTML常用的标签
   标签的语意
            指的是标签的含义，合理的标签，可以让页面的结构更加清晰
      标题标签
<h1></h1>标题标签，标签的语意为：作为网站内容的标题使用，可以依据重要性递减
特点：
         被标题标签包含的文字会加粗，字号会依据h标签内的数字增大而递减
         一个标签独占一行
      段落标签
<p></p>标签用来定义段落
         p是单词paragraph的缩写，是段落的意思
特点：
      文本会根据浏览器窗口的大小自动换行
      段落和段落之间保留间隙
      每个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是单独占一行，
span 是行元素，一行放不下，会自动换行
   标签属性
            简单理解就是标签的特性
            书写格式
在标签名后面多个属性之间用空格来隔开
属性是等于号"="来分开的的键值对（key = value）
属性的值必须卸载双引号中
标签属性可以有多个且没有先后顺序
   图像标签：
         img是image的缩写，意为图像
         常用的属性和属性值如下
src："图片路径"，必须属性
alt："文本"，替换，图像不能显示是的文字
title ："文本"，提示文本，鼠标停留在图片上时显示的文本内容
width："像素值"，设置图像的宽度
height："像素值"，设置图像的宽度
border："像素值"，设置图像边框粗细
路径问题
      相对路径
            就是资源相当于HTML页面的位置以当前文件所在的为参考，建立出的文件路径
            去上一级目录：..
            当前目录：.
            下一级目录：/
         绝对路径
               是指资源所在绝对位置，哦通常从盘符直接开始查找，不管当前在什么位置，绝对路径都可以找到所需资源地址
   超链接
         超链接是用<a></a>标签来定义的
         超链接的语法格式
               <a href="跳转目标" target="目标窗口的弹出方式">文本图像</a>
               herf="跳转目标"，用于指定链接目标的url地址，
               target="目标窗的打开方式"，用于指定新页面的打开方式
   默认的属性值是_self，代表在当前窗口进行链接窗口，进行链接窗口，如果设置为_blank代表在新窗口中打开链接地址
         链接的分类
1.外部链接：
2.内部链接：
3.空链接：如果临时余姚一个链接目标，可以使用#代替
4.下载链接：
5.利用文本外的其他网页元素作为链接：
6.锚点链接：
   base标签
         base标签为页面上所有的链接规定了默认的URL或者目标
         相关属性和属性值
               herf="跳转目标"，用于指定链接目标的url地址，
               target="目标窗的打开方式"，用于指定新页面的打开方式
   默认的属性值是_self，代表在当前窗口进行链接窗口，进行链接窗口，如果设置为_blank代表在新窗口中打开链接地址
HTML注释
         意义：
如果在HTML文档中天界一些便于阅读和理解但又不需要在页面中进行展示的文字，就需要使用我们的注释标签
         一般注释都是以结束，中间的内容都是注释内容
         快捷键：Ctrl+/
   特殊字符
         空格: &nbsp ;
         小于号：<
         大于号：>

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