HTML常用标签集合

HTML标签：

• 我们可以将HTML标签理解为一套规则，浏览器认识的规则。
• HTML不区分大小写
• 标签之间可以嵌套
• 存在的意义定位，CSS操作，JS操作

head标签：类似于一个人的大脑，head里边的标签只有title是显示的

• 编码

<meta charset="UTF-8">

• 自动刷新

<meta http-equiv="Refresh" content="3">

• 自动跳转

<meta http-equiv="refresh" content="3;url=http:www.qq.com ">

• 设置网页关键字

  <meta name = "keywords" content = "工程大，台阶大">

• 设置网页描述

<meta name="description" content="真香大学">

• 支持多版本IE

<meta http-equiv="x-ua-compatible" content="IE=IE9;IE=IE8">

body标签：展示出来的标签
标签主要分为块级与行内：
块级标签： div 、p、h1…h6、ol、ul、dl、form 、table
行内标签：a、span、input、label

• a：超链接标签：跳转

<a href="http://www.baidu.com">百度一下</a> 
自身跳转到百度首页
<a href="https://www.kuaishou.com/" target="_blank">快手</a>
利用target属性中的_blank,可以加载一个新的网页（快手）

<a href="#d1">看一下第一天的内容</a>
在本网页跳转到id为d1的标签处

• p:段落

 <p> 我要努力弥补以前的无知</p>

• br:换行

<br />

• 转义字符 ：&nbsp ; &lt ; &gt ;

<p> 我要努力弥补以前的无知 &nbsp; &gt;&lt;</p>
分别为空格，大于号，小于号

• h1~h6:标题标签，从大到小

  <h1>MXHDOIT</h1>

• div 与 span：块级白板，行内白板

<div>
	<span></span>
</div>

• form：表单；内嵌：input家族，select，textarea
  直接将数据发送后端的标签；

 <form action = "url"  method="GET">

<!--	action=“***（将数据发送的位置）”；-->
<!--	method = “GET || POST”;区别：GET：会将数据添加到URL上；POST：会将数据放在内容里。-->
<!--	enctype = "multipart/form-data",-->

        <input type="text" name ="user">

        <input type="password" name="">
<!--        他会把这个打包成一个字典，提交到后台-->
<!--        {'user':'用户输入的用户','paw':'用户输入密码'}-->


        <input type="button" value="点击">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="file" name="over">
<!--        在form中加 enctype = "multipart/form-data"）-->


 		<span>性别</span>
        <input type="radio" value="男" name="sex">男
        <input type="radio" value="女" name="sex" checked>女
		<!-- checked表示默认值 -->
		<!-- name必须相同 -->
        <span>喜欢吃什么</span>
        <input type="checkbox" value="西瓜" name="food" checked> 西瓜
        <input type="checkbox" value="黄瓜" name="food" > 黄瓜
        <input type="checkbox" value="南瓜" name="food" checked> 南瓜
        <input type="checkbox" value="东瓜" name="food"> 东瓜
    </form>

• select,textarea:下拉框，文本框

<form action="url" method="post">
        <select name  = "city" size="5" multiple="multiple">
        <!-- multiple表示可多选 -->
            <option>汉中</option>
            <option>宝鸡</option>
            <option>咸阳</option>
            <optgroup label="西安"><!--这是有标题的下拉框，父标题不能选择-->
                <option>临潼区</option>
                <option>未央区</option>
            </optgroup>

        </select>

        <textarea name="txt">多行文本输入默认值</textarea>
    </form>

• 列表：ol(有序)，ul（无序），dl（有标题的）

 <div>
        <ol>
            <li>马新航</li>
            <li>范程</li>
            <li>金鹏</li>
        </ol>

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

        <dl>
            <dt>目录</dt>
            <dd>水浒</dd>
            <dd>西游</dd>
            <dd>三国</dd>
        </dl>
    </div>

• table:表格

 <table border="1">
        <tr>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>马新航</td>
            <td>中</td>
        </tr>
        <tr>
            <td>淡瑞</td>
            <td>女</td>
        </tr>
    </table>

合并单元格

<table border="1">
        <tr>
            <th>姓名</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
        <tr>
            <td>马新航</td>
            <td colspan="2">中</td>

            <td rowspan="2">双击么么哒</td>
        </tr>
        <tr>
            <td>淡瑞</td>
            <td>女</td>
            <td>1</td>
        </tr>

• label:通过 属性for = “id”，input(的id)关联,

  <label for="txt1">用户名：</label>
  <input type="text" id="txt1" >