回顾:
html: 超文本标记语言
后缀名: *.html 或 *.htm
标签分类:
围堵标签: 双标签
<html>标签体</html>
空标签: 单标签
<br/>
标签上的属性:
<xxx 属性名="值" 属性名="值"></xxx>
html结构:
html:
head:
title
meta
link
style
body:
常见的标签:
<a href="跳向指定的路径" target="_blank" >标签体</a>
<img src="路径" alt="提示信息" title="鼠标移上时的提示信息" />
相对路径:
./
../
绝对路径:
盘符
www.itcast.cn
table:
tr
td | th
thead , tbody , tfoot
table:
thead:
th
tbody:
td...
tfoot:
td
h1-h6
font
b i strong
p br hr
ul 无序
ol 有序
li
frameset:
属性:
cols:
rows:
子标签:
frame:
属性:
src:
name
///////////////////////////////
html:
表单
css:
///////////////////////////////
案例-完成注册页面
需求分析:
有一个页面,页面上有很多图片和文字,且格式不一(表单).
技术分析:
html:
表单:form ★★★
div + css
步骤分析:
创建一个页面,添加5个div
1.嵌套3个div,让div在一行显示
2.给div添加背景颜色,添加超链接
3.添加背景图片,嵌套一个div
添加一个表单
4.一张图片
5.两个p标签
//////////////////////
day02html&css
- form★★★
"表单
格式:<form></form>"
- 作用
- 用来收集用户的数据,将数据提交到指定的服务器
- 常用子标签:
- input :输入框
- 常用属性type
- text 默认
"文本输入框"
- password
"密码输入框"
- radio
"单选框"
- checkbox
"复选框"
- button
"普通按钮"
- submit
"提交按钮"
- reset
"重置按钮"
- image:必须和src属性连用
"图片提交"
- file
"文件输入框"
- hidden
"隐藏"
- select <select></select>
"下拉选,需要和option子标签连用"
- 子标签
- <option></option>
"value需要定义在option上"
- 常用属性
- mutiple
"设置可以多选"
- size
"展示多个"
- textarea <textarea></textarea>
"文本域"
- 常用属性
- rows
"设置行"
- cols
"设置列"
- 通用属性:
- name
- 将若干个单选框或复选框设置为一组
- 若用户输入的值要想提交到服务器,必须有name属性★★★
- value
- 给按钮起名字
- 设置提交到服务器的值
- disabled:(扩展-了解)
"设置标签不可用"
- readonly:(了解)
"设置文本框为只读"
- 给表单中的标签设置默认值
- text password
- 通过value属性设置默认值
- radio checkbox
- 通过checked属性设置默认值
- select
- 通过selected设置默认值
- textarea
- 直接在文本域中编写内容即可设置默认值
- 常用属性:
- action
"设置表单的提交路径"
- method★
"设置提交方式"
- get:(默认)
"提交内容在地址栏中显示,不安全,传输数据大小有限,
get提交方式:
要提交的数据直接拼在提交路径的后面格式如下:
url?name=值&name=值"
- post
"提交内容不在地址栏中显示,相对安全,传输数据大小不受限制"
- div+css(渲染)
- css概述和语法
- css概述(层叠样式表)
"层叠:给同一个标签添加不同的属性,最后所有的属性都作用于这个标签
样式表:给html的标签添加指定的效果"
- css语法格式
"选择器{css属性:属性值; css属性:属性值}"
- 作用:
"渲染页面"
- 入门案例
- css和html整合
- 行内样式:
" 通过标签的style属性
例如:<xxx style="css属性:'属性值';css属性:'属性值'""
- 内部样式:
" 通过head的子标签style标签实现"
- 外部样式
" 编写外部的css文件,通过head的子标签link的href属性引入"
- div标签
- 单独占一行(行级)
- 注意:
"行内样式 > 内部样式 和 外部样式(谁离标签近标签听谁的)"
- 选择器
- id选择器(★)
"选中一个标签,id唯一,在一个html页面中不能出现两个相同id
格式:
html中:给标签添加id属性 <xxx id="a"></xxx>
css中:通过#id的值选中这个标签 #a{.....} "
- class选择器(★)
"给一类标签设置相同的样式
选中一类标签
格式:
html中:给html的标签添加class属性 <xxx class="cla"></xxx>
css中:通过.class的名称选中这类标签 .cla{}"
- 标签选择器(★)
"选择一种标签
格式:html中不需要做任何操作
css中:直接通过标签名选中即可 a{}"
- 属性选择器(知道会用)
"选中属性为...的标签
格式:
html中:给标签添加属性 <xxx zz="zz"></xxx>
css中:通过属性选中标签 [zz="zz"]{...}"
- 派生选择器(知道会用)
- 多个选择器
"通过不同的选择器选中标签,给这些标签添加相同的样式,多个选择器之间使用逗号分割
格式:选择器1,选择器2{}"
- 后代选择器(层级选择器)
"更近一层的选择,选择器之间使用空格分割
格式:选择器1 选择器2{}"
- 伪类选择器(了解)
" 锚伪类:
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */"
- 选择器优先级
- 越特殊优先级越高
- id > 类 > 标签
- css的样式
- 字体
"设置字体的大小,风格,系列"
- font-size:字体大小
- font-style:字体风格
- italic:斜体
- font-family:字体系列
- 文本
"设置文本的颜色,对其方式,超链接是否有下划线"
- color:文本的颜色
- text-align:对齐方式
- text-decoration:向文本添加修饰
- none:没有任何修饰
- line-through: 贯穿线
- overline:上划线
- 背景
"设置背景颜色,背景图片"
-
- background-repeat:设置背景图像是否及如何重复
- repeat-x 横向重复
- repeat-y 纵向重复
- no-repeat 不重复
- 边框
"给标签设置边框"
- 宽
- height:高
- border: 大小 边框样式 颜色
"设置边框大小,样式,颜色"
- 高级
- 浮动
- float:浮动
- 值:left right
- 清除浮动
- clear:清除浮动
- 值:left rigth both(清除所有浮动)
- 显示类型
"定义元素显示的类型"
- display
- 属性值:
- none:不显示(隐藏)
- inline:在一行(可以将块级标签转化为行内)
- block:块(单独占一行)
- 框模型
- 内边距
"边框和内容之间的距离"
- padding:(顺时针 上右下左)
"padding:20px; 上下左右
padding:20px 30px;上下 左右
padding:20px 30px 40px;"
- 外边距
"边框和相邻边框的距离"
- margin:(顺时针 上右下左)