HTML与CSS基础布局：图文并茂的实例解析-优快云博客

本文链接：https://blog.youkuaiyun.com/sman19999/article/details/121462016

<!DOCTYPE html>  声明为html5文档
<html>  


  <head>  
    <title>HTML基础</title>  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
	<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >     <!--css外链样式-->
	<style type="text/css" >   <!--css内联样式，基本所有的元素都可以赋予下面的样式或属性,-->
    #headersman{       <!--定义ID的样式。该元素主要用于布局模块-->
    <!--这部分定义整体的样式-->
    width:500px;
	height:100px;                               <!----该元素画布大小----->
	background-color:#eeeeee;                   <!----背景颜色----->
	padding:5px;                                <!----内边距----->
    float:left;                                 <!----布局排列方式----->
<!--position:absolute;                          ------画布移动，没有特殊需求可不用，而跟随系统布局即可----     
	left:0px;
	top:0px;	
-->	
	<!--这部分定义文本内容样式-->
	font-family:arial;                          <!----字体样式----->
	color:red;                                  <!----字体颜色----->
	font-size:20px;                             <!----字体大小----->
    text-align:center;                          <!----对齐方式----->
	text-orientation:upright                    <!----字体排列----->
	}
	
	
	.classsman1 {
	width：200px；
	height: 400px;
<!--position:absolute;     
	right:200px;
	bottom:200px;
-->		
	background-image: url(c:/windows/test.png);      <!----在元素使用背景图片，----->
    background-image: url(data:image/png;base64,base64编码的png图片数据);  <!----在元素使用背景图片，针对base64代码----->	
	background-repeat: no-repeat;               <!----背景图是否拉伸----->
	background-size: 100% 100%;                 <!----背景图大小，100%表示随元素画布大小----->	
	}-
	
	.classsman2 {
	width：300px；
	height: 400px;
    float:left; 	
	background-color:red;
<!--position:absolute;     
	right:200px;
	bottom:200px;
-->			
	}	

	
	</style>
	
  </head>  
  
  
  
  <body style="background-image: url(c:/windows/test.png);">                 <!----在整体页面的背景图----->
  
  <div id="headersman">                        <!----在DIV空元素(块)中引用ID样式，----->
	<h1>这是<span style="background-color:red;">标题</span></h1>	<!----span空元素对某部分内容定义样式----->
 	<p>
    使用图像作链接：
    <a href="www.test.com/text.html">             <!----<a>表示地址链接----->
    <img src="www.test.com/tupian.png" alt="加载失败提示" title="鼠标悬浮时提示" width="宽" height="高(宽高若仅用一个会自动等比缩放)"/></a>
	                                            <!----插入图片----->
  </p>
  </div> 
	<br>
	<br>
	
	
	<div style="classsman1">                      <!----列表操作----->
	<h2>无序列表</h2>
	<ul type="circle">
    <li>咖啡</li>
    <li>茶</li>
    <li>牛奶</li>
    </ul>
	<br>
	<h2>有序列表</h2>
	<ol>
    <li style="display:inline;margin:5px;">咖啡</li>    <!----display:inline表示同一行，margin表示词间隔----->
    <li style="display:inline;margin:5px;">茶</li>
    <li style="display:inline;margin:5px;">牛奶</li>
    </ol>
	<br>
	<h2>定义列表</h2>
	<dl>
    <dt>标题1</dt>
       <dd>内容1</dd>
    <dt>标题2</dt>
       <dd>内容2</dd>
    </dl>
	<p>列表可以相互嵌套</p>
	</div>	
	<br>
	<br>
	
	
	<div style="classsman2">                    
	<table border="1">                          <!----table表格操作，border定义表格是否有边框----->
	<tr><th>表格例子</th></tr>
	<tr>                                        <!----tr表示行，td表示列----->
	<td>1-1</td>
	<td>1-2</td>
	<td>1-3</td>	
	</tr>
	<tr>
	<td rowspan="2">2-1</td>                     <!----rowspan表示跨列数----->
	<td colspan="2">2-2</td>                     <!----colspan表示跨行数----->
	</tr>
	
	<tr>
	<td>3-2</td>
	<td>3-3</td>	
	</tr>
	</table>
	</div>
	<br>
	<br>
	
	
    <div style="width:400px;height:200px;background-color=#ff33ff">
	<h1>输入操作例子（账号注册）</h1>    <!----input两个重要参数，name定义该操作的ID名称（必须），value用户输入的值(可设置初始值)（多关联输入必须）----->
	<form action="www.baidu.com";>
	<p>账号:<input type="text" name="name123" value="用户提示">
	<p>密码:<input type="password" name="name_psw"></p>	
	<p>出生:<input type="date" name="name_date"></p>
	<p>性别:
	<input type="radio" name="name_sex" value="man">男     <!----多选一互锁时，name定义名称相同，value的值不同，两个必须填写----->
	<input type="radio" name="name_sex" value="women">女
	</p>
	<p>喜好:
	<input type="checkbox" name="name_1" value="球星">詹姆斯  <!----多选无关时，name定义名称不同，value的值不同（可缺省）----->
	<input type="checkbox" name="name_2" value="爱书">看书 
	<input type="checkbox" name="name_3" value="运动">爬山
	<input type="checkbox" name="name_4" value="电影">电影
	</p>
	<br>
	<p>&nbsp;
	<input type="reset" style="background-color:#ff0000;" value="重置">&nbsp;&nbsp;&nbsp;
	<input type="submit" style="color:green;" value="Submit">
	</p>
	</form>	
	</div>	
	<br>
	<br>	
	
	<div>
	<canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">    <!----canvas画图操作----->
     Your browser does not support the canvas element.
    </canvas>

    <script type="text/javascript">
     var bbb=document.getElementById("myCanvas");
     var aaa=bbb.getContext("2d");
     aaa.fillStyle="#FF33FF";
     aaa.beginPath();
     aaa.arc(150,100,40,0,Math.PI*2,true);
     aaa.closePath();
     aaa.fill();
    </script>
	</div>
	
	
	
	<!--框架布局例子，作用是在框架中调用外置html页面。rows表示行，cols表示列-->
	<frameset rows="50%,50%">

    <frame src="/example/html/frame_a.html">

    <frameset cols="25%,75%">
    <frame src="/example/html/frame_b.html">
    <frame src="/example/html/frame_c.html">
    </frameset>

    </frameset>
	
	
	

	
  </body>  
</html>
HTML常用基础知识
