HTML初学者

木vme

于 2020-11-23 21:23:27 发布

阅读量902

点赞数

文章标签： html

本文链接：https://blog.csdn.net/hkl_2101089569/article/details/109697095

版权

HTML

《第一节课》

博客记录东西的 cscn是比较专业的，面向IT专业技术人员的。

HTML 超文本链接标示语言一门语言前端技术目前用HBuilder编写

域名例如http://www.baidu.com（是一种名称需要用钱买越好记越贵）

IP地址 xxxxxxxx和域名作用相似

制作网页相关 单书名号包裹关键字叫标记，标记分为两类：单标记和双标记（对标记）。re1、charset、src等
在标记里面定义的是标记属性，等号后面的是标记属性值，一个标记中可以有多个标记属性和标记属性值。
以空格间隔，不分先后顺序。

<html>
    <head>
        <link rel="shortcut icon" href="//mat1.gtimg.com/www/icon/favicon2.ico" />
        <meta charset="utf-8" />
        <title>美国大选</title>
    </head>
    <body>
         <img src="img/u=3397559955,3908357158&fm=11&gp=0.jpg"  title="川宝" width="400px"/>
         <a href="http://www.baidu.com" target="blank">百度</a>
         <p>中国万岁！</p>
    </body>
</html>

《第二节课》

Tab 一键补齐

行内元素 高度和宽度包裹内容，不会单独成行。没有居中空间，不能水平居中。（a、img、b、i、del、span）

块级元素 高度包裹内容，但是宽度等同于父标记，单独成行。有空隙，能让文本居中。（p、div、hn、ol、ul）

另外 -body里面不允许直接写文本，不规范（span没效果但要加。没有居中空间，加style也没用。

-有序列表ordered list ol
-无顺序列表unordered list ul（因为无序所以没有start）

-学会了制作table表格。

-学会了form表单 用于向服务器提供数据
           隐藏框
           文本框
           密码框
           文件框
           下拉列表
           文本域
           单选项

行级元素/块级元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML</title>
	</head>
	<body>
		<!--Tab键可以一键补齐。
        body里面不允许直接写文本，不规范（span没效果 但要加。 没有居中空间，加style也没用。）       
               行内元素：高度和宽度包裹内容，不会单独成行。没有居中空间，不能水平居中。
        -->
		<a href="http://www.baidu.com">百度</a>
		<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" >
		<b>郑州</b>
		<i>郑州</i>
		<del>郑州</del>
		<span stlye="text-align:center;" >郑州</span>
		<!--
               块级元素：高度包裹内容，但是宽度等同于父标记，单独成行。
               有空隙，能让文本居中。
        -->
		<p  style="text-align:center;">工业大学</p>
		<div>郑州大学</div>
		<!--
        hn n 1~6
        -->
        <h1>郑州</h1>
        <h6>郑州</h6>
        
        <!--有序列表ordered list ol
        	无顺序列表unordered list ul（因为无序所以没有start）
        -->
        <ol>
        	<li>语文</li>
        	<li>数学</li>
        	<li>英语</li>
        </ol>
        <ol start="1" type="I">
        	<li>语文</li>
        	<li>数学</li>
        	<li>英语</li>
        </ol>
        <ul type="squire">
        	<li>语文</li>
        	<li>数学</li>
        	<li>英语</li>
        </ul>
        <ul type="square">
        	<li>语文</li>
        	<li>数学</li>
        	<li>英语</li>
        </ul>
        
	</body>
</html>

