网页常用html标签与css样式.doc

1、高薪招聘 http:/ 2019-5-16第 1 页常用 HTML 标签与 CSS 样式1、Html 标签部分字体效果 .标题字 (最大) .标题字 (最小) .粗体字 .粗体字(强调) （同上效果略同） 区断标记 水平线 水平线(设定大小 ) 水平线(设定宽度) 水平线 (设定颜色) (换行) 链接格式 外部链接 外部链接(另开新视窗) 外部链接(全视窗链接) 外部链接( 在指定页框链接) 贴图 贴图 设定图片宽度 设定图片高度 设定图片提示文字 设定图片边框 表格语法 .表格位置 ,置左 .表格位置,置中 .背景图片的 URL=就是路径网址 .设定表格边框大小(使用数字) .设定表格的背景

2、颜色 .设定表格边框的颜色 .指定表格的宽度大小(使用数字) . 指定表格的高度大小( 使用数字) tr 元素 语法格式： . 高薪招聘 http:/ 2019-5-16第 2 页align 属性对齐方式可选值如下：left,center,tight,默认为 left bgcolor 指定该行的背景颜色 td 元素 语法格式： . align 属性的可选值有：left,center,right valign 属性的可选值有：top,middle,bottom .属性 1，背景属性 包括：bgcolor,background.bgcolor 背景色 语法格式： .background 背景图案。

3、 语法格式： 2,链接： 包括：link,visited,hover,active link 连接样式（可连接颜色） visited 已访问连接样式（已经点击访问过的样式）hover 触发链接样式（鼠标经过链接样式）active 活动连接样式（正被点击的可连接样式） align 属性 语法：文字 其属性有三种：left 靠左,center 居中,right 靠右 p 为段落标记，可利用以上属性对整个段落进行设置 br为换行标记 列表 1 无序列表又称符号列表 语法格式： type 的属性可选直 disc 实心圆点,clrcle 空心圆点,square 实心方框 文字 文字 2 有序列表 语法格

4、式： 文字 文字 type 的值是编号字符可选的有 1.,a.,A.,i. ,I. start 为起始值例：如果 start 为 3 是那么将从 3 开始，而且必须是数字。 3 定义列表 高薪招聘 http:/ 2019-5-16第 3 页定义列表标记 标示定义条目 标示定义内容 语法格式： 文字 文字内容 连接和图像 语法格式： . 属性：href 连接目标 值可以是 url 地址也可以是连接锚点 .或者 . target 目标窗口语法格式 ： . -blank 打开新窗口 _self 当前窗口打开 一下两个仅在框架叶面中应用 _parent 当前窗口的父级窗口（上一级）打开 _top 在最

5、高一级的窗口打开 title 连接提示 百度一下 图像 语法格式：border 属性定义图片边框的宽度，默认值为 0 align 属性设置图片旁边文字的位置 语法格式： 可选值有： top 图片和文字顶部对齐 middle 图片和文字居中对齐 bottom 图片和文字底边对齐（默认） left 图片居左对齐，文字沿图片绕排 right 图片居右对齐，文字沿图片绕排 层 div两种元素 是块级元素，和段落元素相似，不同的是两个元素之间不会产生两个元素之间的空行， 是行内元素，可以定义段落中部分文字的属性 语法格式： . align 设置层中元素的水平对齐方式 兼容性比 要好一点，最好使用 inp

6、ut 元素 语法格式：高薪招聘 http:/ 2019-5-16第 4 页type 属性的可选值有： text 单行文本框 属性：name 文本框名称 value 文本框的初始值 size 文本框的长度 maxlength 可输入字符串最大的长度 radio 单选框 属性：name 单选框名称 value 内部值 checked 默认选定 checkbox 复选框 属性：name 复选框名称 value 内部值 checked 默认选定 reset 重置按钮 submit 确定按钮 属性：name 按钮名称 value 显示在按钮上的文字 password 密码框 属性与文本框的属性完全相同

7、file 文件域 属性：name 文件域名称 size 文件域的长度 maxlength 文件域可接受的字符数量的上限 hidden 隐藏域 属性：name 隐藏域名称 value 内定值 image 图片域 属性：name 所要代表的按钮，可以是 submit,reset,或其他. src 按钮图片的 url 地址 列表框 语法格式： . . . select 元素 语法格式： name 指定列表框的名字 size 指定列表框显示列表项的条数，如果指定了该参数，select 元素是个列表，否则是一个下拉列表框 multiple 指定了这个参数，则表示该列表框可选择多项，否则只可选择一项 op

8、tion 属性 高薪招聘 http:/ 2019-5-16第 5 页语法格式： value 该列表项的值 selected 如果设定了这个参数，默认为选定这一项 多行文本框 属性： name 文本框的名称 cols 文本框的宽度 rows 文本框的高度 2、CSS 样式部分一、边框属性 每一个网页都可以理解成是被一个方框框起来的，而页面中不同的部分又可以分为一个个小的方框。因此定义方框的边距、边框、颜色等的边框属性应用而生。1、边距属性（外边距）： 左边距（margin-left） 右边距（margin-right） 上边距（margin-top ） 下边距（margin-bottom ） 边

