web常用标签

原创已于 2023-03-22 10:21:30 修改 · 1.8w 阅读

43 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web

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

本文详细介绍了HTML中常见的标签使用，包括容器标签、标题标签、无序列表、图片、分割线、链接、表格、126邮箱登录、input输入、特殊符号、文字分隔线、加粗、JavaScript乘法表、样式设置、标签属性、鼠标状态、跳转目录、返回顶部及表单元素等，结合实际效果展示，帮助理解并应用。

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{
			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">VIP</li>
				<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">&lt; </strong></div> <!--&lt:< &gt:>-->
            <div id="button2"><b class="fuhao2">&gt </b></div>
        </div>
        <div id="login-login">
        	<form id="login-enter">
            <div id="login-word" align="center"> <b>邮箱账号登录</b></div>
            <table>
					<tr height="80px">
                    	<td width="30px"></td>
						<td><input type="text" placeholder="邮箱账号或手机号码" class="input-size">@126.com</td>
                        <td width="30px"></td>
					</tr>
					<tr height="80px">
                    	<td width="30px"></td>
						<td><input type="password" placeholder="输入密码" class="input-size"></td>
                        <td width="30px"></td>
					</tr>
					<tr height="80px">
                    	<td width="30px"></td>
						<td><input type="checkbox"/>30天内免费登录 <a class="wz">忘记密码？</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>
            </form>
        </div>
    </div>
</div>
<div id="copyright">
	<div id="copy">
             <ul>
				<li><a>网易首页</a></li>
				<li><a class="daohang">网易严选</a></li>
				<li><a class="daohang">政府公益热线</a></li>
				<li><a class="daohang">隐私政策</a></li>
				<li><a class="daohang">儿童隐私政策</a></li>
 			</ul>
    </div>
</div>
</body>
</html>

12.菜鸟教程简略首页

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style type="text/css">
	    body {background-color: #f6f6f6;}
        .top{
            width: 1000px;
            height: 90px;
            background-color:#f6f6f6;
            margin-left: auto;
            margin-right: auto;
        }
        .top-left {
            width: 600px;
            height: 90px;
            background-color:#f6f6f6;
            float: left;
        }
		.top-left-text{
		padding-top:30px;
		padding-left:30px;
		font-size:30px;
		margin:0px;
		text-indent:0px;
		}
	    .top-left-text-color{
		color:#96b97d;
	    }
        .top-right {
            width: 400px;
            height: 90px;
            background-color:#f6f6f6;
            float: right;
        }
		.top-right-text{
			width:250px;
			height:40px;
			line-height:40px;
			padding-left:10px;
			background:#FFFFFF;
			border:#ebecea solid 5px;
			border-radius:0px;
			}
        .banner{
            width: 100%;
            height: 50px;
            background-color: #96b97d;
        }
        .banner-text{
            width: 1000px;
            height: 50px;
			color:#FFFFFF;
			line-height:50px;
            background-color:  #96b97d;
            margin-left: auto;
            margin-right: auto;
        }
        #body {
			padding-top:20px;
            width: 1000px;
            height: 500px;
            margin-left: auto;
            margin-right: auto;
            background-color: #f6f6f6;
        }
        #body-left {
                width: 180px;
                height: 450px;		
                background-color: #f6f6f6;
                margin-right: 20px;
				float: left;
            }
		.body-left-list, .body-left-list ul{
				padding-left:0px;
				margin-top:0px;
				list-style-position:inside;
			}
		#body-left-list-text li{list-style-image:url(image3.PNG);height:40px;}
			.body-left-list-top{
				color:#1B5F00;
				list-style-image:url(image.PNG);
				}
			.body-left-list-text-color{	background-color:#ffffff;}
		#body-right {
                width: 800px;
                height: 500px;
                background-color:#ffffff;
                float: left;
				
            }
        #body-right-top {
                    width: 800px;
                    height: 50px;
					border-bottom: solid #eaeaea 1px;
                    background-color: #ffffff;
                }
		.body-right-top-image{
					height:30px;
					margin: 30px 30px 0px;
					list-style-image:url(image2.png);
				}
        #body-right-body {
                    width: 800px;
                    height: 380px;
					padding-top:10px;	
                    background-color:#ffffff;

                }
        #body-right-body-shang,#body-right-body-zhong,#body-right-body-xia{
                        width: 750px;
						float: right;
                        height: 120px;
                        margin-bottom: 10px;
                        background-color:  #ffffff;
                    }
        #body-right-body-shang div,#body-right-body-zhong div,#body-right-body-xia div {
                        width: 240px;
                        height: 120px;
						float: left;			
						border-radius: 10px;		
                        margin-right: 10px;
                        background-color: #f6f6f6;
                    }
		 #body-right-body-shang div:hover,#body-right-body-zhong div:hover,#body-right-body-xia div:hover {
                        background-color: #dadada;
                    }
        .copyright{
            width: 1000px;
            height: 50px;
            margin-left: auto;
            margin-right: auto;
            background-color: #ffffff;
        }

    </style>