table表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border:1px solid black;
				border-spacing:0px;
				border-collapse:collapse;
			}
			
			td,th{
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>序号</th><th>姓名</th><th>手机号</th><th>家庭地址</th>
			</tr>
			<tr>
				<td>1</td><td>lucy</td><td>110</td><td>郑州派出所</td>
			</tr>
			<tr>
				<td>2</td><td>lily</td><td>120</td><td>郑州医院</td>
			</tr>
			<tr>
			    <td>3</td><td>Mike</td><td>119</td><td>郑州消防</td>
			</tr>
		</table>
	</body>
</html>

form表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
        <form action="">
        	<input type="hidden" />
        	<input type="text" placeholder="请输入用户名"/>
        	<input type="password" placeholder="请输入密码"/>
        	<input type="file"/>
        	<select>
        		<option>--请选择--</option>
        		<option>快乐</option>
        		<option>悲伤</option>
        	</select>
        	<textarea></textarea>
        	
        	
        	<input type="radio" name="feel" id="man"/><label for="man">喜欢</label>
            <input type="radio" name="feel" id="woman"/><label for="woman">不喜欢</label>
        	
        </form>
	</body>
</html>

《第三节课》

form表单里面的复选框 按钮button submit reset

一些快捷键 window+E 打开我的电脑
ctrl+shift+/ 注释框
shift+4 美元或人民币

表格合并行 rowspan 合并列 colspan

表格作业

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格作业</title>
		<style>
			table{
				border:1px solid black;
				border-spacing:0px;
				border-collapse:collapse;
			}
			
			td,th{
				border:1px solid black;
			}
	    </style>
	</head>
	<body>
		<table>
			<tr>
				<td colspan="9" style="text-align: center;">  2013年度图书销售统计</td>
			</tr>
			<tr>
				<td rowspan="2">图书分类</td><td colspan="2">一季度</td><td colspan="2">二季度</td><td colspan="2">三季度</td><td colspan="2">四季度</td>
			<tr>
				<th>销售量</th><th>销售额</th><th>销售量</th><th>销售额</th><th>销售量</th><th>销售额</th><th>销售量</th><th>销售额</th>
			</tr>
			<tr>
				<td>小说</td><td>23521</td><td>￥559,940.00</td><td>18423</td><td>￥32435,232.00</td><td>23479</td><td>￥2324,44.00</td><td>26378</td><td>￥124299,44.00</td>
			</tr>
			<tr>
				<td>文艺</td><td>23521</td><td>￥559,940.00</td><td>18423</td><td>￥32435,232.00</td><td>23479</td><td>￥2324,44.00</td><td>26378</td><td>￥124299,44.00</td>
			</tr>
			<tr>
				<td>励志/成功</td><td>23521</td><td>￥559,940.00</td><td>18423</td><td>￥32435,232.00</td><td>23479</td><td>￥2324,44.00</td><td>26378</td><td>￥124299,44.00</td>
			</tr>
			<tr>
				<td>童书</td><td>23521</td><td>￥559,940.00</td><td>18423</td><td>￥32435,232.00</td><td>23479</td><td>￥2324,44.00</td><td>26378</td><td>￥124299,44.00</td>
			</tr>
			
			
		</table>
	</body>
</html>

背景色部分代码（位于head）内容写在body里

<style>
			body{
				background-color: darkseagreen;
			}
		</style>

frame框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<frameset rows="20%,80%">
		<frame src="top.html"/>
		<frameset cols="20%,*">
			<frame src="js/left.html"/>
			<frame src="js/right.html" name="right"/>
		</frameset>
		
	</frameset>
</html>

iframe 嵌入第三方链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="http://www.baidu.com" target="right">百度</a>
		<iframe src="http://www.baidu.com" ></iframe>
	<iframe width="430" height="25" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=1&icon=1"></iframe>
	</body>
</html>

《第四节课》

CSS    text-align:center;
       { CSS样式属性：CSS样式属性值; }CSS声明
      样式属性值如果有空格，则必须使用单引号或双引号引起来。

登录的手 style里面的cursor: pointer

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			text-align:center;
		{   CSS样式属性：CSS样式属性值;      }CSS声明
	     	样式属性值如果有空格，则必须使用单引号或双引号引起来。
		-->
		<div style="text-align: center;border: 1px dotted darkseagreen;font-family:'楷体';">河南工业大学</div>
	    <form >
		   <input style="text-indent:17px" />
	    </form>
	   
	   <div style="border: 1px solid black;width: 50px;text-align: center;cursor: pointer;">登录</div>
	   
	   
	</body>
</html>

CSS定义位置：
           1、style标记属性
           2、style标记中
           3、CSS文件内，使用link标签引入HTML中 text-decoration（去掉下划线）

选择器 选择器是浏览器过滤标签的一个匹配符

①标签选择器②类选择器（class=“” .）③id选择器（id不可以重复！#）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style >
			/*标签选择器*/
			span{
				background-color: darkseagreen;
			}
			
			/*类选择器*/
			.txet-center{
				text-align: center;
			}
			
			/*id选择器(id不能重复！)*/
			#indent{
				text-indent:20px;
			}
		</style>
	</head>
	<body>
		<!--
			什么是选择器：
			选择器是浏览器过滤标签的一个匹配符	
			ctrl+s 保存
		-->
		<span>郑州</span>
		<span>河南</span>
		
		<div class="txet-center">郑州大学</div>
		<p class="txet-center">河南工业大学</p>
		
		<input id="indent"/>
		<input />
	</body>
</html>

