html表格选中空心点,制作列表,表格及表单-笔记

制作列表,表格及表单

使用CSS设置各种样式

使用有序列表,无序列表,定义列表实现数据展示

使用表格实现数据展示

制作语义化表单

使用CSS3高级选择器为网页元素添加CSS样式

使用CSS设置各种样式

CSS 的意义

有效的传递页面信息

使页面漂亮,美观,更加吸引用户

可以更好的突出页面的主题内容,使用户可以第一眼看到页面的主要内容

具有良好的用户体验

< span>标签添加文字样式

font-family 设置字体样式

font-size 设置字体大小

font-style 设置字体风格

font-weight 设置字体的粗细

font 在一个声明中设置所有的字体属性

例 font :italic bold 36px "宋体";

font-family属性设置

font-family:"楷体"; 可以设置中文或者英文的字体类型

font-size属性设置

可以设置属性值的单位:in,cm,mm,pt,pc,px

一般常用的是px

font-size:20px;

font-style 属性设置

normal标准字体,

italic斜体字体,

oblique倾斜字体

font -weight属性设置

normal 默认值,定义标准的字体

bold 粗体字体

bolder 更粗的字体

lighter 更细的字体

100~900 每次增加一百 由细到粗 400等同于normal 700等同于bold

排版网页属性

color 设置文本颜色

text-align 设置文本水平对齐方式

text-indent 设置首行文本的缩进

line-height 设置文本的行高

text-decoration 设置文本的装饰

vertical-align 这只文本垂直对齐方式

text-shadow 设置文本阴影

color属性设置

RGB格式:#FFFFFF

RGBA格式:rgba(0,0,255,0.5);0.5设置透明度

text-align属性设置

left 把文本排列到左边,默认值,由浏览器决定

right 把文本排列到右边

center 把文本排列到中间

justify 实现两端对齐文本效果

text-indent和line-height属性设置

单位为em和px

一般em用的比较多 比如 text-height:2em;

text-decoration属性设置

none默认值,定义的标准本文

underline 设置文本的下划线

overline 设置文本的上划线

line-through 设置文本的删除线

vertical-align属性设置

middle 文本居中对齐

text-shadow属性设置

text-shadow:color 颜色RGB x-offset:(x轴偏移) y-offset:(y轴偏移)

blur-radius:模糊半径

设置伪类和列表样式

语法:伪类{ 语法 }

设置的顺序a:link -> a:visited -> a:hover -> a:active

a:link 未单机访问时超链接样式

