一、走进HTML

html基本标签;

1标题标签：

...

 title /'taɪt(ə)l/ n. 冠军；标题

2段落和换行标签：

...

3水平线标签：

4斜体：...

5字体加粗：...

7超链接：a

8锚链接：创建跳转标记乙位置 创建跳转链接甲位置

9功能性链接：

10注释和特殊符号

注释: 空格   大于号(>)：> 小于号(<)：" 版权符号 @©

W3C标准

规范：标签名称、属性名称必须小写

标签必须严格嵌套，并且必须闭合，即使空元素标签也必须闭合

属性值必须用引号引起来

[if !supportLists]二、[endif]网页穿上美丽的衣服

Css：层叠样式表

CSS的优势

内容与表现分离

网页的表现统一，容易修改

丰富的样式，使页面布局更加灵活

减少网页的代码量，增加网页的浏览速度，节省网络带宽

运用独立于页面的CSS，有利于网页被搜索引擎收录

网页中引用CSS样式

内联样式：<p style=””></p>

内部样式表：<style></style>

外部样式表:创建一个外部的css文件:*.css,把样式写在这个文件中；谁想用这个样式，谁就引入这个css文件即可

<link rel=“stylesheet” href=”样式文件的路径”/>

<style>

      @import”css/types.css”;

链接式与导入式区别：<link/>标签属于XHTML，@import是属于CSS2.1；使用链接的CSS文件先加载到网页当中，再进行编译显示 ；使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中 ；@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的

使用css语法

声明：...

<span>...</span>:能让某几个文字或者某个词语凸显出来

center定义居中的内容。

font和 basefont定义 HTML 字体。

标签选择器：p{font-size:16px;color:red;}

