HTML+CSS、JS阶段总结(华清远见)
web
web三要素
1.浏览器
浏览器发送请求给服务器，下载服务器中的HTML，执行HTML显示出内容。
2.服务器
接受浏览器的请求，发送相应结果给浏览器。
3.http协议
浏览器与服务器的通讯协议
web学习的主要内容
1.html
用于勾勒出网页的结构和内容
2.css
用于网页的美化
3.js
以html和css为基础进行操作
web项目开发相关技术
HTML
HTML基本介绍
HTML：HyperText Markup Languages，超文本标记语言，是一种纯文本类型的语言
结构
<!DOCTYPE>声明
为浏览器提供声明HTML是用什么版本编写的
HTML标签
标题标签：h1~h6，字号逐渐变小，越来越细，会换行。写法为
<h1>文本内容</h1>
段落标签：p，字号默认，会换行。写法为
<p>文本内容</p>
文本标签：span，div，没有默认的样式效果。写法为
<span>文本内容</span>//span标签为行内元素，不换行 <div>文本内容</div>//div标签为块元素，会换行
换行标签：br，用于换行。写法为
<br>
横线标签：hr，可以产生一条横线，可通过width属性设置其宽度，color属性设置其颜色。写法为
<hr width='300px' color='red'>
列表标签：分为有序列表和无序列表。
-
有序列表：ol，列表会自动编号有序排列。写法为
<ol> <li>文本1</li> <li>文本2</li> <li>文本3</li> </ol>
-
无序列表：ul，列表按html的书写顺序排列，无编号。写法为
<ul> <li>文本1</li> <li>文本2</li> <li>文本3</li> </ul>
样式标签：设置文本样式的标签，主要有加粗、倾斜、下划线、删除线等。写法为
<b>加粗</b> <strong>加粗</strong> <em>倾斜</em> <i>倾斜</i> <del>删除线</del> <u>删除线</u> <sub>上标</sub> <sup>下标</sup>
图片标签：img，引用一张存在的图片，在网页上显示。用法为
<img src="xxx" alt="这是一张图片">//src为引用的图片资源的路径 //相对路径: 根据当前文件的路径，查找需要引用的资源的路径. //绝对路径：从协议开始的全路径. //alt: 如果图片没有正常加载成功，则显示alt的文字说明
超链接标签：a，点击超链接标签，可以让页面跳转到新的资源路径。用法为
<a href="xxx" target="_blank"></a> //href属性：指定需要跳转的url地址（相对地址， 绝对地址） //url：统一资源定位路径。(网络上可以访问的资源的路径) //target属性：_blank,打开的内容显示在一个新窗口；_self,打开的内容显示当前窗口。
表格标签：table，用于实现一个表格。用法为
<table border="1" width="200px" cellpadding="5" cellspacing="0" align="center"> <!-- table标签的属性： border,边框 width,宽度（默认的宽度有表格中的内容的宽度决定） cellspacing="0",设置单元格之间的宽度 cellpadding="0",设置文本内容和表格边框的宽度 align : 表格显示位置--> <caption>表格1</caption>//设置表格的名字 <tr>//表格的行元素 <td>1</td>//表格的列元素（单元格） </tr> </table>
<table border="1" cellspacing="0" width="300px">
<caption>表格2</caption>
<!-- thead : 代表表头 -->
<thead>
<tr>
<!-- th和td类型， th中的文字会加粗 -->
<th>文本内容</th>
</tr>
</thead>
<!-- tbody:表格中的数据 -->
<tbody>
<tr>
<td>文本内容</td>
</tr>
</tbody>
<tfoot>
<!-- tfoot:表格底部 -->
<tr>
<!-- table标签要求： 每行的列数相等， -->
<!-- colspan="1" : 把n列合并为1列， 让每行的列数相等。 -->
<td colspan="1">文本内容</td>
</tr>
<tr>
<!-- rowspan="2" ： 把两行的单元格合并为一个。让每行的列数相等 -->
<td rowspan="2">1</td><td>2</td><td>3</td>
</tr>
</tfoot>
</table>
表单标签：form，表单相关的标签，其内部嵌套用于用户输入数据的标签。写法为
<form action="#" method="get" enctype="application/x-www-form-urlencoded"> <!-- for:label的for属性对应的数据值时input标签的id。 那么单击label标签的时候，input标签获取焦点(光标就在输入框内部, 用户就可以直接输入数据。) --> <label for="inputname">用户名:</label> <!-- input标签： 用于用户输入数据 * type: 设置标签的类型,对用户输入的数据进行一些设置 * name: 用户输入的数据，传输到服务器端的时候 ， java程序根据name的值，获取到输入框的数据。 * value: 对应的就是用户输入的数据值 --> <input id="inputname" type="text" name="username" value="tom" /><br> <label for="inputpwd">密码:</label> <input id="inputpwd" type="password" name="userpwd" /><br> <!-- type="submit":提交请求(请求的地址 + 请求的参数)的按钮 , 单击按钮触发表“单提交事件” “表单提交事件” ： 发送请求给服务器，并且把请求参数(用户输入的数据)也传输到服务器端。 http://127.0.0.1:8848/web01/day2/xxx.html?username=tom&userpwd=1234 url ? 参数 （&参数之间的分隔符） 。--> <input type="submit" value="提交" /> <!-- type="reset" , reset事件， 清空表单中的数据值 --> <input type="reset" value="重置" /> </form> <form action="#" method="post" enctype="multipart/form-data"> 单行文本框： <input type="text" name="user" /><br> 密码框：<input type="password" name="pwd" /><br> 隐藏域：<input type="hidden" name="hide" /><br> 文件上传：<input type="file" name="photyo" /><br> <!-- 单选按钮：①一般一组单选按钮，需要设置相同的name值，才能保证只有一个按钮被选中。 ② 标签后面的文本提示，是给用户看的， 标签的value值时给 程序使用的。 (程序中用0表示男，1表示女) ③ checked="checked" ,表示设置为默认选中 --> 单选按钮：<input type="radio" name="sex" value="0"/> 男 <input type="radio" name="sex" value="1" checked="checked"/> 女 <br> 复选框：<input type="checkbox" name="hobbys" value="看书" checked="checked" /> 看书 <input type="checkbox" name="hobbys" value="弹琴" /> 弹琴 <input type="checkbox" name="hobbys" value="跑步" /> 跑步<br> 下拉列表(单选)：<select name="city"> <option>请选择</option> <option value="0">上海</option> <!-- selected="selected" : 设置默认选中项 --> <option value="1" selected="selected">北京</option> <option value="2">天津</option> </select><br> 下拉列表(多选): <!-- multiple="multiple"：用于设置下拉列表，支持多选 --> <select name="language" multiple="multiple" size="6"> <option value="java">java</option> <option value="c">c</option> <option value="c++">c++</option> <option value="python">python</option> <option value="html">html</option> </select><br> 多行文本框： <!-- cols="5" :设置宽度 rows="10" :设置高度 --> <textarea name="info" cols="5" rows="10"></textarea><br> submit:<input type="submit" value="提交数据" /><br><br> reset:<input type="reset" value="清空数据" /><br> button:<input type="button" value="普通按钮" /><br> 分组标签： <fieldset> <legend>地址</legend> 邮箱： <input type="email" name="email" /> 年龄: <input type="number" name="phone" /> date: <input type="date" name="date" /> 颜色：<input type="color" name="color" /> submit:<input type="submit" value="提交数据" /><br><br> </fieldset>
iframe标签：在网页中，可以通过src的路径找到新的网页，嵌套在当前网页中。写法为
<iframe src="xxx" width="100" height="100"></iframe> <iframe src="xx" width="100" height="100"></iframe> <ul> <!-- a标签的target ，指定为iframe标签的name值 ， 那么超链接的内容，则显示到iframe标签中。 --> <li><a href="xxx" target="content">文本</a></li> <li><a href="xxx" target="content">文本</a></li> <li><a href="xxx" target="content">文本</a></li> </ul> <!-- 单击li中的超链接，把超链接的内容显示到iframe标签中。 --> <iframe src="xx" width="300px" height="300px" name="content" ></iframe>
每个标签都有style属性， 用于设置标签的样式，如
-
width="xx";---宽
-
height="xx";---高
-
border: 1px solid green; --- 边框 (宽度 ，类型， 颜色)
-
background-color: gray; --- 背景颜色(颜色值)
CSS语言
css(Cascading Style Sheets)：层叠样式表，又叫级联样式表，简称样式表
用于HTML文档中元素的样式定义，实现网页的美化
实现将内容和表现分离
CSS的三种使用方法
1.内联样式
样式定义在单个的HTML元素中
2.内部样式
样式定义在HTML页的头元素中
3.外部样式
将样式定义在一个外部的css文件中，由html页面引用样式表文件
CSS的语法规则
样式表由多个样式规则组成
每个样式规则有两个部分：选择器和声明
-
选择器：决定哪些元素使用规则
-
声明：由一个或者多个属性/值对组成，用于设置元素的外观表现
CSS的特征
继承性
大多数css的样式规则可以被继承
层叠性
可以定义多个样式表，多个不冲突的样式可以层叠为一个
优先级
样式你故意冲突时，按照不同样式的规则优先级来应用样式
下面是上述内容在代码内的具体表现
<head>
<style>
h1{
border: 2px dotted aqua; /*边框:宽度 类型 颜色*/
color: red; /*字体颜色*/
}
h2{
color: green;
font-size: 50px;
}
#h3{
border: 2px solid black;color: green;
}
h3{
font-size: 50px; color: yellow !important;/*!important： 设置样式的优先级最高*/
}
</style>
<link href="./p3.css" type="text/css" rel="stylesheet" /><!-- 导入外部的css文件 -->
</head>
<body>
<!-- css特征：
① 继承性： 父元素的一些样式，会被其子元素继承。比如字体颜色。
② 层叠性： 一个元素可以有多个样式效果进行叠加。
③ 优先级： 浏览器默认样式< 标签的默认样式 < [外部样式/内部样式/内联样式]
** 外部样式/内部样式/内联样式: 根据谁后写，谁优先。
-->
<!-- 继承性 -->
<div style="background-color: red; color: white;">
<p>文本内容</p>
<a href="#" style="color: white;">a标签</a>
</div>
<!-- 层叠性 ：
background: yellow; 背景色
font-size: 20px; 字体大小
color: #FF0000; 字的颜色
font-weight: bold; 字体的粗细
width: 300px; height: 100px; 标签的宽，高
overflow: scroll; 溢出，则使用滚动条。
-->
<p style="background: yellow;font-size: 20px; color: #FF0000;
font-weight: bold; width: 300px; height: 100px; overflow: scroll;">文本内容</p>
<!-- 优先级 -->
<!-- 内联样式的优先级高于内部样式和外部样式 -->
<h1 style="color:green;">文本内容</h1>
<!-- 内部样式和外部样式： 谁后写，谁优先。 -->
<h2>文本内容</h2>
<!-- 练习：通过内部样式设置 h3 : ① 根据标签选择器设置h3标签字号50px , 字体颜色黄色。
② 根据id选择器，设置h3标签边框 ， 字体颜色绿色
-->
<!-- ** id选择器优先级 > class选择器 > 标签选择器 -->
<h3 id="h3" style="color: pink;">文本内容</h3>
<!-- 使用三种不同的方式给标签设置样式，不冲突情况就是都有效(层叠性)，冲突则以优先级为准（优先级）。 -->
</body>
CSS的选择器
-
元素选择器：即标签选择器，元素名即标签名
-
类选择器：即class选择器，根据设置的class选择对应的标签
-
分类选择器：元素选择器和类选择器一起使用
-
id选择器：根据设置的id选择对应的标签
-
选择器分组：一次性选择多个标签进行样式设置
-
派生选择器：找到子类选择器，如图中为找到p标签下的类名为main的标签
-
伪类选择器：伪类用于向某些选择器添加特殊的效果，使用冒号(:)作为结合符，结合符左边是其他选择器，右边是伪类 常用伪类：
-
:link 页面上从来没有点击过的链接
-
:active 选择活动链接，并设置其样式
-
:visited 选择已访问的链接，并设置其样式
-
:hover 鼠标悬停的状态
-
:focus 获取焦点的状态[对有键盘焦点的元素设置
-
:first-child 元素的第一个子元素添加样式
-
CSS常用单位
尺寸单位
%:百分比 in:英寸 cm:厘米 mm:毫米 pt:榜（1pt=1/72英寸） px:像素（计算机屏幕上的一个点） em:1em等于当前的字体尺寸，2em等于当前字体尺寸的两倍。（移动端用的多）
颜色单位
rgb(x,x,x ):RGB值，如rgb(255,0,0) x的取值范围0~255 rgb(x%,x%,x%):RGB百分比值，如rgb(100%,0%,0%) #rrggbb:十六进制数，如#ff0000 #rgb:简写的十六进制数，如#f00
CSS样式
-
尺寸相关样式
-
width：宽
-
height：高
-
overflow：当内容溢出元素框时的处理方法
-
visible：溢出部分可见，溢出的默认的处理方式
-
hidden：隐藏溢出部分
-
scroll：溢出的内容通过滚动条查看
-
auto：继承父元素的溢出处理方式
-
-
-
边框属性
-
border: width style color：分别对应宽度、样式、颜色
-
border-left/right/top/bottm: width style color：设置边框左边/右边/顶部/底部的宽度、样式、颜色
-
border-left/right/top/bottm-width/style/color：设置边框左边/右边/顶部/底部的宽度/样式/颜色
-
-
框模型
框模型（Box Model）定义了元素框处理元素内容、内填充、边框和外边距的方式
width和height指内容区域的宽度和高度
增加内填充、边框和外边距不会影响内容区的尺寸，但是会增加元素框的总尺寸。
-
背景
-
背景色 :background-color
-
背景图像：
-
— background-image:url();
— background-repeat:repeat/repeat-x/repeat-y/no-repeat;
— background-position:left top;
— background-attachment:scroll/fixed;
-
组合设置：background：颜色 背景图片 重复方式 背景图片是什么方式显示 left top;
-
-
文字和table相关样式
-
文字样式
指定字体：font-family:value1,value2; 字体颜色：color:value 字体大小：font-size：value 字体加粗：font-weight：normal/bold; 文本排列：text-align：left/right/center 行高：line-height：value 文字修饰：text-decoration:none/underline 文本缩进：text-indent：value;
-
表格样式
垂直对齐
— vertical-align：top/middle/bottom
边框合并
— border-cellapse：separate/cpllapse
边框边距
— border-spacing：value
-
-
标签的显示方式
-
display: none; -- 隐藏标签。
-
display:block; -- 设置为块级元素
-
display: inline ; -- 设置为行内元素
-
display: inline-block ; -- 设置为行内块级元素。
-
-
流定位
-
页面中的块级元素框从上到下一个接一个地排列
— 每一个块级元素都会出现在一个新行中
— 元素框之间的垂直距离是由框的垂直外边距计算出来的
-
行内元素将在一行中从左到右排列水平布置
— 不需要重新开始
— 可以使用水平内边距、边框和外边距调整它们的间距
-
-
浮动定位
-
浮动定位是指
— 让元素脱离普通流定位
— 将浮动元素放置在父元素的左边或者右边
— 浮动元素依旧位于父元素之内
-
浮动的框可以向左或向右移动，直到它的外边缘碰到父元素或另一个浮动框的边框为止
— 经常使用它来实现特殊的定位效果
-
设置浮动
— float：none/left/right
-
子元素浮动之后，父元素高度为0，造成溢出现象： 解决方式① 给父元素设置高度， ② 使用overflow，隐藏溢出。 标签浮动之后，影响了其他标签的显示。如果其他标签不想受其影响，可以在标签中通过clear，清除浮动的影响。
-
定位：position
元素设置了position定位之后，可以通过top,left, right, bottom等样式设置元素的具体位置。
-
相对定位:relative , 参考自己本身原来的位置。
-
绝对定位:absolute , 参考的是自己的有相对定位的包裹元素， 如果直接父元素没有相对定位，那么就找父辈的， 如果最终也没有，那么就找html(body)为准。
-
固定定位:fixed , 参考html(body)--网页内容区域的左上角。
-
层叠和透明性
-
opacity :背景和文字都透明
-
rgba： 背景透明，名字不透明
-
JavaScript
js的三种使用方式
-
事件定义的方式
-
js嵌入到html页面，通过script标签来使用
-
把js相关内容写在单独的.js文件中，然后在html页面上，通过script标签的 src="xx.js"引入js文件，进行使用。
js知识点
变量
-
let变量名
-
let变量名=变量名
-
变量的名字不能使用关键字
数据类型
-
string
-
number
-
boolean
-
null
-
undefined
运算符
-
算术运算符
+、-、*、/
-
关系运算符
<、>、==
-
逻辑运算符
&&、||、!=
-
赋值运算符
=
数据类型转换
-
隐式转换
-
boolean参与运算的时候，true转为1，false转为0
-
有string参与运算的时候，做的是字符串的拼接
-
把变量直接用于条件判断的时候， 非空为true , 空为false
-
-
数据类型转换函数
-
typeof(变量名)
-
toString()
-
parseInt()
-
parseFloat()
-
isNaN()
-
分支语句
-
if...else
-
if...
-
if...else if...
循环语句
-
for(let i = 0; i < n; i++){}
-
while(条件){}
-
循环语句规则同java语法规则
获取元素的方式
-
document.getElementById(id值) ： 根据id查找元素，结果是一个元素对象
-
document.getElementsByTagName(标签名字) ： 根据标签名查找，结果是一个元素的数组对象
-
document.getElementsByName(标签的name属性) ： 根据标签的name属性的值查找，结果是一个元素的数组对象
-
document.getElementsByClassName(标签class的值) ： 根据标签的class的值查找，结果是一个元素的数组对象
修改和获取标签内部的内容
-
obj.innerHTML: 可以对文本和标签进行使用
-
obj.innerText:只能对文本进行使用
-
obj.value: 表单元素的value值的获取或者设置
修改标签的style
-
obj.style.width/height
-
obj.style.color
-
等
this元素
如下列代码中 this代表的就是当前触发单击事件的元素对象
οnclick="change(this)"
js对象
-
String
-
Number
-
Date
-
Boolean
-
Math
let str = new String("对象内容")
如上创建对象，可通过固定函数获取该对象属性，如
-
length：长度属性
-
toUpperCase()：转大写
-
toLowerCase()：转小写
-
charAt()：找指定位置的字符
-
indexOf()：找到就返回索引位置，否则返回-1
-
lastIndexOf()：从后往前找
-
indexOf(x,num)：从num位置开始找
-
substring()：从指定位置开始找，找到原字符串的最后
-
replace(x,y)：替换字符串
-
split()：以指定元素分割原字符串
-
concat()：将指定元素拼接到原字符串末尾
数组
let arr = new Array()
数组常用的函数：
-
join函数: 把数组按指定的字符串拼接为一个字符串
-
concat函数：用于给数组连接新的元素，可连接的元个数不定，原数组不会改变
-
slice函数：用于获取数组的子数组，可以指定获取的范围
-
reverse函数： 数组的反转,原数组变化了
-
sort函数：升序排序 ，按字符升序排序
setInterval(function(),time)函数
该函数为定时函数，意思是将函数function()每个time的时间调用一次，其中time=1000为一秒
arguments对象
js中的arguments对象：方法调用的时候，所有的参数都是保存在arguments对象中的，arguments本质就是数组
正则表达式
-
能出现那些字符 [字符] ， \d表示纯数字[0-9]， \w匹配字母数字[0-9a-zA-Z] .....
-
出现的字符的个数{n} , {n,m} , +等价于{1,} , ?等价于{0,1} , *等价于{0,}
-
匹配行首 ^
-
匹配结尾 $
-
.等价于任意内容
-
\用于转义, .表示.本身
-
() 用于分组
-
|表示或
相关函数
-
test函数： 测试字符串是否满足正则表达式的要求，满足返回true，不满足返回false
-
exec函数： 如果字符串满足正则表达式的要求，返回匹配成功的字符串(返回的是一个包含了字符串的一个数组)
节点
常用函数
-
nodeName：获取节点的名字
-
nodeType：获取节点的类型
-
getAttribute(属性名)：获取节点的属性
-
setAttribute("class","active")：修改节点的属性，如给节点修改类名为active
-
removeAttribute("class")：删除节点的属性，如class
-
parentNode：节点的父节点
-
childNodes：找到子节点，找到的节点包含元素节点和文本节点
-
children：找到子节点，只包含元素节点
-
firstChild：第一个孩子，所有孩子中的第一个，可能是文本节点
-
firstElementChild：第一个孩子，代表孩子中的第一个元素节点
-
lastChild：最后一个孩子，所有孩子中的最后一个，可能是文本节点
-
lastElementChild：最后一个孩子，代表孩子中的最后一个元素节点
-
previousSibling：上一个兄弟，可能是文本类型的兄弟
-
previousElementSibling：上一个元素节点兄弟
-
nextSibling：下一个兄弟，可能是文本类型的兄弟
-
nextElementSibling：下一个元素节点兄弟
创建对象的三种方式
-
通过Object创建对象
-
通过构造函数，创建自定义对象
-
采用json格式定义对象
事件和事件对象
-
事件分为： 鼠标事件， 键盘事件，状态事件和其他事件
-
事件对象： event , 事件触发的时候会产生一个event对象
-
事件的定义方式：
在标签上使用on+事件名称，调用函数。
在js代码中，通过函数绑定进行函数的调用，如
obj.onclick = function()
-
事件的取消： 事件执行的函数返回值是false. 事件就取消了
-
事件的执行机制：冒泡原理-- 元素的某个事件被触发了。 那么其包裹元素的同类事件也会被触发
-
事件源：通常使用“event.target”找到事件源
-
阻止冒泡：在事件函数中加入“event.cancelBubble=true”阻止冒泡
jquery相关内容
jquery就是js的函数库，jquery中封装了常用的函数。语法规则同java
如何使用
导入jquery.js文件， 然后就可以使用jquery了
jquery选择器
用法：$(选择器)
函数使用方法
jquery中的函数和js还有css中的函数名相同，如
-
要修改颜色：$(选择器).css("color","red")
-
要删除父节点：$(选择器).parent().remove()
扫一扫
842
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