</head>
<body>
    <div class="top">
        <div class="top-left">
          <p class="top-left-text">RUNOOB <span class="top-left-text-color">.COM</span> </p>
        </div>
        <div class="top-right">
        <p class="top-right-text">html教程</p>
        </div>
    </div>
    <div class="banner">
        <div class="banner-text">
        <a>首页</a>
        <a>菜鸟工具</a>
        <a>菜鸟笔记</a>
        <a>参考手册</a>
        <a>用户笔记</a>
        <a>测试/考试</a>
        <a>本地书签</a>
        </div>
    </div>
    <div id ="body">
        <div id = "body-left">
        <ul class="body-left-list">
        <ul>
        <li class="body-left-list-top">全部教程</li>
        </ul>
        <ul id="body-left-list-text">
        <li class="body-left-list-text-color">HTML/CSS</li>
        <li>JavaScript</li>
        <li class="body-left-list-text-color">服务端</li>
        <li >数据库</li>
        <li class="body-left-list-text-color">数据分析</li>
        <li>移动端</li>
        <li class="body-left-list-text-color">XML教程</li>
        <li>ASP.NET</li>
        <li class="body-left-list-text-color">Web Service</li>
        <li>开发工具</li>
        <li class="body-left-list-text-color">网站建设</li>
        </ul>
        </ul>
        </div>
        <div id = "body-right">
            <div id = "body-right-top">
            <li class="body-right-top-image">HTML/CSS</li>
            </div>
            <div id = "body-right-body">
                <div id = "body-right-body-shang">
                    <div>【学习HTML】
                    <br>
                    <br>
                    <img class="codeicon codeicon-36" src="data:image/png;base64,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" width="36" height="36">
                    <strong>HTML，即超文本标记语言（Hyper Text Markup Language）</strong>
                    </div>
                    <div>【学习HTML5】
                    <br><br>
                    <img class="codeicon codeicon-36" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAA9dJREFUWIXFl09sVFUUh79738y8mY7WN1RQakDCVNpp1TQtiE2LQTYNxCYQF0QXbkQWshEiLly4wMTEYMLGGI11YYxxg5ooihsXplSkkLak1JamkLjQCq3tzOh05s303evidTotTOe94iC/1cvc3znnm3PufX8Ei0ofTuxXSh0VgnaQUe6ClMIW6IsaTsU+Gf8KQAAkDzW+K4R8424UXU1a6/es3vHjIn04sV9rvv4/ixclBAekUurovSgOoLQ6Jt2Z3ysCuT3gZ8MJ6yECHc/jjP6EqG8mGG9BhEIUro9h1D2Mff4M5s5u8lcvE9iSwD7zAdLwri8kEekHVERrCXe/hHnwLcTW7WRHBjESXWSGhwm0dRN97UPMvYfQdVsJPPEs2TkH5fjJDL4AAFR6jtzQOQCyg+dRuXnyV4cByHz7GdlzZwEw6jcTe/MjbNb5ghCpVxLa0xUMkzc3UbjxJ7LWwrnxO4Et2yhMjhJqeJz89TECGx5BOwsY6zcCUJi8glA2kZhRcRyeAIGmpzEeawcNhaxGK+9/VZR9ZYDC2IWKEAGvJPLRZsyeIwCY/msDoHrfwR65QHbOWRXCcw/o9F9rLFuSk3Rj1QKrbkzPDiwHsEcGUMnpin65bgNmyw63cKoUW4S4tRPeAH+XkmS+/5xs/w8V/ZFnnisBJGdWrJWD8ARQyzogrQcBCD+1h+CmeFl/qLF16bo4gkoQ/kagNQiBYdW5AG27iO570YPcQaWT5ZeWQXgCoBz0fAoRtZCLAPN93+FM/1HWHunaSzDegpOao9KZLUJ4A+B2QUQtjAdcgPzoJfKjl8p6Q83tBOMtt81/NQhfACo9g9wYJ9jYSuzYybKef778mMJvE8jYejfGBwD4BNDp2aXrzNkvCG5uwDry9gpP5ptPAZb2iZOaxY/8ASweRRmJkh8bxJmeQufmEeEadz2bwZm96XoWx1TlDrjJRDiCCNfgzEwx9cIOQs1toCE/Noh2FpD31SKCIaD8EbxjgOX3AuvVE+QGfsS+/DP2yAAA8n6LcGsnkZ17SjHV7UAJoGZ3DzW7e0A55CdHQQhC8WZufdJUFUAlb97+ozQIbXtyFWKNM1v5mVGUvxcSIC/rMJo6Cbd1YbZ2ImtjKyFTs+SG+rGH+sgN9fvugG8AgFxaUZjXICShhhbMtl2gFLmhPgrXfnVv2WuUmHs5kZPS/7vGEkSVJAX64loCwrWSYI2oSnEjSFJqOLXWwGpBBIK8v/hx2nRSCPH6WhP8l3FIk1/qT090SACrd/y4EBzQqD6tyPpNciedkAGSZkScqD890QHwL8sTnqjY5DriAAAAAElFTkSuQmCC" width="36" height="36">
                    <strong>HTML5 是下一代 HTML 标准</strong>
                    </div>
                    <div>【学习CSS】
                    <br><br>
                    <img class="codeicon codeicon-36" src="data:image/png;base64,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" width="36" height="36">
                    <strong>层叠样式表（Cascading StyleSheet）</strong>
                    </div>
                </div>
                <div id = "body-right-body-zhong">
                    <div>【学习CSS3】
                    <br><br>
                    <img class="codeicon codeicon-36" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAA6ZJREFUWIXFlktsG1UYhb+58dgTj13bpG4TJ6WqQitSUEsQNCIg8ZCQUNmhKpuyqVggsUJiwwIR2ICABbBFiO4QLUJFVUHdQhseAZKWAg5phUjdxE4auzZ+j8d3WLg2E8WPSeOEs5rR/Pec8z/unasAHD45G9QMdVJaTAghImwtEhacLqvlycsnRtPK4ZOzQa3imQIObrHwGkhJ1PCUx4VmqJPbLQ4gBCPuiucNIS0mtlu8YQI54XLac7VH4fOJYQC+ms8wGy/w2uMDALx9Ic7ogJdn7gkA8Nxn15CWIwsDwqlbBej3qbw3leDr+TSxjIFQIJYxiN4sMXezRNjr4vzVjEPx2xach9bw/KE+xu/2sVN3UahIHh7UGQlr7PapZA3J8UN9CMU5n8tpoCktXj4fAyCRrZAumXzwwwoA88kyK3mThYwBgLWBCihjH/3RMrzP62KX7thjUyznTFJFs+X3tuxP7fPzynj/pgy8czHBmeitlt/bzkCyUN2UeI2jdfadDbQpnWMDHTjatsDeu5l4gU9mVhvvFrXRsQ9c/fHVxwbYG3Sv49iwAXv53D0KPy/l25LVodi2YacWtDVQqEhKpkRzCYbv8vD6ExGEAgoK0rL45u8s3y5kGwePVxUc3R9gt64CkDMkRrX9nuy4x1LFKhG/oNdVI18tmHwZvcWZuXQju70BN8fuC/HsgSBeVdjWdp6hjgaSBZOIv5bRuxcTnP0zjWk7ax/o93JkUCdnSE79lsLv6eHYwVBj7eYN2LKYTRTWiANcShS4lCg03g/0aQ0DXalAypbF0f0BlrKVpnHXUiWuLBcJ9fb8Z74bFbBn8eQ+Pyt5k36f2mhLHR/PrHJluUhQc9nWdj7IOv4NkzaSc/MZXjq3wKe/JtfF5cq1uJBmq0C3hrCOOvn0Yp6zc2nG9ugATC3k+D6WAyC4lS0I9dbCr2cM3roQbxq/tgVd3gVPD+9gzw4338VyTF3PMbdaxLLg3rDG2JCPR4Z07t/V23TtnRuwlVEBRsIaI2GNFx7cSbpU63vQ1vc6LJwNYUcDRtUib0h09/p5bSZcxz+lKlUHl0NH153jX/zFkSGdsUGdhyI6gRbC6VKVnxbzTC/mmb7h8MfV7krWDEKpnXY1Qz6kZTG9mOfHG3muJktsiOy2gTiwuXvXHUJKuSQsOP1/iAMIoZwSZbU8KSXRbVeX/G5a2pvi8onRtOEpj0v4EGTz06WbulIugfW+qXge/eXF4cy/C7eVCw87IhIAAAAASUVORK5CYII=" width="36" height="36">
                    <strong>CSS3是CSS技术的升级版本</strong>
                    </div>
                    <div>【学习Bootstrap3】
                    <br><br>
                    <img class="codeicon codeicon-36" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAA3VJREFUWIXtlktsG0UYx3+7a3v9JnUoJQ8U4pI0dR/QQtNEalFDhEC0BfGSQK3EBVXihARCuSBACEEOCIR6Qz2hIsEFCQ7kUhRe5VBUWlJaJW15hDQkTeJsHNu763g9w8EQMLHdxUnlS//Sandn5vvvT9/MfLPKof43JXWUWs+P3wC4AVAVoL2zids7bkXTyg/R/d6q726lbY/3v1auY/DYs8Q3NZFJW3Rtu431TQ0IIbnvwA6srM3A4FNM/DpLb18CieTFN55kdnqB7bviBIM6PX0JsmmL3r4EN8VCTE3MlwXwVCITBUnKyNIW30DjLVE2tMRIXk0xOvI7PfsS2OYSwZDOxq5mZqYMbHOJjkQrU1fm2Xp3O02tMZAQaQjQs28zP3x36f9lQPf7MObSnDxxAZ/uYWxkglNfj7Kxq5nhz8/iOAXSKQukZPTcBEIIJn+b45exP/DpXpIzKdIpi233xDnx2Wkmx+fKAijXsxIGQzqhSIDZ6YWKYypOwX/V//Cd7Nh9BygKAAoKKIAE28ozPTnPV0M/MjOVWo4xsznMbK6qr2uAlrZG7trdWXXMg4/t4q2B41w+f9WtrXuAf+vTj79cftY0jebWm9nZsxnd7+PISwd5/tB76N7Q9QN4/91PVrS98Mph+h/qprl1Pf6IQnYhRdAfpThPlbVmldBILgIghcQybXKOScYykFJUjaspA/HOFhQUFFVB01TaO1rY//heAL754gyWWVx4+UKOtJkkHIihqtraARz9YKBs+9j5cY4OflTSVpAOaWuOkD+GR1tZrtf0MNq0pY1nnjuIopTOu5CCjJUk79grYmrKwOH9L/9j4NVYF4vy6NN93Hv/Tg48sZeR05c4OXy2JEYiydgGQT1askNqyoCRXFy+ZqcNLl4Y553Xj7OUywPQvWdLxVgzt4iVS68OoJw8Xg1VLdr9fa8kO5/BtFOArG0KuvdsBYo7XNVUQuEADzzSi8dbXOnnzly+pkfOMZG2qA3g1bePVOz7+eIVhoe+d+Wz5NjuAYSUCFFaVKQEIQROvsCCkebUtz/x4bEh8nnHra3741iIAhlrnoJ0b+5GrhehqmpEgo14Nb0+AACKohIOrMPnCdQH4C8MQv4G/L5wvQCKCvgihPwNxT+jegAA+DwBwoEYyipsVl0JPZqPaLARVSl/3F5LfwK/oDDJxNRfbAAAAABJRU5ErkJggg==" width="36" height="36"><strong>Bootstrap，来自 Twitter，是目前最受欢迎的前端框架</strong></div>
                    <div>【学习Bootstrap4】
                    <br><br>
                    <img class="codeicon codeicon-36" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAIAAABuYg/PAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REVCRDg5NzlCNjI4MTFFN0EyRkNBODVFRjEyMTIzRjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REVCRDg5N0FCNjI4MTFFN0EyRkNBODVFRjEyMTIzRjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpERUJEODk3N0I2MjgxMUU3QTJGQ0E4NUVGMTIxMjNGNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpERUJEODk3OEI2MjgxMUU3QTJGQ0E4NUVGMTIxMjNGNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjRUavEAAAW3SURBVHjahFdbaBxVGD5n5szsLZvLZmOzSXMxkSC0DxUrvhTsSxCNPvjgi+2TiMUX+6CCUinog9A+SsXbS0HfbKWgRcEapCL1giDVYosSU0OatUk2t73N7sz8/mdu57KbdFhmZ87tv33f//9DX5u9CAQvAALBnT/jvzRIwqnoAeRBaSOI9fpGiB6YeugekpTjFPH3kCRembwoMEyRRJJDkxuJtUokiZVdPSTcwJS5DknRUl0JsT85lXR4COLHRATrHicKvg+e68diuvlHKAHxfqCUGIziXYiSxLOucWo1XTvD8gMZCK4uQUo8K49T/l/bcRo1x04xom4hYcx0SU67fyibzdtO0+UzVD8U9fb5ybrP0Q+U0OJwvl61Kv/tsJQpBYg/sUhQsAfNd5pcUs9Aury46TTaxFAOBREO0AASssL3fTvNShMDuG2tvG2lzWRxaJnQDpemMgxtQkmu66WyDAB255MEk2gKLTNdz1teXB8e68vkrFbLNQyS6MdksLqu39efcZw22mRnQ6O5vyiFrUrDa3syqREI6Zxlp0wfIKYN/zOZ0Wy06rVWKmvhA0VpsfcU6KMb+HqfUCPxFY6BBzA2XWC2ISMbDyrf3lhd2RweHzAM6vM4xkAxKA+hDyFEE8cwOYahwABVkIy4ba/ZaL/67tzUwX1Eve78U7nwwbXvLv1RHMlTqjE1SQjCz0yjM79RAjJ7Aot7B7P4On/h92bDRRNRg5HJgUNH7n/5zJznevOXro9MFhJUJ/vUREPimMXEkVeBZJ9p8kCfe+PrjdVqT38Ko9uoOs+cePTkmaeOv3L02pVbLYcrQcR2AAHgaMSQcprIbzJqQph4HoaTjE4VxmcGR6cHJx8cGpspXv3iBgZmaKQXuYXslJyvZ9FwyojPEwKSigCJOHRtEJNGADOn0UKzlhfW+os5hAbyaWWpgvQSSSxOY6ByhqkZT46WTOQIVJZtItYN0wDqP3x0+oU3ZxE7505d9j3gWAWQ9CadRYCBzs0YkqBgaXujXizl37/yogbIsyc///KTnw8dmeIQ9ndRNPYWU4AQ6UWljBejlnGA/HV9BbGHluEdyfTAgdKJ04+jEhc//qE0UdCKbRwRIldqoT5IeU91AvT0pfH91LFPN9aqud4UMhaZPjkz9Pb5Y8+/Pntncf2n+Vv3jfYl6yVpwpOGjL09SrAf5IfCcA/HXik/tL8Ps9+v3//93unLOD53/JFWq+2HCUihs6I60worqItAoJ9fiD0a/HCMmkZvIbtVqeF4rjedQjSiQiYVdRU0mCS5ERSnab0Cp0hA6vJSBUmd4y4FrJDIrSefO4zjC3+W61VnsJTXFFW1J6yzt5E5Hl0E3JaL77PPPlTfaWIRx44BifXY0wcPHJ7AEvjZh1f7ilmJxnqNjqEPSvqSUpSolDxgAalfeusJDfo3frn90TtfIakxN/KeJepFhNZymJgWw7BXkehJmGVke+zzZ79FEBoYkjgoWPbK/27c/G3J87zRyYLr+Sr2lKwUHUW6dE40KEWRddSkFjN//OamE2e/MJ2gWljWewsZTCuuK0viFZ/rbUg9IHRkECy+2BsNDufttIn6GkhkiAwtDOc7ms7owfd9EBkVJXlYrDNZu7K6jeiVSoqoZyRseJo1p1G1SpMDywvrDi/qZM9uNX6IKxkKRkn7p4oIzlq1aWFDB6C2clLHgtPrd6sYmH3j/Qju6BR6j08NGWKZnF2vNVfLW+jeOJNEBjEJ5dGgZRtr5a10zk5nrcBDndQh6kdN3AnySJD1u9v1apOhpI7WliV8kuesNENibTZbmtYKZ6GDSUHPg4hVvae1BaB+sAT6YrRY1IVB6MdgAxXygMpTJOz6RGeuSQrTFXT51AGiuFa3TP1y0ZsqASKiFFJQ65nUhZGuSsiFcRdYdvsEiZwHTFNNkijXbqndA60eKZJIN0nJaf8LMABlrhVsnvvxsgAAAABJRU5ErkJggg==" width="36" height="36">
                    <strong>Bootstrap4 前端框架</strong>
                    </div>
                </div>
                <div id = "body-right-body-xia">
                    <div>【学习Bootstrap5】
                    <br><br>
                    <img class="codeicon codeicon-36" src="data:image/png;base64,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" width="36" height="36"><strong>Bootstrap5 目前是 Bootstrap 的最新版本</strong></div>
                    <div>【学习Font Awesome】
                    <br><br>
                    <img class="codeicon codeicon-36" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAiCAYAAAA3WXuFAAADLklEQVR42s2Yu0srQRjFN1F8gaiYQhAVREJULAQljaWdgoW1kCqChX+BYCGxiOADwUoLNSqW2uifoFYWVmKCsQi+wEQQxMcc98x1w+46m2Tv9a4uHJLszu7+5sw3830T7fT0VPT19Yny8nLh8/k8l9/vF42NjWJqakrc398LbWhoSFRUVPAiKL2BpzLeW1lZibW1NWjV1dUGrecwZih+hkIhaLTsp4EMlZWV/QH6lMVCs7wcOk2nyjtEdXZ2YnFxEYlEAsPDw6itrfUESgkUCASgzzq8vLzg/f0duVwOIyMj0OPM8QHf5ibvJZB5yOjI9fW1hBFCSM3OzqK5ufkLBH8TlJ3Qpy2qqqosbUp1JN/e55eyBHVHRwdSqRTe3t4kFD8jkUh+2Iw2k5OTODg4wM3NDV5fX6X4/fDwEBMTE2hra1M6Z/7NAGZH2FlHIGpsbAyZTEYCLS8vo6WlRd48ODiI3d1d3N3dWRy0i524vLxEPB5HMBj8AkZXe3t7sbCwgKurK2xsbDgPGdXV1YVkMikfHo1GpSPr6+synpwgnMDoGp3ky+fm5rCzs4OzszMZo2zz9PSE7e3tr0FdCGh6ehrpdNoVjEp01Sw7kKGiDq2srOD29hY83EIUu0fpUKlA/+qQKyBz6ijkkP34TqD8kBWLIQIxOP+3QwWBLi4uZOB5CqRah34N0G8I6vzCaE6uvMBsb3dIBfTdQV1wYSwFSAXodva5Durx8XElENMCzx0fH2Nvbw/7+/s4OTmR53itVKBsNotYLGapDpQxpHKIL2JiZY9YI7HssJcbPDc6OiohHx8fHVMIn8XrzG3M+ObkWzSoWQ8dHR1hZmYG7e3tBYszQ6yNBgYGsLW1hYeHh3w58/z8jPPzc8zPz6O/v99S4Je8DjU0NKgLqhKLL97Pl4fDYbS2tioLPVdBXVdX99flqasS11iH7NPeGDIDqL6+3pttUKECzeyQV0CO2Z4ArPA4mzju3OJ66pB9yCxTUNM83+9rugO/ayvd3d0tPoftx2F6enqgra6uipqamh/7O8YQF9PNzU1o+h5M6Nsc0dTUpFw5vRAn0tLSklzJPwCn+oCzFPMzYgAAAABJRU5ErkJggg==" width="36" height="36">
                    <strong>Font Awesome 是一套绝佳的图标字体库和CSS框架。</strong>
                    </div>
                    <div>【学习Foundation】
                    <br><br>
                    <img class="codeicon codeicon-36" src="data:image/png;base64,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" width="36" height="36">
                    <strong>Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</strong></div>
                </div>
            </div>
        </div>
    </div>

    <div class="copyright"></div>
