html＋css

标签，短文本引用

注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。

标签，长文本引用的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。

表格

表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下：

摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法：<table summary="表格简介文本">

标题

用以描述表格内容，标题的显示位置：表格上方。

四个可以安全使用的能用在链接上的伪类。

（1）link链接还未被访问的状态。

（2）visited已被访问过的状态。

（3）hover链接被鼠标按着时的状态

（4）active鼠标悬停在标签上的状态。

默认条件时，已链接文本颜色是蓝色的，已访问的链接文本是紫色的。

浏览器有就近原则，所以要想让一个链接各个阶段都正常呈现样式，正确的顺序是link->visited->hover->active

html target属性

一般是在a标签中使用Target属性，可以定义被链接的文档在何处显示。target="_blank"在浏览器新窗口打开文档

target="_parent"这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

target="_self"这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题  标签中的 target 属性一起使用。

target="_top"这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

表单：

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

1.<form>：<form>标签是成对出现的，以<form>开始，以</form>结束。

2.action：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method： 数据传送的方式（get/post）。

文本框、密码框：

<form>

<input type="text/password" name="名称"  value="文本"/>  </form>

1、type：

当type="text"时，输入框为文本输入框;

当type="password"时, 输入框为密码输入框。

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

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

文本域：

<textarea rows="行数" cols="列数"> 文本</textarea>

文本

1、标签是成对出现的，以<textarea>开始，以<textarea>结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4、在标签之间可以输入默认值。

注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。

三种样式的 优先级：

内联式>嵌入式 > 外部式，但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。

选择器：

标签选择器、类选择器、ID选择器、子选择器、包含选择器、通用选择器

类选择器和ID选择器的区别：

相同点：可以应用于任何元素不同点：

1、 ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

2、 可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）

下面的代码是正确的

.stress{    color:red; }

.bigsize{    font-size:25px; }

<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>.

子选择器：

即大于符号(>),用于选择指定标签元素的第一代子元素。

包含选择器：

即加入空格,用于选择指定标签元素下的后辈元素。

与子选择器的区别，子选择器作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

通用选择器：

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

段落排版--缩进：

p{text-indent:2em;}注意：2em的意思就是文字的2倍大小。

段落排版--行间距（行高）：

p{line-height:1.5em;}

css布局模型：

在网页中，元素有三种布局模型：1、流动模型（Flow）2、浮动模型 (Float)3、层模型（Layer）

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

元素居中：

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、行内元素和内联块状元素。

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

常用的行内元素有：

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

常用的内联块状元素有：

<img> <input>

1、行内元素、块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。

2、定宽块状元素：块状元素的宽度width为固定值。

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

width:200px;/*定宽*/

margin:20px auto;/* margin-left与 margin-right 设置为 auto */

注意：元素的“上下 margin” 是可以随意设置的。

[if !supportLists]3、[endif]不定宽块状元素：块状元素的宽度width不固定。

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

[if !supportLists]1）[endif]加入table标签：table其长度根据其内文本长度决定，因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

[if !supportLists]2）[endif]设置display: inline方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置

3）设置position:relative和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的