HTML标签
1.行内标签和块级标签
<span>:行内标签,文本信息在一行展示,内敛标签,默认无样式。
<div>:块级标签,每一个<div><div/>占满一行,默认无样式。
结合CSS控制其样式。
2.语义化标签:为了提高程序的可读性
<header>:页眉。
<footer>:页脚。
3.表格标签
<table>:定义表格。
<tr>:定义行。
<td>:定义单元格。
<th>:定义表头单元格。
<table>中的属性:
width:宽度
border:边框
cellpadding:定义内容和单元格的距离
cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
bgcolor:背景色
align:对齐方式
<tr>中的属性:
bgcolor:背景色
align:对齐方式
<td><th>中的属性:
colspan:合并列
rowspan:合并行
<caption>:表格标题,表格里面定义
<thead>:表示表格的头部分
<tbody>:表示表格的体部分
<tfoot>:表示表格的脚部分
(无样式,和语义化标签类似)
案例一:个人博客网站
1.使用table来完成页面布局,最外层;
2.如果某一行只有一个单元格,则使用
<tr>
<td>
</td>
</tr>
3.如果一行有多个单元格,使用表格嵌套
<tr>
<td>
<table></table>
</td>
</tr>
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ronin的博客</title>
</head>
<body>
<table width="100%" align="center">
<tr>
<td>
<img src="../photo/博客素材/g1.jpg" width="100%">
</td>
</tr>
<tr>
<td>
<table width="100%" align="center">
<tr>
<td><img src="../photo/博客素材/g2.jpg"/></td>
<td><img src="../photo/博客素材/g3.jpg"/></td>
</tr>
<tr>
<td><img src="../photo/博客素材/g5.jpg"/></td>
<td><img src="../photo/博客素材/g4.jpg"/></td>
</tr>
<tr>
<td><img src="../photo/博客素材/g6.jpg"/></td>
<td><img src="../photo/博客素材/g7.jpg"/></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
4.表单标签
表单:用于采集用户输入数据的,和服务器进行交互。
<form>
用户名:<input><br/>
密码:<input>
</form>
<form>:用于定义表单,定义的是一个范围,代表采集用户数据的范围。
属性:
action:指定提交数据的URL。
method:指定的提交方式,共有7种,主要讲两种
1)不安全 get 请求的参数会在地址栏中显示,且参数大小有限制
2)安全 post 请求参数封装在请求体中,且参数大小没限制
<input>:输入标签,输入类型是由类型属性(type)定义的,可以通过type属性值,改变元素展示的样式
属性:
name属性:表单中属性想要被提交,必须指定其name属性。
type属性:
text 文本输入框,type的默认值;
password 密码输入框;
1)placeholder 指定输入框的提示信息,placeholder="请输入密码"
radio 单选框
1)要想让多个单选框实现单选效果,每个单选框的name属性值必须一样;
2)一般会给每个单选框提供value属性,指定其被选中所提交的值;
3)checked属性,可以指定默认值。
checkbox 复选框
1)一般会给每个复选框提供value属性,指定其被选中所提交的值;
2)checked属性,可以指定默认值。
file 文件选择框;
hidden 隐藏域,用于提交一些信息;
color 取色器;
date 日期,另一种形式 datetime-local;
email 邮箱,这里会使用正则验证邮箱格式;
number 数字字段输入框
按钮:
1)submit提交按钮
2)button 普通按钮
3)image 图片提交按钮,src属性指定图片的路径地址
<label>:元素定义标注,可以指定输入项的文字描述信息
属性:
for属性与<input>标签的id属性对应,label 元素不会向用户呈现任何特殊效果。
不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。
就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<select>下拉列表,<option>列表项
<select name="city">
<option>--请选择--</option>
<option>北京</option>
<option>上海</option>
<option>西安</option>
</select>
<textarea>文本域
属性:
rows 行数
cols 列数(每行字数)