网页简史
诞生
- 万维网发明人——蒂姆.伯纳斯-李
- 1991.08.06,世界上第一个服务器和第一个网站在欧洲核子研究中心上线
W3C标准的建立
- 伯纳斯李于1994年建立万维网联盟(W3C),W3C为了制订网页开发的标准,以使用不同的浏览器达到相同的效果
网页的组成
- 结构
- HTML用于描述网页的结构
- 表现
- CSS用于控制页面中元素的样式
- 行为
- JavaScript用于响应用户的操作
HTML
- HTML (HYpertext Markup Language)超文本标记语言
- 主要负责网页的结构
- 通过使用标签的方式标识网页的不同组成部分
超文本即超链接,即一个网页跳转到另一个网页的连接
简单的HTML代码
<html>
<head>
<title>网页文本标题</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>段落</p>
</body>
</html>
自结束标签与注释
类似于
<img > <img /> <img > <input />
就叫做自结束标签
注释
- 格式:
<!-- 你要注释的内容 -->
- HTML的注释中的内容会被浏览器给忽略掉,不会在网页中直接显示
- 但可以在HTML编辑器中查看源码获取到注释的内容,或者网页中点击右键显示网页源代码也可以
- 注释的作用主要是在多人协同开发的场景中,对其他成员阐述和解释自己的代码,开发过程中要养成写注释的习惯,可以使代码更加简单明了!
- 注释不能嵌套
- 格式:
标签中的属性
- 属性用来设置标签的内容如何显示,在开始标签或自结束标签中设置
- 属性是一个名值对(X=Y)
- 有些属性有属性值,有些没有,如果有属性值,需要用双引号引出
- 多个属性需要空格隔开
- 例如:
<h1><font color="red" size="3">这是一个大标题</font></h1>
文档声明
- 网页版本的演变
- HTML4
- XHTML2.0
- HTML5(现在使用的版本)
- 文档声明(doctype)
- 文档声明是用来告诉浏览器当前网页的版本的
- 必须写在HTML文件的第一行
- 格式:
<!doctype html> <!Doctype HTML>
字符编码
- 所有的数据在计算机中存储是都是以二进制形式存储,包括文字
- 编码
- 将字符转换为二进制码的过程称为编码
- 解码
- 将二进制码转换为字符的过程称为解码
- 乱码问题
- 如果编码和解码所采用的的字符集不同就会出现乱码问题
- 常见的字符集
- ASCII(美国编码)
- ISO088591(欧洲编码)
- GB2313(中国)
- GBK(中国,在GB2313基础下扩充)
- UTF-8(万国码,编辑器的默认编码格式,微软记事本除外)
- 在HTML5里面设置网页字符集的格式
一个标准的HTML文档的代码
<!doctype html> <html> <!-- head是网页的头部,head的内容不会在网页中直接出现,而是帮助浏览器或搜索引擎解析网页 --> <head> <!-- meta标签用来设置网页的元数据 --> <meta charset="utf-8"> <!--titlw中的内容会显示在浏览器的标题栏中,搜索引擎会根据title中的内容来判断网页的主要内容 --> <title> 网页解析标题 </title> </head> <!--网页的内容主体 --> <body> <h1>一级标题</h1> </body> </html>
vscode编写HTML文档的一些常用快捷键
- 打开一个文档的基本结构: ! + TAB键
- 段落: p + TAB键
- 光标下移: Ctrl + 回车
HTML实体
- 在网页中编写多个空格时,默认情况下会被浏览器自动解析为一个空格
- 当我们需要写一下特殊符号如大于号小于号等就需要用到HTML的实体
- 实体的语法:
- &实体名;(全英文下)
(更多的实体语法参照W3school的HTML教程) 空格 " " > 大于号 " < " < 小于号 " > " © 版权符号 & 和号 " & " " 引号 " " "
- &实体名;(全英文下)
meta标签
- 关于meta
- 通常所说的META标签,是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。
- META标签是HTML标记HEAD区的一个关键标签,它位于HTML文档的< head >和< title >之间(有些也不是在< head >和< title >之间)。它提供的信息虽然用户不可见,但却是文档的最基本的元信息。
META标签的组成
- 两大部分
- HTTP-EQUIV和NAME变量
- 两大部分
属性
|属性|值|描述|
|:——-:|:——-:|:—:|
|charset|character_set| 定义文档的字符编码|
|content|text|定义与http-equiv或name属性相关的元数据|
|http-equiv|content-typedefault-style refresh|把 content 属性关联到 HTTP 头部|
|name| application-name author description generator keywords| 把content属性关联到一个名称|
(摘自百度百科)- 各个功能
- charset 指定网页的字符集
- name 指定数据的名称
- content 指定数据的内容
- keywords 表示网站的关键字,可以同时设置多个关键字,使用逗号隔开
- description 用于指定网站的描述(即搜索引擎的超链接)
- title标签的内容会作为搜索结果的超链接上的文本表示
<meta charset="utf-8" /> <meta name="renderer" content="webkit" /> <title>淘宝网 - 淘!我喜欢</title> <meta name="spm-id" content="a21bo" /> <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/" /> <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖" />
语义化标签01
概述
- 语义化标签指具有其含义的标签,使开发者更直观、优雅的编写代码
标题标签(块元素)
- 一共有六级标题,从h1到h6
- 六级标题的重要性从h1到h6逐级递减
- h1的标签在网页中的重要性仅次于title标签,在一般情况下一个网页只有一个h1标签
- 在网页中独占一行的元素称为块元素(block element)
hgroup标签
- hgroup标签用来给标题分组,多个标题可以放进一个hgroup标签里
<hgroup> <h1>你好,服务器</h1> <h2>章节01</h2> </hgroup>
p标签(段落标签,块元素)
- p标签在网页中表示一个段落
em标签
- em标签用于加重语句语调
- 在网页中不会独占一行的元素称为行内元素(Inline element)
<p>今天天气<em>真</em>不错</p> <p><em>真牛掰</em></p>
今天天气真不错
真牛掰
strong标签
- 表示强调重要的内容
<p>你今天<strong>必须完成任务</strong></p>
你今天必须完成任务
blockquote长引用标签
- 表示长引用
顾炎武说:顾炎武说: <blockquote> 天下兴亡,匹夫有责 </blockquote>
天下兴亡,匹夫有责
q标签
- 表示一个短引用
子曰:子曰:<q>温故而知新,可以为师矣</q>
温故而知新,可以为师矣
块和行内
块元素(block element)
- 在网页中一般通过元素对页面进行布局
行内元素(inline element)
- 行内元素主要用来包裹文字
- 例如标题标签h1、段落标签p
- 一般情况下会在块元素中放入行内元素,但不会在行内元素中放入块元素
- p段落标签里不能放入任何块元素
- 在浏览器解析网页时,会自动对网页中不符合规范的内容进行修改
语义化标签02
布局标签(HTML5新增!)
- header 表示网页的头部
- main 表示网页的主体部分,一个网页只有一个main
- footer 表示网页的底部
- nav 表示网页中的导航
- aside 表示网页侧边栏(对主体部分的某个内容进行详细的解释,或作其他功能使用)
- article 表示一个独立的文章
- section 表示一个独立的区块,上面所有标签不能表示时使用
- div 可以代替以上所有布局标签,无任何语义
- span 行内元素,无语义
<header></header> <main></main> <footer></footer> <nav></nav> <aside></aside> <article></article> <section></section> <div></div> <span></span>
列表
- 列表分类
- **有序列表**
- 使用 **ol** 来创建有序列表
- 使用 **li** 作为列表项
```html
- 文字
- 图片
- 动画
- 文字
- 图片
- 动画
- 首页
- 产品
- 售后支持
- 首页
- 产品
- 售后支持
- 结构
- 结构表示网页的结构,用来规范网页中哪里是标题,哪里是段落
- 结构
- 结构表示网页的结构,用来规范网页中哪里是标题,哪里是段落
- 列表之间可以互相嵌套
超链接
- 超链接可以让我们从一个网页跳转到其他页面
- 使用a标签定义超链接
- 它跳转的可以是外部的一个网址(绝对路径)
- 也可以是该网页同一目录下的文档(相对路径)
- 超链接也是一个行内元素,在a标签里可以嵌套除它本身以外的任何元素(Ctrl+shift+向下 == 向下复制)
<a href="https://baidu.com">百度</a> <a href="./同一目录的文档名">跳转到统一目录下的文档</a>
- target属性 用来指定超链接打开的位置
- 可选值:
- _self 表示默认值,在当前页面打开超链接
- _blank 在新的窗口/标签栏中打开超链接
<a href="index.html" target ="_blank">页面01</a> <a href="index.html" target ="_self">页面02</a>
- 可选值:
- # 在href后面设置#号超链接,点击此超链接回到页面顶部(页面不会发生跳转)
- id 属性;是元素的唯一标识,同一页面不可有重复的id属性(可以作为网页位置的别名)
- 通过用#号加id名可以形成一个超链接到达使用这个id名的标题/段落中
- 可以使用
Javascript:;
,来作为href的属性,此时点击这个超链接没有任何作用<a href="javascript:;">这是一个无效果的超链接</a> <a id="bottom" href="#">回到顶部</a> <p id =p1>这是第一个段落</p> <br></br> <a href="p1">去第一个段落</a>
相对路径
- 当我们需要跳转到一个服务器内部的页面时,要用到相对路径,用.或..开头
- ./ 表示当前文件所在的目录
- ../ 表示当前文件所在目录的上一级目录
图片标签
- 图片标签用于在当前页面中引入一个外部照片
- 图片标签img是一个自结束标签,属于替换元素(介乎于块和行内元素)
- 属性:
- src 属性指定的是外部图片的路径描述
- alt 属性指图片的描述,这个描述默认情况下不会显示,只有当图片无法被浏览器加载出来时,才会显示alt中的内容,如果不写alt则不会被搜索引擎所收录(有点类似于meta的description)
- width 表示设置图片的宽度
- height 表示设置图片的高度
- 一般情况下,只更改width和height中的一个,这样图片就会被等比例的缩放
- 在pc端不建议更改图片大小,会导致内存增大或图片失真的情况
- 但在移动端就要经常使用到缩放
图片格式
- 格式分类
- JPEG(jpg)
- 支持的颜色比较丰富,不支持透明效果,不支持动图,一般用于显示照片
- GIF
- 支持的颜色比较少,支持简单透明,支持动图,一般用于动图
- PNG
- 支持的颜色丰富,支持复杂透明,不支持动图,网页专用格式
- webp
- 谷歌专属格式,具备其他格式所有优点,但兼容性不好
- JPEG(jpg)
- base64编码
- 将图片使用base64编码,这样可以让图片变成字符,通过字符的形式引入图片
- 可以使图片更快的加载出网页中
音视频播放
- audio标签用来向页面导入一个外部的音频文件,当音频文件引入时,默认情况下不允许用户控制
<audio src="音频文件路径"></audio>
属性:
- controls 设置允许用户对音频进行控制(播放/暂停)
- autoplay 设置音频自动播放
- 大部分浏览器不会自动对音频播放
- loop 设置音频循环播放
<audio src="音频文件路径" controls loop></audio>
- 不是所有浏览器都支持audio标签
- 可以使用如下写法:
<audio controls> 对不起,您的浏览器不支持播放此音频 <source src="音频文件路径> </audio>
- 这样写的好处是如果浏览器不支持audio标签,就会显示文字,反之则会显示音频,不会显示文字
video标签用来向网页引入一个视频文件
<video controls> <source src="音频文件路径"> </video>
- 对于网页引入音频视频,一般不会再本地播放,会通过代理进行音视频托管,减轻服务器内存,对带宽的要求也相应降低,成本也就减少
CSS
- CSS
- 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。[摘自百度百科]
- CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
- 三种方式修改元素样式
- 第一种:(内联样式/行内样式)
- 在标签内部通过style属性来设置元素样式
- 但该样式只对当前标签内部有效,对在实际的开发应用过程中非常不友好,对后期的维护相当麻烦,需要一个个的去修改
```html
牵一发而动全身
``` - **注意:千万不能在开发中使用,非常低效,不推荐,仅供学习使用** - 第二种:(内部样式表)
- 把style写在head标签中
- 然后通过CSS的选择器选择元素并为其设置样式
- 该方法的好处是:可以同时为多个标签设置样式,只需要修改一次即可对所有标签进行样式修改,方便样式进行复用</font>
<head> <style> p{ color=red font-size=50px } </style> </head>
- 第三种:(外部样式表)
- 可以将CSS样式编写到一个外部的CSS文件中,然后通过link标签来引入外部的CSS文件
- 外部样式表需要通过link标签进行引入
- 只要网页对其进行引用就可以使用这些样式
- 可以使样式在不同的页面中进行复用(推荐使用,尤其开发中必备)</font>
<link rel="stylesheet" href="需要引用的CSS文件路径">
- 第一种:(内联样式/行内样式)
- 在标签内部通过style属性来设置元素样式
- 但该样式只对当前标签内部有效,对在实际的开发应用过程中非常不友好,对后期的维护相当麻烦,需要一个个的去修改
```html
CSS语法
- 注释:注释里得到东西会自动被浏览器忽略
- 格式(快捷键Ctrl+/)
/* 注释内容 */
- 格式(快捷键Ctrl+/)
- 基本语法:
- 选择器(selector)
- 通过选择器可以选中页面的指定元素,例如p的作用就是选中页面所有的p标签元素
- 声明块
- 通过声明块来指定要给元素设置的样式
- 声明块由一个个声明组成,格式是名值对,以
;
结尾p{ color:red; font-size:60px; } h1{ color:blue; font-size:80px; }
- 选择器(selector)
class属性
- class是一个标签的属性,它与id相似,但是可以重复使用,对元素进行分组
- 语法:
- .class{属性:属性值}
<p class="red">天苍苍,野茫茫</p> <p class="red">风吹草低见牛羊</p>
.red{ color:red; font-size:15px; }
- .class{属性:属性值}
常用选择器
- 元素选择器
- 作用:根据标签名设置指定元素
- 语法: 标签名{ }
- 例如: p{ } h1{ }
- id选择器
- 作用:根据元素的id属性值选择一个元素
- 语法: #id属性值{ }
- 例如: #green{ } #bottom{ }
- 类选择器
- 作用:根据元素的class属性值选中一组元素
- 语法: .class属性值
<h1 class="good">美好的一天</h1>
.good{ color:orange; }
- 通配选择器
- 作用: 选中页面的所有元素
- 语法:*
*{ color:black; }
复合选择器
- 交集选择器
- 作用:选中同时复合多个条件的元素
- 语法:选择器1选择器2选择器n{ }
- 交集选择器如果有元素选择器,必须用元素选择器开头
<body> <div class="red">我是div</div> <p class="red">我是段落</p> <div class="red2 a b ">我是div2</div> </body>
<style> div.red{ font-size:25px; } .a.b{ color:blue; } </style>
- 并集选择器(选择器分组)
- 作用:同时选中多个选择器对应的元素
- 语法:选择器1,选择器2,选择器n{ }
h1,span{ color:orange; }
关系选择器
各种元素类别
- 父元素
- 直接包含子元素的元素
- 子元素
- 直接被父元素包含的元素
- 祖先元素
- 直接或间接包含后代元素的元素
- 一个元素的父元素也是其祖先元素
- 后代元素
- 直接或间接被祖先元素包含的元素
- 子元素也是后代元素
兄弟元素
- 拥有相同父元素的元素
```html
我是一个div
我是div的p元素
我是p元素中的span</p>
我是div的span元素</div>
```- 子元素选择器
- 作用:选中指定父元素的指定子元素
- 语法:父元素 > 子元素
<style> div > span{ color:yellow; } </style>
- 后代元素选择器
- 作用:选中指定元素内的指定后代元素
- 语法:祖先 后代
<style> div span{ color:red; } </style>
- 选择下一个兄弟元素
- 语法: 前一个 + 后一个
<style> p + span{ font-size:30px; } </style>
- 选择所有的兄弟元素
- 语法: 兄 ~ 弟
属性选择器
- 选择含有指定属性的元素
- [属性名]
- 选择含有指定属性和属性值的元素
- [属性名 = 属性值]
- 选择属性值一指定值开头的元素
- [属性名 ^= 属性值]
- 选择属性值以指定值结尾的元素
- [属性名 $= 属性值]
- 选择属性值中含有某值的元素的元素
- 伪类:不存在的类,特殊的类
- 伪类用来描述一个元素的特殊状态
- 比如:第一个子元素,被点击的元素,鼠标移入的元素等
- 伪类一般情况下都是 : 开头
:first-child
第一个子元素:last-child
最后一个子元素:nth-child
选中第n个子元素- 特殊值:
- n 第n个 范围从0到正无穷
- 2n 或 even 表示选中偶数位子元素
- 2n+1 或 odd 表示选中奇数位的子元素
- 特殊值:
:first-of-type
:last-of-type
nth-of-type
- 这些伪类和前面的基本一致,不同点在于它们是同类型元素排序
:not()
否定伪类- 将符合条件的元素从选择器中除去
- 伪类用来描述一个元素的特殊状态
超链接的伪类
- :link 用来表示没访问过的链接
- :visited 用来表示已经访问过的链接,由于隐私的原因,因此visited这个伪类只能修改链接的颜色
- 这两个表示的是超链接的状态,可在同一个超链接中进行引用
<style> a:link{ color:red; font-size:60px; } a:visited{ color:purple; } a:hover{ color:orange; } a:active{ color:green; } </style> <body> <a href="www.baidu.com">百度</a> <a href="www.sina.com">新浪</a> </body>
- 这两个表示的是超链接的状态,可在同一个超链接中进行引用
- :hover 用来表示鼠标移入的状态
- :active 用来表示鼠标点击的动作
伪元素选择器
- 伪元素表示页面中的一些特殊的并不真实存在的元素
伪元素用 :: 开头
- ::first-letter表示第一个字母
- ::first-line表示第一行
- ::selection表示选中的内容
- ::before元素的开始
- ::after元素的结束
- before和after必须配合content属性来使用
```html
这是一个div``` - **选择器的优先级**(从高到低) - **内联样式** 1,0,0,0 - **id选择器** 0,1,0,0 - **类和伪类选择器** 0,0,1,0 - **元素选择器** 0,0,0,1 - **通配选择器** 0,0,0,0 - **继承的样式** 没有优先级 - 比较优先级时,需要对所有的选择器的优先级进行**相加**计算,**最后的样式优先级越高,则使用越高的样式** - 选择器的累加不会超过其最大的数量级 - 如果优先级计算后相同,此时则**优先使用靠下的样式(即最新的样式覆盖旧的样式)** - **可以通过在某一个样式后面加上 !important ,这样使样式达到最高优先级**(但是在开发中慎用) --- ### 像素、百分比、HSL值 - **长度单位** - **像素:** - 屏幕,实际上是由一个个的小像素点组成 - 例如,某屏幕参数1920*1080表示宽度有1920个像素,高度有1080个像素 - 不同屏幕的像素是不同的,像素越小其屏幕的清晰度越高 - 同样的200px在不同的屏幕下的显示效果也不同 - **百分比:** - 也可以将属性设置为相应的其子元素的百分比 - **设置百分比可以使子元素跟随父元素的改变而改变** - **em** - em是相当于元素的字体大小来计算 - ** 1em=100%font-size** - **rem** - rem相对于根元素的字体大小计算 - **HSL值** - **H 色相** 一个彩虹环,范围0-360(即0-360度) - **S 饱和度** 颜色的浓度,范围:0%-100%(必须加百分号) - **L 亮度** 屏幕亮度,范围:0%-100%(必须加百分号) ```html
- before和after必须配合content属性来使用
- 子元素选择器
- 拥有相同父元素的元素
- 父元素