Html常用标签

Html（网站的结构）

1. Html是一种超文本标记语言

2. 标签的分类

• 自闭和标签
• 双标签

3. header

3.1 meta标签（自闭和标签）

<meta charset="UTF-8">

3.2 title标签（双标签）

<title>文本名字</title>

4. body

4.1 div标签+css（块级标签）

<div style="background-color: crimson">内容</div>

4.2 span标签（内联标签）

<span style="background-color: crimson">内容</span>

4.3 p标签（段落标签）

<p>段落内容</p>

4.4 br标签（换行标签）

<p>段落<br/>内容</p>

4.5 a标签（跳转标签）

<!--    在原网页跳转-->
<a href="https://baidu.com" >提示信息</a>
<!--    新建一个网页-->
<a href="https://baidu.com" target="_blank">提示信息</a>
<!--锚点地址 #id id不要重复-->
<a href="#l1">第一章</a>
<a href="#l2">第二章</a>
<a href="#l3">第三章</a>
<div id="l1" style="height: 500px">第一章内容</div>
<div id="l2" style="height: 500px">第二章内容</div>
<div id="l3" style="height: 500px" >第三章内容</div>

4.6 h标签（标题标签）

<!--只有h1到h6-->
<h1 style="font-size: 65px">标题名字</h1>
<h6 style="font-size: 10px">标签名字</h6>

*4.7 input标签（用户输入标签）

需要在form表单里提交才会有效

<!--如果要上传文件需要在form标签里加入enctype属性-->
<!--没有enctype属性就只能提交一个名称-->
<form action="url" method="post" enctype="multipart/form-data">
    <!--在div标签里加了一个红色宽度为1像素的边框-->
    <div style="border: 1px solid red">
        <p>用户名：<input type="text"/></p>
        <p>密码：<input type="password"/></p>
        <p>性别：
            <!--若想有互斥属性（单选框），可以添加name属性，让name相同-->
            <br>男<input type="radio" name="gender">
            <br>女<input type="radio" name="gender">
        </p>
        <p>爱好：<br>
            <!--复选框 type="checkbox" -->
            篮球<input type="checkbox">
            羽毛球<input type="checkbox">
            乒乓球<input type="checkbox">
            网球<input type="checkbox">
        </p>
        <p>城市：
            <!--下拉菜单 select+option  -->
            <select>
                <!--optgroup标签可以让select标签分组-->
                <optgroup label="直辖市">
                    <option>北京</option>
                    <option>上海</option>
                </optgroup>
                <optgroup label="四川省">
                    <option>成都</option>
                </optgroup>
            </select>
        </p>
        <!--input标签之提交文件-->
        <p>文件：<input type="file"></p>
        <!--如果有多行文本输入使用textarea标签-->
        <p>备注：<textarea></textarea></p>
        <!--submit 提交当前表单并刷新页面-->
        <input type="submit" value="提交">
        <!--button 也是提交按钮但需要js帮助，没有js就没有任何效果-->
        <input type="button" value="提交">
        <!--reset 刷新当前表单当前页面-->
        <input type="reset" value="提交">
    </div>
</form>

4.8 select标签（下拉列表标签）

<p>城市：
    <!--下拉菜单 select+option  -->
    <select>
        <!--optgroup标签可以让select标签分组-->
        <optgroup label="直辖市">
            <option>北京</option>
            <option>上海</option>
        </optgroup>
        <optgroup label="四川省">
            <option>成都</option>
        </optgroup>
    </select>
</p>

4.9 textarea标签（多行文本标签）

<!--如果有多行文本输入使用textarea标签-->
<p>备注：<textarea></textarea></p>

4.10 form标签（表单标签）

<!--如果要上传文件需要在form标签里加入enctype属性-->
<!--没有enctype属性就只能提交一个名称-->
<form action="url" method="post" enctype="multipart/form-data">
    <!--在div标签里加了一个红色宽度为1像素的边框-->
    <div style="border: 1px solid red">
        <p>用户名：<input type="text"/></p>
        <p>密码：<input type="password"/></p>
        <p>性别：
            <!--若想有互斥属性（单选框），可以添加name属性，让name相同-->
            <br>男<input type="radio" name="gender">
            <br>女<input type="radio" name="gender">
        </p>
        <p>爱好：<br>
            <!--复选框 type="checkbox" -->
            篮球<input type="checkbox">
            羽毛球<input type="checkbox">
            乒乓球<input type="checkbox">
            网球<input type="checkbox">
        </p>
        <p>城市：
            <!--下拉菜单 select+option  -->
            <select>
                <!--optgroup标签可以让select标签分组-->
                <optgroup label="直辖市">
                    <option>北京</option>
                    <option>上海</option>
                </optgroup>
                <optgroup label="四川省">
                    <option>成都</option>
                </optgroup>
            </select>
        </p>
        <!--input标签之提交文件-->
        <p>文件：<input type="file"></p>
        <!--如果有多行文本输入使用textarea标签-->
        <p>备注：<textarea></textarea></p>
        <!--submit 提交当前表单并刷新页面-->
        <input type="submit" value="提交">
        <!--button 也是提交按钮但需要js帮助，没有js就没有任何效果-->
        <input type="button" value="提交">
        <!--reset 刷新当前表单当前页面-->
        <input type="reset" value="提交">
    </div>
