html 后手

1.a

(1.)超链接 

<a href="new.html">点击进入到新网页</a>
这里可以直接跳转到一个页面
<a href="http://www.baidu.com" target="_blank">进入百度</a>
这里 target="_blank 指可以在空白页面打开新网址
target="_self  指可以再当前页面显示新网址
（2）标签内部跳转
 锚点 默认有点击行为。我们可以javascript:void(0);阻止a标签的默认点击行为。
 1 <!DOCTYPE html>
 2 <html >
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 </head>
 8 <body>
 9 <p>my</p>
10 <p>my</p>
11 <p>my</p>
12 <p>my</p><p>my</p>
13 <p>my</p>
14 <div id="zhangqing">张庆</div>
15 <p>my</p>
16 <p>my</p>
17 <p>my</p>
18 <p>my</p>
19 <p>my</p>
20 <p>my</p>
21 <p>my</p>
22 <p>my</p>
23 <p>my</p><p>my</p>
24 <p>my</p>
25 <p>my</p><p>my</p>
26 <p>my</p>
27 <p>my</p>
28 <p>my</p>
29 <p>my</p>
30 <p>my</p><p>my</p>
31 <p>my</p>
32 <p>my</p><p>my</p>
33 <p>my</p>
34 <p>my</p><p>my</p>
35 <p>my</p>
36 <p>my</p><p>my</p>
37 <p>my</p>
38 <p>my</p><p>my</p>
39 <p>my</p>
40 <p>my</p><p>my</p>
41 <p>my</p>
42 <p>my</p>
43 <a href="#zhangqing">找张庆</a>
44 <a href="#zhangqing">找张庆</a>
45 <a href="#">找张庆</a>
46 <a href="#">找张庆</a>
47 <a href="javascript:void(20)">找张庆1</a>
48 <a href="javascript:void(0)">找张庆2</a>
49 
50 </body>
51 </html>
内部跳转
锚点 默认有点击行为。我们可以javascript:void(0);阻止a标签的默认点击行为。
第一个根据 id 查找  第二个 回到顶部  第三个 刷新
2.image
src:连接的图片资源
alt:图片资源加载失败。显示的文本
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         span{
 8             color: blue;
 9         }
10         a{
11             display: inline-block;
12             width: 300px;
13             height: 300px;
14         }
15     </style>
16 </head>
17 <body>
18 <div class="box">
19     <a href="javascript:void(0);">
20         <img src="https://img04.sogoucdn.com/app/a/100520093/9243fbcd523532c7-65a10dc900adf004-16cb2e34a14409c94f53ee8772786500.jpg" alt="奥斯卡讲道理" width="500" height="600">
21     </a>
22 </div>
23 <div>
24     <span>我最强</span>
25 </div>
26 </body>
27 </html>
a与img 设置图片链接
        a{
            display: inline-block;
            width: 300px;
            height: 300px;
        }

这里是将超链接于图片重合不会卡位置

3.ul ol dl

ul为无序 这里并不是没有序号 而是一个语句  可以嵌套 li

ol 为有序  有自己的type类型 

dl为自定义 dt dd 

dt 是主要描述的 是特别加粗的

dd是用来描述dt的 可没有

4.table

border='1' style="border-collapse:collapse;" 将单元格的线和表格的单元合并1
table 由 tr td 组成 tr是上面的列  td 是列上的内容  table实现的的是一个竖列
table 可以设置单元格的大小  border 是显示那些单元格的线
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <table border="2" style="align-collapse: collapse;">
 9     <tr>
10 
11         <td>我是</td>
12         <td>我是</td>
13         <td rowspan="2">我</td>
14     </tr>
15     <tr>
16         <td>拿着</td>
17            <td>拿着</td>
18     </tr>
19 </table>
20 </body>
21 </html>
将上下单元格合并

单元格可以合并成一块 横向(左右)为

<td colspan="2">日天</td>  需要将空缺的是改掉 后面接的是合并的块
单元格可以合并成一块 纵向(上下)为
<td colspan="2">日天</td>
在表格中 有优先级<thead> <tbody> <tfoot> 这三个优先级
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <table border="2" style="align-collapse: collapse;">
 9     <tfoot>
10         <tr>
11         <td>21拿着</td>
12            <td>我拿着</td>
13     </tr>
14     </tfoot>
15     <thead>
16     <tr>
17 
18         <td>我是</td>
19         <td>我是</td>
20         <td rowspan="2">我</td>
21     </tr>
22     </thead>
23 
24     <tr>
25         <td>拿着</td>
26            <td>拿着</td>
27     </tr>
28 </table>
29 </body>
30 </html>
table 优先级

　　
5.form
form
   HTTP协议
   action:提交的服务器网址
   method:get(默认)| post(应用：登录注册、上传文件)
   页面中的a img link 默认是get请求\

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <form action="" method="get"    enctype="multipart/form-data">
 9 
10      姓名<input value="哈哈">逗比<br>
11      昵称<input value="哈哈" readonly="">逗比<br>
12    名字<input type="text" value="name" ><br>
13     密码<input type="password" value="pwd" size="50"><br>
14     性别<input type="radio" name="gender" value="male" checked="">男
15     <input type="radio" name="gender" value="male" >女<br>
16     爱好：<input type="checkbox" name="love" value="eat">吃饭
17     <input type="checkbox" name="love" value="sleep">睡觉
18     <input type="checkbox" name="love" value="bat">打豆豆
19     </form>
20 
21 </form>
22 
23 </body>
24 </html>
input文本
  • checkbox：多选按钮，名字相同的按钮作为一组进行选择。
  • checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。
    • value="内容"：文本框里的默认内容（已经被填好了的）
    • size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
      注意size属性值的单位不是像素哦。
    • readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
      用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
    • disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。

6.select 下拉列表清单
 1 <form>
 2         <select>
 3             <option>小学</option>
 4             <option>初中</option>
 5             <option>高中</option>
 6             <option>大学</option>
 7             <option selected="">研究生</option>
 8         </select>
 9         <br><br><br>
10 
11         <select size="3">
12             <option>小学</option>
13             <option>初中</option>
14             <option>高中</option>
15             <option>大学</option>
16             <option>研究生</option>
17         </select>
18         <br><br><br>
19 
20         <select multiple="">
21             <option>小学</option>
22             <option>初中</option>
23             <option selected="">高中</option>
24             <option selected="">大学</option>
25             <option>研究生</option>
26         </select>
27         <br><br><br>
28 
29     </form>
下拉列表

 <option selected="">研究生</option>  为优先研究生

size 默认为1 为下拉视图   size="3 "  就按照滚动式图

 





　　　　　　　　　　　　　　　　　　

 



posted @ 2018-09-17 19:29  逆欢  阅读(150)  评论(0)  编辑  收藏  举报