前端(一) HTML

  服务端返回对字符串,浏览器进行解释,显示成易读的页面

  HTML:在服务器端就是一个文件,文件内部用一堆标签包装起来

  html只做静态的功能,Js可实现页面动态效果

 

一、简介

 1 <!DOCTYPE html>      <!--  Doctype 解释html文档的规范,如果不加Doctype,不同的浏览器就会按照自己的方式来渲染页面,
 2                         在不同的浏览器显示不同的样式 -->
 3 <html lang="en">     <!-- 标签de属性 -->
 4 <head>                 <!--  相当于人的大脑,用户是看不到的。 -->
 5     <meta charset="UTF-8">
 6     <title>宋晓楠</title>
 7 </head>
 8 <body>         <!-- 相当于人的身体,用户是可见的 -->
 9 </body>
10 </html>

   Head中常用的标签:

    1、title:页面标题

           2、meta:页面元信息:页面编码、刷新和跳转、页面搜索关键字、页面描述

                页面编码:<mete http-equiv="charset=utf-8“ />

                刷新和跳转:<meta http-equiv="Refresh" Content="30"/>      30秒页面自动刷新一次

                                 <meta http-equiv="Refresh" Content="3;Url=http://www.autohome.com.cn"/>    3秒后页面跳转到http://www.autohome.com.cn

               关键字: <meta name="keywords" content="song,宋,哈哈"/>

               描述:<meta name="description" content="汽车之家为您提供最新汽车报价,汽车图片,汽车价格大全,最精彩的汽车新闻、行情、评测、导购内容,是提供信息最快最全的中国汽车网站。"/>

     

    body内的标签:

             标签分类:块级标签、行内标签/内联标签

                              块级标签占整行(例:div标签);行内标签,字符多大就占用多大字符(例:a标签)

             特殊标签的显示:<>:用&lt;&gt;代替

                                    多个空格: 用&nbsp;代替

                                    http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

二、常用标签

     1、段落标签 <p></p>

   2、标题标签 <h></h>  h1最大  h6最小

   3、a标签,是行内标签,可以添加很多属性

          ①页面跳转

             点击后,在当前页面跳转:<a href="http://www.sina.com.cn/">新浪</a>

             点击后,新打开一个页面跳转:<a href="http://www.sina.com.cn/" target=''_blank"></a>

          ②锚点

1   <a href="#01">第一章</a>
2   <a href="#02">第二章</a>
3   <a href="#03">第三章</a>
4   <div id="01" style="background-color: black;height: 900px"</div>
5   <div id="02" style="background-color: gold;height: 900px">sjfjfierjfiejrifjieredpwedwpkpsjfjfierjfiejrifjieredpwedwpkp</div>
6   <div id="03" style="background-color: aqua;height: 900px"</div>

    4、图片标签<img></img>

1 <img src="img/297838.jpg" alt="风景图" title="谢谢你选中我">
2 <!-- img图片标签  alt:当图片不能显示时,的提示文案   title:当鼠标在图片上是的提示说明-->

    5、项目符号标签 ol(序号)   ul(远点)   dl(分组)

 1 <ul>
 2          <li>宋晓楠</li>
 3          <li>宋小英</li>
 4 </ul>
 5 <ol>
 6          <li>hah</li>
 7          <li>drgtgrtgr</li>
 8 </ol>
 9  <dl>
10          <dt>测试部门:</dt>
11          <dd>宋晓楠</dd>
12          <dd>陈海涓</dd>
13          <dt>开发部门:</dt>
14          <dd>杨林杰</dd>
15 </dl>

     6、表格标签

 1  <table border="1">   <!--border=1表示给表格加边框-->
 2          <tr>       <!--tr 表示行   td表示列   th表示表头   为了区分表头和下面真是数据的字体,一般表头用th-->
 3              <td>序号</td>
 4              <th>用户名</th>
 5              <th>密码</th>
 6              <th>操作</th>
 7          </tr>
 8          <tr>
 9              <td>1</td>
10              <td colspan="2" rowspan="2">songxiaonan</td>   <!--  colspan="2" 占两列 相当于横向合并单元格
11                                                                        rowspan="2" 占两行 相当于纵向合并单元格-->
12              <td>123456</td>
13              <td><a href="https://www.baidu.com/">删除</a>|<a href="#">编辑</a></td>    <!-- #跳转表示当前页 -->
14          </tr>
15          <tr>
16              <td>1</td>
17              <td>123456</td>
18              <td><a href="https://www.baidu.com/">删除</a>|<a href="#">编辑</a></td>    <!-- #跳转表示当前页 -->
19          </tr>
20 </table>

 

