#web前端开发HTML+CSS+JS学习笔记
#HTML核心
## 第一个网页
Emmet插件:自动生成HTML代码片段
### 注释
注释为代码的阅读者提供帮助,注释不参与运行
在HTML中,注释使用如下格式书写:
```html
<!-- 注释内容 -->
```
###元素
> 其他叫法:标签、标记
```html
<a href="http://www.duyiedu.com" title="黑龙江渡一教育有限公司">渡一教育</a>
<title>Document</title>
```
整体:element (元素)
元素 = 起始标记(begin tag) + 结束标记(end tag) + 元素内容 + 元素属性
属性 = 属性名 + 属性值
属性的分类:
- 局部属性:某些元素特有的属性
- 全局属性:所有元素通用
```html
<meta charset="UTF-8">
```
有些元素没有结束标记,这样的元素叫做:**空元素**
空元素的两种写法:
1. ```<meta charset="UTF-8">```
2. ```<meta charset="UTF-8" />```
### 元素的嵌套
元素不能相互嵌套
父元素、子元素、祖先元素、后代元素、兄弟元素(拥有同一个父元素的两个元素)
### 标准的文档结构
HTML:页面、HTML文档
```html
<!DOCTYPE html>
```
文档声明,告诉浏览器,当前文档使用的HTML标准是HTML5。
不写文档声明,将导致浏览器进入怪异渲染模式。
```html
<html lang="en">
</html
```
根元素,一个页面最多只能一个,并且该元素是所有其他元素的父元素或祖先元素。
HTML5版本中没有强制要求书写该元素
lang属性:language,全局属性,表示该元素内部使用的文字是使用哪一种自然语言书写而成的。
```html
<head>
</head>
```
文档头,文档头内部的内容,不会显示到页面上。
```html
<meta>
```
文档的元数据:附加信息。
charset:指定网页内容编码。
计算机中,低压电(0~2 V)0,高压电(2~5 V)1,表示2,使用10
计算机中,只能存储数字
文字和数字进行对应
比如:a —— 97, A —— 64
该字典叫做字符编码表,GB2312,GBK
袁 —— GB2312 —— 100000 —— GBK —— ??
UTF-8 是 Unicode 编码的一个版本
```html
<title>Document</title>
```
网页标题
```html
<body>
</body>
```
文档体,页面上所有要参与显示的元素,都应该放置到文档体中。
## 语义化
### 什么是语义化
1. 每一个HTML元素都有具体的含义
a元素:超链接
p元素:段落
h1元素:一级标题
2. 所有元素与展示效果无关
元素展示到页面中的效果,应该由CSS决定。
因为浏览器带有默认的CSS样式,所以每个元素有一些默认样式。
**重要:选择什么元素,取决于内容的含义,而不是显示出的效果**
### 为什么需要语义化?
1. 为了搜索引擎优化(SEO)
搜索引擎:百度、搜搜、Bing、Google
每隔一段时间,搜索引擎会从整个互联网中,抓取页面源代码
2. 为了让浏览器理解网页
阅读模式、语音模式
## 文本元素
HTML5中支持的元素:HTML5元素周期表
### h
标题:head
h1~h6:表示1级标题~6级标题
### p
段落,paragraphs
> lorem,乱数假文,没有任何实际含义的文字
### span【无语义】
没有语义,仅用于设置样式
> 以前:某些元素在显示时会独占一行(块级元素),而某些元素不会(行级元素)
> 到了HTML5,已经弃用这种说法。
### pre
预格式化文本元素
空白折叠:在源代码中的连续空白字符(空格、换行、制表),在页面显示时,会被折叠为一个空格
例外:在pre元素中的内容不会出现空白折叠
在pre元素内部出现的内容,会按照源代码格式显示到页面上。
该元素通常用于在网页中显示一些代码。
pre元素功能的本质:它有一个默认的css属性
> 显示代码时,通常外面套code元素,code表示代码区域。
## HTML实体
实体字符, HTML Entity
实体字符通常用于在页面中显示一些特殊符号。
1. &单词;
2. &#数字;
- 小于符号
<
- 大于符号
>
- 空格符号
- 版权符号
©
- &符号
&
## a元素
超链接
### href属性
hyper reference:通常表示跳转地址
1. 普通链接
2. 锚链接
id属性:全局属性,表示元素在文档中的唯一编号
3. 功能链接
点击后,触发某个功能
- 执行JS代码,javascript:
- 发送邮件,mailto:
要求用户计算机上安装有邮件发送软件:exchange
- 拨号,tel:
要求用户计算机上安装有拨号软件,或使用的是移动端访问
### target属性
表示跳转窗口位置。
target的取值:
- _self:在当前页面窗口中打开,默认值
- _blank: 在新窗口中打开
## 路径的写法
### 站内资源和站外资源
站内资源:当前网站的资源
站外资源:非当前网站的资源
### 绝对路径和相对路径
站外资源:绝对路径
站内资源:相对路径
1. 绝对路径
绝对路径的书写格式:
url地址:
```
协议名://主机名:端口号/路径
schema://host:port/path
```
当跳转目标和当前页面的协议相同时,可以省略协议
2. 相对路径
以./开头,./表示当前资源所在的目录
可以书写../表示返回上一级目录
相对路径中:./可以省略
## 图片元素
### img元素
image缩写,空元素
src属性:source
alt属性:当图片资源失效时,将使用该属性的文字替代图片
### 和a元素联用
### 和map元素
map:地图
map的子元素:area
衡量坐标时,为了避免衡量误差,需要使用专业的衡量工具:
ps、pxcook、cutpro(本人开发)
### 和figure元素
指代、定义,通常用于把图片、图片标题、描述包裹起来
子元素:figcaption
##多媒体元素
###video
controls:控制控件的显示,取值只能为controls
`<video controls="controls" src="./images/yuanshen.mp4" style="width:1000px;"></video>`
某些属性,只有两种状态:1.不写 2.取值为属性名,这种叫做布尔属性
布尔属性,在HTML中可以不用书写属性值
autoplay:布尔属性,自动播放
``
muted:布尔属性,静音播放
loop:布尔属性,循环播放
`<video controls="controls"autoplay muted loop src="./images/yuanshen.mp4" style="width:1000px;"></video>`
###audio和视频播放完全一样
`<audio src="./images/许嵩-如约而至.mp3" controls autoplay loop muted></audio>`
###兼容性
1.旧版本的浏览器不支持这两元素
2.不同的浏览器支持的音频格式可能不一致
MP4 webm(视频为多格式的情况下可以使用子元素source)
<source src="./images/yuanshen.mp4">
<source src="./images/yuanshen.webm">
##列表元素
###有序列表
ol(表示整个列表):ordered list
li(表示列表里的某一项):list item
<ol type="1">//1表示每一项前面是阿拉伯数字排序 i表示每一项前面是罗马数字排序 a表示英文字母排序 I、A表示大写的数字编号
<li>打开冰箱门</li>
<li>把大象放进去</li>
<li>关上冰箱门</li>
</ol>
<ol>超文本标记语言type编号类型(一般用css属性控制)
* 'a'表示小写字母编号
* 'A'表示大写字母编号
* 'i'表示小写罗马数字编号
* 'i'表示大写罗马数字编号
* '1'表示数字编号
reversed布尔属性
###无序列表
把ol改为ul
成为废物的条件
<ul>
<li>喜欢睡觉</li>
<li>喜欢摆烂</li>
<li>不喜欢学习</li>
</ul>
无序列表常用于制作菜单或者新闻列表。
###定义列表
通常用于一些术语
dl:definition list
dt:
dd:
dl>
<dt>HTML</dt>
<dd>超文本标记语言,xxxxx</dd>
<dt>元素</dt>
<dd>组成HTML文档的单元,每个xxxx</dd>
</dl>
##容器元素
容器元素:该元素代表一个块区域,内部用于放置其他元素
###div元素
没有语义,表示一块区域
###语义化容器
header:通常用于页头,也可以用于表示文章的头部。
footer:通常用于表示页脚,也可以用于表示文章的尾部
article:通常表示文章
section:通常用于表示文章的章节
aside:通常用于表示侧边栏
##元素的包含元素
以前:块级元素可以包含行级元素,行级元素不包括块级元素,a元素除外
元素的包含关系由元素的内容类别决定
例如,查看h1元素中是否包含p元素(在内容类别 mdn查询)
总结:
1.容器元素中可以包含任何元素
2.a元素中几乎可以包含任何元素
3.某些元素有固定的子元素(ul>li,ol>li,dl>dt>dd)
4.标题元素和段落元素不能相互嵌套,并且不能包含容器元素
#CSS基础
CSS代码格式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color:aqua;
background-color:blueviolet;
text-align:center;
}
#test{
color :coral
}
</style>
##为页面添加样式
h1{
color:aqua;
background-color:blueviolet;
text-align:center;
}
CSS规则=选择器(eg:h1{})+声明块
选择器:选中元素,用来确定选择的范围
1.ID选择器:选择对应ID值的元素所选择的区域比元素选择器所选择的区域范围小
```
#test{
color :coral
}//html代码部分
```
</p>
<p id="test">lorem ipsum dolor sit amet.</p>
<p>Dolores iste deleniti similique molestiae.</p>
<p>Neqye dfficia minus ab nesciunt.</p>//css代码部分
效果如下图
![](/images/1.png/)
2.元素选择器
h1{
color:aqua;
background-color:blueviolet;
text-align:center;
}//css代码部分
<h1>她只是我的妹妹</h1>//html代码部分
3.类选择器(使用较多)
css代码部分:
<style>
.red{
color:red;
font-size:2em;
}
</style>
html代码部分:
</head>
<h1 class="red">
她只是我的妹妹</h1>
<p>
lorem ipsum dolor sit amet.
</p>
<p class="red">lorem ipsum dolor sit amet.</p>
<p>Dolores iste deleniti similique molestiae.</p>
<p>Neqye dfficia minus ab nesciunt.</p>
####声明块
出现在{}中
声明块中包含很多声明(属性)每一个声明(属性)表示某一方面的样式。
###css代码书写位置
1.内部样式表:书写在style元素中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color:aqua;
background-color:blueviolet;
text-align:center;
}
</style>
2.内联样式表(元素样式表):直接写在style属性中
<h1 style="color:aquamarine;">
现在添加样式</h1>
3.外部样式表(推荐使用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="red-big-center">
你是大千世界一轮清泉
</div>
</body>
</html>
将样式写到独立的CSS文件中。
(1)外部元素可以解决多页面样式重复问题
(2)有利于浏览器缓存,从而提高页面的响应速度
(3)有利于代码分离,更易阅读和维护
##常见的样式声明
1.color:元素内部的文字颜色
**预设值**:定义好的单词
**三原色,色值**:光学三元色,每个颜色可以用0-255之间的数字范围来表达,色值。
rgb表示法:
rgb(0,255,0)//绿色
hex(16进制)表示法:
#ff44000
2. background-color
元素背景颜色
3. font-size
元素内部文字的尺寸大小
1)px:像素,绝对单位,简单的理解为文字的高度占多少个像素
2)em:相对单位,相对于父元素的字体大小
每个元素必须有字体大小,如果没有声明,则直接使用父元素的字体大小,如果没有父元素(html),则使用基准字号。
> user agent,UA,用户代理(浏览器)
4. font-weight
文字粗细程度,可以取值数字,可以取值为预设值
> strong,默认加粗。
5. font-family
文字类型
必须用户计算机中存在的字体才会有效。
使用多个字体,以匹配不同环境
sans-serif,非衬线字体
6. font-style
字体样式,通常用它设置斜体
> i元素,em元素,默认样式,是倾斜字体; 实际使用中,通常用它表示一个图标(icon)
7. text-decoration
文本修饰,给文本加线。
> a元素
> del元素:错误的内容
> s元素:过期的内容
8. text-indent
首行文本缩进
9. line-height
每行文本的高度,该值越大,每行文本的距离越大。
设置行高为容器的高度,可以让单行文本垂直居中
行高可以设置为纯数字,表示相对于当前元素的字体大小
10. width
宽度
11. height
高度
12. letter-space
文字间隙
13. text-align
元素内部文字的水平排列方式
## 选择器
选择器:可以精准的选中想要的元素
选择器:帮助你精准的选中想要的元素
### 简单选择器
1. ID选择器
2. 元素选择器
3. 类选择器
4. 通配符选择器
*,选中所有元素
5. 属性选择器
根据属性名和属性值选中元素
6. 伪类选择器
选中某些元素的某种状态
1)link: 超链接未访问时的状态
2)visited: 超链接访问过后的状态
3)hover: 鼠标悬停状态
4)active:激活状态,鼠标按下状态
爱恨法则:love hate
7. 伪元素选择器
before
after
## 选择器的组合
1. 并且
2. 后代元素 —— 空格
3. 子元素 —— >
4. 相邻兄弟元素 —— +
5. 后面出现的所有兄弟元素 —— ~
## 选择器的并列
多个选择器, 用逗号分隔
语法糖
##层叠(权重计算)
声明冲突:同一个样式,多次应用到同一个元素
层叠:解决声明冲突的过程,浏览器自动处理
###1.比较重要性
重要性从高到低:
1)作者样式表中的!important样式
2)作者样式表中的普通样式
3)浏览器默认样式表
###2.比较特殊性
看选择器
总体规则:选择器选中的范围越窄,越特殊
具体规则:通过选择器,计算出一个四位数(xxxx)
1.千位:如果是内联式,记作1,否则记作0;
2.百位:等于选择器中所有ID选择器的数量
3.十位:等于选择器中所有类选择器,属性选择器,伪选择器的数量
4.个位: 等于选择器中所有元素选择器、伪元素选择器的数量
逢256进一
###3.比较源次序
代码书写靠后的
###应用
1.重置样式表
书写一些作者样式,覆盖浏览器的默认样式
重置样式表覆盖浏览器的默认样式
常见的重置样式:normalize.css、reset.css、meyer.css
2.爱根法则
link>visited>hover>active
##继承
子元素继承父元素某些CSS属性
通常,跟文字内容相关的元素会被继承。
web前端开发HTML+CSS+JS学习笔记Day2
最新推荐文章于 2024-08-21 22:36:29 发布