01: html常用标签

1.1 web开发的三把利器介绍返回顶部

　　1. HTML ：可以比作一个赤裸裸的人站在这里（就是自身带有一些属性）

　　　　　　1、-- 20个标签

　　　　　　2、-- HTML实质就是浏览器能够认识的规则

　　　　　　3、开发者：

　　　　　　　　　　- 写html文件（充当模板的作用）

　　　　　　　　　　- 数据库获取数据，然后替换到html文件指定位置（web框架）

　　2. CSS ：就是=给这个人穿上华丽的衣服

　　　　　　-- 颜色

　　　　　　-- 位置

　　3. JS ：让这个人可以动

1.2 网页头部head标签中几个常用标签返回顶部

　　1、Head标签之<meta>标签

　　　　1. 页面编码（告诉浏览器是什么编码）

　　　　　　　　<meta charset="UTF-8">  <!--  这种不成对的叫自闭合标签 -->

　　　　2. 刷新和跳转

　　　　　　　　<meta http-equiv="refresh" content="3">                                  <!-- 每3秒刷新一次页面 -->

　　　　　　　　<meta http-equiv="refresh" content="3;Url=http://www.baidu.com.cn">     <!-- 3s自动跳转到指定页面 -->

　　　　3. 关键字搜索

　　　　　　　　<meta name="keywords" content="关键字1，关键字2">

　　　　4. X-UA-Compatible：IE兼容性问题

　　　　　　　　说明：优先使用IE9对网页渲染，如果不是IE9再使用IE8

　　　　　　　　<meta http-equiv=”X-UA-Compatible” content=”IE=IE9;IE=IE8;″ />

　　2、head中其他标签

　　　　　　<title> Title </title>
　　　　　　<link rel="stylesheet" type="text/css" href="base.css" />
　　　　　　<style> </style>
　　　　　　<script src="base.js"> </script>

1.3 html常用标签归类返回顶部

　　1、行内标签

　　　　　　1. <span>

　　　　　　2. <a>

　　　　　　3. <input>

　　　　　　4. <pre> {{ enroll_obj.enrolled_class.contract.template }} </pre> #数据库文本格式什么样就在前端怎样显示

　　2、可以提交数据到后台的标签

　　　　1. Form表单中有两个参数：

　　1） action : 指定将表单中数据提交到哪个服务器

　　2） method : 指定使用post（字典）或者get（url）提交数据

　　　　2. input中的属性

　　　　　　　　1） type="text"          ---   提交单行文本文件

　　　　　　　　2） type="password"      ---   提交密码

　　　　　　　　3） type="file"          ---   提交文件

　　　　　　　　4） type="submit"        ---   将数据提交

　　　　　　　　5） type="radio"         ---   单选框

　　　　　　　　6） type="checkbox"      ---   多选框

　　　　　　　　7） type="button"        ---   按钮标签

　　　　　　　　8） type="rest"          ---   将所有自己填的数据全部重置

　　　　3. <textarea>默认内容</textarea> //多行文本输入

　　　　4. <select> <option>选项值 </option> </select> //下拉菜单

　　3、块级标签

　　　　　　1. <p>

　　　　　　2. <div>

　　　　　　3. <h1>

　　　　　　4. <img>

　　　　　　5. <ol><li> </li></ol>

　　　　　　 <ul><li> </li></ul>

　　　　　　6. <table> </table>

1.4 input系列标签返回顶部

　　1、form标签中三个参数

　　2、单选框、多选框、下拉菜单

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form action="http://localhost:8888/index" method="POST" enctype="multipart/form-data">

        <h5>1、单选</h5>

            男：<input type="radio" name="gender" value="1" />

            女：<input type="radio" name="gender" value="2"checked="checked"/>

        <h5>2、多选</h5>

            男球：<input type="checkbox" name="faver" value="1" />

            足球：<input type="checkbox" name="faver" value="2" />

            皮球：<input type="checkbox" name="faver" value="3" />

        <h5>3、下拉菜单</h5>

        <!--<select name="city" size="2" multiple="multiple">-->

        <select name="city">

            <option value="1">北京</option>

            <option value="2">上海</option>

        </select>

    </form>