9、距（margin）边距属性定义 HTML 页面中 方框四边和其他元素之间的空白距离，每一个margin-side 属性只影响到一条边，而 margin 则提供了一个同时设置四个边距的机会。2、填充属性（内边距）： 左填充（padding-left） 右填充（padding-right） 上填充（padding-top） 下填充（padding-bottom ） 填充（padding）填充属性设置边框和内部元素的距离。它和边距属性十分相似，每个 padding-side 定义一个边框距离，padding 则同时定义四个距离。3、边框属性： 上边框宽（border-top-width） 右边框宽（

10、border-right-width）下边框宽（border-bottom-width） 左边框宽（border-left-width） 边框宽（border-width ）高薪招聘 http:/ 2019-5-16第 6 页这几个属性定义边框宽度，用 thin、medium 和 thick 分别表示细、中等和粗，或者指定具体的数值来定义边框的宽度。 4、 边框样式（border-style）该属性用以定义边框的风格呈现式样。共有九种。 none 不显示边框，为缺省值dotted 点线dashed 虚线solid 实线double 双线groove 凹线ridge 凸线inset 使整个方框凸

11、起outset 使整个方框凹陷上边框（border-top） 右边框（border-right） 下边框（border-bottom） 左边框（border-left） 边框（border）这几个是简写属性，它集合了上面几种属性的特点，可使用其给边框一次性定义宽度、式样和颜色。各属性值之间用空格隔开。5、边框颜色（border-color ）这个属性定义边框的颜色，可以用 16 种颜色名或 RGB 值来设置。16 种颜色名分别为：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, si

12、lver, teal, white, yellow。RGB 值则应表示为#RRGGBB 或 r%,g%,b%。 #rrggbb (如，#00cc00) rgb(x,x,x) x 是一个介乎 0 到 255 之间的整数 (如，rgb(0,204,0) rgb(y%,y%,y%) y 是一个介乎 0.0 到 100.0 之间的整数 (如，rgb(0%,80%,0%) 6、尺寸属性 定义方框的宽度 width 和高度 height。 例：DIV.sample width: 300px; height: 200px 7、浮动和清除属性 浮动属性是指某一对象在母体元素内的浮动位置，清除属性和浮动属性一起

13、使用，则表示同一母体内的其他对象可以流到浮动对象的旁边。 例： .float1 float: left; clear: right 假如这个样式定义在表格单元中的某个对象，则该对象将浮动在单元中的左边，而同一单元格中的其他对象在它右边的周围部分。高薪招聘 http:/ 2019-5-16第 7 页这里是一个比较完整的例子，把这个例子按样输入，建立一个 HTML 文件，看看它的显示样式： a sample 这是一个关于边框属性的完整实例 看看它的显示风格 二、字体属性 字体属性共分五种：字体家族（font-family） 、字体风格（font-style） 、字体变体（font-variant）

14、 、字体黑度（font-weight ） 、字体尺寸（font-size）;此外 font 属性是一个总体属性 ，可一一指定以上各种属性和属性值。 1、字体家族（font-family ） 通过 font-family 指定字体类型，其语法为： 标记 font-family: 字体类型，字体类型，字体类型 例：p font-family: “Times New Roman“, arial, serif 假如字体类型之间有空格，就象 Times New Roman，必须用引号将之括起，中文字体也须用括号括起，列出多种类型，以防浏览用户无前面的字体类型时，可以用后一种字体类型将之取代。 2、字体风

15、格（font-style） 属性值：normal（普通） 、italic（斜体） 、oblique（倾斜） ，默认值为 normal。 例：h1 font-syle: italic 3、字体变体（font-variant） 属性值：normal（普通）和 small-caps（小型大写字母） ，缺省值为 normal。 字体变体属性是让字体以小型大写方式来显示。小型大写方式看起来是一般大写字母的 7580左右。 该变体在某些需要特殊表现的标题中比较有用。例： H1 font-variant: small-caps 4、字体加粗（font-weight ） 属性值：normal、 bold、 l

16、ighter、 bolder、以及数值 100900。 高薪招聘 http:/ 2019-5-16第 8 页该属性用以指定字体粗细的显示，并不是所有字体都可以显示这些指定的加粗程度，因此有些情况下这些指定值会被替代，例如 100 到 300 被 lighter 替代，600 到 900 则替换bolder，反之亦然。例： h1 p 5、字体尺寸（font-size） 字体尺寸可设置绝对尺寸、相对尺寸、长度、百分比。 绝对尺寸分为 xx-small, x-small, small, medium, large, x-large, xx-large 七种，它们以各种字体的 medium 尺寸成比例

