HTML

一、Head属性

<meta charset="UTF-8">   # 自闭合标签,设置编码
<meta http-equiv="Refresh" CONTENT="2"/> # 设置每2秒自动刷新
<meta http-equiv="REFRESH" CONTENT="2; url=http://www.baidu.com"/> # 设置自动跳转、2秒后跳转到baidu.com

<title>HTML基础</title> # 设置网页title
<link rel="shortcut icon" href="image/favicon.ico">  # title图标

二、Body属性

1.<br>&lt;hello&gt;</br> # 换行、小于号大于号<a>
2.&nbsp; #空格
3.a标签
<a href="http://www.baidu.com">百度</a> # 超链接,打开百度
<a href="http://www.baidu.com" style="color: red" target="_blank">跳转2</a>  # 打开一个新页面,跳转到baidu

a标签锚点
<a href="#i1">第一页</a>
<a href="#i2">第二页</a>
<a href="#i3">第三页</a>
<div id='i1' style="height: 500px">第一页内容</div>
<div id="i2" style="height: 500px">第二页内容</div>
<div id="i3" style="height: 500px">第三页内容</div>

4.<p> 段落标签</p>
5.<div></div>标签
<div style="color: red">
    sjkdlfjkaljgljdsl
    <div style="color: blue;">
        jfkdsljgksjl
    </div>
    jdksjgljkdlg
</div>
6.H标签
<h1>标题H1</h1>
<h2>标题H2</h2>
<h3>标题H3</h3>
<h4>标题H4</h4>
<h5>标题H5</h5>
<h6>标题H6</h6>


三、input系列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
    <!--要提交的数据放在form标签里边-->
    <form>
        <!--border:边框 5像素宽度,蓝色-->
        <div style="border: 5px solid blue;">
            <!--input输入框 text 明文-->
            <p>用户名:<input type="text" /></p>
            <!--input输入框 password 密文-->
            <p>密码:<input type="password" /> </p>
            <!--radio属性实现单选框 name属性值相同实现互斥,可以实现只能选1个,name值可以任意-->
            <p>性别:
                <br/>男<input type="radio" name="gender" />
                <br/>女<input type="radio" name="gender" />
            </p>
            <!--checkbox属性实现多选复选框-->
            <p>爱好:
                <br/>音乐<input type="checkbox" />
                <br/>篮球<input type="checkbox" />
                <br/>游戏<input type="checkbox" />
                <br/>看电影<input type="checkbox" />
            </p>
            <!--select+option属性实现下拉菜单,单选-->
            <p>城市:
                <select>
                    <option>上海</option>
                    <option>北京</option>
                    <option>广州</option>
                    <option>深圳</option>
                </select>
                <!--select multiple 实现下拉框多个显示,可以多选-->
                <select multiple>
                    <option>上海</option>
                    <option>北京</option>
                    <option>广州</option>
                    <option>深圳</option>
                </select>
                <!--multiple size=n表示下拉框同时出现n个选项-->
                <select multiple size="2">
                    <option>上海</option>
                    <option>北京</option>
                    <option>广州</option>
                    <option>深圳</option>
                </select>

                <!--optgroup实现分组显示-->
                <select>
                    <optgroup label="AAA">
                        <option>上海</option>
                        <option>北京</option>
                    </optgroup>
                    <optgroup label="BBB">
                        <option>天津</option>
                        <option>武汉</option>
                    </optgroup>
                </select>
            </p>
            <!--input type=file实现上传文件功能-->
            <p>文件:
                <input type="file" />
            </p>
            <!--备注:多行-->
            <p>备注: <textarea></textarea></p>

            <!--submit提交当前表单, 页面会刷新-->
            <input type="submit" value="submit"/>
            <!--button只是一个按钮,默认没什么效果-->
            <input type="button" value="button"/>
            <!--重置当前表单内容,只对当前from区域内内容起作用-->
            <input type="reset" value="reset"/>
        </div>
    </form>

</body>
</html>

四、input系列之向后台发送数据

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>后台提交数据</title>
 6 </head>
 7 <body>
 8     <form>
 9         <input type="text" name="u" />
