html常用标签

列表：

有序列表：

<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

无序列表
<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

自定义列表
<dl>
    <dt>自定义列表1</dt>
    <dd>第一项</dd>
    <dd>第二项</dd>
    <dt>自定义列表2</dt>
    <dd>第一项</dd>
    <dd>第二项</dd>
</dl>

 

效果：

 

 

form表单：

<!--表单  action:表单数据提交到那里去    method：提交方式GET/POST-->
<form action="https://www.baidu.com" method="get">
    <!--文本框-->
    用户名：<input type="text" name="name" /> <br>
    <!--密码框-->
    密码：<input type="password" name="password" /><br>
    <!--单选按钮-->
    性别：<input type="radio" name="sex" value="male"  checked/>male
    <input type="radio" name="sex" value="female"  checked/>female<br>

    <!--多选按钮-->
    汽车：<select name="cars">
        <option value="丰田">丰田</option>
        <option value="本田">本田</option>
        <option value="比亚迪">比亚迪</option>
        <option value="五菱荣光" selected>五菱荣光</option>
    </select><br>
    <!--提交按钮-->
    <input type="submit" value="提交" >
    <input type="reset" value="重置">
</form>

 

效果：

 

 

 

a标签，跳转到页面中的指定位置

<!-- 跳转到页面中name属性为chap1的位置 -->
<a href="#chap1"> 跳转</a>

<a name = "chap1"> chap1</a>

不一定必须要是a标签，只要有name属性，通过超链接就可以进行跳转，如：常见页面中的返回顶部，去到底部。
效果：

 

 

其他常用标签

标题
<h1 >第一个html网页--标题</h1>
<!--行内样式-->
<h2 style="color: red;background-color: beige;text-align: center; font-family: Bahnschrift;font-size: 10px;">第二个标题</h2>
<hr />
<p >第一个html网页--段落</p>
<!--图片链接-->
<a href="https://www.baidu.com/"  target="_blank"><img src="../img/w3school.gif" width="300" height="250"/></a><br/>
效果：