web前端+HTML5+CSS3学习笔记
文章目录
- HTML认知
-
- 网页的基本组成和本质
- HTML初始概念
- HTML标签学习
- HTML基础
-
- 列表
- 表格
- 表单
- 语义化标签
- 字符实体
- CSS基础
-
- 基础认知
- 选择器
- 文字字体
- Emmet语法
- CSS进阶
-
- 复合选择器
-
- 后代选择器
- 子代选择器
- 并集选择器
- 交集选择器
- 伪类选择器
- 背景的相关属性
- 元素的显示模式
- CSS特性
HTML认知
网页的基本组成和本质
- 网页是由文字，图片，音频，视频，超链接组成的，是网站中的一页。后缀文件是.html或者.htm
- 网页背后的本质是前端程序员的代码
- 前端的代码通过浏览器的转化（解析和渲染）成用户眼中的网页
- 浏览器是网页显示运行的平台，是前端开发的必备工具。
- 浏览器是有渲染引擎的，专门对代码进行解析渲染。
- 渲染引擎不同，导致解析相同的代码的时候的速度，性能，效果不同。所以一个页面在不同的浏览器打开可能效果也不一样。
- web标准：不同浏览器的渲染引擎不同，对于相同代码解析的效果存在差异。所以web标准分三个部分构成。
- 网站是因特网根据一定规则使用html指定的展示特定内容的网页集合。
- 浏览器内核（渲染引擎):负责读取网页内容，整理讯息，计算网页的显示方法和显示界面。
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置的页面形式 |
| 行为 | JavaScript | 网页模型的定义和页面交互 |
HTML初始概念
- HTML中文意思是超文本标记语言，不是编程语言而是标记语言，如果将记事本的后缀,txt改成.html，就可以在网页中打开。点击右键在记事本中打开后，可以通过下面加粗。
<strong>我爱你<\strong>
- 网页类似于一篇文章，有固定的结构，是通过特点的HTML标签进行描述的。
- 超文本是说可以加入图片，声音，动画和多媒体等等内容，超越文本限制。并且它还可以从一个文件跳到另外一个，和世界各地的主机相连（超级链接文本）。标签中有包含关系和兄弟关系。
<html>//根标签
<head>
<title>我是帅哥title>//网页标题
head>
<body>body>
html>
- 按住！再按一个tab就会自动显示html的骨架。ctrl+s可以保存。Alt+B可以直接打开默认网页。注释ctrl+/。
- 标签是由< > /，英文单词或者字母组成。并且把标签<>包括起来的英文单词或者字母称为标签名
- 常见标签是由俩部分构成，需要开始和结束，俩部分包着内容。如果只需要一部分，仅仅使用单标签就可以。
- HTML的标签和标签之间可以分为俩类，一类是父子关系，或者并列关系。
HTML标签学习
- 声明标签：
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>
head>
<body>
写代码是快乐的事情
body>
html>
DOCTYPE html>:文档类型声明，告诉浏览器使用哪种的html版本显示网页
//不是html标签，是给整个文档做声明
lang:定义当前文档的显示语言
//en:英语 zh-CN:中文 英文和中文网站都可以互写，用来起到警示作用
字符集charset:字符的集合，以便于计算机能够识别和存储文字。
<meta charset="UTF-8">
UTF-8：万国码（不会出现乱码）
- 标题标签：文字加粗，文字逐渐变小，独占一行，共六级
<h1>真好h1>//一级标题
<h2>啊h2>//二级标题
- 段落标签：段落之间存在间隙，独占一行
<p>好呢p>
- 换行标签：break,只会改变行距，不改变段落距离。
- 水平线标签
<hr>
- 文本格式化标签的介绍
以下俩套语法，只是在语义上显示更加重要，并没有太多区别。
| b | 加粗 |
|---|---|
| u | 下划线 |
| i | 倾斜 |
| s | 删除线 |
| strong | 加粗 |
|---|---|
| ins | 下划线 |
| em | 倾斜 |
| del | 删除线 |
- 图片标签
（1）单标签，img标签需要展示对应的效果，需要借助标签的属性进行设置。
（2）src叫做属性名，‘’“叫做属性值。src”"叫做标签属性。
（3）标签里面可以有多个属性，但是标签名和属性之间要用空格隔开。属性没有先后顺序之分。
（4）
alt是替换文本。只有当图片加载失败的时候，才会加载alt中的内容。
title属性：当鼠标悬停的时候才出现的图片
width和height属性：如果只设置一个的时候，另一个也会跟着等比例缩放。只需要写一个值就行了。
border设置边框的粗细
<img src=""alt="">
（5）图像标签可以有多个属性，必须写在标签名的后面，属性之间不分顺序，必须用空格隔开。属性采用键值对的格式，key=“value”,属性=属性值。
- 路径：页面要加载图片，需要先找到对应的图片。路径也就是找东西的方法。可以分为绝对路径和相对路径。
绝对路径指的是目录下的绝对位置，可以直接到达目标的位置，通常从盘符开始的路径。包括完整的网址或者D：\等等。(可以复制网页上图片的绝对路径连入）
相对路径（常用）：从当前文件开始出发去找目标文件。相对文件分为同级目录，下级目录，上级目录。图片相对于html界面的位置
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件相对于html在同一级 |
|
| 下一级路径 | / | 图像文件相对于html文件的下一级 |
| 上一级路径 | …/ | 图像文件相对于html文件的上一级 |
- 目录文件夹：普通文件夹。 根目录：目录文件夹的第一层
<img src="目标文件.gif">
<img src="./目标文件.gif">
<img src="文件名/目标文件.gif">//进入下一级
<img src="../目标文件.gif">//..有几层就是向下面走几层
- 音频标签
音频格式目前支持三种：MP3,Wav,Ogg
| src | 音频的路径 |
|---|---|
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
|---|---|
| loop | 循环播放 |
- 视频标签
谷歌浏览器可以配合muted aupoplay静音播放
<video src="" controls>video>
- 链接标签（a标签，超链接，锚链接）
1.当我们不知道文件跳转到哪里的时候，可以写一个空链接href的值书写#空链接。href的作用是跳转的地址,是一个必须属性。
2.链接的target是指按照什么方式打开网页。target属性默认为_self，在当前页面中跳转，覆盖原网页。_blank在新窗口跳转，保留原网页。
3.外部链接：”http://www.qq.com"
内部链接：网站内部界面之间的相互链接（直接写网页的名称）
下载链接：如果href里面的地址是一个文件（.exe)或者压缩包(.zip)，会下载这个文件。
锚点链接：当我们点击链接的时候，可以快速定位到页面的某个位置。
（设置属性值为好啊
<a href="jieshao.html">a>
<a href="www.zip">a>
<a href="./目标文件">目标文件a>
<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像a>
HTML基础
列表
- 使用：场景（在网页中按照行显示相关联的内容，比如”新闻列表，排行榜，账单")。
特点：按照换行的方式，整齐显示内容。其目的是用来布局的，不是显示数据。
种类：无序列表，有序列表，自定义列表。 - 无序列表：比如写新闻列表
ul标签里面只允许包含li标签，直接在里面输入内容是不被允许的。li里面可以包含任意内容。
<ul>
<li>苹果li>
<li>香蕉li>
<li>葡萄li>
ul>
有序列表：比如放手机性能的排序,排名类的列表
<ol>
<li>苹果li>
<li>香蕉li>
<li>葡萄li>
ol>
自定义列表：一个主标题下有好多小标题。用于对术语和名词进行解释和描述，定义列表的列表项前面没有项目符号。
| dl | 表示自定义列表的整体，用于包裹dt/dd标签 |
|---|---|
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
<dl>
<dt>账户管理dt>
<dt>购物指南dt>
dl>
表格
用于展示显示数据，因为它可以使得数据显示的非常规整，可读性很好，不是布局的。
- table:表格整体，用于包裹多个tr
- tr:表示每行，用于包裹td
- td:表格单元格，用于包裹内容，指的是表格数据，也就是数据单元格的内容。
- 嵌套关系：table>tr>td
表格相关属性：
- th表示表头单元格，位于表格的第一行或者第一列，表头单元格中的文本内容加粗居中显示。
- 表格属性：
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left,right,center | 规定表格相对周围元素的对齐方式 |
| border | 1或者“” | 规定表格单元是否有边框，默认为“”没有边框 |
| cellpadding | 像素值 | 规定单元格与内容之间的空白，默认2像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或者百分比 | 规定表格的宽度 |
- 合并单元格
- 合并单元格：
分类：跨行合并（竖直合并）跨列合并（水平合并） - 合并单元格的步骤：
（1）左上原则：如果是上下合并，只保留最上面的。如果是左右合并，只保留最左边的。
（2）跨行合并rowspan=“合并的个数”
跨列合并colspan="合并的个数“
（3）删除多余的单元格
<td rowspan="2">100td>
| border | 数字 | 边框宽度 |
|---|---|---|
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
- 为了让表格的内容结构分组，突出表格的头部（不是表头单元格），主体，底部。
| thead | 表格头部 |
|---|---|
| tbody | 表格主题 |
| tfoot | 表格底部 |
<table border="1" width="500">
<caption><strong>学生成绩单strong>caption>
<thead>
<tr>
<td>姓名td>
<td>成绩td>
<td>评语td>
tr>
thead>
<tbody>
<tr>
<td>小哥哥td>
<td>100td>
<td>好看td>
tr>
tbody>
table>
表单
- 能够使用表单相关标签和属性，实现网页中表单类网页结构搭建，比如注册页面和搜索页面。表单可以做到收集用户的信息，和用户进行交互。
- 一个完整的表单包含表单域，表单控件（表单元素），提示信息三部分
- 表单域是一个包含表单元素的区域，
会把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
form>
表单元素：
1.input输入表单元素，单标签，根据取值的不同，展示出不同的效果。
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 用户自定义 | 定义input元素的名称 |
| type | ||
| value（placeholder) | 用户自定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符最大长度 |
<input type="text">
type的取值：
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | text | 文本框，用于输入文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 用于多选多 |
| input | file | 文件选择，用于之后上传文件。定义输入字段和”浏览“按钮，供文件上传 |
| input | submit | 提交按钮，用于提交，把表单域的内容送给服务器 |
| input | reset | 重置按钮，用于重置 |
| input | placeholder | 占位符，用于提示用户加入提示文字 |
| input | button | 定义可点击按钮（多数情况下，通过javaScript启动脚本） |
<input type="file" multplay> //上传多个文件
<input type="text" placeholder="请输入用户名">
//name是表单元素名字，这里性别单选按钮必须有相同的名字name才能实现多选一
性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女
name和value是每个表单元素都有的属性值，主要给后台人员使用。
name是表单元素的名字，要求单选按钮和复选框要有相同的name值。
| submit | 提交按钮，提交之后给了服务器 |
|---|---|
| reset | 重置按钮，点击之后恢复表单默认值 |
| button | 普通按钮，默认无功能，之后配合js添加功能 |
2.textarea文本域标签 双标签
场景：提供可输入多行文本的表单控件，常见于留言板评论等等。常见的cols规定了文本域的可见宽度，rows规定了文本域的可见行数。
<textarea cols="50" rows="5">
文本内容
texyarea>
3.label标签：
标签为input元素定义标注，绑定内容与表单标签的关系。当点击这个标签的时候，浏览器会自动转到对应的表单元素上。
(法一）使用label标签包裹内容，在label标签的for属性设置对应的id属性值，然后在input里面设置相应的id.for里面的值和id里面的值要一模一样。
（法二）直接把lable绑定
<input type="radio" name="sex" id="nan"> <lable for="nan">男lable>
<lable><input type="radio" name="sex"> 女lable>
4.select下拉表单元素
场景：页面中有多个选项让用户选择，但是想要去节约控件，可以使用来下拉列表。
<select>
<option>选项1option>
<option>选项2option>
select>
<option selected="selected">火星option>
//默认选中项
语义化标签
没有语义化的标签：实际网页开发会用到-div和-span标签，只是一个盒子，用来装内容
div:独占一行的标签——>大盒子
span标签：一行可以显示多个——>小盒子
有语义化的标签：做手机端网页。
字符实体
网页不认识多个空格，只认识一个。若想要实现多个空格，可以添加字符实体的标签，来显示特殊的符号效果。并且有一些符号不太容易显示，所以可以使用某些标签代替。
CSS基础
基础认知
- CSS是一种重叠样式表，作用是把网页变得更漂亮。
- 写法：选择器+属性声明 （选对人，做对事）
- 位置：
- 引入方式：内嵌式（CSS写在style标签里面）+外联式（CSS单独写在一个.css文件夹里面 通常通过link标签在head中引入）+行内式（CSS写在标签的style属性中）
p {
color: red;
font-size: 12px;
}
//外联式在html中引入：
<link rel="stylesheet" href="css文件路径">
选择器
根据不同的需求选出不同的标签。就是选择标签的作用。
基础选择器：由单个选择器组成，包括以下四类：
- 标签选择器 （ 结构名{css属性名：属性值；} ）
- 类选择器先定义再去选择 .类名{css属性名：属性值；}
注意标签上都有class属性，class的属性值称为类名.类名可以由数字，字母，下划线，中划线组成.一个标签可以有多个类名，类名之间以空格隔开。类名可以重复，一个类选择器可以选中多个标签。
样式点定义，结构类使用 一个或多个 开发最常用 - #id选择器
为标有特定id的html元素指定特定样式。
html元素中以id属性设置id选择器，css中id选择器以”#“来定义。
（1）只能调用一次，别人切勿使用。
（2）id选择器一般用于页面唯一性的元素上，经常和js搭配使用。
4.通配符选择器：找到页面中的所有标签，设置样式。
用”*“定义，选取页面中的所有元素（标签）
<style>
.red{
color:red;
}
.bb{
font-size:29px;
}
style>
<p class="red bb">222p>
#red{
color:red;
}
<div id="red">id选择器div>
*{
color:red;
}
文字字体
- 文字基本格式：
1.粗细font-weight：normal(正常）加粗（bold) 纯数字（100–900的整数）
2.字体font-family:微软雅黑，宋体
（1）各种字体之间用英文,隔开
（2）每个字体加引号
3.倾斜font-style：normal，italic.
4.大小font-size:px是默认的单位，谷歌默认16px.不同浏览器显示的字号大小不一致，尽量有一个明确的大小。
5.文字的复合属性
font：style,weight,size/line-height,family;
(1)不能更换顺序。
（2）必须保留font-size和font-family俩个属性，否则font属性不起作用。
6.文字垂直居中：文字的行高等于盒子的高度。
height=line-height
font:italic 700 66px 宋体;
-
文本属性：
-
1.文本缩进 text-indent ：数字px或者数字em(1em=当前标签font-size的大小）
常用于文本第一行的缩进（通常是段落的首行缩进） -
2.文本水平对齐方式text-align：可以让文本，span标签，a标签，input标签，img标签所在的盒子水平居中对齐。
| left | 左对齐 |
|---|---|
| center | 居中对齐 |
| right | 右对齐 |
- 3.文本颜色：取值可以是预定义颜色值，十六进制或者是RGB代码。
开发中最常用十六进制的颜色。
div {
color:pink;
}
- 4.文本修饰：text-decoration
| underline | 下划线（常用） |
|---|---|
| line-through | 删除线 |
| overline | 上划线 |
| none | 无装饰线 |
- 5.行间距：line-height
取值：数字+px或者倍数。
1）行间距=上间距+文本高度+下间距
2）单行文本垂直居中设置文字中元素高度。line-height:1取消上下间距加粗样式。
Emmet语法
生成标签：直接输入标签名按tab即可
div*3
父子级标签：ul>li
兄弟级标签：div+p
生成带有类名或者id名的：.demo/#two(默认生成盒子）
div有顺序：自增符号$
CSS进阶
复合选择器
复合选择器是由俩个或者多个基础选择器组成的，可以准确高效选择目标元素。
后代选择器
后代选择器又称包含选择器，可以选择父类中的元素，其写法就是外层标签写在前面，内层标签写在后面，中间用空格隔开。
（可以有子代，可以有孙代）
语法：父代选择器1 子代选择器2{css语句}
结果：在选择器1中找到其包含的选择器2
div p {
color:red;
}
子代选择器
只能选最近一级的元素（亲儿子））
div>a {
color:red;
}
并集选择器
作用：同时选择多组标签，设置相同的格式。
语法：选择器1，选择器2{ css文本 }
注意：
（1）并集选择器中的每组选择器之间通过，分离。
（2）并集选择器的每组选择器可以是基础选择器或者复合选择器。
div,p,.pig li{
color:red;
}
交集选择器
选中页面中同时满足多个选择器的标签。选择器1选择器2{css}
p.box {
color:red;
}
伪类选择器
作用：选择鼠标悬停在元素上的状态
注意点：
1.伪类选择器选中的元素的某种状态。
2.任何标签都可以添加伪类。
1)链接伪类选择器：
| a:linked | 选择未被访问的链接 |
|---|---|
| a:visited | 选择已经被访问的链接 |
| a:hover | 选择鼠标指在它上面的链接 |
| a:active | 选择活动链接（鼠标按下未弹起的链接） |
(2)顺序插入（LVHA）–>love hate
(3)因为a链接在浏览器中有默认样式，所以实际工作中需要给链接单独设定样式。
a:hover {
color:red;
}
2）：focus伪类选择器
选取获得焦点的表单元素。
焦点就是光标，一般情况下input表单元素才能获取，因此这个主要针对于表单元素。
input:front {
back-ground:yellow;
}
背景的相关属性
- 背景颜色：background-color 取值：关键字，rab表示法，raga表示法，十六进制。背景的默认颜色是透明。
div{
background-color:pink;
}
- 背景图片:属性名background-image(bgi)
常见于logo的制作，装饰性的小图片，超大的背景图片
（便于控制位置）
div{
background-image:url(路径);
}
- 背景平铺：属性名background-repeat(bgr)
| repeat | 默认水平和竖直方向都平铺 |
|---|---|
| no-repeat | 不平铺 |
| repeat-x | 沿着水平方向平铺 |
| repeat-y | 沿着竖直方向平铺 |
- 背景位置：使用背景相关属性装饰元素格式。
属性名：background-position(bgp)
取值：top left center right
(1)如果是方位名词则xy的先后顺序效果等价
（2）省略其中一个，另外一个默认居中对齐
(3)如果写的是坐标单位，第一个一定是x坐标，第二个一定是y坐标。
如果只写一个参数的话默认是x，另外一个垂直居中对齐。
（4）混合单位的使用必须有顺序
background-position:center center;
-
背景固定：background-attachment
默认是scroll,背景随着内容滚动。但是fixed可以使得背景图像固定。 -
背景相关属性的连写
1)background: color image repeat attachment position
2)可以按照要求省略。
3)在pc端，如果盒子大小和背景图片的大小一样，此时可以直接写成background: url()。
4)img标签和背景图片的区别:img用于实现比较重要的图片。 -
背景颜色半透明：background:rgba(0,0,0,0.3);
最后一个是alpha透明度，取值范围是在0-1之间。
元素的显示模式
块级元素：独占一行+宽度默认是父元素的宽度，高度默认由内容展开+可以设置宽高+是一个盒子，里面可以放行内或者块级元素。div p h系列
但是：p h等文字类标签里面不能再放div盒子
行内元素（内联元素）：一行可以显示多个+宽度和高度默认由内容展开+不可以设置宽高，尺寸和内容的大小相同+行内元素内部只能容纳文本或者其他行内元素。 a span b u系列。
行内块元素：一行可以显示多个+默认宽度是它本身内容的宽度+高度行高外边距等等都可以控制。input,textarea,button,img系列。
元素显示模式转换：
| 属性 | 效果 | 使用频率 |
|---|---|---|
| display:block | 转换成块级元素 | 较多 |
| display:inline-block | 转换为行内块元素 | 较多 |
| display:inline | 转换为行内元素 | 极少 |
a {
width:400;
display:block;
}
块级元素一般作为大容器，可以嵌套：文本，块级元素，行内元素，行内块元素。但是p标签不要嵌套div,p,h等块级元素。
a标签可以嵌套任意元素，但是a不要嵌套a标签。
CSS特性
- 继承性
子承父业，父类的文字的控制属性都可以被子类继承，
（1）原则：如果有我就生成自己的，自己没有的才去继承。
（2）行高的继承性：行高可以跟单位也可以不去跟
body {
font:12px/1.5;
}
div {
font-size:12px;
}
//表示行高是文字大小的1.5倍即21
- 层叠性
给相同的选择器设置相同的样式，后面的属性覆盖前面的属性。层叠性解决样式冲突的问题。
原则（1）：样式冲突，就近原则（哪个样式离结构近，就执行哪个样式）
后来者居上。
原则（2）：样式不冲突，不会层叠 - 优先级
1当同一个元素指定多个选择器的时候，优先级高的选择器样式会覆盖优先级低的选择器样式。
2.公式：继承<通用符选择器<标签选择器<类选择器
| 选择器 | 权重 |
|---|---|
| 继承或者* | 0.0.0.0 |
| 元素选择器 | 0.0.0.1 |
| 类选择器（伪类选择器） | 0.0.1.0 |
| id选择器 | 0.1.0.0 |
| 行内模式 | 1.0.0.0 |
| ！important | 无穷大 |
div {
color:pink !important
}
note:
(1)权重是有四位数字组成的，但是不会出现进位。
（2）判断权重的时候，从左向右判断大小
3.复合选择器：权重叠加
按顺序比较行内样式的个数，id选择器，类选择器，标签选择器个数。
div ul li:0,0,0,3
.nav ul li:0,0,1,2
a:hover 0,0,1,1
.nav a:0,0,1,1
（1）权重虽然会叠加，但永远不会产生进位的问题。
（2）继承的权重是0
！important如果不是继承，则权重最高，天下第一！