【不务正业】之前端HTML基础（二）

表格

写法:<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" />密&nbsp;码:<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="data: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

【不务正业】之前端HTML基础（二）相关推荐

前端实现可绘制的canvas画布_前端图形学基础（五）——Canvas状态管理
点击右上角的关注,不定期前端干货分享!! 欢迎来到我的前端图形学系列文章: 前端图形学基础(一)--Canvas基础入门前端图形学基础(二)--Canvas基础前端图形学基础(三)--Canvas ...
ie9无法获取未定义或 null 引用的属性“indexof”_前端JS基础篇（二）JS基本数据类型和引用数据类型及检测数据类型方法...
JS中的数据类型 (一).基本数据类型(值类型) 1.number:数字 -12.12.5.-12.5 0这些数字都是number: js中增加了一个number类型的数据:'NaN' typeof ...
前端总结·基础篇·CSS（二）视觉
前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
eclipese web前端开发教学_Web前端零基础好学吗？新手该怎么学？
众所周知,Web前端是现在很火的行业,找工作的人也多,招聘的公司也多,工作环境也好,各招聘公司给的工资也高,这么火热的行业还是供不应求. Web前端市场的供不应求直接导致前端工程师的待遇提高,另外一方 ...
Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
前端零基础入门_000_前言
适合人群本课程适合下面人群: 1)在校学生,想学习前端开发.将来从事前端开发工作.教程详细系统的讲解了前端基础,还讲解了相关的原理. 2)在职人士,想转行前端.教程提供了大量的案例实践,方便快速上手 ...
iOS开发面试知识整理 – OC基础 (二)
iOS | 面试知识整理 – OC基础 (二) 1.C和 OC 如何混编 xcode可以识别一下几种扩展名文件: .m文件,可以编写 OC语言和 C 语言代码 .cpp: 只能识别C++ 或者C语言 ...
Web前端技术基础实验报告三之超链接与多媒体文件应用
目录 Web前端技术基础实验报告实验题目:超链接与多媒体文件应用实验目的:熟悉超链接与多媒体文件的插入的相关标签实验内容 : 实验过程及结果 Web前端技术基础实验报告实验题目:超链接与多媒体 ...

【不务正业】之前端HTML基础（二）

表格

表单

标签语义化

【不务正业】之前端HTML基础（二）相关推荐

最新文章

热门文章