22/7/26、常用标签（2），表单

最新推荐文章于 2024-07-16 15:20:45 发布

照一江明月

最新推荐文章于 2024-07-16 15:20:45 发布

阅读量168

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/w8666999/article/details/125993740

版权

一、常用标签

1.1h系列标签

h1-h6标签 --标题标签
特点：

h1字体最大，h2次之，依次往下排
独占一行
字体加粗
没设置宽度，会继承父元素的宽度
高度由内容撑开
自带上下外间距
注意：同一个页面中避免重复出现 h1标签

<body>
    <h1>一级标题 </h1>
    <h2> 二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

二、文本标签

文本标签是行级标签

特点：不会独占一行

不能设置宽高

2.1span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <style>
        span{
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
    <p><span>当文本段落里有一部分文字有特殊样式时使用</span><br>当文本段落里有一部分文字有特殊样式        
    时使用</p>
</body>
</html>

2.2del

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <style>
        del{
            color: #909090;
        }
    </style>
</head>
<body>
    <p><del>删除标签</del> 一般用于废除文本</p>
</body>
</html>

2.3 strong、b标签

<body>
    <p><strong>strong标签</strong>和<b>b标签</b>都是加粗标签，但是strong更有强调作用</p>
</body

2.4 em、i标签

<p><em>em标签em标签</em> 和 <i>i标签i标签</i> 都是倾斜标签，但是em更有强调作用</p>

2.5 sup、sub 上下标标签

 <!-- 上标文字sup、下标文字sub -->
    <p>2000年发行首张个人专辑《Jay》。
        2002年举行“The One”世界巡回演唱会 <sup>[1]</sup>  。
        2003年成为美国《时代周刊》封面人物 <sup> [2]</sup> 。
    </p>
    <p>2000年发行首张个人专辑《Jay》。
        2002年举行“The One”世界巡回演唱会 <sub>[1]</sub>  。
        2003年成为美国《时代周刊》封面人物 <sub> [2]</sub>  。
    </p>

三、表单

    form表单标签，所有的表单内容需要写在form里
   action:提交的路径
   method:提交的方式get或post 默认get
   input type属性（万金油）
   name：想要后台提交有数据必须写
   value：内容的值
   input输入框
   placeholder意思是输入框提示信息

	       <form action="https://www.baidu.com/" method="get">
			用户名<input type="text" name="yong" placeholder="请输入关键字"/><br>text文本输入框
			密码<input type="password" name="qaz" /><br>password密码输入框
			性别<input type="radio" name="haoyu" />男radio单选框
				<input type="radio" name="haoyu" />女<br>要想实现单选框效果需要统一name属性值
			爱好: 看小说<input type="checkbox" name="byby" value="看小说" />checkbox复选框
				打篮球<input type="checkbox" name="byby" value="打篮球" />checked默认选中，在
				踢足球<input type="checkbox" name="byby" value="踢足球" /><br>表单中可以修改
            <!-- 下拉列表 -->
				<select name="nav">
					<option value="">上海</option>
					<option value="">北京</option>
					<option value="">天津</option>
				</select>
				<input type="file" name="yang" value="文件" /><br>
				<input type="image" src="img/截图.png" />
				<input type="submit" value="登录" />
		</form>