10         <input type="submit" value="提交" />
11         <!--输入的内容会以字典的形式提交{'u':"input的内容"}-->
12     </form>
13     <hr />
14     <!--横线-->
15     <form action="https://www.sogou.com/web" method="post">
16         <!--action 可以定义一个地址、将数据发送到该地址、默认是已get方式提交、用method可以改成以post提交-->
17         <input type="text" name="query"/>
18         <input type="submit"/>
19     </form>
20     <hr />
21     <form style="background-color: chartreuse" enctype="multipart/form-data">
22         <!--如果要上传文件、form标签必须加上enctype="multipart/form-data"-->
23         <input type="text" name="user" />
24         <p><input type="password" name="pwd" /></p>
25         男<input type="radio" name="gender" value="1" />
26         <!--radio提交的值必须指定value, 后台收到的值为1代表男、0代表女-->
27         女<input type="radio" name="gender" value="0" />
28         <p>爱好：
29             篮球<input type="checkbox" name="ball" value="1">
30             足球<input type="checkbox" name="ball" value="2">
31             排球<input type="checkbox" name="ball" value="3">
32             <!--checkbox提交-->
33         </p>
34         <p>上传文件:<input type="file" name="fafafa"></p>
35         <!--上传文件提交-->
36         <p>城市:
37             <select name="city">
38                 <option value="bj">北京</option>
39                 <option value="sh">上海</option>
40                 <option value="gz">广州</option>
41             </select>
42             <!--select提交-->
43         </p>
44         <p>
45             备注:<textarea name="beizhu"></textarea>
46         </p>
47 
48         <input type="submit">
49 
50     </form>
51 </body>
52 </html>
View Code

五、iframe标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <h1>老男孩之家</h1>
 9     <iframe  style="width: 100%; height: 2000px" src="http://autohome.com.cn"></iframe>
10 
11 </body>
12 </html>
View Code

六、fieldset标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fieldset标签</title>
</head>
<body>
    <fieldset style="background: green">
        <legend>登陆</legend>
        <p>
            <label>
                用户名:<input type="text">
            </label>
        </p>
        <p>
            <label>
                密码:<input type="password">
            </label>
        </p>
    </fieldset>

</body>
</html>
View Code

七、table标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table标签</title>
</head>
<body>
    <table border="2">
        <!--thead表示标题 tbody表示内容 tr表示行 td表示列-->
        <!--head里边一般不写td、写成th表示加粗、和tbody的td区别开来-->
        <!--border的值表示表格的边框有多粗-->
        <thead>
            <tr>
                <th colspan="2">第一列</th>
                <!--colspan表示横向合并单元格、2表示合并2个格子-->
                <th>第三列</th>
                <th>第四列</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">1</td>
                <!--rowspan表示竖向合并单元格、2表示合并2个格子-->
                <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>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>

        </tbody>
    </table>
    <hr />
    <table border="3">
        <!--也可以不写thead和tbody-->
        <tr>
            <th>第一列</th>
            <th>第二列</th>
            <th>第三列</th>
        </tr>
        <tr>
            <td>第一列</td>
            <td>第二列</td>
            <td>第三列</td>
        </tr>
        <tr>
            <td>第一列</td>
            <td>第二列</td>
            <td>第三列</td>
        </tr>
    </table>

</body>
</html>
View Code

八、小技巧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小技巧</title>
</head>
<body>
    <label for="name">
        姓名:<input type="text" id="name">
    </label>
    <label for="married">
        婚否:<input type="checkbox" id="married">
    </label>
    <!--label标签实现了区域选中-->

    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>3333333</li>
    </ul>
    <ol>
        <li>111111</li>
        <li>222222</li>
        <li>3333333</li>
    </ol>
    <dl>
        <dt>dt</dt>
        <dd>dd</dd>
        <dd>dd</dd>
        <dd>dd</dd>
        <dd>dd</dd>
        <dt>dt</dt>
        <dd>dd</dd>
        <dd>dd</dd>
        <dd>dd</dd>
        <dd>dd</dd>
    </dl>

</body>
</html>
View Code

九、input系列默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列默认值</title>
</head>
<body>
    <input type="text" value="1">
    <textarea>123</textarea>
    <select>
        <option>北京</option>
        <option selected="selected">上海</option>
        <option>广州</option>
    </select>
    男:<input type="radio" name="g1" value="boy">
    女:<input type="radio" name="g1" value="girl" checked="checked">

    篮球<input type="checkbox" name="g2" value="b">
    足球<input type="checkbox" name="g2" value="f" checked="checked">
    排球<input type="checkbox" name="g2" value="p">
    羽毛球<input type="checkbox" name="g2" value="y" checked="checked">
</body>
</html>
View Code

 

posted @ 2016-10-20 09:40  张文强Terry  阅读(177)  评论(0)  编辑  收藏  举报