HTML+CSS入门

<strong>加粗</strong>

<em>斜体</em>

<p>段落</p>

<span>设置单独样式</span>

<q>引用别人的话，自加双引号</q>

<blockquote>带缩进引入大段文本</blockquote>

<br/>换行，标准写法

 空格，注意最后的分号

<hr/>横线，标准写法

<address>地址，斜体加单独换行</address>

<code>单行代码</code>

<pre>多行代码</pre>

<ul><li>新闻列表，无序</li></ul>

<ol><li>排行列表，有序</li></ol>

<div>切割块</div>

<divid="">id版块名称</div>

<tr>

<thead>列表头</thead>

<th></td>

<td>列表内容</td>

</tr>

tabletrtd,th{border:1pxsolid#000;}标签框

<tablesummary=""></table>summary表示摘要

<table><caption>列表标题</caption></table>

<ahref="目标网址"title="鼠标滑过文本"target="_blank">链接文本</a>

<ahref="mailto:yy@imooc.com?subject=观了不起的盖茨比有感&body=你好，对此评论有些想法。">发送邮件</a>

<imgsrc="

图片地址

"alt="

下载失败时的替换文本

"title="

提示文本

"></img>

<formmethod="传送方式"action="服务器文件">

<inputtype=""name="

为文本框命名，以备后台程序ASP、PHP使用。

"value="

为文本输入框设置默认值。(一般起到提示作用)

"/>

<textareacols="50"rows="10">在这里输入内容...</textarea>

<inputtype="submit"value="确定"name="submit"/>

<inputtype="reset"value="重置"name="reset"/>

当type="radio"时，控件为单选框　　当type="checkbox"时，控件为复选框

<formaction="save.php"method="post">
<label>性别:</label>
<label>男</label>
<inputtype="radio"value="1"name="gender"/>
<label>女</label>
<inputtype="radio"value="2"name="gender"/>
</form>

<formaction="save.php"method="post">
<label>爱好:</label>
<select>
<optionvalue="看书">看书</option>
<optionvalue="旅游"selected="selected">旅游</option>
<optionvalue="运动">运动</option>
<optionvalue="购物">购物</option>
</select>
</form>

<formaction="save.php"method="post">
<label>爱好:</label>
<selectmultiple="multiple">
<optionvalue="看书">看书</option>
<optionvalue="旅游">旅游</option>
<optionvalue="运动">运动</option>
<optionvalue="购物">购物</option>
</select>
</form>

<labelfor="控件id名称">

<styletype="text/css">
span{
color:red;
}
</style>

<linkhref="base.css"rel="stylesheet"type="text/css"/>

直接使用css中已有的标签如Body，span，blockquote

“选择器”指明了{}中的“样式”的作用对象

p{font-size:12px;line-height:1.6em;}

.类选择器名称{CSS样式代码;}

.setGreen{

color:green;

}

#id选择器，使用<id>

#setGreen{

color:green;

}

　　ID选择器只能在文档中使用一次

[b]　　可以使用类选择器词列表方法为一个元素同时设置多个样式[/b]

[b][b]子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素[/b][/b]

.first>span{

　　border:1px,solid,red;

}

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素

*{color:red;font-size:20px}

更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：　　a:hover{color:red;font-size:20px}鼠标滑过字体会变大。


当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

h1,span{color:red;}

.first,#secondspan{color:green;}将class=”first“的标签设为绿色，将id="second"标签下的span设置为绿色。

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

p{color:red;}/*权值为1*/

pspan{color:green;}/*权值为1+1=2*/

.warning{color:white;}/*权值为10*/

pspan.warning{color:purple;}/*权值为1+1+10=12*/

#footer.notep{color:yellow;}/*权值为100+10+1=111*/

有些特殊的情况需要为某些样式设置具有最高权值,这时候我们可以使用!important来解决.

p{color:red!important;}

pspan{font-weight:bold;}粗体

pa{font-style:italic;}斜体

pa{text-decoration:underline;}下划线

.oldPrice{text-decoration:line-through;}删除线

p{text-indent:2em;}段落排版--缩进,注意：2em的意思就是文字的2倍大小。

p{line-height:2em;}段落排版--行间距（行高）

h1{word-spacing:20px;}段落排版--中文字间距、字母间距,只有有空格的地方才会起作用

h1{　　letter-spacing:20px;}所有字符都要隔开

div{text-align:center;}段落排版--对齐

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

a{display:block;}设置

display:block

就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

当然块状元素也可以通过代码

display:inline

将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使div元素具有内联元素特点。

inline-block元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

代码

display:inline-block

就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签