WEB学习日记day01

复习:

1.文本标签:

标题标签: h1 ~ h6

段落标签: p

设置文本颜色和大小: font

加粗: strong/b

斜体: i

下划线: u

换行: br

分割线: hr

实体定义符: &lt< >&gt &nbsp

预定义标签: pre

2.多媒体标签

a.图片 <img src 宽/高 alt title />

b.audio

c.video

_______________________________________

1.列表标签

有序(ordered lists): 带有序号的

<ol></ol>

属性:

type - 类型:

1 - 数字

a - 小写字母

A - 大写字母

i - 小写罗马字母

I - 大写罗马字母

start:开始序号 - 只需要写数字即可

无序(unordered lists):带符号

<ul></ul>

type: 序号类型

disc: 实心圆 - 默认方式

circle: 空心圆

square: 方块

li: 表示一列的意思,一个li就是一列

_________________________________________

2.超链接标签

1)格式: <a href=""></a>

注意: <a>标签必须配置href属性使用,否则就不是超链接

2)属性:

href:超链接地址

* 网站内的站点网址

target:超链接打开方式

* _self:当前页面打开

* _blank:在新的页面打开

name:标记名字,配置锚点使用

3)锚点:也是超链接的一种,属于页内跳转

使用步骤:

a.打锚点(设置锚点):也是就设置<a name>标签

然后再这里给name属性做一个标记

b.跳转到指定的锚点<a href="#锚点名">

#:表示当前页面

#top:跳转到当前页面的top的这个位置

____________________________________________

3.表格标签<table></table>

1)属性:

border - 边框

cellspacing - 单元格之间的空隙

cellpadding - 单元格内容和内边框之间的距离

width/height - 宽和高

align - 表格居中/左/右

2)子标签:

caption: 表的标题

thead:标记是表头

tbody:标记是表主体,并且可以有多个

tfoot:标记是表末尾

tr:表示一行

属性:

* align:设置内容居中显示

* bgcolor: 设置背景颜色

td:表示一列

属性:

* align:设置内容居中显示

* bgcolor: 设置背景颜色

* rowspan: 跨几行

* colspan: 跨几列

___________________________________________

4.框架标签

1)<frameset>:窗口集合

a.属性:

rows:上下排列 -> 值:给百分比

cols:左右排列

b.rameset 不能和body共存

2)<frame>: 一个窗口

属性:

src: 引入的子页面

name: 给当前窗口标签起名字

要结合a标签中的target属性使用

例如: target = "name"

________________________________________

5.表单标签(重要!!!!!!!)

<form></form>

1)作用: 将数据提交给服务器

2)属性:

* action:服务器资源地址(servlet)

* method:方式,方法,提交方式[发送请求的方式]

两种提交方式:

get - 默认

post

* enctype:数据的类型(表单的类型) - 后面传文件的时候需要修改

3)子标签:

input标签:自闭和标签

属性:

type类型:

text - 普通文本框

password - 密码框

radio - 单选按钮

checkbox - 复选按钮

file - 文件框

date - 时间,日历 H5

submit - 提交按钮,将数据提交到服务器中

reset - 重置按钮

button - 普通按钮

hidden - 隐藏域,通常用来存储id值

name:用来给input标签命名的

作用:因为只有命名过的form标签,内容才能提交到服务器上

value:给input命名

a.从地址上知道有单选框和复选框的值是不能直接获取的,所以需要通过value属性值获取

b.不是所有的input标签都能使用

checked: 设置默认选中状态

注意:只有type属性值是 radio和checkbox有效

select标签: 下拉列表标签

属性:

name:加在select标签上,因为选中的时候只需要一个值

value:加在option标签上,每个下拉列表的选项都会对应不同的值

selected:默认选项,加在option标签上

textarea标签:多行文本域

属性:

cols:默认显示列数

rows:默认显示行数

label标签:

作用:使表单中的文字和input标签关联在一起

属性: for -> 想要关联谁就for谁

使用步骤:

a.label标签中添加属性for

b.input标签中添加id

c.for的值 = id的值 -> 使他们关联起来

___________________________________________

CSS:层叠样式表

1.添加css的方式

1)内嵌式

a.添加方式:在标签中添加style属性

b.特点:只对当前标签有效

2)内联式

a.添加方式:在html文件中的head标签中添加style标签

b.特点:只对当前文件有效

3)外联式

a.添加方式: link标签进入外部的css文件

b.添加步骤:

a.在css文件夹中创建一个css文件

b.添加需要修改的样式标签

c.在需要添加样式的html文件中添加link标签,表示引入css样式

c.特点:可以给所有的文件添加样式,但是必须配合link标签使用

link标签的属性:

href: 表示引入的是放在外联式标签的css文件