html标签小记

一、编写html文件：

- doctype对应关系
- html标签，标签内部可以写属性 ====> 只能有一个
- 注释：  <!--  注释的内容  -->

二、标签分类：

1、自闭合标签

2、主动闭合标签

3、head标签中：

　　<meta charset="UTF-8"> 编码

刷新
　　　　跳转
　　<meta name="keywords" content=
　　"汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部"/>　　关键字
　　<meta name="description" content=
　 "汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。"/>　　　描述

　　- title标签　　标题

　　- <link /> 搞图标

1、
<link rel="shortcut icon " type="images/x-icon" href="./favicon.ico">
其中favicon.ico需放在根目录下面
2、
<link rel="shortcut icon " type="images/x-icon" href="http://www.jd.com/favicon.ico">

4、body标签
     - 图标， 空格 &nbsp; 小于号 &gt; 大于号  &lt;

<a href="http://www.oldboyedu.com
 ">李&nbsp;&nbsp;&nbsp;&nbsp;&gt;&lt;a&gt;杰</a>


     - p标签，段落
     - br，换行  建议使用：<br />
     ======== 小总结  =====
        所有标签分为：
            块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
            行内标签： span（白板）
        标签之间可以嵌套
        标签存在的意义，css操作，js操作容易方便
        ps:chorme审查元素的使用
            - 定位
            - 查看样式

- input系列 + form标签
    input type='text'     - name属性，value="赵凡"
    input type='password' - name属性，value="赵凡"
    input type='submit'   - value='提交' 提交按钮，表单
    input type='button'   - value='登录' 按钮

    input type='radio'    - 单选框 value，checked="checked"，name属性（name相同则互斥）
    input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据）
    input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data"
    input type='rest'     - 重置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            <select name="city" size="2" multiple="multiple">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">南京</option>
                <option value="4" selected="selected">成都</option>
                <option value="5">深圳</option>
            </select>



            <input type="text" name="user" />
            <p>请选择性别：</p>
            男：<input type="radio" name="gender" value="1"/>
            女：<input type="radio" name="gender" value="2" checked="checked"/>
            dylan:<input type="radio" name="gender" value="3" />
            <p>爱好</p>
            篮球：<input type="checkbox" name="favor" value="1"/>
            足球：<input type="checkbox" name="favor" value="2" checked="checked"/>
            皮球：<input type="checkbox" name="favor" value="3"/>
            台球：<input type="checkbox" name="favor" value="4"/>
            网球：<input type="checkbox" name="favor" value="5"/>
            <p>技能</p>
            撩妹：<input type="checkbox" name="skill" checked="checked"/>
            写代码：<input type="checkbox" name="skill"/>
            <p>上传文件</p>
            <input type="file" name="fname"/>
            <textarea name="meno" >asds</textarea>


        </div>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>


</body>
</html>

- a标签
- 跳转
- 锚 href='#某个标签的ID' 标签的ID不允许重复

- img
　　src
　　alt
　　title

- 列表
ul
　　li
ol
　　li
dl
　　dt
　　dd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http//:www.oldboyedu.com">
        <img src="1.jpg" title="大美女" style="height:200px;width: 200px;" alt="美女 ">
    </a>
    <ul>
        <li>assdf</li>
        <li>assdf</li>
        <li>assdf</li>
        <li>assdf</li>
    </ul>
    <ol>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>

    </ol>
    <dl>
        <dt>eee</dt>
        <dd>asdf</dd>
        <dd>asdf</dd>
        <dd>asdf</dd>
        <dd>asdf</dd>
        <dt>rrr</dt>
        <dd>asdsf</dd>
        <dd>asdsf</dd>
        <dd>asdsf</dd>
    </dl>



</body>
</html>

- 表格
table
　　thead
　　　　tr
　　　　　　th
　　tbody
　　　　tr
　　　　　　td
colspan = ''
rowspan = ''

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <td>主机名</td>
        <td>端口</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1.1.1.1</td>
        <td>80</td>
        <td>
            <a href="s2.html">查看详细</a>
            <a href="#">修改</a>
        </td>
    </tr>
    <tr>
        <td>1.21.2</td>
        <td>90</td>
        <td>第三行第三列</td>
    </tr>
    <tr>
        <td>222.323</td>
        <td>8080</td>
        <td>无</td>
    </tr>
</table>
<table border="1">
    <thead>
    <tr>
        <th>表头1</th>
        <th>表头1</th>
        <th>表头1</th>
        <th>表头1</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td colspan="3">1</td>


    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>

    </tr>
    <tr>

        <td>1</td>
        <td>1</td>
        <td>1</td>

    </tr>
    </tbody>
</table>

</body>
</html>

- label
　　用于点击文件，使得关联的标签获取光标
　　<label for="username">用户名：</label>
　　<input id="username" type="text" name="user" />
- fieldset
　　legend

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<fieldset>
    <legend>登录</legend>
    <label for="username">用户名：</label>
    <input id="username" type="text" name="user"/>
    <br/>
    <label for="pwd">密码：</label>
    <input id="pwd" type="text" name="user"/>
</fieldset>

</body>
</html>

posted @ 2019-03-29 22:54 Dylan123 阅读(97) 评论(0) 收藏举报

刷新页面返回顶部

脚踏实地，仰望星空

Stay Hungry,Stay Foolish

html标签小记

公告