a:link{color:#9ef5f9;}

a:visited 单机访问后超链接样式

a:visited{color:#333;}

a:hover鼠标悬浮其上的超链接样式

a:hover{color:#ff7300;}

a:active 鼠标单机未释放的超链接样式

a:active{color:#999;}

背景样式

< div>标签可以吧HTML文档分割成独立的 ,不同的部分

background-color 设置背景颜色

background-image 设置背景图像

repeat 沿水平和垂直两个方向平铺

no-repeat不平铺,背景图片只显示一次

repeat-x只沿水平方向平铺

repeat-y只沿垂直方向平铺

background-position 背景定位

(x,y) (x20%,y30%) (left right top bottom)

background-size 背景尺寸

auto 默认值

1px,2px

使用有序列表,无序列表,定义列表实现数据展示

列表分为三种:有序列表 ,无序列表 ,自定义列表

无序列表由< ul>标签和< li>标签组成

内容

内容

内容

有序列表由< ol>标签和< li>标签组成

内容

内容

内容

自定义列表由标签,标签和标签组成

标题

内容

列表样式

list-style-type

none 无标记符号

disc 实心圆,默认类型

circle 空心圆

square 实心正方形

decimal 数字

使用表格实现数据展示

为什么使用表格,表格简单通用 结构稳定

表格的基本语法

< table>

< table border="2">

< tr>

< td>1行1列的标题

< td>1行2列的标题

< td>1行3列的标题

< /tr>

< tr>

< td>2行1列的标题

< td>2行2列的标题

< td>2行3列的标题

表格的基本结构

行(tr)

单元格(td)

td属性:colspan="2"跨两列

rowspan="2"跨行数

制作语义化表单

表单元素的语法

method

告诉浏览器如何将数据发送给服务器,它指定向服务器发送数据的方法,语法为

method = (get|post)

action

指示服务器上处理表输出的程序.一般来说,当用户单击表单上的"提交"按钮后,信息

发送到web服务器上,由action属性指定的程序处理.语法为action="URL"

属性

type指定表单元素的类型,可用的类型有

text ,password ,radio ,checkbox ,submit , reset ,

file , email ,url ,number ,hidden ,image ,button

表单语法

名字:

密码:

method:get 默认选择 在地址栏显示信息

post 隐藏地址栏中的信息

action:"test9.html"表示向何处发送表单数据

在实际网页开发中通常采用post方式提交表单数据

input表单元素格式

input type="test input元素类型" name="fname input元素名称"value="text input元素的值"

type:指定元素的类型.

Q本框

使用方法:

属性

name="userName"文本框名称

maxlength="20"文本框可输入的最多字符

size="30"文本框长度

value="用户名"文本框初始值

type="text"文本框

password密码框

email邮箱框

邮箱:

自动验证邮箱格式

数字

请输入数字

type="number"数字

min="0"允许最小值

max="10"允许的最大值

step="10"合法的数字间隔

滑块

请输入数字

type="range"滑块

min="0"允许最小值

max="10"允许的最大值

step="2"合法的数字间隔

搜索框

请输入搜索的关键字:

search搜索

checkbox复选框

爱好:

玩游戏

聊天

运动

radio单选框

男

女

属性:

checked默认选中状态

name值必须相同的才能被分为一组

submit提交按钮

reset重置按钮

file文件域

button普通的按钮

属性

οnclick="alert(this.value)"点击普通按钮弹出一个对话框对话的内容是this.value这个value

image按钮图片

文本域

填写个人评价

自信,活泼,善于思考...

cols="40"显示一行能装多少内容

rows="6"显示几行内容

默认为text

name:指定元素的名称

value:元素的初始值.type为radio时必须指定一个值

size:指定表单元素的初始宽度.当type为text或password时,

表单元素的大小以字符为单位.对于其他类型,宽度以像素为单位

maxlength:type为text或者password时,输入的最大字符数

checked:type为radio或checkbox时,指定按钮是否是被选中

select列表框

selected默认选中项

option选项

列表框

中国

华为

隐藏域主要目的为了后台提交数据

只读

禁用

表单元素的标注

增强鼠标的可用性

自动将焦点转移到与该标注相关的表单元素上

标注的文本

for="id"表单元素的id

id="male"

使用CSS3高级选择器为网页元素添加CSS样式

层次选择器

E F 后代选择器

选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内

E>F 子代选择器

选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素

E+F 相邻兄弟选择器

选择匹配的F元素,且匹配的F元素仅位于匹配的E元素后面

E~F 通用兄弟选择器

选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素

结构伪类选择器

E:first-child

作为父元素的第一个子元素的元素E

E:last-child

作为父元素的最后一个子元素的元素E

E F:nth-child(n)

选择父级元素的E的第n个子元素F,(n可以是1,2,3)关键字为even

(偶数),odd(奇数)

E:first-of-type

选择父元素内具有指定类型的第一个E元素

E:last-of-type

选择父元素具有指定类型的最后一个E元素

E F:nth-of-type(n)

选择父元素内具有指定类型的第n个元素

使用 E F:nth-child(n)和E F:nth-of-type(n)的关键点

E F:nth-child(n)在父级里从第一个元素开始找,不分类型

E F:nth-of-type(n)在父级里先看类型,再看位置