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图片资源加载失败，显示的文本

<!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>

View Code

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

<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>

View Code

<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>

View Code

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属性相关联

下拉列表框

<select name="school" id="">
    <option value="1">小学</option>    #没有selected显示第一行
    <option value="2">初中</option>
    <option value="3">高中</option>
    <option selected value="4">大学</option>    #selected优先显示这个
</select>

View Code

描述框

<textarea name="" id="" cols="30" rows="10"></textarea>

View Code

　　BS交互

　　　　1.form表单默认与服务器进行交互

　　　　2.ajax技术

CSS层叠样式

　　作用：修饰网页结构

CSS的三种引入方式：　　默认下面的比上面的优先级高（覆盖）

　　行内样式

　　　　行内样式的优先级是最高的

　　内接样式

　　外接样式

基本选择器

　　id选择器：选中的是特性唯一的，不能重复　　用#+id

　　标签选择器：选中的是页面中共性的标签　　直接标签名

　　类选择器：选中的是页面中的共性的标签，同一类名可以有又多个　　.+类名

　　通配符选择器：通常是对页面进行重置样式　　

a{
    /*清除a标签的下划线*/
    text-decoration: none;
 }
.baidu{
    color: blue;
    /*下划线*/
    text-decoration: underline;
    /*显示小手的状态*/
    cursor: pointer;
}

View Code