HTML常用标签总结

Posted 知道什么是码怪吗?

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML常用标签总结相关的知识,希望对你有一定的参考价值。

目录

h标题标签

font字体标签

div、span、p标签

img图片标签

a超链接标签

ul、ol列表标签

table、tr、th标签

form表单标签

iframe内嵌窗口标签

link标签

input标签

select下拉列表标签

textarea多行文本框标签

综合应用样例


h标题标签

<!--align对齐方式,标题只有1到6的大小-->

<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

font字体标签

<!--color修改颜色,face修改字体样式-->

<font color="red" face="宋体">字体标签</font>

div、span、p标签

<!--div标签默认独占一行-->
<div>div标签1</div>
<div>div标签2</div>

<!--span标签长度是封装数据的长度-->
<span>span标签1</span>
<span>span标签2</span>

<!--p标签默认上下各空一行-->
<p>p标签1</p>
<p>p标签2</p>

img图片标签

<!--width表示图片的宽,height表示图片的高,border表示图片的边框像素,alt表示图片查找失败显示的内容-->

<img src="图片的路径" width="100" height="100" border="1" alt="图片没有找到"/>

a超链接标签

<!--target设置是从新网页打开还是从当前网页打开,默认是当前网页-->

<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_self">百度_self</a>
<a href="http://www.baidu.com" target="_blank">百度_blank</a>

ul、ol列表标签

<!--ul无序列表-->
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>

<!--ol有序列表-->
<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ol>

table、tr、th标签

<!--tr表示的是行,td表示的是列-->
<!--border设置表格边框-->
<!--align设置对齐方式-->
<!--<b>设置字体加粗-->
<!--cellspacing单元格间距-->
<!--colspan设置跨列,rowspan设置跨行-->
<table  cellspacing="10" align="center" border="1" width="300" height="300" >
    <tr>
        <td align="center"><b>1.1</b></td><!--效果和下面的效果一样<th>-->
        <th>1.2</th>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">2.1</td><!--colspan设置跨列,rowspan设置跨行-->
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
</table>

form表单标签

<form action="http://localhost8080" method="get"></form>

iframe内嵌窗口标签

<iframe src="img图片标签.html" width="500" height="500" name="iframe1"></iframe>

link标签

<link rel="stylesheet" type="text/css" href="文件路径">

input标签

<!--根据type属性而实现不同的效果-->

用户名:<input type="text"><br/>
密码:<input type="password">

select下拉列表标签

国籍:
    <select name="国籍">
        <option>--请选择国籍--</option>
        <option selected="selected">中国</option>
        <option>日本</option>
        <option>韩国</option>
        <option>美国</option>
    </select><br/>

textarea多行文本框标签

<!--标签中的内容表示默认值-->
<textarea rows="10" cols="20" name="自我评价">默认值</textarea>

综合应用样例

<form action="http://localhost8080" method="get">
    <table>
        <tr>
            <td>用户名称:</td>
            <td><input type="text" value="默认值"/></td>
        </tr>
        <tr>
            <td>用户密码:</td>
            <td><input type="password"/></td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td><input type="password"/></td>
        </tr>
        <tr>
            <td>性别:</td>
            <input type="radio" name="性别" checked="checked">男<input type="radio" name="性别">女
        </tr>
        <tr>
            <td>兴趣爱好:</td>
            <td><input type="checkbox" name="兴趣爱好">java
                <input type="checkbox" name="兴趣爱好">C++
                <input type="checkbox" name="兴趣爱好">python<br/></td>
        </tr>
        <tr>
            <td>国籍:</td>
            <td><select>
                <option>--请选择国籍--</option>
                <option selected="selected">中国</option>
                <option>日本</option>
                <option>韩国</option>
                <option>美国</option>
            </select></td>
        </tr>
        <tr>
            <td>自我评价:</td>
            <td><textarea rows="10" cols="20">默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" value="重置" align="left"/></td>
            <td><input type="submit" value="提交" align="center"/></td>
            <!--            <td><input type="file" value="文件"/></td>-->
        </tr>
    </table>
</form>

以上是关于HTML常用标签总结的主要内容,如果未能解决你的问题,请参考以下文章

HTML常用属性

Web前端——Html常用标签及属性

个人总结清除样式(间距浮动定位)

干货!HTML5常用的标签总结

HTML5常用标签总结(入门)

ECharts饼图文本标签间距问题Hack