HTML第二天
2018-09-29 本文已影响0人
Amok校长
表格 table(会使用)
表格不是用来布局,常见处理、显示表格式数据.
表格学习要求: 能手写表格结构,并且能合并单元格.
1.创建表格
<table width="500" border="1"> //table里面只装tr、coption
<caption>个人信息表 </caption> //表格标题
<thead> //表格头部标签(可不写)
<tr> //行, tr里面只装td、th
<th>姓名</th>
<th>性别</th>
<th>电话</th> //表头单元格标签(里面文字自动居中加粗)
</tr>
</thead>
<tbody> //表格主体标签(可不写,作用只是划分区域)
<tr>
<td>单元格-姓名1</td> //单元格标签, td可以装其他标签
<td>单元格-性别1</td>
<td>单元格-电话1</td>
</tr>
</tbody>
</table>
2.表格属性
| 属性名 | 含义 | 常用属性值 |
|---|---|---|
| border | 设置表格的边框 | 像素值(默认0) |
| cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值(默认2) |
| cellpadding | 设置单元格内容与单元格之间的空白间隔(上下左) | 像素值(默认1) |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中的水平对齐方式 | left、center、right |
注意: 一般使用时三参数为0 (border、cellpadding、cellspacing为0)
3.表格标题和表头单元格
表头标签 th :表头单元格一般位于表格的第一行或第一列, 其文本加粗居中
表格标题 caption :通常这个标题会被居中于表格之上
<caption>个人信息表 </caption>
1.只存在表格里面
2.caption标签必须紧随table标签之后
4.合并单元格(难点)
跨行合并: rowspan 跨列合并: colspan
合并单元格的思想:
将多个内容合并的时候,就会有多余的单元格,把多余出来的删除.例如 把3个td合并成一个,那就多余了2个,需要删除
公式: 删除的个数 = 合并的个数 - 1
合并的顺序: 先上后下, 先左后右
<tr>
<td>小明</td>
<td colspan="2">男</td> //从这个单元格开始合并,合并个数为2个
<!-- <td>120</td> -->
</tr>
总结表格:
1.表格提供了HTML中定义表格式数据的方法
2.表格中由行中的单元格组成
3.表格中没有列元素,列个数取决于行单元格个数
4.表格不要纠结于外观,那是css的作用
表单标签(掌握)
表单的目的为了收集用户信息
input 控件(重点)
<input/>标签为单标签
| 属性 | 属性值 | 描述 |
|---|---|---|
| text | 单行文本输入框 | |
| password | 密码输入框 | |
| radio | 单选按钮(如果是一组,必须给他们命名相同的name) | |
| type(说明输入哪种表单) | checkbox | 复选框 |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像形式的提交按钮 | |
| file | 文件域 | |
| name | 由用户自定义 | 控件的名称 |
| value | 由用户自定义 | input控件中的默认文本值 |
| size | 正整数 | input控件在页面中的显示宽度 |
| checked | checked | 定义选择控件默认被选中的项 |
| maxlength | 正整数 | 控件允许输入的最多字符数 |
input使用如下:
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<caption><h4>青春不常在,抓紧谈恋爱</h4></caption>
<tr height="60">
<td>年龄</td>
<td>
<select name="" id="">
<option value="">选择年份</option> <!-- option选项 -->
<option value="">1990</option>
<option value="" selected="selected">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
<option value="">1995</option>
</select>
<select name="" id="">
<option value="">选择月份</option> <!-- option选项 -->
<option value="">一月</option>
<option value="">二月</option>
<option value="">三月</option>
</select>
</td>
</tr>
<tr height="60">
<td>用户名</td>
<td><input type="text" value="andy"></td>
</tr>
<tr height="60">
<td>密码</td>
<td><input type="password" value="110" maxlength="6"></td> //限制输入框字数
</tr>
<tr height="60">
<td>性别</td> //单选
<td>
男<input type="radio" name="sex">
女<input type="radio" name="sex" checked="checked" /> //默认选中的
人妖<input type="radio" name="sex">
</td>
</tr>
<tr height="60">
<td>喜欢的类型</td> //多选
<td>
妩媚<input type="checkbox" name="sex">
气质<input type="checkbox" name="sex">
小鲜肉<input type="checkbox" name="sex">
鹿晗<input type="checkbox" name="sex">
</td>
</tr>
<tr height="60">
<td></td> //4种按钮
<td>
<input type="button" value="注册">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="image" src="btn.png"/>
</td>
</tr>
<tr height="60">
<td>上传头像</td> //上传文件
<td>
<input type="file" />
</td>
</tr>
<tr height="60">
<td>给我留言</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
</table>
label 标签 (理解)
作用: 当点击label标签的时候,被绑定的表单元素就会获得输入焦点
<label> 用户名: <input type="text"></label> //效果: 点击用户名也会执行输入框
<label for="pwd"> //for属性规定label与那个表单元素绑定
用户名: <input type="text">
密码: <input type="password" id="pwd">
</label>
textarea 控件(文本域)
作用:创建多行输入框(相当于iOS的textview)
<textarea name="" id="" cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
下拉菜单 <select></select>
<select>
<option value="">选项1</option>
<option value="" selected="selected">选项2</option>
<option value="">选项3</option>
...
</select>
注意:
1.```<select></select>``` 中至少应包含一对```<option></option>``` 2.在option中定义selected="selected"时,当前选项即为默认选项.
表单域
在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器.创建表单的基本格式如下:
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性:
1.Action
在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址.
2.method
用于设置表单数据的提交方式,其取值为get或post.
3.name
用于指定表单的名称,以区分同一个页面中的多个表单
注意: 每个表单都应该有自己的表单域
小技巧: shift + 空格 一个中文字的空格大小
<form action="" method="get">
用户名: <input type="text" name="name"> <br/>
密 码: <input type="password" name="pwd"><br/>
性别: <input type="radio" name="sex"> <br/>
<input type="submit" value="提交所填">
<input type="reset" value="重新填写">
</form>
查看文档:
W3C: http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/
CSS部分:
css美化样式
引入CSS样式表(书写位置) :
2.内部样式表:(写Demo中多用到)
内嵌式是将CSS代码几种写在HTML文档的head头部标签中,并且使用style标签定义
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*选择器 {属性:值;} */ /*选择器:用来选择标签的;*/
th {
color: skyblue;
}
</style>
</head>
语法中,style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方.
type="text/CSS"在html5中可以省略,写上也比较规范.
1. 行内式(内联样式) :(偶尔用)
是通过标签的style属性来设置元素的样式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ">内容</标签名>
比如: <caption><h4 style="color: pink; font-size: 25px;">青春不常在,抓紧谈恋爱</h4></caption>
实际上任何HTML标签都拥有style属性,用来设置行内式.行内式只对其所在的标签及嵌套在其中的子标签起作用.
3.外部样式表(外联式) :(工作中以此为主)
链入式是将所有的样式放在一个或多个以CSS为扩展名的外部样式中,通过link标签将外部样式表文件链接到HTML文档中
<head>
<link rel="stylesheet" href="CSS文件的路径" type="text/CSS" />
</head>
注意: link是单标签
该语法中,link标签需要放在head头部标签中,并且必须制定link标签的三个属性,具体如下:
href: 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径.
type: 定义所连接文档的类型,在这里需要指定为"text/CSS",表示链接的外部文件为CSS样式表.
rel: 定义当前文档与被链接文档之间的关系,在这里需要指定"stylesheet",表示被链接的文档是一个样式表文件.
三种样式表总结(位置) :
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便,权重高 | 没有实现结构和样式相分离 | 较少 | 控制一个标签(少) |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面(中) |
| 外部样式表 | 完全实现结构和样式分离 | 需要引入 | 最多,强烈推荐 | 控制整个站点(多) |
小技巧:
问:sublime 如何显示侧板的文件夹，也就是 Folder?
答:Project -> Add Folder to Project
问: div*3按Tab键
答: 生成三个div标签,同理以此类推.
CSS基础选择器
标签选择器(元素选择器)
标签名:{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名:{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
标签选择器可把某一类标签全部选出来
类选择器
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3 }
标签调用的时候用 class="类名"即可.
类选择器最大的优势是可以为元素对象定义单独或相同的样式.
小总结:
1.长名称或词组可以使用中横线来为选择器命名.
2.不建议使用"_"下划线来命名CSS选择器.
输入的时候少按一个shift键;
浏览器兼容问题(比如使用_tips的选择器命名,在IE6是无效的)
能良好的区分JavaScript变量命名(JS命名是用"_")
3.不要纯数字、中文等命名,尽量使用英文字母来表示.
多类名选择器
注意:
1.样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序相关.
2.各个类名中间用空格隔开.
多类名选择器在后期布局比较复杂的情况下,还是较多使用的.
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安琪拉</div>
<div class="font14">貂蝉</div>
id选择器
id选择器使用"#"进行标识,后面紧跟id名,其基本语法格式如下:
#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素.
用法基本和类选择器相同.
id选择器和类选择器的区别
W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但允许相同名字的class.
类选择器(class)好比人的名字,是可以多次重复使用的,比如 张伟 王伟 李伟 李娜
id选择器 好比人的身份证号码,全国是唯一的,不得重复.只能使用一次.
id选择器和类选择最大的不同在于使用次数上.
通配符选择器
通配符选择器用"*"号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素.其基本语法格式如下:
* {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距.
* {
margin: 0; /*定义外边距*/
padding: 0; /*定义内边距*/
}
注意:
这个通配符选择器,就像我们电影明星中的梦中情人,想想它就好了,但是它不会和你过日子.
