HTML+CSS2

HTML工作原理：HTML是部署在服务器上的文本文件，根据HTTP协议浏览器发出请求给服务器，服务器做出响应给浏览器返回一个HTML，浏览器解释执行HTML，从而显示内容

什么是HTML？

HTML是超文本标记语言（Hyper Text Markup Language）,一种纯文本类型的语言，用来设计网页的标记语言，用该语言编写的文件以.html或者.htm为后缀，由浏览器解释执行，在HTML的页面上可以嵌套脚本语言编写程序段，如JavaScript

HTML图像：

使用<img>元素可以将图片添加到页面

语法：<img src=“url” >

常用属性：width,height

src指的是"source",原属性的值是图像的URL地址，但是地址值分为绝对路径和相对路径

绝对路径：文件从最高级目录下开始的完整路径，无论当前路径是什么，使用绝对路径后总能找到要连接的文件

相对路径：文件的位置是相对于当前的文件位置，包括目录名或指向一个可以从当前目录出发找到的文件

HTML超链接：

<a href =“url”,target="">

href 属性：链接地址 URL target 属性：目标的打开方式

锚点：文档中某行的一个记号，用于链接到文档中的某个位置

链接锚点：在锚点前加 # <a href ="#g1">内容</a>

定义锚点：<a name=“g1”>内容</a>

俩者需对应使用，前后呼应

HTML表格

表格是由<table>标签来定义的，通常用来组织结构化信息，是被称作单元格的矩形框，按照从左到右，从上到下的顺序排列在一起而形成的，表格的数据保存在单元格里

创建表格：<table></table>

创建行：<tr></tr>

创建列：<td></td>

表格常用的属性：

border​ 边框 

width/height​ 宽/高

align​ 对齐方式

padding​ 边框与文字之间的距离，内边距

cellspacing​：单元格之间的距离

跨行属性：rowspan 合并行 colspan 合并列

行分组：表格看分为3个部分，分别为：表头，表主题，表尾

<table>

 <!--表头-->

<thead>

    <tr>

        <th></th>

        </tr>

    </thead>

    <!--表主体-->

    <tbody>

    <tr>

        <td></td>

        </tr>

    </tbody>

    <!--表尾-->

    <tfoot>

  <tr>

        <td></td>

      </tr>

</tfoot></table>

HTML表单：

表单是用于显示收集信息并提交信息到服务器，表单是一个包含表单元素的区域

俩要素：form元素，表单控件

表单是从浏览器向服务器传输数据的手段

表单元素：

定义表单使用成对的<form>标记，表示要将此元素中所涵盖的控件中的数据传入到服务器

主要属性：

​action​：表单提交URL；

method​：数据提交方式；

enctype​：表单数据进行编码的方式

表单控件：由许多不同类型的控件，其是一种HTML元素，是信息输入项，包含

input元素（具有不同的外观）:文本框，密码框，单选框，按钮…

其他元素：标签，文本域，下拉选

input元素

文本框 <input type = “text”/>

密码框：<input type = “password”/>

主要属性：value：由访问者自由输入任何文本

Maxlength​：限制输入的字符数

Readonly​：设置文本控件的只读

单选框: <input type =“radio”/>

复选框：<input type =“checkbox”/>

属性：value：文本，当提交form时，选中单选按钮，则发送服务器

Name：实现分组，一组单选框或者复选框名称必须相同

Check：设置选中

提交按钮：<input type = "submit " value=“提交”/>传送表单数据给服务器

重置按钮：<input type = “reset” value=“重置”/>清空内容，并 设为最初默认状态

普通按钮：<input type = “button” value=""/>执行客户端脚本

隐藏域：<input type = “hidden”/>表单中包含但不希望用户所见

文件选择框：<input type = “file”/>选择上传的文件

其他元素：

标签：表单中的文本用于给控件设置显示名称

语法：<label for=“控件ID”>文本</label>

属性：for：设置该文本所关联的控件ID，关联后点击标签等同于点击控件

文本域：多行文本框

语法：<textrea></textrea>

属性：cols:指定文本域的列数；rows：指定文本域的行数； readonly：该文本域只读

下拉选语法：

<select>

<option></option>

</select>

什么是CSS?

CSS是层叠样式表（Cascading Style Sheets），样式定义了如何显示HTML元素，样式通常储存在样式表中，CSS是HTML的化妆师

