HTML常用标签，特殊符号，表格，表单

最新推荐文章于 2023-03-30 11:29:29 发布

╮ 廷廷玉立

最新推荐文章于 2023-03-30 11:29:29 发布

阅读量1.3k

点赞数

文章标签： web前端

本文链接：https://blog.csdn.net/Iam_am_lbj/article/details/100030159

版权

文章目录

HTML是一种超文本标记语言，不是编程语言

HTML标签是由尖括号包围的关键字
HTML标签通常成双出现

1、常用标签

块级标签：d div ul ol li dl dt dd h1-h6
- 单独一行，对高度和宽度可以设置

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<h1>列表标签</h1>
<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

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

<h3>自定义列表</h3>
<dl>
    <dt>湖南省</dt>
    <dd>长沙</dd>
    <dd>衡阳</dd>
    <dd>武汉</dd>
    <dt>辽宁省</dt>
    <dd>沈阳</dd>
    <dd>营口</dd>
    <dd>锦州</dd>
</dl>

</body>
</html>

行内标签：a span em strong b i u br

多个标签可以在一行，不能设置行内标签的高度宽度，主要靠内容支撑
行内块标签：img input textarea

可以和其他元素在一起，可以设置宽高
行内标签和块级标签可以相互转化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>

    <style>
        b{
            width: 80px;
            height: 40px;
            border: 2px solid greenyellow;
            display: block;
        }

        div{
            width: 80px;
            height: 80px;
            border: 1px solid red;
            display: inline;
        }
    </style>
    
</head>
<body>

<b>行内标签转块级标签</b>
<div>块级标签转行内标签</div>

</body>
</html>

2、链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
    <style>
        span{
            color: hotpink;
            font-size: 50;
            background-color: greenyellow;
        }
    </style>
</head>
<body>

<a href="http://www.baidu.com"
    title="跳转到百度"
    target="_blank">点击我可以跳转到百度</a>

<img src="鞠婧祎.jpg" alt="图片不存在"
     title="我是鞠婧祎"
     width="300" height="500">

<h1>我喜欢<span>唱，跳，rap</span>篮球</h1>


</body>
</html>

3、特殊符号

&emsp		全角		占用一个中文
&nbsp		半角		占用一个字节

<body>

&lt;&emsp;&gt; <br>
&lt;&nbsp;&gt; <br>

用户名： <br>
密&emsp;码：

运行结果
在这里插入图片描述

4、表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<style>
    td,th{
        border: 3px solid hotpink;
        width: 50px;
        text-align: center;  /* 居中显示 */
        line-height: 20px;   /* 设置行高 */
    }
</style>
<body>

<table style="border-collapse: collapse;"  id="a" >

    <caption>border边框</caption>

    <tbody id="b">

    <tr>
        <th>name</th>
        <th>age</th>
        <th>sex</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>

    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>

    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>

    </tbody>

</table>
</body>
</html>

程序结果

5、表单

表单控件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<form action="" method="get" enctype="multipart/form-data">

<p>用户名: <input type="text" name="user"></p>

<p>密&emsp;码: <input type="password" name="passwd"></p>

<p>性&emsp;别:
    <!--单选框-->
    <input type="radio" name="sex" value="man" checked>男
    <input type="radio" name="sex" value="woman">女
    <input type="radio" name="sex" value="secret">保密
</p>

<p>爱&emsp;好:
    <!--多选框-->
    <input type="checkbox" name="hobby" value="sing">唱歌
    <input type="checkbox" name="hobby" value="dance">跳舞
    <input type="checkbox" name="hobby" value="basketball">篮球
</p>

    <!--实现弹窗-->
<p>上传文件: <input type="file"></p>

    <!--下拉框-->
<p>地址:
    <select name="addr" id="">

        <optgroup label="辽宁省">
            <option value="yk">营口</option>
            <option value="sy">沈阳</option>
        </optgroup>
        <optgroup label="湖南省">
            <option value="cs">长沙</option>
            <option value="hy">衡阳</option>
        </optgroup>

    </select>
</p>

    <!--文本域-->
<fieldset>
    <legend>个人简介: </legend>
    <textarea name="profile" id="" cols="30" rows="5"></textarea>
    
</fieldset>

<p><input type="submit" value="提交">

<input type="reset" value="重置"></p>

</form>


</body>
</html>

结果演示

╮ 廷廷玉立

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML常用标签，特殊符号，表格，表单

文章目录1、常用标签2、链接标签3、特殊符号4、表格5、表单表单控件HTML是一种超文本标记语言，不是编程语言HTML标签是由尖括号包围的关键字 HTML标签通常成双出现1、常用标签块级标签：d div ul ol li dl dt dd h1-h6单独一行，对高度和宽度可以设置 <!DOCTYPE html><html lang="en"&g...
复制链接

扫一扫