关于HTML和CSS

一、HTML的相关内容

1.格式

<html>

　　 <head> <meta charset="utf-8">

　　<title></title>

　　</head>

　　<body>

　　</body>

　</html>

2. 内容

HTML 标题是通过<h1> - <h6> 标签来定义的
HTML 段落是通过标签 <p> 来定义的.
HTML 图像是通过标签 <img> 来定义的，比如：<img src="/images/logo.png" />
HTML 链接是通过标签 <a> 来定义的，比如：<a href="http://www.baidu.com">这是一个链接</a>

3.属性

　　class:为html元素定义一个或多个类名

　　id:定义元素的唯一id

　　style:规定元素的行内样式等

　　注意！！！

class 属性可以多用 class=" " （引号里面可以填入多个class属性）
id 属性只能单独设置 id=" "（只能填写一个，多个无效）

　4.表格

　　表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。

　　<table>：定义表格

　　<caption>：定义表格标题。

　　<th>：定义表格的表头（自带居中和加粗效果）

　　<tr>：定义表格的行。

　　<td>：定义表格的列。

　　<border>设置边框。

　　<cellpadding>：设置内边距，<cellspacing>:设置单元格之间的间距。但用这两个就不能再设宽和高!

　　跨行或跨列的表格单元格

　　<th rowspan="2">电话</th> 这个是跨行

　　<th colspan="2">电话</th>　这个是跨列

　　<th rowspan="2" colspan="2">电话</th> 这个是跨行也跨列

5.表单（表单使用表单标签 <form> 来设置）

a.多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的

b.密码字段通过标签<input type="password"> 来定义:

比如：　<form>
　　　　Password: <input type="password" name="pwd">
　　　　</form>

c.单选按钮
<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框
<input type="checkbox"> 定义了复选框. 。
<form>
<input type="checkbox" name="" value="Bike">I have a bike<br>
<input type="checkbox" name="" value="Car">I have a car
</form>

slected="slected"是默认选中的意思

e.提交按钮

<input type="submit" value="Submit">（必须在form里提交）

二、CSS相关内容

CSS语法规范：选择器{属性名1：属性值1；

　　　　　　　　　　属性名2：属性值2；

　　　　　　　　　　　　}

1、四种使用方式：

1）内部样式

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

　2）外部样式

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

　3）内联样式

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

　4）外部导入样式

2、选择器

ID选择器用#表示

class用'.’表示

标签选择器：直接写标签名字

子代选择器：>

后代选择器：空格表示

3.行内元素不能设宽和高，如果要设，需要变成块级元素：display:block;

4.常见的一些属性

line-height:行间距

text-align:文字对齐方式

text-decoration:去掉下划线

font-family:字体属性

font-weight:字体加粗

font-size：字体大小

background-image:背景图片

background-reapeat：no-reapeat;背景图不平铺

border-radius:变圆角

background-position:背景图位置

list-style:ul li去掉小黑点

cursor:pointer;鼠标变小手

5.定位(口诀：子决父相)

relative 定位相对定位元素的定位是相对其正常位置。

absolute绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

fixed 定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：

6.伪类

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */