前端HTML、css、javascript学习
1、html、css、javascript基本认识javascript
1.HTMLcss
类型：超文本标记语言html
用途：可用于网页结构的设计或搭建：java
后缀：html.html编程
超文本简述：‘超文本’就是指的是其能够包含图片、连接、音乐、程序等非文字元素浏览器
HTML简述以下：ruby
一、标记语言：标记语言为非编程语言，不具有编程语言的程序逻辑网络
二、HTML组成部分：由标签、指令、转义字符（实体）编程语言
标签：被尖括号包裹有字幕开头的合法字符能够被浏览器解析的标记。（系统标签、自定义标签）ide
指令：被尖括号包裹有！开头的标记
转义字符：被&与；包裹的特殊字母组合或#开头的十进制数。（空格 ，版权©）
2.CSS
类型：级联样式表
用途：可让网页页面的风格设计，样式、美观
后缀：CSS.css
CSS简述：
一、css也可叫标记语言同上
二、CSS的组成部分：选择器、样式块、做用域
选择器：有标签、id、类单独或组合出现
做用域：由{}包裹
样式块：知足css链接语法的众多样式：
3.javascript
类型：浏览器脚本语言
用途：能够负责页面特效、调用刘乱起的API（BOM）\操做改变页面页面内容（DOM）,从祸端获取数据、渲染页面等：
后缀：javascript.js
javascript简述：
一、实实在在的编程语言有着完善的语法、能够完成复杂的程序逻辑
二、javascript组成部分：由BOM、DOM、ES(ECMAScript)
DOM:文档对象模型
BOM:浏览器对象模型
ES：是一种开放的且广为被桀纣的脚本语言规范
2、HTML经常使用标签
一、无语义标签
<div></div> <span></span>
二、经常使用语义标签
<h1>一级标题</h1> <p>段落</p> <pre>原文本</pre> <br/>换行 <hr/>分割线
三、文本标签
<i>斜体</i> <em>强调型斜体</em> <b>粗体</b> <strong>强调型粗体</strong> <del>删除文本</del> <s></s> <ins>添加文本</ins> <u></u> <sub>下标字</sub> <sup>上标字</sup> <ruby> 拼音<rt>pinyin</rt> </ruby>
3、标签分类
一、单双标签
单标签：单标签在⾃自身标签标识结束，主要应⽤用场景为功能性标签
双标签：双标签有成对的结束标识，主要应⽤用场景为内容性标签
二、行块标签
行标签： 又名内联标签，内联标签⾃身不具有宽⾼，一般同行显示
块标签：又名块级标签，块标签拥有⾃身宽⾼，一般独⾃占据⼀行
三、单一或组合标签
单一标签：单独出现，表示具体的功能或展现具体的内容
组合标签：配合使⽤用，才能产⽣生相应的内容与效果
4、模板解析
一、基础模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> </body> </html>
二、模板解读
DCOTYPE:指定文档类型，规定html标签语法
html：文档根标签、标注着文档（页面）的开始与结束
head：文档头标签、能够引用脚步文件、指定样式表、书写代码逻辑块、提供元信息
body：文档主体标签，包含文档全部文本与超文本内容
title：文档tag标题标签，设置文档tag的标题内容
三、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">
四、link链接标签
<!-- 外联样式 --> <link rel="stylesheet" type="text/css" href="文件名.css"> <!-- 文档tag样式 --> <link rel="icon" type="image/x-icon" href="图片路径或网址">
五、script标签
<script style="text/javascript"></script>
5、CSS三种引入方式
1、三种方式的书写规范 一、行间式 ```html <div style="width: 100px; height: 100px; background-color: red"></div> ``` 二、内联式 ```html <head> <style> div { width: 100px; height: 100px; background-color: red; } </style> </head> ``` 三、外联式 ```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> ``` 2、三种方式间的"优先级" * 与样式表的解析顺序有关 v_test：掌握三种CSS引入方式方式
6、经常使用样式及长度颜色
一、样式模板
<head> <style type="text/css"> div{ color: red; } </style> </head>
二、长度
* px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便
* mm：毫米
* cm：厘米
* in：英寸
* pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，很是简单易用；
* em：至关长度，一般1em=16px，应用于流式布局
三、颜色
* 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
7、三种经常使用样式
<!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>dd</h1> <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 ff</div> <div>55</div> <!-- <div class="d">等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个 等等 各个</div> --> <div class="d"></div> br*50 </body> </html>
8、CSS选择器
八、 1、基础选择器
一、通配选择器
```css * { border: solid; } 匹配文档中全部标签：一般指html、body及body中全部显示类的标签 ```
二、标签选择器
```css div { background-color: yellow; } 匹配文档中全部与标签名匹配的标签：如div{}会匹配文档中所有div，span{}会匹配文档中全部span ```
三、类选择器
```css .red { color: red; } 匹配文档中全部拥有class属性且属性值为red的标签：如<sup class="red"></sup> <sub class="red"></sub>均会被匹配 ```
四、id选择器
```css #div { text-align: center; } 匹配文档中全部拥有id属性且属性值为div的标签：如<div id="div"></div> <section id="div"></section>均会被匹配 ```
补充：基础选择器的优先级
- 基础选择器优先级大体与选择器匹配范围成反比，匹配范围越小，优先级越高
- 基础选择器优先级大体与选择器匹配精度成正比，匹配精度越高，优先级越高
- 基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器
八、二 组合选择器
一、群组选择器
```css div, span, .red, #div { color: red; } ```
- 一次性控制多个选择器 - 选择器之间以,隔开，每个选择器位都可觉得任意合法选择器或选择器组合
二、子代(后代)选择器
```css 子代选择器用>链接 body > div { color: red; } 后代选择器用空格链接 .sup .sub { color: red; } ```
- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器 - 每个选择器位都可觉得任意合法选择器或选择器组合 - 子代选择器必须为一级父子嵌套关系，后代选择器能够为一级及多级父子嵌套关系
三、相邻(兄弟)选择器
```css 相邻选择器用+链接 .d1 + .d2 { color: red; } 兄弟选择器用~链接 .d1 ~ .d3 { color: red; } ```
- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器 - 每个选择器位都可觉得任意合法选择器或选择器组合 - 相邻选择器必须为直接相邻关系，兄弟选择器能够为直接相邻或间接相邻关系
补充：组合选择器优先级
- 组合选择器优先级与权值相关，权值为权重和 - 权重对应关系
| 选择器 | 权重 | | :--------: | :---: |
| 通配 | 1 | |
标签 | 10 | |
类、属性 | 100 |
| id | 1000 |
| !important | 10000 |
- 选择器权值比较，只关心权重和，不更新选择器位置 - 不一样级别的选择器间不具有可比性：1个类选择器优先级高于n个标签选择器的任意组合
四、属性选择器
- [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{div}+span{span}+section{section} --> <div>div</div> <span class="s">span</span> <section>section</section> <div> <i class="s">iiii</i> <a href="">a标签</a> </div> <div class="d1 d2 d3">呵呵</div> </body> </html> 2、组合选择器优先级演示以下： <!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>.d1>#dd1>div>.d2 --> <div> <div class="d1"> <div id="dd1"> <div> <div class="d2">12345</div> </div> </div> <!-- <div id="dd2"> <div> <div class="d2">12345</div> </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.d1>.d2 --> <div class="d1">00000 <div class="d2">12345</div> <!-- dd与do为自定义属性 --> <div class="helloworld" dd do="do something">helloworld</div> </div> </body> </html>
9、盒模型及其布局
一、盒模型
<!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">12345</div> </body> </html>
二、盒模型布局
<!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>
10、边界圆角
<!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>
11、伪类选择器
<!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"> <!-- 1.a标签的四大伪类 --> <a href="./123.html">访问页面</a> <a href="https://www.baidu.com">访问过页面</a> <div class="box">box</div> <!-- 2.内容伪类 --> <div class="txt">原来的文本</div> <!-- 3.位置伪类 --> <div class="wrap"> <span>span01</span> <div>div01</div> <div>div02</div> </div> <!-- 4.取反伪类 --> <span d>12345</span> <span dd>67890</span> </body> </html>
12、a、img、列表标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>a_img_list</title> <style type="text/css"> /*reset操做: a标签一些默认属性的清除*/ a { color: #333; text-decoration: none; outline: 0; } </style> </head> <body> <!-- 一.基本使用 --> <!-- 超连接标签:a --> <!-- 双/行/单一类型标签 --> <a href="https://www.baidu.com">前往百度</a> <a href="./05_边界圆角.html">前往边界圆角页面</a> <!-- ./或省略表明当前文件所在路径,能够访问与该文件同路径下的全部文件及文件夹 --> <a href="./temp/temp.html">前往temp页面</a> <!-- 二.属性 --> <!-- title:鼠标悬浮的文本提示 --> <!-- target:_blank,新开空白标签位来打开目标页面 --> <a href="http://sina.com.cn" title="新浪网" target="_blank">前往新浪</a> <!-- 三.其余应用场景 --> <!-- mailto | sms | tel --> <a href="mailto:zero@163.com">信息给zero</a> <!-- 四.锚点 --> <!-- a与a href="#锚点名" -- name="锚点名" --> <!-- a与标签 href="#锚点名" -- id="锚点名" --> <a href="#tag">前往底部</a> <!-- 测试锚点请tab --> br * 100 <!-- 设置一个锚点 --> <!-- .bottom作底部布局的区域 --> <div class="bottom"> <a name="tag"></a> <!-- <i id="tag"></i> --> <!-- <div id="tag"></div> --> ... </div> <!-- 五.img使用 --> <!-- src能够链接本地及网络图片 --> <!-- alt:资源加载失败时的文本提示 --> <!-- title:图片的文本信息(鼠标悬浮时展现) --> <!-- <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537511739499&di=f5f2763fe54c8ea4d89b2fafe0569c84&imgtype=0&src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi1%2FTB2IZbxogmTBuNjy1XbXXaMrVXa_%2521%25212754890204.jpg_400x400.jpg" alt="雪纳瑞" title="一览雪纳瑞风姿"> --> <!-- 六.list列表 --> <!-- reset操做 --> <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>