html知识

1.head里面的一些标签

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8"/>
 5     <meta name="keywords" content="假京东"/>
 6     <meta name="description" content="这是我的头信息"/>
 7     <!--<meta http-equiv="Refresh" content="5; URL=https://www.baidu.com" />-->
 8     <title>li</title>
 9     <link rel="icon"  rel="icon" href="//www.jd.com/favicon.ico" />
10     <link />
11     <script>
12     </script>
13 
14     <!--块级标签-->
15     <style>
16         div{
17             color:red;
18             background-color:yellow
19         }
20         span{
21             color:red;
22             background-color:#898989
23         }
24     </style>
25 </head>
26 <body>
27 <!--所有的标签都可以换成块级标签和内联标签-->
28 <!-- 块级别标签(block)-->
29     <div style="color:yellow;background-color:#aA2333;">hello word</div>
30 <!--内联标签(in-line)-->
31     <span>hellow word!!</span>
32     <span style="color:yellow;background-color:black">你好</span>
33     <!--这些标签只需要了解,因为css可以代替这些标签-->
34     <b>给字体加出</b>
35     <em>变成斜体</em>
36     <del>删除</del>
37     <!--默认情况下是内联标签是空一个格子,可以使用&nbsp代表空格,用的特殊字符时候可以百度-->
38     你好啊啊啊&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hahah
39     &lt;大于小于&gt;
40     <!--img标签是内联标签-->
41 
42     <img src="1.jpg" width="200px" height="200px" alt="加载失败!!!" title="悬浮字体" border="1"/>
43     <!--a标签的抛锚-->
44     <a href="https://www.baidu.com" target="_blank">百度</a>
45 </body>
46 
47 </html>
View Code

 

2.form表单以及一些重要的标签***

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>form表单,向服务器传输数据</title>
 6     <link rel="icon" href="jd.ico" />
 7 </head>
 8 <body>
 9     <form action="https://www.baidu.com" method="get" enctype="multipart/form-data">
10             <p>姓名:<input type="text" value="lizebo"/></p>
11             <p>性别:<input type="password" value="nan"/></p>
12             <p>提交:<input  type="submit" value="提交"/></p>
13             <p>按钮:<input type="button" value="press" /></p>
14             篮球:<input type="checkbox"  />篮球<input type="checkbox" />足球
15             <!--radio这个标签name必须是相同的-->
16             <p><input type="radio" name="sex" /></p>
17             <p><input type="radio" name="sex" /></p>
18         <!--name属性是给服务器看的!,而id主要是前端操作-->
19             <p>上传文件 <input type="file" name="lizebo"/></p>
20             <p>输入框重置清空 <input type="reset" value="reset" /></p>
21 
22     </form>
23     出生地
24     <select name="city" multiple="multiple">
25             <option value="beijing">北京</option>
26             <option value="tianjin">天津</option>
27             <option value="chengdu">成都</option>
28             <option value="meishan">眉山</option>
29             <option value="leshan">乐山</option>
30     </select>
31     <select name="city2" multiple size="1">
32             <option value="beijing">北京</option>
33             <option value="tianjin">天津</option>
34             <option value="chengdu">成都</option>
35             <option value="nanjing">南京</option>
36             <option value="jiangxi">江西</option>
37     </select>
38     <select name="city3" >
39             <option value="beijing">北京</option>
40             <option value="nanjing">南京</option>
41             <option value="jingxi">江西</option>
42     </select>
43     <select name="city4">
44             <optgroup label="北京">
45                 <option value="chaoyang">朝阳</option>
46                 <option value="haidian">海淀</option>
47             </optgroup>
48     </select>
49     <textarea name="textarea" rows="10" cols="5">自我简介:</textarea>
50 </body>
51 </html>
View Code

 

3.抛锚

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8"/>
 5     <meta http-equiv="Refresh" content="10,URL=https://www.baidu.com" />
 6     <link rel="icon" href="jd.ico" />
 7     <title>抛锚</title>
 8     <style>
 9         #div1{
10             height:300px;
11             background-color:red
12         }
13         #div2{
14             height:500px;
15             background-color:yellow
16         }
17         #div3{
18             height:100px;
19             background-color:black
20         }
21         #div-top{
22             height:100px;
23             background-color:#909032
24         }
25     </style>
26 </head>
27 <body>
28 
29     <div id="div-top">首页</div>
30     <a href="#div1">第一章</a>
31     <a href="#div2">第二章</a>
32     <a href="#div3">第三章</a>
33 
34     <div id="div1">第一章</div>
35     <div id="div2">第二章</div>
36     <div id="div3"><pre style="color:red">第三章</pre></div>
37     <a href="#div-top">首页</a>
38 
39 </body>
40 </html>
View Code

 

4.列表

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>列表标签</title>
 6     <link rel="icon" href="jd.ico" />
 7 </head>
 8 <body>
 9     <!--unordered list-->
10 <h3>无序列表</h3>
11 <ul>
12     <li>111</li>
13     <li>222</li>
14     <li>333</li>
15     <li>444</li>
16 </ul>
17 <h3>有序列表</h3>
18     <ol>
19         <li>aaa</li>
20         <li>bbbb</li>
21         <li>cccc</li>
22     </ol>
23 <h3>有标题</h3>
24 <dl>
25     <dt>第一章</dt>
26     <dd>1234</dd>
27     <dd>254safljas</dd>
28     <dt>第二章</dt>
29     <dd>234</dd>
30     <dd>sfasf</dd>
31 </dl>
32 </body>
33 <!--table便签,忘了吧,以前使用它进行布局,不过现在使用div+css进行-->
34 <table border="1" style="color:red;background-color:yellow">
35     <tr>
36         <td style="color:black">萝莉副书记覅</td>
37         <td>撒发生</td>
38     </tr>
39     <tr>
40         <td>啊师傅阿三</td>
41         <td>是速度发</td>
42     </tr>
43 </table>
44 </html>
View Code

 

posted @ 2017-11-07 20:58  物是人非12758  阅读(150)  评论(0编辑  收藏  举报