web常用标签

.晚街听风~

已于 2023-03-22 10:21:30 修改

阅读量1.5w

点赞数 17

分类专栏： web 文章标签：前端 html css

于 2022-06-04 19:57:36 首次发布

本文链接：https://blog.csdn.net/Solar_angel/article/details/125120584

版权

1.容器标签

<div>Hello</div>//占一行文本

<span>123</span>//在一行里边
<span>123</span>
<span>123</span>
<span>123</span>
<span>123</span>
//段落标记<p>111</p>

效果如图：
在这里插入图片描述

2.标题标签

<h1>标题1</h1>
<h2>标题2</h2>

效果如图：
在这里插入图片描述

3.无序列表

<ul type="square">
 <li>hello</li>
 <li>hello</li>
 <li>hello</li>
 <li>hello</li>
</ul>

效果如图：在这里插入图片描述

4.图片标签

<img src="file:///C|/Users/DELL/Pictures/新建文件夹/QQ图片20220419204829.png">
//这是一个单标签

效果就是插入了一张图片。

5.分割线标签

<hr>

效果如图：
在这里插入图片描述

5.链接标签

6.表格标记

<table width="600" border="1">
<tr>
<th>hello</th>
<th>hello</th>
<th>hello</th>
<th>hello</th>
</tr>
<tr>
<th>hello</th>
<th>hello</th>
<th>hello</th>
<th>hello</th>
</tr>
</table>

效果如下图：
在这里插入图片描述

7.126邮箱登录部分

<div id="login-word" align="center"> <b>邮箱账号登录</b></div>

<table>
					<tr height="80px">
                    	<td width="30px"></td>
						<td><input type="text" placeholder="邮箱账号或手机号码" class="">@126.com</td>
                        <td width="30px"></td>
					</tr>
					<tr height="80px">
                    	<td width="30px"></td>
						<td><input type="password" placeholder="输入密码" class=""></td>
                        <td width="30px"></td>
					</tr>
					<tr height="80px">
                    	<td width="30px"></td>
						<td><input type="checkbox"/>30天内免费登录 <a class="">忘记密码？</a></td>
                        <td width="30px"></td>
					</tr>
					<tr height="80px">
                    	<td width="30px"></td>
						<td><input type="submit" value="登录" class="button-size"></td>
                        <td width="30px"></td>
					</tr>
				</table>

效果如图：
在这里插入图片描述

8.input标签

<input type="radio"/>hello
<input type="checkbox" name="" id="" value=""/>hello
<input type="button" value="hello"/>
<input type="text" placeholder="邮箱账号或手机号码"/>
<input type="password" placeholder="输入密码"/>
<input type="submit" value="hello"/>
<input type="reset" value="重置"/>

效果依次如下图：
在这里插入图片描述

9.特殊符号

&lt; // 小于号  
&gt; //大于号
&amp; //与字符
&quot;//引号
&nbsp;//空格

10.给文字加垂直的分割线

.daohang{
		border-left:#6E6A6A 1px solid;
		padding-left:12px;
		}

效果图如下：
在这里插入图片描述

11.126邮箱

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>126邮箱</title>

<style type="text/css">
body{
     
	margin:0px;}
	#logo{
     
		width:100%;
		height:70px;}
		#logo-logo{
     
			width:420px;
			height:70px;
			float:left;
			padding-left:50px;}
			#logo-img{
     
				width:163px;
				height:70px;
				float:left;
				}
			#logo-word{
     
				width:160px;
				height:60px;
				margin:0px;
				padding-top:10px;
				float:left;}
				.wordstyle{
     
					height:40px;
					margin:0px;
					padding-top:15px;
					border-left:#353333 1px solid;
					padding-left:15px;}
		#logo-right{
     
			width:420px;
			height:70px;
			float:right;}
			.ulstyle{
     
				margin:0px;
	 			padding:0px;
				list-style-type:none;}
				.listyle{
     
					height:30px;
					padding-top:25px;
					padding-left:6px;
					padding-right:6px;
					float:left;}
					.daohang{
     
						border-left:#6E6A6A 1px solid;
						padding-left:12px;}
	#login{
     
		width::100%;
		height:750px;
		background:#9963f9;
		padding-top:50px;}
		#login-content{