表格
- 写法:<table><tr><td></td><td></td></tr></table>
- 属性：
- border:表格边框宽度
- width:table 宽度
- height:table 高度
- cellSpacing:单元格间隔
- cellpadding：内容和单元格的间隔
- align: 内容的对齐位置
- bgcolor:背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="葛朗台商业简讯,简讯,趋势,经济,金融,管理">
<meta name="description" content="葛朗台商业简讯，是XXXXXX，30s讲清一件事">
<meta http-equiv="refresh" content="5; https://www.grandet.com">
<link rel="icon" href="favicon.jpg">
<link rel="stylesheet" href="style.css">
<title>JeversonJeeHtmlRoad</title>
</head>
<body>
<table border="2" align="center" width="500" height="300" cellspacing="2" celpadding="2">
<thead>
<tr align="center">
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td align="center"></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
- 表头和单元格的合并
- 表头写法：
- 表格的合并：
- 合并同一行上的单元格：colspan=“n” n 表示合并的单元格的个数
- 合并同一列上的单元格：rowsoan=“n” n 代表的意义同上
<!DOCTYPE heml>
<html>
<head>
<meta charset="uft-8">
<title>JeversonHtmlRoad</title>
</head>
<body>
<!--表格已知行数和列数最快速的写法-->
<!-- table>tr*rowConut>td*colsCount+tab -->
<table border="1" width="500" height="300" align="center">
<caption>JeversonJee'sTableHeader</caption>
<tr>
<td rowspan="2">Kobe</td>
<td colspan="2">年龄和职业信息</td>
<!-- <td>35</td> -->
<!-- <td>Lakers</td> -->
</tr>
<tr>
<!-- <td>Iverson</td> -->
<td>30</td>
<td>SevenSixers</td>
<tr>
</tr>
<td>Carter</td>
<td>35</td>
<td>Rockets</td>
</tr>
</table>
</body>
</html>
- 表格标题、 边框颜色、内容垂直对齐
- 表格标题 用法和td 标签一样：标题的文字自动加粗且水平居中对齐。
- 写法：JeversonJee26webDeveloper
- 边框颜色：bordercolor=“red”
- 内容垂直对齐：
- 写法：JeversonJee
- valignValue: top | middle | bottom
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JeversonHtmlRoad</title>
</head>
<body>
<table width="500" height="300" bgcolor="bisque" cellpadding="1" cellspacing="1" align="center">
<caption>表头和表格的合并</caption>
<tr bgcolor="white">
<td rowspan="2">Kobe</td>
<td colspan="2">年龄职业信息</td>
<!--<td>Lakers</td>-->
</tr>
<tr bgcolor="white">
<!--<td>Iverson</td>-->
<td>30</td>
<td>Sixers</td>
</tr>
<tr bgcolor="white">
<td>Carter</td>
<td>35</td>
<td>Rockets</td>
</tr>
</table>
</body>
</html>
表单
表单的作用是用来收集信息：下面将整体介绍表单的组成：提示信息，表单控件，表单域。
- 表单的组成
-
表单标签：
<form action="1.php" method="post"></form>- action处理信息的脚本文件
- method=“get | post”,get 通过地址栏提供(传输信息)，安全性差。Post 则通过1.php脚本文件来处理信息，安全性要比get高
-
文本输入框：
<input type="text" maxlength="10" readonly="readonly" disabled="disabled" name="userName" value="master at WebDevelopment" />- maxlength: 限制输入的字符长度
- readonly=“readonly” 将输入框设置为只读状态
- disabled=“disabled” 输入框未激活状态
- name=“username” 输入框的名称
- value=“maseter at webdevelopment” 将输入框的内容传递给处理文件
-
密码输入框:
<input type="password" name="pwd"></input>- notice:文本输入框的所有属性对密码输入框均有效。
-
单选框：
<input type="radio" name="gender" checked="checked">- 只有将name的值设置相同的时候，才能实现单选效果
- checked="checked"设置为默认选项
-
下拉列表：
<select mutiple="mutiple"><option></option><option selected="selected"></option></select>- select=“selected” 设置默认选中项目
- mutiple=“mutiple” 将下拉列表设置为多选项
-
多选框:
<input type="checkbox" checked="checked"/>吃- checked=“checked”:设置默认选中项
-
多行文本框:
<textarea rows="10" cols="130">- rows 控制输入的行数
- cols 控制每行输入的长度
-
文件上传控件:
<input type="file"> -
文件提交按钮：
<input type="submit">- 可以实现信息提交功能
-
普通按钮：
<input type="button" value="Normal button name ">- 不能提交信息，需要配合JS使用
-
图片按钮:
<input type="image" src="sourcedirectory">- 图片提交按钮可实现信息提交功能
-
重置按钮：
<input type="reset">- 将信息重置到默认状态
-
表单信息分组:
<fieldset><legend>分组信息名称</legend></fieldset> -
html5 补充表单控件
<!DOCTYPE html>
<html>
<head>
<title>JeversonJeeHtmlRoad</title>
<meta charset="utf-8">
<meta name="keywords" content="JeversonJee,iOSDeveloper,WebDeveloper,node.jsDeveloper,ProjectManger,Productmanger,C++developercharset">
<meta name="description" content="JeversonJee gruated from jinglingInstituteoftechnology,which man is a coder like telling jokes">
<meta name="author" content="JeversonJee">
<link rel="stylesheet" href="JJTest.css" />
<link rel="icon" href="favicon" />
</head>
<body>
<form action="JJTest.php" method="post">
<fieldset>
<legend>Form表单控件</legend>
用户名:<input type="text" name="username" value="JeversonJee" maxlength="6" />
密 码:<input type="password" name="pwd" />
<input type="radio" name="gender" checked="checked" />男
<input type="radio" name="gender" />女
<select>
<option>北京</option>
<option>上海</option>
<option selected="selectd">广州</option>
</select>
<select mutiple="mutiple">
<option>南京</option>
<option>无锡</option>
<option>徐州</option>
<option>常州</option>
<option>苏州</option>
<option>南通</option>
<option>盐城</option>
<option>淮安</option>
<option>扬州</option>
<option>镇江</option>
<option>泰州</option>
<option selected="selected">宿迁</option>
</select>
<select>
<optgrpup label="一线城市">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</optiongroup>
<optgroup label="JiangsuProvince">
<option>南京</option>
<option>无锡</option>
<option>徐州</option>
<option>常州</option>
<option>苏州</option>
<option>南通</option>
<option>盐城</option>
<option>淮安</option>
<option>扬州</option>
<option>镇江</option>
<option>泰州</option>
<option>宿迁</option>
</optgroup>
</select>
<input type="checkbox" checked="checked" />吃
<input type="checkbox" checked="checked" />喝
<input type="checkbox" checked="checked" />嫖
<input type="checkbox" checked="checked" />赌
<textarea name="" rows="10" cols="130"></textarea>
<br />
<br />
<input type="file" />
<br />
<br />
<input type="submit" />
<br />
<br />
<input type="button" value="普通按钮名称" />
<br />
<br />
<input type="image" src="imageDirectory" />
<input type="reset" />
<!-- html 新特性 -->
<input type="url" />
<input type="date" />
<input type="time" />
<input type="email" />
<input type="number" />
<input type="range" />
</fieldset>
</form>
</body>
</html>
标签语义化
暂且使用间阳幕宾的总结
参考文档：间阳幕宾 HTML5之语义化标签 https://www.jianshu.com/p/c41b88217834
1436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