</body>
</html>

13.加粗标签

<strong>hello</strong>

14.JavaScript-99乘法表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
function myfun()
{
	document.write("<table border='1' width='200' height='100' >");
	for(i=1;i<=9;i++)
	{
		//输出行
		document.write("<tr>");
		for(j=1;j<=i;j++)
		{
			document.write("<td>");
			document.write(j+"*"+i+"="+i*j);
			document.write("</td>");
		}
		document.write("</tr>");
	}
}
</script>
</head>

<body>
<button onClick="myfun();">生成99乘法表</button>
</body>
</html>

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

15.样式设置

在这里插入图片描述
#是给id应用的样式，.是给class应用的样式。

16.标签常见属性

https://zhuanlan.zhihu.com/p/100905262

17.鼠标经过前后的状态


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>1</title>
<style type="text/css">
 a{
	font-size:30px;
	color:#B01E20;
	margin-left:auto;
	margin-right:1px;
	padding-right:1em;}
	
	a:link{
			text-decoration:none;
			}
	
	a:hover{
			text-decoration:underline;
			color:#1CD2D5}
	a:active{
			color:#B50B0E;}
			a:visited{
				color:#B5C41B;}
		.daohang-neirong{
		background-color:#9A8A8A;
		}

</style>
</head>
<!--
https://www.runoob.com/
绝对路径
相对连接
状态变化，超级链接会有不同的默认样式
链接样式：link
访问过后的状态：visited
激活状态：active
鼠标经过状态：hover
-->
<body>
<div class="daohang-neirong">
<ul>
<a href="#"> HTML/CSS</a>
<a href="#"> Borowser</a>
<a href="#"> HTML/CSS</a>
<a href="#"> HTML/CSS</a>
<a href="#"> HTML/CSS</a>
<a href="#"> HTML/CSS</a>
<a href="#"> HTML/CSS</a>
 </ul>
 </div>
 
</body>
</html>

18.点击跳转目录

(1)用绝对路径跳转
<a href="file:///C:/Users/DELL/Documents/Tencent%20Files/2197619259/FileRecv/%E9%82%AE%E7%AE%B1.html"> HTML/CSS</a>
(1)用相对路径跳转

19.点击回到顶部

用命名锚点击返回到顶部id为top的元素
<a href="#top" target="_self">返回顶部</a>

点击回到某一位置参考链接

https://blog.csdn.net/qq_40882724/article/details/81908148
https://blog.csdn.net/WQuestion/article/details/120027134

20.表单元素

https://zhuanlan.zhihu.com/p/260769863

标签

#前端 #html #css