一、html、css、javascript基本认识
1.HTML
类型：超文本标记语言
用途：可用于网页结构的设计或搭建：
后缀：html.html
超文本简述：‘超文本’就是指的是其可以包含图片、链接、音乐、程序等非文字元素
HTML简述如下：
1、标记语言：标记语言为非编程语言，不具备编程语言的程序逻辑
2、HTML组成部分：由标签、指令、转义字符（实体）
标签：被尖括号包裹有字幕开头的合法字符可以被浏览器解析的标记。（系统标签、自定义标签）
指令：被尖括号包裹有！开头的标记
转义字符：被&与；包裹的特殊字母组合或#开头的十进制数。（空格 ，版权©）
2.CSS
类型：级联样式表
用途：可以让网页页面的风格设计，样式、美观
后缀：CSS.css
CSS简述：
1、css也可叫标记语言同上
2、CSS的组成部分：选择器、样式块、作用域
选择器：有标签、id、类单独或组合出现
作用域：由{}包裹
样式块：满足css连接语法的众多样式：
3.javascript
类型：浏览器脚本语言
用途：可以负责页面特效、调用刘乱起的API（BOM）\操作改变页面页面内容（DOM）,从祸端获取数据、渲染页面等：
后缀：javascript.js
javascript简述：
1、实实在在的编程语言有着完善的语法、可以完成复杂的程序逻辑
2、javascript组成部分：由BOM、DOM、ES(ECMAScript)
DOM:文档对象模型
BOM:浏览器对象模型
ES：是一种开放的且广为被桀纣的脚本语言规范
二、HTML常用标签
1、无语义标签
<div>div> <span>span>
2、常用语义标签
<h1>一级标题h1> <p>段落p> <pre>原文本pre> <br/>换行 <hr/>分割线
3、文本标签
<i>斜体i> <em>强调型斜体em> <b>粗体b> <strong>强调型粗体strong> <del>删除文本del> <s>s> <ins>添加文本ins> <u>u> <sub>下标字sub> <sup>上标字sup> <ruby> 拼音<rt>pinyinrt> ruby>
三、标签分类
1、单双标签
单标签：单标签在⾃自身标签标识结束，主要应⽤用场景为功能性标签
双标签：双标签有成对的结束标识，主要应⽤用场景为内容性标签
2、行块标签
行标签： 又名内联标签，内联标签⾃身不具备宽⾼，通常同行显示
块标签：又名块级标签，块标签拥有⾃身宽⾼，通常独⾃占据⼀行
3、单一或组合标签
单一标签：单独出现，表示具体的功能或展示具体的内容
组合标签：配合使⽤用，才能产⽣生相应的内容与效果
四、模板解析
1、基础模板
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题title>
head>
<body>
body>
html>
2、模板解读
DCOTYPE:指定文档类型，规定html标签语法
html：文档根标签、标注着文档（页面）的开始与结束
head：文档头标签、可以引用脚步文件、指定样式表、书写代码逻辑块、提供元信息
body：文档主体标签，包含文档所有文本与超文本内容
title：文档tag标题标签，设置文档tag的标题内容
3、meta（元标签）
<meta charset="UTF-8"> <title>css选择器title> <meta name="keywords" content="网页搜索的关键字"> <meta name="description" content="有关网页的描述在80字以内"> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta name="viewport" content="width=decvice-width,initial-scale=1,maxmum-scale=1,minmum-scale=1,user-scale=no">
4、link连接标签
<link rel="stylesheet" type="text/css" href="文件名.css">
<link rel="icon" type="image/x-icon" href="图片路径或网址">
5、script标签
<script style="text/javascript">script>
五、CSS三种引入方式
一、三种方式的书写规范 1、行间式 ```html <div style="width: 100px; height: 100px; background-color: red">div> ``` 2、内联式 ```html <head> <style> div { width: 100px; height: 100px; background-color: red; } style> head> ``` 3、外联式 ```css file: zero.css div { width: 100px; height: 100px; background-color: red; } ``` ```css file: zero.html <head> <link rel="stylesheet" type="text/css" href="css/zero.css" /> head> ``` 二、三种方式间的"优先级" * 与样式表的解析顺序有关 v_test：掌握三种CSS引入方式方式
六、常用样式及长度颜色
1、样式模板
<head> <style type="text/css"> div{ color: red; } style> head>
2、长度
* px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便
* mm：毫米
* cm：厘米
* in：英寸
* pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；
* em：相当长度，通常1em=16px，应用于流式布局
3、颜色
* rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）
* rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha）
* hsl()：第一个值为[0,360]数值，后二个值可为百分比，以,相隔（h:Hue s:Saturation l:Lightness）
* hsla()：第一个值为[0,360]数值，中间二个值可为百分比，最后一个为[0, 1]数值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
* #AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc
七、三种常用样式
DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>三合一练习title>
<style type="text/css">
/*字体练习*/
span{
color: blue;
/*字体粗细（lighter细，normal标准，bold粗）*/
font-weight:bold;
/*字体风格（oblique斜体，normal标准，initial首字母大写）*/
font-style: oblique;
line-height: 10px;
font-size:10mm;
/*font:lighter 10mm/10mm "STSong","微软雅黑";*/
}
/*文本练习*/
div{
width: 100px;
color: red;
/*文本水平排列方式*/
text-align: center;
/*字词间距*/
letter-spacing: 1mm;
word-break: 1mm;
/*文本下划线underline，中划线line-through，上划线overline*/
text-decoration:line-through;
/*显示方式（行内块同一行显示）*/
display: inline-block;
}
div{
/*文本内容首行缩进*/
text-indent: 2em;
/*垂值排列方式（top 上，middle中，（基线baseline，底部bottom））*/
vertical-align:baseline;
}
/*标题水平居中*/
h1{
text-align: center;
}
/*背景练习*/
.d{
width: 300px;
height: 300px;
background-color: blue;
/*插入背景图片*/
background-image: url('bg_repeat.gif');
/*平铺方式（repeat平铺，no-repeat不平铺，repeat-x横平铺，repeat-y纵平铺）*/
background-repeat:no-repeat;
/*定位第一个为水平的值（left，center，right），第二为垂值的值（top，center，bottom）*/
/*background-position: right top;*/
/*插入背景图片是否滚动（scroll，fixed）*/
background-attachment: scroll;
/*实现滚动效果*/
overflow: auto;
}
style>
head>
<body>
<span>
嘿嘿
span>
<h1>ddh1>
<div> 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个div>
<div> kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ffdiv>
<div>55div>
<div class="d">div>
br*50
body>
html>
八、CSS选择器
8、 一、基础选择器
1、通配选择器
```css * { border: solid; } 匹配文档中所有标签：通常指html、body及body中所有显示类的标签 ```
2、标签选择器
```css div { background-color: yellow; } 匹配文档中所有与标签名匹配的标签：如div{}会匹配文档中全部div，span{}会匹配文档中所有span ```
3、类选择器
```css .red { color: red; } 匹配文档中所有拥有class属性且属性值为red的标签：如 均会被匹配 ```
4、id选择器
```css #div { text-align: center; } 匹配文档中所有拥有id属性且属性值为div的标签：如
均会被匹配 ```补充：基础选择器的优先级
- 基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
- 基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
- 基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器
8、二 组合选择器
1、群组选择器
```css div, span, .red, #div { color: red; } ```
- 一次性控制多个选择器 - 选择器之间以,隔开，每一个选择器位均可以为任意合法选择器或选择器组合
2、子代(后代)选择器
```css 子代选择器用>连接 body > div { color: red; } 后代选择器用空格连接 .sup .sub { color: red; } ```
- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器 - 每一个选择器位均可以为任意合法选择器或选择器组合 - 子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系
3、相邻(兄弟)选择器
```css 相邻选择器用+连接 .d1 + .d2 { color: red; } 兄弟选择器用~连接 .d1 ~ .d3 { color: red; } ```
- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器 - 每一个选择器位均可以为任意合法选择器或选择器组合 - 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系
补充：组合选择器优先级
- 组合选择器优先级与权值相关，权值为权重和 - 权重对应关系
| 选择器 | 权重 | | :--------: | :---: |
| 通配 | 1 | |
标签 | 10 | |
类、属性 | 100 |
| id | 1000 |
| !important | 10000 |
- 选择器权值比较，只关心权重和，不更新选择器位置 - 不同级别的选择器间不具备可比性：1个类选择器优先级高于n个标签选择器的任意组合
4、属性选择器
- [attr]：匹配拥有attr属性的标签 - [attr=val]：匹配拥有attr属性，属性值为val的标签 - [attr^=val]：匹配拥有attr属性，属性值以val开头的标签 - [attr$=val]：匹配拥有attr属性，属性值以val结尾的标签 - [attr*=val]：匹配拥有attr属性，属性值包含val的标签
v_hint：属性选择器权重等价于类
演示如下：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组合选择器title>
<style type="text/css">
/*组合选择器*/
/*特性:每个选择器位可以为任意基本选择器或选择器组合*/
/*群组选择器: ,隔开*/
/*控制多个*/
div, .s, section {
color: red;
}
/*子代选择器: >连接*/
body > div {
color: orange;
text-decoration: underline;
}
/*div > a {
text-decoration: none;
}*/
/*后代选择器: 空格连接*/
/*包含子代选择器*/
body a {
text-decoration: none;
}
/*相邻选择器: +连接*/
span + section {
background-color: pink;
}
/*兄弟选择器: ~连接*/
/*包含相邻选择器*/
/* div ~ section {
background-color: brown;
}
/*交集选择器*/
/*即是选择器1又是选择器2*/
/* i.s {
color: yellow;
}
/*多类名选择器*/
/*.d1 {
color: blue;
}
.d1.d2 {
color: tan;
}
.d1.d2.d3 {
color: #780;
}**//*/
style>
head>
<body>
<div>divdiv>
<span class="s">spanspan>
<section>sectionsection>
<div>
<i class="s">iiiii>
<a href="">a标签a>
div>
<div class="d1 d2 d3">呵呵div>
body>
html>
二、组合选择器优先级演示如下：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组合选择器优先级title>
<style type="text/css">
/*同目录结构下*/
/*1.子代与后代优先级相同*/
/*body > div == body div*/
/*2.相邻与兄弟优先级相同*/
/*div + span == div ~ span*/
/*3.最终样式采用逻辑后的样式值*/
/*不同目录结构下*/
/*1.根据选择器权值进行比较*/
/*2.权值为标签权重之和*/
/*3.权重: *:1 div:10 class:100 id:1000 !important:10000 */
/*4.权值比较时,关心的是值大小,不关心位置与具体选择器名*/
/*5.id永远比class大,class永远比标签大*/
/*注:控制的是同一目标,才具有可比性*/
/*div>div>div>div>...>div {} 11 < .div{}*/
/*10*/
div {
color: red;
}
/*20*/
div div {
color: yellow;
}
/*大于一切标签*/
.d2 {
color: blue;
}
/*.d2抵消,剩权重10*/
div .d2 {
color: orange;
}
/*等价于div .d2,权值相同,位置决定*/
.d1 div {
color: pink;
}
/*又多10*/
div .d1 div {
color: tan;
}
/*不具有可比性*/
div .d1 > div{
color: green;
}
/*高于一切class及标签*/
#dd1 div {
color: #000;
}
style>
head>
<body>
<div>
<div class="d1">
<div id="dd1">
<div>
<div class="d2">12345div>
div>
div>
div>
div>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器title>
<style>
.d2 {
color: red;
}
/*属性选择器权重 == class选择器权重*/
/*有属性class的所有标签*/
[class] {
color: orange;
}
/*有属性class且值为d2的所有标签(值不影响权重)*/
[class="d2"] {
color: pink;
}
/*是div且class='d2',增加了权重*/
div[class='d2'] {
color: blue;
}
/*属性以什么开头: ^= */
/*属性以什么结尾: $= */
/*属性模糊匹配: *= */
[class ^= 'he'] {
color: yellow;
}
[class $= 'ld'] {
color: tan;
}
[class *= 'ow'] {
color: cyan;
}
[class][dd] {
color: brown;
}
style>
head>
<body>
<div class="d1">00000
<div class="d2">12345div>
<div class="helloworld" dd do="do something">helloworlddiv>
div>
body>
html>
九、盒模型及其布局
1、盒模型
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型title>
<style type="text/css">
.box {
margin: 10px;
border: solid;
padding: 10px;
width: 100px;
height: 100px;
/*background-color: orange;*/
/*覆盖*/
background: red;
}
/*组成:margin + border + padding + content*/
/*content = width * height*/
/*1.四个成员均具有自身独立显示区域,不相互影响(视觉上感觉会相互影响)*/
/*2.margin/padding外边距/内边距控制布局*/
/*3.border控制边框*/
/*4.content控制内容*/
/*padding*/
/*与content共有背景颜色*/
/*content*/
/*内容显示区域*/
/*红色区域 120 * 120 */
/*content区域 100 * 100 => 内容显示区域*/
/*值设置*/
.box {
/*控制四个方位*/
/*margin: 20px;
padding: 30px;*/
/*上下 左右*/
/*margin: 10px 20px;
padding: 30px 40px;*/
/*上 左右 下*/
/*margin: 10px 20px 30px;
padding: 30px 40px 50px;*/
/*上 右 下 左*/
margin: 10px 20px 30px 40px;
padding: 30px 40px 50px 40px;
/*总结*/
/*1.规定起始 2.顺时针 3.不足找对面*/
}
/*边框: 宽度,颜色,样式*/
.box {
border-width: 10px;
/*transparent透明,会透出背景颜色*/
/*border-color: transparent;*/
border-color: #333;
/*solid solid dotted dotted outset inset double*/
border-style: double;
/*整体设置*/
border: 5px solid orange;
}
style>
head>
<body>
<div class="box">12345div>
body>
html>
2、盒模型布局
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型布局title>
<style>
/*做页面必备reset操作*/
html, body {
margin: 0
}
.box, .wrap {
width: 200px;
height: 200px;
background-color: red;
}
.wrap {
background: orange;
}
/*影响自身布局*/
/*.box {
margin-top: 30px;
margin-left: 100px;
}*/
/*影响兄弟布局*/
/*margin-bottom影响上下兄弟,尽量别对margin-right进行设置*/
/*margin-right影响左右兄弟,尽量别对margin-bottom进行设置*/
.box {
/*margin-bottom: 30px;*/
margin-right: 100px;
}
/*display:显示方式*/
/*块:block*/
/*内联:inline*/
/*内联块:inline-block*/
.box, .wrap {
display: inline-block;
/*vertical-align: top;*/
}
/*兄弟坑*/
/*盒模型布局坑只出现在和margin-top相关的地方*/
.s1, .s2 {
width: 100px;
height: 100px;
background-color: pink;
}
/*重叠取大值*/
.s1 {
margin-bottom: 30px;
}
.s2 {
margin-top: 50px;
}
/*父子坑*/
.sup {
width: 200px;
height: 200px;
background-color: cyan;
}
.sub {
width: 100px;
height: 100px;
background-color: orange;
}
/*父子top重叠,取大值*/
.sup {
margin-top: 50px;
}
.sub {
margin-left: 50px;
}
/*解决盒模型经典布局坑*/
/*1.将父级固定*/
.sup {
/*border-top: 1px solid black;*/
/*border-top: 1px solid transparent;*/
/*保证显示区域 200*200 */
/*height: 199px;*/
}
.sub {
/*margin-top: 50px;*/
}
/*2.通过padding*/
.sup {
padding-top: 50px;
height: 150px;
}
style>
head>
<body>
<div class="box">div>
<div class="wrap">div>
<section class="s1">section>
<section class="s2">section>
<div class="sup">
<div class="sub">div>
div>
body>
html>
十、边界圆角
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边界圆角title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
}
/*单角设置*/
.box {
/*一个固定值: 横纵*/
border-top-left-radius: 100px;
/*两个固定值:横 纵*/
border-top-left-radius: 100px 50px;
/*百分比赋值*/
border-top-left-radius: 100%;
}
/*整体赋值*/
.box {
/*不分方位(横纵)*/
/*左上为第一个角,顺时针,不足找对角*/
/*border-radius: 10px 100px 50px;*/
/*区分横纵*/
/*1./前控制横向,后控制纵向*/
/*2.横向又可以分为1,2,3,4个值,纵向毅然*/
border-radius: 10px 100px 50px / 50px;
/*左上横10 右上横100 右下横50 左下横100 / 纵向全为50*/
/*所有最多可以赋值8个值*/
}
style>
head>
<body>
<div class="box">div>
body>
html>
十一、伪类选择器
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器title>
<style type="text/css">
a {
color: #333;
text-decoration: none;
}
/*:link为一个整体,代表超链接的初始状态*/
a:link {
color: orange;
}
/*:hover鼠标悬浮*/
a:hover {
color: green;
/*鼠标样式*/
cursor: pointer;
}
/*:active活动状态中(被鼠标点击中)*/
a:active {
color: red;
}
/*:visited访问过的状态*/
a:visited {
color: cyan;
}
/*普通标签运用: :hover :active*/
.box {
width: 200px;
height: 200px;
background-color: red;
}
.box:hover {
background-color: orange;
cursor: pointer;
}
.box:active {
width: 400px;
border-radius: 50%;
}
/*内容伪类*/
.txt:before {
content: "我是前缀~~~"
}
.txt:after {
content: ">>>我是后缀"
}
/*伪类可以单独出现*/
/*:after {
content: "呵呵"
}*/
/*位置伪类*/
/*1.位置从1开始*/
/*2.*/
/*先匹配位置,再匹配类型: 找到所有结构下的第2个标签,如果刚好是div,那么匹配成功*/
/*body a-baidu div01*/
div:nth-child(2) {
color: green;
}
/*先确定类型,再匹配位置*/
/*先将页面中所有div找出,在匹配那些在自己结构层次下的第二个div*/
div:nth-of-type(2) {
color: cyan;
}
/*2n*/
/*
div ooo div
ooo div ooo
div ooo div
*/
/*3n*/
/*
div div ooo
div div ooo
div div ooo
*/
/*3n - 1*/
/*
div ooo div
div ooo div
div ooo div
*/
/*取反伪类*/
/*:not([d]) {
color: red;
}
body.body {
color: orange;
}*/
span:not([d]) {
color: red;
}
style>
head>
<body class="body">
<a href="./123.html">访问页面a>
<a href="https://www.baidu.com">访问过页面a>
<div class="box">boxdiv>
<div class="txt">原来的文本div>
<div class="wrap">
<span>span01span>
<div>div01div>
<div>div02div>
div>
<span d>12345span>
<span dd>67890span>
body>
html>
十二、a、img、列表标签
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a_img_listtitle>
<style type="text/css">
/*reset操作: a标签一些默认属性的清除*/
a {
color: #333;
text-decoration: none;
outline: 0;
}
style>
head>
<body>
<a href="https://www.baidu.com">前往百度a>
<a href="./05_边界圆角.html">前往边界圆角页面a>
<a href="./temp/temp.html">前往temp页面a>
<a href="http://sina.com.cn" title="新浪网" target="_blank">前往新浪a>
<a href="mailto:[email protected]">信息给zeroa>
<a href="#tag">前往底部a>
br * 100
<div class="bottom">
<a name="tag">a>
...
div>
<style type="text/css">
ol, ul {
margin: 0;
padding: 0;
list-style: none;
}
style>
<ol>
<li>列表项li>
<li>列表项li>
<li>列表项li>
ol>
<ul>
<li>列表项li>
<li>列表项li>
<li>列表项li>
ul>
body>
html>