三、input系列

       文本输入框:<input type='text'>                

         <div><label for="user">用户名:</label><input id="user" type="text"/></div>
         <label for="user"> 作用:点击用户名,光标就可选中后面的文本输入框,不用必须点击

       密码输入框:<input type='password'>

       单选按钮:<input type='radio'>

1 <div><input type="radio" name="00"/></div>
2 <div><input type="radio" name="00"/></div>
3 
4 #两个单选按钮的name值要相同,这样才能实现真正意义上的单选

       多选按钮:<input type='checkbox'>

       上传文件按钮:<input type='file'>

       可变大小文本输入框:<input type=textarea'>

       下拉列表:<select>

         <optgroup lable='中国'>

           <option>北京</option>

             <option>上海</option>

         </optgroup>

                     </select>

       按钮:<input type='button'>

       提交按钮:<input type='submit'>

       重置按钮:<input type=reset'>

 

 

四、提交

      1、<form>包含的是提交的数据的模块<form>

          需要对form添加一些属性,比如:

      action:将数据提交到的地址

                  method:请求方法啊类型  post/get

                  enctype:有上传文件时,必须要该属性,表示将文件按块来上传

       2、对于文本输入框的提交

1 <p><label for="01">用户名</label><input id="01" type="text" name="user"></p>   <!--提交数据,必须有哦name属性,否则服务器接收到的数据为空-->
2 <p><label for="02">密码</label><input id="02" type="password" name="password"></p>

        3、对于单选按钮的提交

1 <!--因为单选按钮不像文本框会有数据,那么就需要自己手动写一个value提交给服务器-->
2 <div><br>性别:
3            <div><input type="radio" name="性别" value="nan"/></div>
4            <div><input type="radio" name="性别" value="nv"/></div>
5 </div>

       4、多选按钮的提交

 1  <!-- 对于多选按钮的提交 -->
 2  <!--提交多选的数据后,服务器的key值就是一个列表,通过浏览器监听到的数据就是:
 3         user:456666666666666666
 4         password:67777777777777777
 5         性别:nv
 6         爱好:pashan
 7         爱好:kanshu
 8         -->
 9 <div><br>爱好:
10            <div>爬山<input type="checkbox" name="爱好" value="pashan"/></div>
11            <div>看书<input type="checkbox" name="爱好" value="kanshu"/></div>
12            <div>唱歌<input type="checkbox" name="爱好" value="changge"/></div>
13 </div>

 

       5、上传文件的提交

1  <!-- 注意提交上传的文件,必须要form标签中加入 enctype="multipart/form-data"-->
2  <div><br>上传头像:<input type="file" name="上传的文件"></div>

 

       6、下拉列表的提交

 1 <!--
 2             城市:sahnghai
 3         -->
 4 <div><br>城市:
 5            <select name="城市" >
 6                <optgroup label="中国" >
 7                    <option value="beijing">北京</option>
 8                    <option value="sahnghai">上海</option>
 9                    <option value="nanjing">南京</option>
10                </optgroup>
11            </select>
12 </div>

 

       7、可变输入框的提交

1 <div><br>简介:</div>
2             <textarea name="简介"></textarea>

 

 

 

<!--注意:无论是get或者post方法都是不安全的    get方法发送请求的时候回将数据直接显示在浏览器的url地址后面
post方法虽然不会讲请求的数据直接显示在在浏览器的url地址后面,
但是通过浏览器监听,依然可以在headers中抓到-->

<!-- 设置文本输入框的默认值 两种方法:
1、加 value
2、加placeholder--
注意:placeholder的默认值不能提交到后台
-->

<!-- 单选按钮和复选框加默认值 方法:
1、加 checked="checked"
-->

<!-- 下拉列表加默认值 方法:
1、<textarea name="简介">默认文案</textarea>
2、<textarea name="简介" placeholder=‘默认文案’></textarea>
-->

 

         

             

 

posted @ 2017-01-22 17:29  3456425171  阅读(267)  评论(0编辑  收藏  举报