</body>

</html>

单选框、多选框、下拉菜单

　　3、多行文本输入

　　　　　　<textarea> </textarea> ---可以输入多行文字

1.5 HTML其他标签返回顶部

　　1、a标签（行内标签）

　　　　1. 跳转

　　　　2. 锚：点击第一章标题就跳到第一章内容

<body>

    <a href="#i1">第一章</a>

    <a href="#i2">第二章</a>

    <a href="#i3">第三章</a>

    <div id="i1" style="height:600px">第一章内容</div>

    <div id="i2" style="height:600px">第二章内容</div>

    <div id="i3" style="height:600px">第三章内容</div>

</body>

a标签中锚的使用

　　2、img标签（块级标签）

　　　　　　1. src="1.jpg" : 指定图片本地路径
　　　　　　2. title="萌娃" : 当鼠标移动到图片位置就会显示萌娃两个字
　　　　　　3. alt="小萌娃" ：当找不到图片路径时会显示小萌娃，有图片则不显示
　　　　　　4. a href ：可以给图片添加一个超链接，点击图片链接到对应网址

<a href="http://www.oldboyedu.com">

    <img src="1.jpg" title="萌娃" style="height: 200px; width: 200px;" alt="小萌娃">

</a>

img标签

　　3、ol、ul、dl 有序无序标签

<ol>    <!--ol有序-->

    <li> ol是以数字作为行号1,2,3 </li>

    <li> ol是以数字作为行号1,2,3 </li>

</ol>

<ul>    <!--ul无序-->

    <li> ul是以圆点 . 作为行号 </li>

    <li> ul是以圆点 . 作为行号 </li>

</ul>

<dl>    <!--dt标题，dd标题中的内容-->

    <dt>标题1</dt>

    <dd>内容1</dd>

    <dd>内容2</dd>

    <dt>标题2</dt>

    <dd>内容3</dd>

    <dd>内容4</dd>

</dl>

有序无序标签

　　4、table标签

　　　　1. table标签行列合并

<table border="1">

    <thead>

        <tr>

            <th>表头1</th>

            <th>表头2</th>

            <th>表头3</th>

            <th>表头4</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td colspan="2">行合并</td>

            <td>1</td>

            <!--<td>1</td>-->

        </tr>

        <tr>

            <td rowspan="2">列合并</td>

            <td>1</td>

            <td>1</td>

            <td>1</td>

        </tr>

        <tr>

            <!--<td>1</td>-->

            <td>1</td>

            <td>1</td>

            <td>1</td>

        </tr>

    </tbody>

</table>

table标签行列合并

　　　　2. 常规table表格

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .table th,td{

            text-align:center;

            width:200px;

            height: 28px;

        }

    </style>

</head>

<body>

    <table class="table" border='1'cellspacing="0" cellpadding="0" >

        <thead>

            <tr>

                <th>课名</th>

                <th>期数</th>

                <th>开课日期</th>

                <th>考勤</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>python</td>

                <td>14</td>

                <td>2012-12-12</td>

                <td>签到</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

常规table表格

　　　　3. 另一种table表格样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .table{

            border-spacing: 0;

            border-collapse: collapse;

        }

        .table thead tr th,td{

            padding: 20px;

            padding-left: 50px;

            vertical-align: top;

            border-top: 1px solid #ddd;

        }

       td,th{

            display: table-cell;

        }

    </style>

</head>

<body>

    <table class="table table-striped">

        <thead>

            <tr>

                <th>课名</th>

                <th>期数</th>

                <th>开课日期</th>

                <th>考勤</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>python</td>

                <td>14</td>

                <td>2012-12-12</td>

                <td>签到</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

另一种table表格样式