17、缩放，每一级 1.5 倍。相对尺寸有 larger 和 smaller 两种，根据字体原来的大小来决定缩放以后的大小。长度是以 pt, points, cm, mm, inch 等度量单位用具体数值来指定字体的尺寸大小。百分比是把字体设置成原来尺寸的百分比值，可以任意指定数值。例如： h1 font-size: 150% td font-size: 10pt p font-size: smaller 6、字体（font） 该属性使你可以把上述字体的各种属性合并到一行代码中指定，也即提供了一个实现字体属性的快捷方式，各种属性值之间用空格隔开。例如： td font: italic bold 12

18、pt “方正楷体简体“，“ 宋体“ 3、文本属性 文本属性设置文本的一些显示特性，例如文本对齐、文本缩进、行间距、字间距等。 1、文本对齐 text-align 属性值：left（左）, right（右） , center（居中）, justify（两端对齐） 。 例：h1 text-align: center 2、文本缩进 text-indent 该属性有效的控制了文本段落第一行的缩进，其值可以指定，是长度或段落宽度的百分比。例：p text-indent: 1.0 in 3、行高 line-height 该属性设置行与行之间的间距，其值可以为数值、长度或百分比，百分比以行高为基础。例：bo

19、dy line-height: 120% 4、字间距 letter-spacing 字间距设置字与字之间的距离，同样可以用数值、长度或百分比来指定，百分比以字高薪招聘 http:/ 2019-5-16第 9 页符大小为基础。例:body letter-spacing: 0.5em 顺便提一下，文本属性中还有一个单词间距（word-spacing） ，设置每个单词之间的距离，对于中文页面来讲，可能很少用到。5、文本装饰 text-decoration 属性值：underline（下划线） , overline（底线）, line-through （线穿过）, blink （闪烁）, none(无

20、 )。例：h3 text-decoration: underline 6、垂直对齐 vertical-align 属性值：baseline（基准线） , super（上标）, sub（下标）, top（顶部）, text-top（文本顶部）, middle（中）, bottom（底部）, text-bottom（文本底部）和百分比。 通过不同的值设某对象相对其他文本的位置，特别有用的是，上标、下标成为可能。例： 平方值：32 7、文本变换 text-transform 属性值：capitalize（首字母大写） , uppercase（大写）, lowercase（小写）和 none（无）。缺

21、省值为 none。例： p text-transform: capitalize 四、颜色与背景属性 在很多时候，要用到颜色属性，指定文本段落、标题、背景等的颜色，背景属性则用于设定背景图像在浏览器中的显示方式。 1、颜色属性：color 属性值：16 种颜色名（上文已经介绍过） 、数值（#RRGGBB 或是 r%,g%,b%） 。 在、及其单元元素、标题等对象都可以用到 color 属性。下例指定超链接的初始颜色和被激活时的颜色： a color: green a:hover color: red 2、背景属性 background-color定义页面或指定对象的背景颜色，属性值和颜色属性相

22、同。 background-image属性值：none, url（address） ，包括相对路径和绝对路径 ，指定对象的背景图像。background-repeat属性值：no-repeat（无重复）, repeat（重复）, repeat-x（x 方向重复）, repeat-y（y 方向重复） ，缺省值为 repeat，指定背景图像的显示方式。该属性需与background-image 和 background-position 组合使用。 高薪招聘 http:/ 2019-5-16第 10 页background-attachment属性值：scroll（随对象一起滚动）, fixed（

23、固定） ，缺省值为 scroll。该属性指定对象的背景图像是否与对象一起滚动，或是固定在页面上的某一个位置。这个属性与background-image 组合使用。 background-position属性值：垂直位置 vertical，指定 top, center, bottom 和具体数值、百分比；水平位置 horizontal，指定 left, center, right 和具体数值、百分比。定义背景图像的绝对或相对位置显示。 这是一个简写属性，可以把上述所有背景属性归纳到一行代码中定义。 这里是一个较完整的例子：body background-image: url(yueju/imag

24、es/002.gif); background-repeat: no-repeat; background-position: 20px 50px; background-attachment: fixed 用 background 属性简写为： body background: url(yueju/images/002.gif) no-repeat 20px 50px fixed 五、分类属性分类属性控制了浏览器的显示方式，我们知道在 HTML 语言中，对于空格和换行的处理是缺陷所在，分类属性的到来使这些特性的控制成为可能。 分类属性包括显示属性、空白属性和列表属性。下面一一的介绍。 1、显示属性 display 通过显示属性控制 HTML 页面中被定义对象在浏览器中的显示方法。这个属性有四个值： 块（block）在该对象前后自动增加分行符例：texttext图像前后的文字将与图像分行显示。内联（inline）这个对象前后的元素与之在一行显示这个属性值正好相反，当需要对象与前一元素强制性在同一行时使用该值。 列表项（list-item）加一个列表项标记，其余同块该属性值与、 、等列表标记一起使用。无（none ）对象不显示该属性值在某种情况下很有用，比如事先隐藏正确答案，直到经过某种操作以 后才显示。