HTML(WEB)开发day02
作者:gqk
一:表格:用来显示数据(不用于布局)
1,表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
2,表格常用的属性
3,表头标签:
<th></th>加粗居中
4,表格标题标签
<table border="1"> <caption>我是标签</caption> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
作业:-----完成以下内容
5,合并单元格
跨行合并:rowspan
跨列合并:colspan
删除单元格的个数==合并单元格数量-1
一:表单标签:
1,<input />单签表
说明: 属性 说明 type input元素类型 name input 元素的名称 value input 元素的值 size input 元素的宽度 readonly 是否只读 maxlength 输入字符的最大长度 disabled 是否禁用
2,form标签(用来提交数据 可以进行前后台的数据交互)
<form action="url" method=""></form> action:为请求地址 method:为请求方式 get/post 演示submit rest
CSS样式(什么是CSS样式 下图就是)
用来美化网页
1,CSS书写位置:
-
1.内嵌式
css样式写在html文件head内。
-
<head> <style type="text/css"> 样式表内容 </style> </head>
※特点:样式只作用于当前文件,没有真正实现结构表现分离。
- 2.外链式写法
css样式为单独的文件,然后html文件链接到此css文件。
<head> <link rel="stylesheet" href="1.css"> <head>
※特点:作用于链接到它的文件,范围广,真正实现结构表现分离。
- 3.行内样式表
直接写在标签内的样式。
<body> <h1 style="font-size:30px; color:red;">博客</h1> </body>
※特点:作用范围仅限于当前标签,范围小,结构表现混在一起。(不推荐使用)
2,CSS基础选择器
1,标签选择器:根据指定的标签找到对应的html元素
标签名{
属性1:属性值1;
属性2:属性值2;
...
属性n:属性值n;
}
2,类选择器:(根据class属性找到对应的html标签进行设置)
.类名{
属性1:属性值1;
属性2:属性值2;
...
属性n:属性值n;
}
作业:GOOLE案例