前端HTMLcssjavascript学习
Posted Ageliu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端HTMLcssjavascript学习相关的知识，希望对你有一定的参考价值。
一、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>pinyin</rt> </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"> <!-- 文档tag样式 --> <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>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>
八、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的标签：如<sup class="red"></sup> <sub class="red"></sub>均会被匹配 ```
4、id选择器
```css #div { text-align: center; } 匹配文档中所有拥有id属性且属性值为div的标签：如<div id="div"></div> <section id="div"></section>均会被匹配 ```
补充：基础选择器的优先级
- 基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
- 基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
- 基础选择器优先级：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{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> 二、组合选择器优先级演示如下： <!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>
九、盒模型及其布局
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">12345</div> </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"> <!-- 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>
十二、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:[email protected]">信息给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>
以上是关于前端HTMLcssjavascript学习的主要内容，如果未能解决你的问题，请参考以下文章
10 分钟，带你快速入门前端三大技术（HTMLCSSJavaScript)
web前端入门到实战：HTMLCSSJavaScript分别实现什么功能？