Web基础

Posted 2021-01-11 雨之愿风

标签分类

自闭合标签

 

主动闭合标签

 head标签

meta标签：设定页面编码，页面跳转，页面刷新，关键字，描述，IE兼容

默认页面
<meta http-equiv="content-type" content="text/html" charset="UTF-8">

关键字
<meta name="keywords" content="关键字" >
<meta name="description" content="关键字对应的描述" >

自动刷新
<!--3秒钟自动刷新页面-->
<meta http-equiv="Refresh" content="3"  />
<!--3秒钟自动跳转到指定页面-->
<meta http-equiv="Refresh" content="3;Url=https://www.baidu.com/"  />

title标签

<title>HTML标题</title>

 body标签

 特殊符号：

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

 

input标签

提交到后台的信息，一般是input的内容

radio：单选框

name属性让单选框只能选择一个(name属性相同则互斥

checked ="checked"默认选中

        男：<input type="radio" name="sex" value="1" checked="checked"/>
        女：<input type="radio" name="sex" value="2"/>

CheckBox：复选框

name属性让复选框作为同一列表参数

checked ="checked"默认选中

        1: <input type="checkbox" name="ch" value="1"  checked="checked"/>
        2: <input type="checkbox" name="ch" value="2" />
        3: <input type="checkbox" name="ch" value="3" />
        4: <input type="checkbox" name="ch" value="4" />

 

file：文件上传

form表单必须写上：enctype="multipart/form-data" 代表一点点上传

 

    <form method="post"  enctype="multipart/form-data">
       <input type="file" name="fname"/>
    </form>

 

textarea：多行文本

<textarea name="tname">默认值</textarea>

 

select-option：下拉

默认size=1，selected=“”selected”默认选中

        <select name="city">
            <option value="1">1</option>
            <option value="2" selected="selected">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>

size可以变更

        <select name="city" size="10">
            <option value="1">1</option>
            <option value="2" selected="selected">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>

可以多选

        <select name="city" size="10" multiple="multiple">
            <option value="1">1</option>
            <option value="2" selected="selected">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>

带组

       <select name="city" size="10" multiple="multiple">
            <optgroup label="g1"></optgroup>
                <option value="1">1</option>
                <option value="2" selected="selected">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            
            <optgroup label="g2"></optgroup>
                <option value="1">1</option>
                <option value="2" selected="selected">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
        </select>

 

img：图片

        <img src="1.jpg" alt="没有图片的时候显示" title="鼠标放到图片上面显示的蚊子"/>

 

列表：ul-li   ol-li   dl-dt

        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>

        <dl>
            <dt>1</dt>
            <dt>2</dt>
            <dt>3</dt>
            <dt>4</dt>
        </dl>

例子

table:表单

<thead>为表头内容

<td rowspan="2">这个竖向独占两格</td>

<td colspan="2">这个横向独占两格</td>

        <table border="1">
            <thead>
                <tr>
                    <th>表头1</th>
                    <th>表头2</th>
                    <th>表头3</th>
                    <th>表头4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2">这个竖向独占两格</td>
                    <td colspan="2">这个横向独占两格</td>

                    <td>4</td>
                </tr>
                <tr>

                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </tbody>
        </table>

table例子

 

label标签

点击用户名，光标就进入输入框

    <label for="username">用户名：</label>
    <input id="username" type="text" name="user" />