Box框模型：

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置

Margin - 清除边框区域。Margin没有背景颜色，它是完全透明

Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响 `

Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响

Content - 盒子的内容，显示文本和图像

背景色：

background-color：用于为元素设置背景色，可接受任何合法的颜色值

背景图片：

background-image​：设置背景图片，默认值为none，表示背景上没有放置任何图像，如需设置，则需要起始字符附带图像的url地址

默认情况下，背景图片是在水平和垂直方向上重复出现的

background-repeate​：可控制背景图片的平铺效果

repeate​：在水平和垂直方向重复

repeate-x​：在水平方向重复

repeate-y​：在垂直方向重复

no repeate​：仅显示一次

background-position​：用于改变背景图片在元素中的位置

CSS文本格式化

控制字体：

font-family：value 1，value 2 指定字体

font-size​：value 字体大小

font-weight​：normal/bold 字体加粗

color​：value 文本颜色

Text-align​：left/right/center 文本排列

Line-height​：value 行高

Text-indent​：value 首行文本缩进

表格样式：

常用属性：表格同样使用box模型（边框 ，内边距，宽，高）以及文本格式化属性

表格特有属性：如果设置了单元格边框，相邻单元格边框 会单独显示，类似于双线边框

border-collapse：合并相邻的边框，设置是否将表格的边框合并为一个边框

显示方式：元素都有自己默认的选择方式

块元素：从上到下显示，可以设置宽高 如：<P>,<div>,<h1>

行内元素：从左到右显示，不能设置宽高，如：<span>,<a>

行内块元素：从左到右显示，可以设置宽高，<input>,<img>

除了默认显示效果外，可以用display属性，修改元素的显示方式

具体修改方式:

display：none 表示不显示该元素，释放其占用的空间

display：block 表示将元素的显示方式设置为块

display：inline 表示将元素的显示方式设置为行内元素

display：inline-block：表示将元素的显示方式设置为行内块元素

定位：

定义元素框对于其正常位置应该出现的位置或相对于父元素另一个元素相对于浏览器窗口本身的位置

流定位：页面中的块级元素从上到下依次排列，每一个块级元素都会出现在新的一行，元素框之间的垂直距离，由框的垂直外边距计算得出

内联元素：在一行中从左到右，水平排列不需要换行，使用的是水平内边距，边框和外边距调整他们的间距

浮动定位：将元素排除在普通流之外，将浮动元素放置在包含框的左边或者右边，浮动元素依旧包含于框之外，浮动框可以向左或者向右移动，直到外边缘碰到包含框或者另一个浮动框位为止，如需要设置框浮动在包含框的左边或者右边，可以通过float属性实现具体方向的移动

任何元素都是可以移动的 float：none/left/right

clear清除浮动所带来的影响：clear：none/left/right/both

相对定位：元素原本所占的空间不释放，元素框会相对于原来的位置偏移某个距离，设置垂直或者水平，让元素相对于它的起点进行移动

首先需要设置position属性，其值为relative，然后使用left/right/top/bottom设置具体的偏移量

绝对定位：将元素的内容从当前定位中清除，释放空间，并使用偏移量来固定元素的位置，相对于最近的祖先元素，若偏移元素没有已定位的元素，那么它的位置就是相对于body元素的位置

首先设置position属性，其值为absolute，然后使用left/right/top/bottom设置具体的偏移量

固定定位：将元素的内容固定在页面的某个位置，元素从普通流中完全移出，不占用页面空间，当用户将页面向下滚动时，元素看不随着移动

首先设置position属性，其值为fixed，然后使用left/right/bottom/top设置具体的偏移量

堆叠顺序：一旦修改元素的定位方式，元素可能发生堆叠，可以使用z-index来控制有元素在框中出现的堆叠数值

Z-index：value 数值越大，级别越高，越显示在前

列表样式：

List-style-type：用于控制列表中列表项标志的一个样式

无序列表：出现在各列旁边的圆点

无需列表的取值：none：无标记；disc：实心圆（默认）；circle（空心圆）；square 实心方块

有序列表：可能出现数字，字母或者其他用来排列计数

有序列表的取值：none：无标记；decimal：数字；

lower-roman：小写罗马数字 upper-roman：大写罗马数字

list-style-image：使用图像替换列表项，取值为url