WEB前端入门：HTML,CSS

HTML

常用标签

h标签

    h1-h6  
			标题标签    块级元素
			默认将文本内容加粗变大

        <h1>淘宝</h1>  
	    <h2>淘宝</h2>
		<h3>淘宝</h3>
		<h4>淘宝</h4>
		<h5>淘宝</h5>
		<h6>淘宝</h6>

P标签

        段落  前后有空隙  
		块级元素（前后换行）
		align  展示位置
			center  居中显示
			left    居左显示 (默认)
			right   居右显示
			justify 两端对齐

 <p align="center">
			  签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规签定义段落。
		      p 元素会自动在其前后创建一些空白。
		  </p>

br标签

换行符

<br><！--换行-->

列表

无序列表ul
有序列表ol

<ul type="circle">
		 <li>吃饭</li>
		 <li>睡觉</li>
		 <li>LOL</li>
	   </ul>
	   
	   <ol type="i">
	   	 <li>吃饭</li>
	   	 <li>睡觉</li>
	   	 <li>LOL</li>
	   </ol>

div

div
是一个块级元素，通常与css配合使用，用于布局。
属性
align
left
right
center

<div align="right" style = "width: 200px ; height: 300px;" >我是一个块级元素</div>
		<div>我是一个块级元素</div>

span

span 行内元素
只显示内容

<span>文本内容1</span>

font

font
规定文本的字体、字体尺寸、字体颜色
属性
size 设置字体大小
color 字体颜色
face 字体（风格）

	<font size="5" color="aqua" face="华文新魏">文本内容</font>

pre

保留写出的字的原格式

其他较为重要的标签

a标签

a标签
			超链接：链接到其他的页面地址
			属性
				href: 设置跳转地址
				target:设置链接打开的方式
					_blank:在新窗口打开页面
					_self:当前页面打开（默认）
			
			锚点实现
				a标签   
					设置name属性
					<a href="" namea="值">跳转到万维网</a>
				其他标签（包含a标签）
					设置id属性
					<div id="值"></div>
				a标签跳转
					<a href="#值">跳转到万维网</a>

最基本的a标签范例

<a href="http://www.baidu.com" target="_blank">链接百度</a><br>

img标签

img
图标标签
src 图片的地址（在线、本地）
width 宽度
height 高度

 <img src="img/lbw.jpg" width="200px" alt="图片加载失败" title="卢本伟" border="1">

表格

		表格
			table:声明一个表格
				属性
					border  边框
					width   宽度
					height  高度
					align
						left
						.....
					
				合并边框线
				style="border-collapse: collapse;"
					
			tr:声明一行
				属性
					align    设置文本在水平方向的展示位置
					valign   设置文本在竖直方向的展示位置
					bgcolor  背景颜色
			td：定义普通单元格
			th：定义表头，字体默认居中加粗

 <table border="1" style="border-collapse: collapse;" align="center" width="500px" height="300px">
			 <tr>
				<th>姓名</th> 
				<th>年龄</th> 
				<th>工作</th> 
			 </tr>
			 <tr align="right" bgcolor="antiquewhite">
				 <td>张三</td>
				 <td>20</td>
				 <td>前端开发</td>
			 </tr>
			 <tr valign="bottom">
				 <td>李四</td>
				 <td>18</td>
				 <td>UI设计</td>
			 </tr>
			
		 </table>

表单

表单
			向服务器传输数据
			属性
				action  发送请求的地址
				method  请求方式
					get:数据展示在地址栏中，不安全，数量量有限，有缓存
					post：理论安全，数据量不限，没有缓存
				target
					_self
					_blank
			input标签   （如果需要将数据传递，必须设置name属性）
				属性
					type

input type属性有以下几种：button，checkbox，file，hidden，image，password，radio，reset，submit，text

范例代码

<form method="get" action="http://www.baidu.com" target="_self">
			<!-- 输入框 -->
			姓名：<input type="text" name="uname"/><br>
			<!-- 密码框 -->
			密码：<input type="password" name="upassword"/><br>
			<!-- 单选框    需要将一组单选设置一样的name属性 -->
			性别：<input type="radio" name="xb" value="0"/>男  <input type="radio" name="xb" value="1" />女 <br>
			婚否：<input type="radio" name="isMarry" value="0"/>已婚  <input type="radio" name="isMarry" value="1" />未婚 <br>
			<!-- 爱好 -->
			爱好：<input type="checkbox" name="hobby" value="sing"/>唱
			<input type="checkbox" name="hobby" value="dance"/>跳
			<input type="checkbox" name="hobby" value="basketball"/>篮球
			<br>
			<!-- 文件域 -->
			上传头像：<input type="file" name="head"/><br>
			<!-- 隐藏域 -->
			<input type="hidden" name="hid" value="1234"/><br>
			<!-- 按钮 -->
			<input type="button" value="普通按钮" />
			<!-- 图片按钮 -->
			<input type="image" src="img/lbw.jpg" width="50px" value="图片按钮" />
			<!-- 提交按钮 -->
			<input type="submit" value="提交"  />
		</form>
		

CSS

基本语法

CSS
语法：选择器名 {
属性 : 属性值;
…
}
注意
1. css声明要以分号;结束，声明以**{}**括起来
2. 建议一行书写一个属性
3. 若值为若干单词，则要给值加引号，如 font-family: “agency fb”;

CSS使用方式

三种：1.行内式（与标签耦合度过高）
写在标签的style属性中，多个样式分号隔开

段落PDD

			2.内联样式
				写在head标签中的style标签上
				<style type="text/css">
					p{
						color: blue;
					}
				</style>
				
			3.外部样式
				创建css文件，在head标签上通过link标签引入到当前网页中
				<link rel="stylesheet" type="text/css" href="css/style.css"/>
				href：引入资源文件的路径
				rel：当前文件与引入文件之间的关系  （样式表）
				type：引入文件的类型

CSS样式的选择优先级遵循就近原则

基本选择器

通用选择器 选择所有
* {
color: #0000FF;
}
元素选择器 选择指定标签
p {
font-size: 18px;
}
ID选择器 选择设置过指定id属性值的元素 #
#whit{
color: red;
}
类选择器 选择设置过指定class属性值的元素 .
.wh{
font-family: 华文新魏;
}
分组选择器 当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔
.wh,#whit,p{
color: blueviolet;
}

其他选择器

后代选取器(以空格分隔)，
.food li{
border: 1px solid red; 框的宽度 边框线条类型 边框颜色
}
子元素选择器(以大于号分隔）
/.food2 > li{
border: 1px solid red;
}
相邻兄弟选择器（以加号分隔）
#d + span{
border: 1px solid red;
}
普通兄弟选择器（以波浪线分隔）
#newD ~ div{
border: 1px solid red;
}

常用的属性

背景

				background-color    背景颜色
				background-image    背景图片
				background-repeat   图片重复方式(no-repeat)

文本

	             	color字体颜色	
				text-align   控制文本的对齐方式
					left     居左
					center   居中
					right    居左
					justify  两端对齐
				text-decoration  
					取消超链接的下划线  text-decoration: none;
				text-indext
					em一个相对值，例如页面的文本大小为17px,则2em就为17px*2

盒子模型

当两个div嵌套时，若需要将内div相对外div内移动位置
需要使用绝对距离

position: absolute;
				margin:75px 75px 75px 75px;