类选择器：.second{font-size:20px;color:#096;}

ID选择器：#third{font-size:24px;color:black;}

CSS样式优先级；行内样式>内部样式表>外部样式表

ID选择器>类选择器>标签选择器

Css常用的字体

color 颜色

font-size 字体大小如：font-size:12px;

font-family 字体类型如：font-family:"隶书";

font-style 字体样式如：font-style:italic;

font-weight 加粗如：font-weight:bold ;

Css常用的文本

Text-align 水平居中方式如：text-align：left（左）  text-align：center（居中）  text-align：right（右）

text-indent 首行缩进如：text-indent：20px

line-height 行高如：line-height:25px;

text-decoration 文本装饰如：text-decoration:underline（下划线）;

a:hover 悬停；伪类名如：a:hover {color:#B46210;text-decoration:underline;}

Width宽  height高 如：#header {width:200px;height:280px;}……

常见的伪类名鼠标样式

div标签（网页布局 排版网页内容）如<div>....</div> <div id="header">网页内容…</div>

Css的背景

背景属性

背景颜色：background-color:#B70447;

背景图像

图像路径：background-image:url(img/buy.png);

重复方式： background-repeat:no-repeat;

背景定位： background-position:10px 15px;

背景属性简写

background:url(img/buy.png) no-repeat #f9f9f9 10px 15px;

三、列表、表格与表单

1列表

  无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于

标签。每个列表项始于
• 。

无序列表：

              <li>桔子</li>

              <li>香蕉</li>

<li>苹果</li>

</ul>

有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于

标签。每个列表项始于
1. 标签。

有序列表：

              <li>桔子</li>

              <li>香蕉</li>

<li>苹果</li>

</ol>

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。

自定义列表：

              <dt>所属学院</dt>

              <dd>计算机应用</dd>

              <dt>所属专业</dt>

              <dd>计算机软件工程</dd>

</dl>

列表样式

list-style-type

list-style-image

list-style-position

list-style

2表格

表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

如：

    <tr>

         <td>单元格1</td>

         <td>单元格2</td>

        …… </tr>……</table>

表格的跨行和跨列：

  <tr>

    <td colspan="3">学员成线</td> </tr>

  <tr> <td rowspan="2">白杨</td>

    <td>语文</td>

<td>98</td></tr>……</table>

3表单

HTML 表单用于搜集不同类型的用户输入。

表单的基本结构：

 名字：  

 密码：  

      <input type="reset" name="Reset" value="重填">

   </p>

</form>

表单元素：tybe元素类型：text、password、checkbox、radio、submit、reset、file、image 和 button，默认为 text<input type="text"> 定义用于文本输入的单行输入字段：

Size：元素的宽度，当type 为 text 或 password时

Maxlength：type为text 或 password 时，输入的最大字符数

Checked：type为radio或checkbox时，指定按钮是否是被选中

隐藏域：type="hidden" 只读：readonly="readonly" 禁用：

disabled="disabled"

提交按钮：<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

单选按钮输入： 定义单选按钮。

列表框： ……

多行文本域：

rows="y">文本内容 </textarea>

4css高级选择器

并集选择器：多个选择器通过逗号连接而成，同时声明多个风格相同样式

交集选择器：由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格第一个必须是标签选择器，第二个必须是类选择器或者ID选择器

后代选择器:外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔 标签嵌套时，内层的标签成为外层标签的后代

子元素选择器:通过>连接在一起而成，仅作用于子元素

属性选择器：选取带有指定属性的元素，或选取带有指定属性和值的元素

四盒子模型

1边框、外边距、内边距、行内元素和块级元素

外框

Heigh:高 margin：外边距（一个值四个方向、一值上下、两值左右四个值、上下左右坚持左上原则）

Border：边框 padding：内边框 width：宽

边框样式；border-top-style：上边框样式

border-right-style：右边框样式

order-bottom-style:下边框样式

border-left-style：左边框样式

Border-style：设置四个边框样式

none：无边框 solid：实线边框 dashed：虚线边框 dotted：点状边框 double：双线边框 hidden：与none相同，应用于表解决边框冲突

边框颜色：border-top-color：上边框颜色

border-right-color：右边框颜色

border-bottom-color：下边框颜色

border-left-color：左边框颜色

border-color：设置边框颜色  加颜色十六进制

边框粗细：border-top-width：上边框粗细

border-right-width：右边框粗细

border-bottom-wid：下边框粗细 border-left-width：左边框粗细

border-width：边框粗细

关键字：thin（细小）、medium（中间）、thick（粗大）加像素值px

边框简写：（border-bottom: 9px #F00 dashed ;border: 9px #F00 solid;同时设置边框的颜色、粗细和样式）

*transport：透明色  外边距塌陷浏览器bug 给父容器加overflow：hidden

内边距

padding-left：左内边距

padding-right：右内边距

padding-top：上内边距

padding-bottom：下内边距

Padding：内边距

Content-box 盒子的实际高度=元素内容（正常模式   怪异模式：ie浏览器自成）

盒子的实际高度和宽度仅应用于元素内容不包括内边距和边框

Border-box 盒子的实际高度=元素内容+边框+内边距

盒子的实际高度和宽度包括元素内容和内边距

盒子实际高度=上下外边距+上下边框+上下内边距+内容宽度

盒子实际宽度=左右外边距+左右边框+左右内边距+内容宽度

外边距

margin-top：上外边距

margin-right：右外边距

margin-bottom：下外边距

margin-left：左外边距

margin：外边距

行内元素和块级元素区别

块级元素会独占一行，其宽度自动填满其父元素宽度有（p、div、h1-h6、li）

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化,设置宽高无效有（span、em）

行内块元素不会独占一行、可以设置宽高有（img）

块级元素可以设置width, height属性，行内元素设置width,  height无效，块级元素可以设置margin 和 padding

Display属性：控制元素的显示和隐藏，块级元素与行内元素的转变

Display-none；设置元素不会被显示

Display-black；元素会被显示为块级元素

Display-inline；元素会被显示为行内元素

Display-inline-block；元素会被显示为行内块元素