小小白要学的基础HTML指南

1.HTML简介

我的第一个标题

我的第一个段落。

2.HTML 标题 HTML 标题（Heading）是通过

-

标签来定义的。

这是一个标题

这是一个标题

这是一个标题

3.HTML 段落
HTML 段落是通过标签

来定义的。

这是一个段落。

这是另外一个段落。

4.HTML 链接
HTML 链接是通过标签 来定义的。

5.HTML 图像

6.表单的提交方式
action提交的地址
method提交的方式
post提交方式
get

账号：
密码:

<! 解决数字换行问题
<!1111111111111111111111111111111111111111111111>

7. 取消a标签默认下划线text-decoration: none
text-decoration: none,underline,定义文本下的一条线
overline,定义文本上的一条线
line-through;定义穿过文本的一条线
111111
8.文本转换
text-transform:uppercase;转为大写
text-transform:lowercase;转为小写

Hellow Word Lady

9.text-indent首行缩进 -->

Hellow Word Lady

10.字体样式
font-style字体倾斜
font-size字体大小
font-family字体样式宋体，微软雅黑
font-weigh字体的粗细 bold或者数字

啦啦啦啦

em字体大小由浏览器默认大小决定
em==>px em*浏览器字体大小=px
%单位，字体大小由浏览器默认的百分之多少计算
11. 列表
list-style-type:“none”;

• 
  
• 第一
• 
  
• 第二
• 
  
• 第三
• 
  

12. 有序列表

1. 
   
2. 第一
3. 
   
4. 第二
5. 
   
6. 第三
7. 
   

自定义

• 第一
• 
  
• 第二
• 
  
• 第三
• 
  

• 
  
• 第一
• 
  
• 第二
• 
  
• 第三
• 
  

• 
  
• 第一
• 
  
• 第二
• 
  
• 第三
• 
  

• 
  
• 第一
• 
  
• 第二
• 
  
• 第三
• 
  

13. table图表
cellspacing单元格之间的距离
cellpadding边框和内容的距离
行
表格的头部列
列的内容
必考点： colspan合并列
rowspan合并行

14. 标准盒子模型
	必考点：IE盒子模型|怪异盒子模型
	box-sizing:content-box;
	<div style="width: 100px;height: 100px;border:1px solid red;padding: 10px;">
		啦啦啦啦
	</div>
	边框
	boder-top-style :样式
	solid实线
	dashed虚线
	dotted点线
	double双实线
	 边框宽度：border-width
	 boder-上下左右-width
	边框颜色：border-color
	单独一条边：border-top 
		<div style="width: 100px;height: 100px;
		border:5px solid red ;
		border-top-style: dashed;">
		</div>
15. 轮廓 
	outline: 2px solid #000" 
	<div style="width: 100px;height: 100px;
	border: 1px solid red;
	outline: 2px solid #000">
	</div> 
	16. margin-top
		margin-left
		margin-right
		margin-bottom
17.最大值，最小值
<div style="width: 100px;height: 100px;
	border: 1px solid red;margin: 10px 20px 30px;">
	</div> 
	分组 
	<div class="box1 boss"></div>
	<div class="box2"></div>
	<div class="box3 boss"></div> 
	 <p style="width: 200px;height: 50px;
	background-color: red;
	">这一段的最大高度设置为50 px。
	这一段的最大高度设置为50 px。
	这一段的最大高度设置为50 px。</p> 
	18.隐藏方式
	 display:none 隐藏，不占位置
	Visibility: hidden;隐藏，占位置
	opacity: 0;透明度，隐藏，占位置
	color: transparent;颜色为无色
	-khtml-苹果浏览器
	-webkit-opacity兼容谷歌浏览器
	-o-opacity兼容Opera浏览器
	-moz-opacity兼容火狐浏览器
	-ms-兼容IE，普通样式属性
	{
		兼容IE浏览器，50指的是百分之50%
		opacity:0.5;
		filter:alpha(opacity=50); 
	}

姓名	年龄	性别	学号
余某某	20	女	28
徐某某	19	女	26

123123123

19.定位 static默认值 relative相对定位,相对浏览器定位，不脱离文档流 fixed固定定位 absolute绝对定位，脱离文档流，寻找父级是否有相对定位， 如果有根据父级定位，如果没有找到会忘父级的父级寻找， 直到浏览器，才会根据浏览器定位 sticky粘性定位

11111

↑

20. overflow overflow: hidden;溢出隐藏 visible默认值 scroll内容超过固定区域会出现滚动条 auto内容超出固定区域出现滚动条否则不出现 overflow-x: hidden;隐藏横向滚动条 overflow-y: hidden;隐藏纵向滚动条

	<div style="width: 50px;height: 50px;
	background-color: #00FFFF;
	overflow-y: hidden;">
		aaaaaaaaaaaaaaaaaaaaaaa
	</div> 
	21. 浮动 ,脱离文档流
	<div class="clearfix">
		<div style="width: 50px;height: 50px;
		background-color: #00FFFF;float: left;"></div>
		<div style="width: 50px;height: 50px;
		background-color: blue;float: right;"></div>
	</div>
	<p style="width: 500px;height: 500px;
	background-color: orange;">hsdkjsadjkashdkjsa</p>
	 21.居中方式
	 水平居中
	垂直居中 
	<div style="width: 100px;height: 100px;
		background-color: #00FFFF;margin: 0 auto;"></div> 
	<div style="width: 100px;height: 100px;
		background-color: #00FFFF;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);"></div> 
	 margin: -50px 0 0 -50px; 
		 不推荐 
		<div style="width: 100px;height: 100px;
			background-color: #00FFFF;
			float: left;
			margin: 40% 0 0 45%;">
		</div> 
	22. 后代选择器(以空格     分隔)
	所有子元素选择器(以大于 > 号分隔）
	相邻兄弟选择器（以加号 + 分隔）
	所有普通兄弟选择器（以波浪号 ～ 分隔）	 
	 <div class="bor1">
		1
		<p class="bor2">2</p>
		<p class="bor3">3</p>
		<p class="bor4">4</p>
	</div>
	<div class="bor5">
		5
		<p>55</p>
		<p>555</p>
		<p>55</p>
	</div>
	<p class="bor6">6</p>