web常用标签
时间：2022-09-16 11:30:00
1.容器标签
<div>Hellodiv>///占用一行文本 <span>123span>//在一行 <span>123span> <span>123span> <span>123span> <span>123span> ///段落标记<p>111p> 效果如图：
2.标题标签
<h1>标题1h1> <h2>标题2h2> 效果如图：
3.无序列表
<ul type="square"> <li>helloli> <li>helloli> <li>helloli> <li>helloli>
ul>
效果如图：
4.图片标签
<img src="file:///C|/Users/DELL/Pictures/新建文件夹/QQ图片20220419204829.png">
//这是一个单标签
效果就是插入了一张图片。
5.分割线标签
<hr>
效果如图：
5.链接标签
6.表格标记
<table width="600" border="1">
<tr>
<th>helloth>
<th>helloth>
<th>helloth>
<th>helloth>
tr>
<tr>
<th>helloth>
<th>helloth>
<th>helloth>
<th>helloth>
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.comtd>
<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.特殊符号
< // 小于号
> //大于号
& //与字符
"//引号
//空格
10.给文字加垂直的分割线
.daohang{
border-left:#6E6A6A 1px solid;
padding-left:12px;
}
效果图如下：
11.126邮箱
<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{
width:1200px; height:700px; background:#F40004; margin-left:auto; margin-right:auto;} #login-ad{
width:768px; height:700px; background:#9963f9;} #pic-button{
width:180px; height:62px; background:#061FE3; border-radius:40px 40px 40px 40px; position:relative; left:265px; top:-89px;} .button-word{
position:relative; font-size:25px; color:#E7ED0A; left:40px; top:10px;} #button1{
width:30px; height:30px; background:#061FE3; border-radius:30px 30px 30px 30px; position:relative; left:625px; top:-100px; } .fuhao1{
font-size:x-large; position:relative; left:5px; top:-5px; color:#E3DEDE;} #button2{
width:30px; height:30px; background:#061FE3; border-radius:30px 30px 30px 30px; position:relative; left:665px; top:-130px;} .fuhao2{
font-size:x-large; position:relative; left:5px; top:-5px; color:#E3DEDE;} #login-login{
width:432px; height:700px; background:#FFFFFF; position:relative; left:768px; top:-700px;} #login-enter{
width:432px; height:700px;} #login-word{
padding-top:25px; font-size:26px;} .input-size{
width:260px; height:45px;} .button-size{
width:360px; height:50px; background:#21B320;} .wz{
padding-left:90px;} #copyright{
width:100%; height:50px; padding-top:50px;} #copy{
width:600px; height:50px; position:relative; left:550px; top:-50px;} ul{
margin:0px; padding:0px; list-style-type:none;} li{
height:15px; padding-top:45px; padding-left:6px; padding-right:6px; float:left;} style>
head>
<script type="text/javascript"> function gb(){
var mypic="C:\Users\DELL\Pictures\路标图片"; myimg=document.getElementById("myimg"); myimg=mypic;} script>
<body>
<div id="logo">
<div id="logo-logo">
<div id="logo-img"><img src="126.PNG">div>
<div id="logo-word">
<p class="wordstyle">你的专业电子邮局p>
div>
div>
<div id="logo-right">
<div>
<ul class="ulstyle">
<li class="listyle">VIPli>
<li class="listyle">会员li>
<li class="listyle">企业邮箱li>
<li class="listyle">海外登录li>
<li class="listyle"><a class="daohang">帮助a>li>
<li class="listyle">反馈li>
<li class="listyle">修复公示li>
ul>
div>
div>
div>
<div id="login">
<div id="login-content">
<div id="login-ad">
<div> <img src="AD.jpg" id="myimg">div>
<div id="pic-button"><b class="button-word">立即了解b>div>
<div id="button1" onClick="gb();"><strong class="fuhao1">< strong>div>
<div id="button2"><b class="fuhao2">> b>div>
div>
<div id="login-login">
<form id="login-enter">
<div id 
