1.HTML
web的三大标准:
(1)html 结构标准
(2)css 表现(样式标准)
(3)js 行为标准
标准的分类:
公共的属性:
id:
身份证 一个页面中只有一个唯一的id
<p id = 'aaa'>文字1</p>
<p class = 'aaa'>文字2</p>
<p class = 'aaa'>文字2</p>
<p class = 'aaa'>文字2</p>
css选择器:
*{
通配符选择器
}
标签选择器
div{
}
id选择器
#aaa{
color:red
}
类选择器
.aaa{
}
class:
title: ***
鼠标悬浮到内容显示的标题
(1)行内标签
a
属性
href:链接网络资源或者本地资源地址
target:
_self:默认的在本页打开网址
_blank:在空白页面打开新的网址
span:
span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。
span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
strong
em
i
换行标签<br>
当你打算结束一行，而又不想开始一个新段落时，<br>标签就派上用场了。无论你将它置于何处，<br>标签都会产生一个强制的换行。
上图显示，<p>标签和<br>标签的区别在于：<p>标签会在段落的前后自动插入一个空行，而<br>标签没有空行；而且<br>标签没有属性。
注意<br> 没有结束标签，把<br>标签写为 <br/> 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。
img:行内块
属性:
src:链接的图片资源(本地图片资源或者cdn)
alt:图片加载失败的时候显示的文本
(2)块级标签:
div:
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。
division 分割
作用:分页面中的每块区域
p:
段落标签:
p标签内部只能放行内(span,a,img,input)的标签,不能放块标签
ul:
它的孩子只能是li
li
ol
dl
dt
dd
特点:
(1)行内标签:
1.在一行内显示
2.不能设置宽高,默认是字体的大小
(2)块级标签:
1.独占一行
2.可以设置宽高,如果不设置宽 默认是父亲的100%的宽度
(3)行内块标签:(img,input)
1.在一行内显示
2.可以设置宽高
标签嵌套的问题
文档 index.html
html
head body
(1)table表格标签
一个表格<table>是由每行<tr>组成的，每行是由<td>组成的。
所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。
table:设置border:'1'属性,单元格带边框的效果
style="border-collapse:collapse;" 表格中很细表格边线的制作：
tr:每行
td:每行单元格的数据
(2)form表单标签:
action:提交的地址
method:提交的方式
get:不安全
post:相对安全
input表单控件:
type:
text: 明文显示用户输入的数据
password 密文显示用户输入的数据
radio单选按钮
checkbox:复选框
file:上传文件所用
submit:功能固定化，负责将表中中的表单控件提交给服务端
value:控件的值既要提交给服务器的数据
name:控件的名称，服务端用
disabled:该属性只要出现在标签中，表示的是禁用该控件
注意：如果有文件需要提交给服务器，method必须为POST，enctype必须为multipart/form-data
https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c
状态码简单介绍:
200以上:表示成功请求的状态码
300以上: 缓存
400以上: 404 网页加载失败 前端出错
500以上: 后端逻辑出错,后端业务逻辑出错
(3)css的作用:修饰页面的结构,让页面好看
(1)css的引入方式
1.行内样式
<div style='color:red;'></div>
2.内接样式
3.外接样式
外接式
导入式
(2)基础选择器
id选择器:
#app
类选择器:
.app
它选择的是共性,而不是特性
标签选择器:
div
通配符选择器
总结：
不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
每个类要尽可能的小，有公共的概念，能够让更多的标签使用
玩好了类 就等于玩好了css中的1/2
到底使用id还是用class？
答案：尽可能的用class。除非一些特殊情况可以用id
原因：id一般是用在js的。也就是说 js是通过id来获取到标签
(3)高级选择器
后代选择器:
选中的是儿子 孙子.....
子代选择器
并集选择器
交集选择器
内容回顾:
语义化的标签:
div+span
a
img
ul
li
p
table
tr
td
form ***
action:提交的地址
method:提交的方式
注意：如果有文件需要提交给服务器，method必须为POST，enctype必须为multipart/form-data
表单控件:
input
type:
text 文本输入框
password 密码
radio 单选
checkbox 多选
file 文件上传
submit 提交按钮
button 普通按钮
select
option
textarea
多行文本输入框
前端跟后端进行交互有两种方式:
1.form标签提交
如果是get请求,那么会把表单控件input中的name属性对应的值封装成地址栏的key,value值封装
成地址栏的value,打包发送到后端,后端进行相应的处理
/
/index.html
/music.html
2.Ajax技术
2.css
css:层叠样式表
三种引入方式:
1.行内样式 优先级最高
2.内接样式
基础css选择器
id选择器 #
class选择器 .
标签选择器 div
通配符选择器 *{}
高级选择器:
后代(儿子,孙子....)选择器: div p
子代(亲儿子)选择器 div>p
3.外接样式
div red 200*200
点击事件
1.找东西 事件对象
2.事件
3.事件驱动 green
<script type="text/javascript">
/*
1.找东西
*/
var oDiv = document.getElementById('box');
// 2.事件
oDiv.onclick = function() {
oDiv.style.backgroundColor = 'green';
}
</script>
今日内容:
高级选择器:
交集选择器
并集选择器
为什么要重置样式?
是为了更好页面布局
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器
属性选择器
伪类选择器
伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte
/*没有被访问的a标签的样式*/
.box ul li.item1 a:link{
color: #666;
}
/*访问过后的a标签的样式*/
.box ul li.item2 a:visited{
color: yellow;
}
/*鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover{
color: green;
}
/*鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active{
color: yellowgreen;
}
伪元素选择器
p:after{
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
1.标准文档流
行内 块
标签都是占位置
一旦标签浮动了 该标签就会
(1)脱离了标准文档流
(2)可以设置宽高
(3)不占位置