1、图片标签<img>
- 属性src: 图片路径
路径有两种 :
1.绝对路径: http://www.baidu.com/logo.png
2.相对路径: 相对本文件所在的文件夹
有两种路径格式:
./表示本文件夹
../上一层文件夹
-
属性width:图片宽度,可以使用像素,也可以百分比
-
属性height:图片高度,可以使用像素,也可以百分比
不要同时设置宽度和高度都使用百分比,因为图片会等比例放大或者缩小 -
属性atl:图片显示有问题时的代替文本
-
属性title:鼠标移动到图片上面时显示的文字
2、列表标签 <ul> <ol>
- <ul>:无序列表
- <ol>:有序列表
列表标签想要显示必须有列表项标签<li>
需要修改列表的序号或者图案
属性type:
ol中type的取值: 1(默认的) a A i I
ul中type的取值: circle(空心圆点) disc(小黑点,默认的) square(小方点)
3、超链接标签<a>
- 属性href：表示点击后跳转的页面
- 属性target：表示点击后网页在哪一个位置显示
它的值：_self 本页面 _blank 新页面 framename 其他框架
4、表格<table>
嵌套关系：
表格标签<table>
子标签:<tr> 表示行标签
子标签:<td>表示行中的单元格
table标签的属性:
- border:边框的高度 单位 px
- align:水平对齐方式,有 左对齐left 右对齐right 中间对齐center
- width：···
- weight：···
- bgcolor:设置整个表格的背景色,tr和td也有bgcolor
- align属性用在table上表示整个表格的对齐方式
用在tr上表示行中所有单元格内容的对齐方式
用在td上表示某一个单元格内容的对齐方式
<td>：合并单元格的属性
- rowspan：跨行合并,属性具体的值表示跨几行
- colspan：跨列合并,属性具体的值表示跨几列
5、框架集标签<frameset>
作用:把页面进行理论的划分
- 属性rows:把页面分成几行, 比如分成3行 rows=”10%,20%,*”,
- 属性cols:把页面分成几列, 比如分成3列 cols=”10%,50%,*”
如果只是划分页面是没有效果的必须配合子标签<frame>
每一行我们在<frameset>中要添加一个<frame>子标签即可
6、<div>组织标签
这个标签没有什么具体的实际效果，主要是用来组织整个HTML页面的布局关系的。
下面讲表单：
1、表单标签<form>
主要是用来收集用户的数据,提交到服务器，有三类：<input><textarea><select>
写在<body></body>标签里面
是一个容器，单独使用没有效果，要在里面加子标签：
<input>：输入域
<input>
示例代码
示例代码效果
注意上面示例代码是被包在<form></form>中的
- type属性,用于设置输入框的样子
- text:文本输入域,显示的文本内容(20个字符),默认的
- password:密码输入框,显示的是*号代替文本
- radio: 单选框
- checkbox:复选框
- button:普通按钮
- reset:重置按钮
- submit:提交按钮
- (了解)image:图片按钮
- hidden:隐藏域(数据会提交,但是页面上看不见)
- file:文件上传组件
<select>：下拉框,默认是没有任何内容的,必须加上子标签<option>
空的<select>
示例代码
图示
- 子标签:
<option>内容</option>
<textarea>：文本区域，
<textarea>
示例代码图示
属性:
- rows 多少行
- cols 多少列
2、表单数据提交
只要点击type=submit按钮,数据就会自动地提交到服务器
点击”提交按钮”时,网页会自动把数据提交到服务器
注意这里
这里的
type="submit"是写在一个具体的<form>标签的子标签里，不是写在<form>中。
-
问题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
- <textarea>:标签的默认值 ,就是写在开始和结束标签之间的内容
- <select>:标签的默认值,在子标签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标签的子标签<style>中写, 注意不能省略选择器和大括号
示例
上述示例是写在<head>标签中的 -
方法三：外部样式
在另外一个文件中写,这文件他的后缀必须是.css 注意不能省略选择器和大括号
通过<head>的另外一个子标签<link>标签引入刚刚写的xxx.css
新建一个CSS文件
在html文件中利用<link>标签引用
上图示例中<link>便签中的属性不用管，记下来即可
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(隐藏)
这里如果不清楚块级元素和行内元素有什么区别就去看：https://www.jianshu.com/p/bb0433ded3c9
-
float: 浮动,设置元素的浮动效果,让元素浮起来
left：漂起来向左
原来样式
采用left代码
采用left
right：漂起来向右
- clear：清楚元素两边的浮动效果
both：清楚该元素左右两边的浮动效果
6、盒子模型
默认，盒子有多大，里面的元素就有多大
（这个描述的就是android开发中padding、margin）
网友评论