1、图片标签
属性src: 图片路径
路径有两种 :
2.相对路径: 相对本文件所在的文件夹
有两种路径格式:
./表示本文件夹
../上一层文件夹
属性width:图片宽度,可以使用像素,也可以百分比
属性height:图片高度,可以使用像素,也可以百分比
不要同时设置宽度和高度都使用百分比,因为图片会等比例放大或者缩小
属性atl:图片显示有问题时的代替文本
属性title:鼠标移动到图片上面时显示的文字
2、列表标签
- :无序列表
- :有序列表
列表标签想要显示必须有列表项标签
需要修改列表的序号或者图案
属性type:
ol中type的取值: 1(默认的) a A i I
ul中type的取值: circle(空心圆点) disc(小黑点,默认的) square(小方点)
3、超链接标签
属性href:表示点击后跳转的页面
属性target:表示点击后网页在哪一个位置显示
它的值:_self 本页面 _blank 新页面 framename 其他框架
4、表格
嵌套关系:
表格标签
子标签:
表示行标签子标签:
表示行中的单元格table标签的属性:
border:边框的高度 单位 px
align:水平对齐方式,有 左对齐left 右对齐right 中间对齐center
width:···
weight:···
bgcolor:设置整个表格的背景色,tr和td也有bgcolor
align属性用在table上表示整个表格的对齐方式
用在tr上表示行中所有单元格内容的对齐方式
用在td上表示某一个单元格内容的对齐方式
:合并单元格的属性rowspan:跨行合并,属性具体的值表示跨几行
colspan:跨列合并,属性具体的值表示跨几列
5、框架集标签
作用:把页面进行理论的划分
属性rows:把页面分成几行, 比如分成3行 rows=”10%,20%,*”,
属性cols:把页面分成几列, 比如分成3列 cols=”10%,50%,*”
如果只是划分页面是没有效果的必须配合子标签
每一行我们在
中要添加一个子标签即可6、
这个标签没有什么具体的实际效果,主要是用来组织整个HTML页面的布局关系的。
下面讲表单:
1、表单标签
主要是用来收集用户的数据,提交到服务器,有三类:
写在
标签里面是一个容器,单独使用没有效果,要在里面加子标签:
:输入域
示例代码
示例代码效果
注意上面示例代码是被包在
中的type属性,用于设置输入框的样子
text:文本输入域,显示的文本内容(20个字符),默认的
password:密码输入框,显示的是*号代替文本
radio: 单选框
checkbox:复选框
button:普通按钮
reset:重置按钮
submit:提交按钮
(了解)image:图片按钮
hidden:隐藏域(数据会提交,但是页面上看不见)
file:文件上传组件
:下拉框,默认是没有任何内容的,必须加上子标签
空的
示例代码
图示
子标签:
内容
:文本区域,
示例代码图示
属性:
rows 多少行
cols 多少列
2、表单数据提交
只要点击type=submit按钮,数据就会自动地提交到服务器
点击”提交按钮”时,网页会自动把数据提交到服务器
注意这里
这里的type="submit"是写在一个具体的
标签的子标签里,不是写在中。问题1:以什么样的方式,什么样的数据格式提交到服务器?
以直接跟到地址栏的地址后面这种方式提交到服务器的:
?sex=on&hobby=on&hobby=on
参数的格式:
属性名=属性值 & 属性名=值
问题2:为什么有些数据提交了,有些数据没提交?
只有有name属性的控件上的值才可以提交
?username=laowang&pwd=123
问题3:为什么有些数据值是on,有些是用户填写的真实数据?
radio和checkbox、option每一个选项都必须有value值,否则提交时的值都是on,此时说明有问题出现了,需要在表单标签上加value属性
Tip:表单提交时,设置默认值
type=text 标签的默认值 通过value属性设置
type=passowrd:标签的默认值 通过value属性设置
type=radio:标签的默认值 通过checked属性设置 - checked=“checked" 或者 checked="true" 或者 checked
type=checkbox:标签的默认值 通过checked属性设置 - checked="checked" 或者 checked="true" 或者 checked
:标签的默认值 ,就是写在开始和结束标签之间的内容
:标签的默认值,在子标签option中 加上selected="selected" 或者 selected
3、form表单的自身属性
action:动作,表示你要把数据提交到那个服务器,写的是网络地址(url)
method:表示你要提交数据的方式,他的值有两种:
get(默认方式):就是我们刚刚试的,把数据直接拼接到地址后面提交,特点是不安全,而且长度是有限制
post:是把用户数据打包后提交,在地址栏上是看不见,相对于get方式更多安全
4、div和span标签
1.div标签:块级元素,独立占一行的元素,特点是会自动换行
div标签
效果
2.span标签:是一个行内元素,不会自动换行
span标签
效果自己想想就知道了
CSS(层叠样式表)用于“渲染”HTML中的文本内容(字体、大小、对齐方式等)、图片外形(高宽、边框样式、边距等)以及版面布局等
Tip:这里的“层叠”指的是一个HTML可以添加多个样式,然后最后这个HTML标签显示的效果是所有样式叠加起来的效果。
1、基本
CSS的代码规则:
选择器{
属性名:属性值;
属性名:属性值;
}
某个属性值由多个单词组成且中间包含空格,则必须为这个属性值加双引号
示例
CSS注解符号:
示例
属性值中数值和单位之间不能有空格,否则会解析错误!
错误示范
2、引入CSS样式的方法
方法一:行内样式
在标签的style属性值中写CSS代码,注意,此时选择器和大括号不用写,只需要:
属性名:属性值;
属性名:属性值;
只对该标签有效
示例
方法二:内部样式
在head标签的子标签
示例
上述示例是写在
标签中的方法三:外部样式
在另外一个文件中写,这文件他的后缀必须是.css 注意不能省略选择器和大括号
通过
的另外一个子标签 标签引入刚刚写的xxx.css新建一个CSS文件
在html文件中利用标签引用
上图示例中便签中的属性不用管,记下来即可
3、CSS三种基本选择器介绍
上面引入CSS样式的方法相当于是我们选择引入CSS的位置,然后我们要开始讨论确定位置之后,如何具体地引入。(我们这里都以内部样式为例,对三种选择器进行介绍)
标签选择器/标记选择器/元素选择器: 选中了我们指定名字的所有标签
标签名{
属性名:属性值;
}
标签名是h1
id选择器:给某个标签设置一个id值(可以多个标签共享一个id名),然后在CSS中对这个id进行操作
#id值{
属性名:属性值;
}
对某个具体id进行渲染
class选择器:选中标签,class值是指定值的标签
.类名{
属性名:属性值;
}
class选择器
4、扩展:属性选择器与包含/后代选择器
属性选择器:只选中符合我们要求属性值的标签
选择器[属性名=属性值]{
属性名:属性值;
}
示例1
示例2
包含选择器/后代选择器:
选择器1 选择器2{
属性名:属性值;
}
就是说加了限制条件,只选中包含在选择器1中的选择器2(这个选择器1和选择器2的关系可以是父子关系,也可以是爷孙关系····)对其进行渲染
即 只有第二个“传智播客”字体被设置成功
特殊情况1:
注意这里的是body父选择器
这里的效果是所有的“传智播客”字体都被放大了,即“击穿”了
特殊情况2:
父选择器也可以是类、id:
示例1
5、CSS中的样式(即选择器中的属性名)
border:
border:边框的宽度 边框的样子 边框颜色;
单位是px double:双线边框 英文单词red,blue
solid:实线边框 #RGB 比如 #FF0000
width:宽度 单位px
height:高度 单位px
color:内容的颜色
color: XXXX
英文单词red,blue
#RGB 比如 #FF0000
font-size:内容的文字大小 单位px
background-color:设置标签的背景色
display: 转换样式, 把一个块级元素转成行内元素
值: block(转成块级元素) inline(转成行内元素) none(隐藏)
float: 浮动,设置元素的浮动效果,让元素浮起来
left:漂起来向左
原来样式
采用left代码
采用left
right:漂起来向右
clear:清楚元素两边的浮动效果
both:清楚该元素左右两边的浮动效果
6、盒子模型
默认,盒子有多大,里面的元素就有多大
(这个描述的就是android开发中padding、margin)