</form>

4.11 label标签（关联标签）

可以用label标签通过绑定id来触发别的标签

<label for="mirny">
    id:
    <input id="mirny" type="text">
</label>

4.12 ul标签/ol标签/dl标签

• ul标签：无序排列

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

• ol标签：数字排列

<ol>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ol>

• dl标签：dt+dd分类（dt为类名，dd为组员）

<dl>
    <dt>类名</dt>
    <dd>组员1</dd>
    <dd>组员2</dd>
</dl>

4.13 table标签（表格标签）

<!--table 分为头thead和身体tbody-->
<!--border为装饰的一种-->
<table border="1">
    <thead>
    <!--tr为行，td为列，区分标题标题为th-->
    <tr>
        <th>第一列</th>
        <th>第二列</th>
        <th>第三列</th>
        <th>第四列</th>
        <th>第五列</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>id</td>
        <td>name</td>
        <td>pwd</td>
        <td>age</td>
        <td>css</td>
    </tr>
    <tr>
        <td>id2</td>
        <td>name2</td>
        <td>pwd2</td>
        <td>age2</td>
        <td>css2</td>
    </tr>
    <tr>
        <td>id3</td>
        <td>name3</td>
        <td>pwd3</td>
        <td>age3</td>
        <td>css3</td>
    </tr>
    </tbody>
</table>

4.14 hr标签（分割线标签）

<form action="想要提交到的网址" method="post" enctype="multipart/form-data">
    <!--在div标签里加了一个红色宽度为1像素的边框-->
    <div style="border: 1px solid red">
        <p>用户名：<input type="text"/></p>
        <p>密码：<input type="password"/></p>
        <p>性别：
            <!--若想有互斥属性（单选框），可以添加name属性，让name相同-->
            <br>男<input type="radio" name="gender">
            <br>女<input type="radio" name="gender">
        </p>
        <p>爱好：<br>
            <!--复选框 type="checkbox" -->
            篮球<input type="checkbox">
            羽毛球<input type="checkbox">
            乒乓球<input type="checkbox">
            网球<input type="checkbox">
        </p>
        <p>城市：
            <!--下拉菜单 select+option  -->
            <select>
                <!--optgroup标签可以让select标签分组-->
                <optgroup label="直辖市">
                    <option>北京</option>
                    <option>上海</option>
                </optgroup>
                <optgroup label="四川省">
                    <option>成都</option>
                </optgroup>
            </select>
        </p>
        <!--input标签之提交文件-->
        <p>文件：<input type="file"></p>
        <!--如果有多行文本输入使用textarea标签-->
        <p>备注：<textarea></textarea></p>
        <hr>
        <!--submit 提交当前表单并刷新页面-->
        <input type="submit" value="提交">
        <!--button 也是提交按钮但需要js帮助，没有js就没有任何效果-->
        <input type="button" value="提交">
        <!--reset 刷新当前表单当前页面-->
        <input type="reset" value="提交">
    </div>
</form>

4.15 fieldset标签

创建一个框，框上的提示信息写道legend标签上

<fieldset>
    <legend>登录</legend>
    <label for="id">
        用户名：<input type="text" id="id"/><br><br>
    </label>
    <label for="pwd">
    密码：<input type="password" id="pwd"/><br><br>
    </label>
    <input type="submit" value="提交">
</fieldset>

4.16 iframe标签（跨域ajax标签）

<h1>曾祥瑞的百度</h1>
<!--可能被网站拒绝-->
<iframe style="width: 100%;height: 200px" src="https://www.baidu.com"></iframe>

4.17 img标签

<!--网站的照片，但有些网站有防盗链，可能不成功-->
<img src="https://cn.bing.com/images/search?">
<!--自己的图片-->
<img src="img/0adff7f3-e963-49ad-8882-5bc70ee23ded.png">