前端学习 html

Html 前端学习

<!DOCTYPE html>
< lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<>
    <!--a标签-->
    <a href="http://www.baidu.com" target="_blank">百度</a>
    <a href="#tt">看第二章</a>  #识别ID
    <!--<div style="height: 2000px;background-color: red;">第一章</div>-->
    <!--<div id="tt" style="height: 2000px;background-color: green">第二章</div>-->
    <h1>id,style,name所有的标签都可以定义的属性</h1>
    <h1>a,target href</h1>

    <!--select标签-->
    <select >
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3" selected="selected">天津</option>

    </select>
     <select size="2">
        <option>北京</option>
        <option>上海</option>
        <option>天津</option>
    </select>
    <select size="2" multiple="multiple">
        <option>北京</option>
        <option>上海</option>
        <option>天津</option>
    </select>
    <select>
       <optgroup label="河北省">
           <option>石家庄</option>
           <option>邯郸</option>
       </optgroup>
        <optgroup label="山西省">
            <option>太原</option>
            <option>平遥</option>
        </optgroup>
    </select>

    <!--inpur标签-->
    <h1>input标签</h1>
    <input type="checkbox" />
    <input type="checkbox" />
    <h4>radio</h4>
    <p> 男：<input name="gender" type="radio" /></p>
    <p> 女：<input name="gender" type="radio" /></p>

    <input type="text" />
    <input type="password" />
    <input type="button"  value="btu" />
    <input type="submit" value="sub" />
    <h2>Form</h2>
    <form action="http://127.0.0.1:8000/django_form/">
        <div>
        主机名:<input name="host" type="text" />
        </div>
        <div>
        端口:<input name="port" type="text" />
        </div>
        <div>
         类型:<input name="types" type="text" />
        </div>
        <div>
         用户    <input name="user" type="text" />
        </div>
        <input type="button" value="提交" />
        <input type="submit" value="提交" />
    </form>
    <!--textarea标签-->
    <textarea>iii</textarea>
    <input type="text" value="123"/>

    <div>
        <label for="cb1">婚否</label>
        <input id="cb1"type="checkbox"/>
    </div>

    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>222</li>
    </ul>
    <ol>
        <li>www</li>
        <li>wwwooo</li>
    </ol>

    <table border="1">
        <thead>
            <tr>
                <th>第一列</th>
                <th>第二列</th>
                <th>第三列</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>h1</td>
                <td>h2</td>
                <td>h3</td>
            </tr>
        <tr>
                <td>h1</td>
                <td>h2</td>
                <td>h3</td>
            </tr>
        <tr>
                <td>h1</td>
                <td>h2</td>
                <td>h3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

解释

1 块级标签，内联标签

    div p h
    span,a,lable,input,form.img

2 各种符号
     

3 标签

    input系列
    select
    textarea
    form

    div
    span
    必须会
    a
    img
    table

    H,ul,li,ol,dl,p,br,hr

4 属性

    公共属性：id,name（一般只提交数据）,style，class
    input,text,password
        <input type='text' value="123"/>
    input:button,submit
        <input type='submit' value=''/>
    input:checkbox
        <input type="checkbox" checkd="checkd"/>  自动选中

    input:radio
        <input name='gender' type="radio"/>
        <input name='gender' type="radio"/>
        name有自己的属性  排斥
        checkd="checkd"
        name='gender'

    input:file

    <form enctype='multipart/form-data' method='POST'>

    </form>

    form
        <form action=''>
            要提交的所有标签
        </form>
        * action,提交到某一个地址

    textarea
     如果想提交后台的话 要定义name属性

    =================================================
    select
        <select>
            <option value='9' selected='selected'>ff</option>
        </select>
    * option,value,提交数据时,value

    * selected='selected'

    table:
        table,
            thead,tbody
            tr:行
                td:列

                合并单元格,

            tr:
                th
                

html简单的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <div style="height: 48px;background-color: pink;">头部</div>
        <div style="background-color: #ddd;">
            <div style="width: 20%;height: 500px; float: left;background-color: aqua" >左边</div>
            <div style="width: 80%;height: 500px; float: left">
                <h1>form表单提交</h1>
                <form action="http://127.0.0.1:8000/django_form/" enctype="multipart/form-data" method="POST">
                    <p>
                        <input type="text" name="host" />
                        <input type="password" name="pwd">
                    </p>
                    <div style="background-color: rosybrown;color: white;">
                        <h6>爱好</h6>
                        篮球:<input name="favor" type="checkbox" value="1"/>
                        足球:<input name="favor" type="checkbox" value="2"/>
                        排球:<input name="favor" type="checkbox" value="3"/>
                    </div>
                    <h6>性别</h6>
                    男：<input name="gender" type="radio" value="1"/>
                    女：<input name="gender" type="radio" value="0"/>

                    <div>
                        <h6>城市</h6>
                        <select name="city">
                            <option value="888">上海</option>
                            <option value="sb888" selected="selected">北京</option>
                        </select>
                    </div>

                    <div>
                        <textarea name="mono"></textarea>
                    </div>
                    <div>
                        <h4>文件</h4>
                        <input type="file" name="file_name"/>
                    </div>
                    <input type="submit" value="提交" />

                </form>

            </div>
        </div>
</body>
</html>