常用CSS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				display: block;
				border: 1px solid black;
			}
			#login{
			      border: 1px solid darkolivegreen;
			      width: 100px;
			      height: 33px;
			      line-height: 33px;
			      text-align: center;
			      font-size: 12px;
			      background-color: darkseagreen;
			      cursor: pointer;
			      
			}
		</style>
	</head>
	<body>
		<p style="letter-spacing: 12px;">郑州大学 河南工业大学</p>
		<span>河南工业大学</span>
		<a href="http://wwww.baidu.com">百度</a>
		
		<div style="display: inline;">郑州</div>
		
		<div id="login">登录</div>
	</body>
</html>

font a、顺序是 font- style、weight、size、family
b、至少要有文字大小（size）和字体（family）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				/*font-style: italic;
				font-weight: bold;
				font-size: 36px;
				font-family: "华文彩云";*/
				/*
				 a、顺序是 font- style、weight、size、family
				 b、至少要有文字大小（size）和字体（family）
		        */
				font:italic bold  36px  "华文彩云";
			}
		</style>
	</head>
	<body>
		<span>郑州高新区</span>
	</body>
</html>

《第五节课》

下划线的效果实现 style="border-bottom: 1px solid black;

另外选择中有line-height，font不要缩写；
如果缩写，则去掉line-height样式，且font：36px/100px 华文彩云；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			p{
				height: 100p; 
				/*line-height:100px;*/
				border: 1px solid black;
				/*font-size:36px;
				 font-familyZ:华文彩云；*/
				font: 36px/100px 华文彩云;
				/*
				 选择中有line-height，font不要缩写；
				 如果缩写，则去掉line-height样式，且font：36px/100px 华文彩云；
				 */
			}
		
		</style>
	</head>
	<body>
		<div style="border-bottom: 1px solid black;font-family: '微软雅黑';">新浪动态</div>
		<p >工业大学</p>
	</body>
</html>

float浮动   代码缩进会有空格；
float浮动消去空格；
           空div 后跟style="clear：left"清除浮动，但不改变之前效果（过时）；
           后面加的style及代码相当于空div效果，但形式更加新颖；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#text1{
				border:1px dotted black ;											
			}
			span{
				border: 1px solid darkolivegreen;
			}
		</style>
	</head>
	<body>
	    <div id="text1">
	    	<!--
	    		代码缩进会有空格；
	    		float浮动 消去空格；
	  	    	空div 后跟style="clear：left"清除浮动，但不改变之前效果（过时）；
	  	    	后面加的style及代码相当于空div效果，但形式更加新颖；
	  	    -->
			<span style="float:left;">河南</span>
			<span style="float:left;">郑州</span>
		    <!--	<div style="clear: left;"></div>    -->		    
		</div>
		<style>
			#text1:after{
				content: "";
				display: block;
				clear: left;
			}
		</style>
	</body>
</html>

list-style: none;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ol{
				/*list-style-type:square ;
				list-style-image: url();
				list-style-position: inside;*/
				/*list-style:square url() inside;*/
				list-style: none;
			}
			
			li{
				border : 1px solid darkolivegreen;
			}
		</style>
	</head>
	<body>
	   <ol>
	     	<li>China</li>
	    	<li>Math</li>
	    	<li>English</li>
	   </ol>
	</body>
</html>

模仿sina网页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ol{
				list-style: none;
			}
			
			li{
				 border-bottom: 1px solid #e1e3e5;
				 line-height: 49px;
				 height: 49px;
			}
				
			a{
				text-decoration: none;
				color: #323232;
				font: 16px "Microsoft Yahei";
				
		    }   
		    #last-li{
		    	border-bottom: none;
		    }
		    #first-a{
		    	color: #4c92fc
		    }
		</style>
	</head>
	<body>
		<ol>
			<li><a href="http://www.baidu.com" id='first-a'>首页</a></li>
			<li><a href="http://www.baidu.com">公司概况</a></li>
			<li><a href="http://www.baidu.com">股票资讯</a></li>
			<li><a href="http://www.baidu.com">新浪动态</a></li>
			<li><a href="http://www.baidu.com">财务信息</a></li>
			<li><a href="http://www.baidu.com">投资者日</a></li>
			<li id="last-li"><a href="http://www.baidu.com">联系我们</a></li>
		</ol>
	</body>
</html>

《第六节课》

附：文档流又称正常流，是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序。

position

1.  static 静止的
           任何标记样式都有的position属性 static
           一种默认值没有定位
           元素出现在正常流中，即没有脱离文档流

2.fixed 固定的
           fixed会使当前标记脱离文档流使下面元素上移
           是相对于浏览器窗口进行定位的，此时元素不会随着滚动调的滑动而滑动
           元素通过 “left”, “top”, “right” 以及 “bottom” 属性进行定位

3.relative 相关的
不会使当前标记脱离文档流相对于自己原来的位置定位

