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标签中三个参数

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

　　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. 跳转

　　　　　　　　<a href="http://www.baidu.com" target="_blank">超链接</a>

　　　　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表格样式

 

posted @ 2017-11-30 10:43  不做大哥好多年  阅读(287)  评论(0)  编辑  收藏  举报