html知识补充
1.点击超链接跳转到新窗口
<a href="http://www.baidu.com" target="_blank">百度一下</a> #target="_self"或者不写,默认在当前窗口打开
2.超链接,找到本窗口中的某个地方
<a href="#">超链接</a> #相当于刷新了本界面,跳到界面的最顶端 <a href="#2">超链接</a> #找到本界面id=2的地方,置顶显示 # 哈希值 锚点 默认有点击行为 当设置了javascript:void(0);后会阻止a标签的默认点击行为 <a href="javascript:void(0);">超链接</a>
3.img标签:
src连接的图片资源
alt图片资源加载失败,显示的文本
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> a{ display:block; #设置之后就能保证超链接和图片的大小一样 width: 300px; height:300px; } </style> </head> <body> <div class="box"> <a href="javascript:void(0)"> <img src="https://pic.baike.soso.com/ugc/baikepic2/0/20170825230330-2051740427_jpg_570_711_35774.jpg/800" alt="加载失败" width="300" height="300"> </a> </div> <div> <span>1111</span> </div> </body> </html>
4.ul:unordered list无需列表 ul下的子元素只能是li
默认是实心圆圈
type="circle" 空心圆
tpye="square"实心方块
**li中可以继续嵌套ul,可以嵌套多次
5.ol:ordered list 有序列表
默认是小写数字排序
<ol type="I" start="5"> #I是大写罗马数字,i是小写罗马数字 start是从几开始
<ol type="a" start="4"> a就是字母排序也支持大写,也可以从第几个字母开始
5.dl:定义列表:
dt:定义标题
dd:定义描述
6.表格 table
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<table border="1" style="border-collapse: collapse"> #边线的大小,让边线合并 <tr> #tr是行 <td>id</td> #是列 <td>name</td> <td>age</td> </tr> <tr> <td>1</td> <td>lianda</td> <td>nan</td> </tr> </table>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<body> <table border="1" style="border-collapse: collapse"> <tr> <td>id</td> <td>name</td> <td>age</td> <td rowspan="3">tell</td> </tr> <tr> <td>1</td> <td>lian</td> <td>nan</td> </tr> <tr> <td>2</td> <td colspan="2">lian</td> </tr> </table> </body>
7.form表单
http协议
action:提交的服务器网址
method:默认get,post(应用:登录注册,上传文件)在上传文件时还要加上Enctype='multipart/form-data'
页面中的a img link 默认是get请求
input
type:
text:文本输入框
password:密码输入框
file:文件按钮,提交文件的时候一定要用post 一定要给form标签添加 Enctype='multipart/form-data'
number:值允许输入数字
submit:提交按钮,提交到服务器
button:普通按钮
reset:重置按钮
radio:单选框(name是一个值得时候才是单选)
checkbox:复选框
name:提交到服务器的key
value:显示的文本内容,服务器的value
placeholder:文本代替
lable:
for:是与下面的某个表单空间的id属性相关联
下拉列表框
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<select name="school" id=""> <option value="1">小学</option> #没有selected显示第一行 <option value="2">初中</option> <option value="3">高中</option> <option selected value="4">大学</option> #selected优先显示这个 </select>
描述框
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<textarea name="" id="" cols="30" rows="10"></textarea>
BS交互
1.form表单默认与服务器进行交互
2.ajax技术
CSS层叠样式
作用:修饰网页结构
CSS的三种引入方式: 默认下面的比上面的优先级高(覆盖)
行内样式
行内样式的优先级是最高的
内接样式
外接样式
基本选择器
id选择器:选中的是特性 唯一的,不能重复 用#+id
标签选择器:选中的是页面中共性的标签 直接标签名
类选择器:选中的是页面中的共性的标签,同一类名可以有又多个 .+类名
通配符选择器:通常是对页面进行重置样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
a{
/*清除a标签的下划线*/
text-decoration: none;
}
.baidu{
color: blue;
/*下划线*/
text-decoration: underline;
/*显示小手的状态*/
cursor: pointer;
}