4.absolute 绝对的
会使当前标记脱离文档流相对于最近的且position为非static的父标记定位
如果该标签所在的父标签均没有设置position为非 static，则相对于浏览器窗口进行定位，但是此时元素会随着滚动调的滑动而滑动。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style >			
			.in{
				width: 300px;
				height: 300px;				
			}
		</style>
	</head>
	<body>
		
		<!--static 静止的
			任何标记样式都有的position属性 static
			一种 默认值 没有定位
			元素出现在正常流中，即没有脱离文档流-->
		<!--<div style="border: 1px solid red;width: 300px;height: 300px;">
			<div class="in" style="background-color: green;"></div>
			<div class="in" style="background-color: yellow;"></div>
			<div class="in" style="background-color: blue;"></div>			
		</div>-->
		
		<!--fixed 固定的 
			fixed会使当前标记脱离文档流 使下面元素上移
			是相对于浏览器窗口进行定位的，此时元素不会随着滚动调的滑动而滑动
			元素通过 “left”, “top”, “right” 以及 “bottom” 属性进行定位-->
		<!--<div style="border: 1px solid red;width: 300px;height: 300px;">
			<div class="in" style="background-color: green;"></div>
			<div class="in" style="background-color: yellow;position: fixed;right: 10px;bottom: 10px;"></div>
			<div class="in" style="background-color: blue;"></div>			
		</div>-->
		
		<!--relative 相关的
			不会使当前标记脱离文档流 相对于自己原来的位置定位-->
		<!--<div style="border: 1px solid red;width: 300px;height: 300px;">
			<div class="in" style="background-color: green;"></div>
			<div class="in" style="background-color: yellow;position: relative;bottom: 10px;"></div>
			<div class="in" style="background-color: blue;">						
		</div>	-->	
		
		<!--absolute 绝对的 
			会使当前标记脱离文档流 相对于最近的且position为非static的父标记定位
			如果该标签所在的父标签均没有设置position为非 static，则相对于浏览器窗口进行定位，但是此时元素会随着滚动调的滑动而滑动。
		-->
		<div style="border: 1px solid red;width: 300px;height: 300px;position: relative;">
			<div class="in" style="background-color: green;"></div>
			<div class="in" style="background-color: yellow;position: absolute;bottom: 10px;"></div>
			<div class="in" style="background-color: blue;">						
		</div>		
				
	</body>
</html>

margin 用于调整与其他标记之间的间隔,仅用于块级元素

/*margin: 20px;上右下左相同*/

               /*margin: 20px 10px;*//*上下左右*/

               /*margin: 10px 20px 5px;*//*上左右下*/

               /*margin: 5px 10px 15px 20px;*//*顺时针上右下左*/

padding 用于调整标记内元素距离标记边界的间距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div{
				background-color: greenyellow;
			}	
			span{
				background-color:yellow;
			}		
			i{
				color: white;
				background-color: darkolivegreen;
				display: inline-block;
				/*margin-top:10px ;
				margin-bottom:10px ;
				margin-right:20px ;
				margin-left:20px ;*/
				
				/*margin: 20px;上右下左相同*/
				
				/*margin: 20px 10px;*//*上下 左右*/
				
				/*margin: 10px 20px 5px;*//*上 左右 下*/
				
				/*margin: 5px 10px 15px 20px;*//*顺时针 上 右 下 左*/
				
				padding: 10px 20px 30px 40px;
				
			}
		</style>
	</head>
	<body>
		<!--margin 外标记
			用于调整与其他标记之间的间隔,仅用于块级元素
			行内元素需要加display：inline-block；	-->
		<!--padding 内标记
			用于调整标记内元素距离标记边界的间距-->
		<div>河南省郑州市</div>
		<span>郑州大学</span><i>and</i><span>河南工业大学</span>
		<div>河南省郑州市</div>
		
	</body>
</html>

hover 鼠标浮到后会变色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a{
				color: #333;
				text-decoration: none;/*去掉下划线*/
			}
			a:hover{/*鼠标浮到后会变色*/
				color: #f50;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">点我变色ε≡٩(๑>₃<)۶ </a>
	</body>
</html>

《第七节课》

选择器 ④分组选择器：多个选择器使用逗号间隔的一种新的选择器

⑤通配符选择器（*）:匹配HTML文档中定义的所有标签

一般使用margin：0px； padding: 0px; 表示页面间距为0

⑥后代选择器：父子标签选择器构成的一种选择器（选择某父标签里面的某个子标签用于做选择而不影响其他标签）

模仿一个网页

首先分为三部分：头部（header) 中间（container）尾部（footer）【三个div大框架定义id】

先一个通配符选择器消页面间距，

模仿sina网页