昨日内容回顾:
前端HTML
超文本标记语言
注释
<!--单行注释-->
<!--
多行注释
-->
ps:写HTML的时候，注释一般都是成双成对的
即
<!--xx功能开始-->
<!--xx功能结束-->
文件的后缀名
head内常用标签(不是给用户看的)
title 定义网页标题
style 内部写css样式代码
link 引入外部css样式文件
script 可以在内部直接写js代码也支持src属性
导入外部js文件
meta 定义网页原信息
name='keywords' content="......"
name='description' content="......"
body内常用标签(body内标签才是给用户看的)
基本标签
h1~h6 p u i s b br hr
特殊符号
< <
> >
© ©
® ®
& &
¥ ¥
常用标签
div
span
a
href='url' 跳转到指定网址
锚点功能 一个a调到另一个a标签
具体案例:回到顶部
target 默认是在当前页面跳转 _self
指定成_blank新建页面跳转
img
src 放图片地址(可以是本地的也可以是网络上的)
alt 当图片加载失败时可以指定显示的提示信息
title 鼠标悬停上之后显示的提示信息
width 长宽在设置的时候只需要设置一个另一个自动等比例缩放
heigth
列表标签
无序列表
ul>li 可以通过ul内type属性来控制无序的标识
有序列表
ol>li 可以通过ul内type属性来控制有序的标识(1,a,A,I,i)
标题列表
dl
dt 标题
dd 内容
表格标签
<table> 可以通过type参数设置边框
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>jason</td>
<td>18</td>
<td>训人</td>
</tr>
<tr>
<td>egon</td>
<td>84</td>
<td>被训</td>
</tr>
<tr>
<td>kevin</td>
<td>30</td>
<td>看热闹</td>
</tr>
</tbody>
</table>
table标签内可以设置的属性
type
cellspacing 设置单元格与边框之间的距离
cellpadding 设置文本值域单元格之间的距离
单元格标签可以设置的属性
rowspan 垂直方向
colspan 水平方向
form表单
以用户注册为例
input
type属性可以变幻的值
text
password
date
radio checked 如果属性名和属性值相等那么可以简写
checkbox checked
file form表单上传文件需要修改两个参数的值
1.将method由默认的get改为post
2.将enctype编码格式由默认的urlencoded改为formdata
submit 提交按钮 触发form表单提交数据的动作
button 上面功能都没有。就是一个普通按钮
reset 重置用户填写的信息
select 选择标签 默认是单选的 可以通过设置multiple参数改为多选
一个个的option就是一个个的选项
textarea
大段文本框
button标签 也可以出发form表单的提交动作
总结:
1 获取用户输入的标签都必须有一个name属性
用户输入的值会被存放到标签的value属性中
你可以理解为name属性对应是字典的key
用户输入的被value属性获取的到值是字典的value
2 label标签
通常是和input标签组合使用
<form action="">
<label for="i1">username:<input type="text" id="i1" name="username"></label>
<label for="i2">password: <input type="password" name="pwd" id="i2"></label>
<input type="submit">
</form>
请求方法:
get请求:朝服务端获取资源(可以携带参数供服务端校验)
不推荐携带敏感型的参数
get请求携带的参数是有大小限制的 大概4KB
可以携带一些不重要的参数
post请求:朝服务端提交数据
敏感性的信息都应该采用post提交方式
标签分类1:
双标签:h1~h6 a p div span table ul ol dl
自闭和标签: img br hr input
标签分类2:
块儿级标签
独占一行
块儿级标签可以嵌套块儿级标签和行内标签
p标签虽然是块儿级标签但是不能嵌套任何的块儿级标签只能嵌套行内标签
可以设置长宽
行内标签
大小取决于内容大小
不能设置长宽
前端之CSS
层叠样式表(口红，美甲，眉笔，化妆盒)
注释
/*单行注释*/
/*
多行注释
*/
语法结构
选择器 {属性:属性值;属性:属性值;属性:属性值;}
三种引入css样式的方式
head内style标签内部直接书写css代码
link标签引入外部css文件
直接在标签内通过style属性书写css样式
ps:注意页面css样式通常都应该写在单独的css文件中
学习css的流程
1.先学如何查找标签
基本选择器
标签选择器
id选择器
类选择器
通用选择器
组合选择器
后代选择器
儿子选择器
毗邻选择器
弟弟选择器
属性选择器
伪类选择器
伪元素选择器
2.如何给查找到的标签设置样式
标签通常都必须有的属性
id 用来唯一标识标签
class 标签类属性(******),可以有多个值
ps:你可以把它理解成python面向对象的继承
你可以给任意的标签加任意的属性名和属性值
研究选择器优先级
相同选择器 不同的引入方式 就进原则 谁越靠近标签谁输了算
不同选择器 相同的引入方式
行内样式 > id选择器> 类选择器 > 标签选择器
如何修改标签样式
今日内容总结:
CSS