html head 标签 body标签

1.head标签

<!DOCTYPE html>     <!--文档规范标准-->
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">      <!--设置为UTF-8解决中文乱码->
    <meta name="keywords" content="火影,huoying,火影忍者">                      <!--关键字设置，用于关键字搜索-->
    <meta name="description" content="有一群人为了保护村子里的和平。。。。。。">    <!--内容描述，显示在搜索后的内容简介-->
    <!--<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">-->   <!--2秒之后跳转到其他页面 -->
    <title>网站</title>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<!--网站标题-->
    <link rel="icon" href="//www.jd.com/favicon.ico">                          <!--网站标题前面的图标-->
</head>
<body>
    <h1>hello</h1>
</body>
</html>

2.body标签

1）基本标签：

　　<hn>:n的取值范围1-6，从大到小，表示标题

　　<p>:段落标签，内容换行，上下文都有一行空白

　　<b><strong>内容加粗

　　<strike>内容加中线

　　<em>内容变斜体

　　<sub>下标， <sup>上标

　　<br>换行

　　<hr>水平线

　　<div> 块

特殊字符：> < " © ® > < " © ®

　　块级标签：<p><h1><table><ol><ul><form><div>

　　内联标签：<a><input><img><sub><sup><textarea><span>

2）图形标签：

3）超链接标签：

　　<a href="http://www.baidu.com" target="_blank">baidu.com</a> target设置跳转网页的方式

　　锚：

　　<a href="#abcd">跳转到div</a> 跳转到ID为abcd的标签

4)列表标签：

<ul>
    <li>无</li>
    <li>序</li>
    <li>列</li>
    <li>表</li>
</ul>
<ol>
    <li>有</li>
    <li>序</li>
    <li>列</li>
    <li>表</li>
</ol>
<dl>      定义列表
    <dt>湖北</dt>
    <dd>武汉</dd>
    <dd>宜昌</dd>
</dl>
<dl>
    <dt>湖南</dt>
    <dd>长沙</dd>
    <dd>岳阳</dd>
</dl>

5)表格标签：

<table border="1" cellpadding="10" cellspacing="10" >  cellpadding 内边距 ，cellspacing 外边距
    <thead>
        <tr>
            <th>第一列</th>
            <th>第二列</th>
            <th>第三列</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>15</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>16</td>
            <td>女</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>17</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

合并单元格 rowspan(合并行) colspan(合并列)

6)表单标签

　　表单用于向服务器传输数据

　　1.表单属性有 action （提交服务器的地址）method(提交的方式) get/post

　　get:有长度限制，不安全，在url上显示

　　post:无长度限制，安全，在url上显示

　　2.表单元素

　　text 文本输入框

　　password 密码输入框

　　radio 单选框

　　checkbox 复选框

　　submit 提交按钮

　　button 按钮 (配合js使用)

　　file 提交文件 form中要添加 enctype="multipart/form-data"

<!-- name 是给服务器识别的，id 是给CSS，JS识别的-->
<!--value 的作用-->
<!-- type = 'button' ,'reset','submit'  定义按钮上显示的文本-->
<!-- type = 'text' ,'password','hidden'  定义输出字段的初始值-->
<!-- type = 'checkbox' ,'radio','image'  定义与输出相关连的值-->

　　<select> 下拉选择标签 name : 提交服务器的键，size :显示出来的个数，multiple:multiple多选

　　　　<optgroup> 添加分组

　　　　　　<option> value:提交给服务的值 selected:selected 下拉默认被选中

　　<textarea> 多行文本输入框，name:提交服务器的key,cols:文本显示多少列 rows:文本显示多少行

　　<label> 将标签与表单元素关联

　　<fieldset> 区域划分

　　　　　　</fieldset>

代码：

<body>
    <form action="body.html" method="post" enctype="multipart/form-data">
        <p>ID：<input name="ID" type="text" value="110" readonly disabled></p>
        <p>用户名：<input name="user" type="text"></p>
        <p>密码：<input name="pass" type="password"></p>
        <p>男<input type="radio" name="sex" value="1" checked> 女<input type="radio" name="sex" value="2"></p>
        <p>篮球<input type="checkbox" name="hobby" value="1"></p>
        <p>足球<input type="checkbox" name="hobby" value="2"></p>
        <p>排球<input type="checkbox" name="hobby" value="3"></p>
        <p><input type="button" value="btn"></p>
        <p><input type="file" name="file_name"></p>
        <p><input type="submit" value="提交"></p>
        <select name="province" multiple size="4">
            <optgroup label="中国">
                <option value="1">湖北</option>
                <option value="2">湖南</option>
                <option value="3">福建</option>
            </optgroup>
            <optgroup label="美国">
                <option value="4">墨西哥</option>
                <option value="5">洛杉矶</option>
                <option value="6">旧金山</option>
            </optgroup>
        </select>
        <p>评论：<textarea name="comment" cols="15" rows="5"></textarea></p>
        <label for="username">姓名</label>
        <input id='username' type="text">
        <fieldset>
            <legend>个人简介</legend>
            <input type="text">
        </fieldset>
    </form>
</body>

posted @ 2017-05-09 11:14 1916 阅读(161) 评论(0) 收藏举报

刷新页面返回顶部

1916

html head 标签 body标签

公告