WEB-HTML&CSS

1HTML

1.1概述

• HTML 指的是超文本标记语言 (Hyper Text Markup Language)
• HTML 不是一种编程语言，而是一种_标记语言_ (markup language)
• 标记语言是一套_标记标签_ (markup tag)
• HTML 使用_标记标签_来描述网页

1.2标签

1.2.1图片：

width属性:用于指定图片的宽度, 单位可以是px(像素), 或者 %(百分比)
height属性:用于指定图片的高度, 单位可以是px(像素), 或者 %(百分比)

<img src="/i/eg_w3school.gif" width="300" height="20%" />

1.2.2超链接：

target属性: 用于指定以何种方式打开超链接, 常用取值为:
_self: 默认值, 在当前窗口中打开超链接
_blank: 在新的窗口中打开超链接

<a href="http://www.baidu.com"  target="_blank">百度一下, 你就不知道!</a>

1.2.3表格

colspan="2" 横向合并
rowspan="2" 竖着合并

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>内容</td>
        <td>内容</td>
        <td>内容</td>
    </tr>
</table>

1.2.4表单：

表单用于向服务器提交、发送数据。
<form> 元素：定义 HTML 表单。

<form>
 .
form elements
 .
</form>

表单项标签：
input表单元素：
功能：设置文本框，密码框，单选，多选，下拉框，文件提交（可以输入），颜色选择，日期选择。
功能取决于<input type="" />type选择的类型

单选框：
<input type="radio" name="name" id="" value="0" />
<input type="radio" name="name" id="" value="1" />
<input type="radio" name="name" id="" value="2" />
input内的name相同的之间进行单选

多选框：
<div>
    <input type="checkbox" name="aaa" id="" value="0" />
    <input type="checkbox" name="aaa" id="" value="1" />
    <input type="checkbox" name="aaa" id="" value="2" />
</div>
<div>
    <button id="selectAll">全选</button>
    <button id="unselectAll">取消</button>
</div>

select/option元素：
select标签用于定义一个下拉选框。
option用于定义下拉选框中的选项。

<!-- 下拉选框 -->
<select  name="city"> <!-- 定义一个下拉选框 -->
    <option value="bj">北京</option>
    <option value="sh"  selected="selected">上海</option>
    <option>广州</option>
    <option>深圳</option>
</select>

2CSS

2.1概述

• CSS 指层叠样式表 (_C_ascading _S_tyle _S_heets)
• 样式定义_如何显示_ HTML 元素
• 样式通常存储在_样式表_中
• 把样式添加到 HTML 4.0 中，是为了_解决内容与表现分离的问题_
• _外部样式表_可以极大提高工作效率
• 外部样式表通常存储在 _CSS 文件_中
• 多个样式定义可_层叠_为一

2.2在HTML中引入CSS

方式1：通过style属性引入css

这种是通过标签上的style属性为当前标签设置样式，代码示例：

<!--
1.通过标签上的style属性给div设置样式 
边框:2px solid red
字体大小:26px
背景颜色为:pink
-->
<div style="border: _2px solid red_; font-size: _26px_; background: _pink_; ">
这是一个div...
</div>

由于这种方式代码无法复用（如果多个元素都需要相同的样式，每个标签上都需要设置一次），而且当样式代码特别多时，容易造成页面结构的混乱，不利于后期的扩展和维护。

方式2：通过style标签引入css
在head标签内部提供一个style标签，在style标签内部可以选中元素，对元素进行修饰，代码示例:

<!-- 2.通过style标签给span设置样式如下： 
边框: 2px solid green
字体大小: 30px
字体加粗
-->
<style>
/* ****** CSS样式 ****** */
span{ /* 选中当前html中所有的span元素 */
border: 2px solid green;
font-size: 30px;
font-weight: bolder;
}
</style>

这种方式是将所有的css样式代码集中在一个style标签内部统一管理，初步的实现了html代码和css代码的分离，实现了代码的复用。而且并没有造成页面结构的混乱。

推荐使用这种方式！

方式3：通过link链接引入外部的css文件
在head标签下添加一个link标签，link标签可以引入外部的css文件。代码如下：
在html中引入css文件：

<!-- 引入demo.css文件 -->
<link rel=_"stylesheet"_ href=_"demo.css"_/>
demo.css文件的内容:
@charset "UTF-8";
**p**{
border: 2px solid blue;
color: red;
font-family: "华文琥珀";
text-indent: 50px;
}

这种方式是将所有的css代码集中在一个css文件中统一进行管理，真正的实现了html代码和css代码的分离。实现了代码的复用。

推荐使用这种方式！

2.3CSS选择器

所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。

标签名选择器

根据标签(元素)的名称来选择指定名称的标签进行样式的修饰!
格式: 标签名/元素名{ 若干css属性... }

span{ /* 选中当前html中所有的span元素 */
}

class选择器
通过标签上通用的属性class，为标签指定所属的类（组），所有class值相同的元素则为一组。
可以通过class属性值选中这一组的元素，为这一组的元素统一设置样式。
格式：.class值{ 若干css属性... }

.s1{ /* 选中所有class值为s1的元素 */
}

.s2{ /* 选中所有class值为s2的元素 */
}

另外，一个标签/元素可以设置多个class值，表示当前元素同时属于多个分组，例如：
<span class="s1 s2">span111</span>

如果多个class设置的样式出现冲突，因为浏览器是按照从上往下的循序解析html内容，所以后面的样式会覆盖前面的样式。

id选择器
通过标签上通用的属性id，为标签设置一个唯一的标识（id的值在整个html中应该是独一无二的），因此可以通过id值唯一的选中一个元素。

格式: #id值{ 若干css属性... }

#p1{
}

后代选择器
选中父元素内部的指定的后代元素
格式: 选择器 后代元素{ 若干css属性... }

p span{ /* 选中父元素内部的所有span元素 */
}

属性选择器
根据选择器加上元素的属性条件选中元素进行修饰!
格式: 选择器属性条件1..{ 若干css属性... }

input[type='text']{  /* 选中所有的input并且type属性的值为text的元素 */
}

2.4常用属性总结

可在w3c中随时查找。
文本属性
字体属性
背景属性
边框(border)