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> 块

特殊字符:&gt; &lt; &quot; &copy; &reg; > < " © ®

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

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

2)图形标签:

  <img src="1.jpg" height="100" width="100" alt="不见了" title="美女">

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> 将标签与表单元素关联

      <label for="username">用户名</lable>

      <input id="username" type='text'>

  <fieldset> 区域划分

      <fieldset>

        <legend>个人简介</legend>

        <input type='text'>

      </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>

优质内容筛选与推荐>>
1、[转]读取 Excel 之 SQL 方式读取
2、吴昊品游戏核心算法 Round 12 —— 火柴游戏AI(大整数加减)
3、一步一步教你做ios推送
4、iOS开发之主题皮肤
5、C#中 ThreadStart和ParameterizedThreadStart区别


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn