Html

1、div 与 span 标签
2、表格标签
3、表格标签示例
4、表单标签
5、表单提交的那些事儿

前一篇文章：前端 Html 介绍

1、div 与 span 标签

div 标签

块元素，表示一块内容
唯一的格式就是换行
常结合 CSS 用于页面布局

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><div>我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你</div><div>我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你</div><div>我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你</div><p>我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你</p><p>我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你</p><p>我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你</p>
</body>
</html>

在浏览器中打开

span 标签

行内元素，内容有多宽就占有多宽的空间距离
常用于修饰段落中局部样式

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><div><h1>甜草莓的秘密</h1><p>每一颗草莓都晶莹饱满、红艳欲滴、吃在嘴里特别甜</p></div>
</body>
</html>

在浏览器中打开

利用 span 标签修饰段落标签（p）内的内容（草莓）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><div><h1>甜草莓的秘密</h1><p>每一颗<span style="color: pink">草莓</span>都晶莹饱满、红艳欲滴、吃在嘴里特别甜</p></div>
</body>
</html>

在浏览器中打开

2、表格标签

表格（table）
行（tr）
列（td）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><!-- 1. 表格 --><table><!-- 2. 第一行 --><tr><!-- 3. 第一行第一列 --><td>i</td><!-- 4. 第一行第二列 --><td>love</td><!-- 5. 第一行第三列 --><td>you</td></tr><!-- 6. 第二行 --><tr><!-- 7. 第二行第一列 --><td>you</td><!-- 8. 第二行第二列 --><td>love</td><!-- 9. 第二行第三列 --><td>me</td></tr></table>
</body>
</html>

在浏览器中打开

表格的边框呢！谁会对没有边框的表格感到青睐啊！

于是我们新加入一个参数（border）
边界像素为 1（border=1）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><table border="1"><tr><td>i</td><td>love</td><td>you</td></tr><tr><td>you</td><td>love</td><td>me</td></tr></table>
</body>
</html>

在浏览器中打开

不过，我们仔细想一想，表格一般都有一个明显的表头啊！

表头（th）为黑体显示
列（td）为常规显示

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><table border="1"><tr><th>who</th><th>what</th><th>who</th></tr><tr><td>i</td><td>love</td><td>you</td></tr><tr><td>you</td><td>love</td><td>me</td></tr></table>
</body>
</html>

在浏览器中打开

总感觉这表格还是不尽人意，我们再次对它进行调整！

表格参数（width，height）
宽为 200 像素（width=200px）
高为 200 像素（height=200px）
列参数（即内容参数 align）
内容居中：align="center"
内容居左：align="left"
内容居右：align="right"

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><table border="1" width="200px" height="200px"><tr><th>who</th><th>what</th><th>who</th></tr><tr><td align="center">i</td><td align="left">love</td><td align="right">you</td></tr><tr><td align="center">you</td><td align="left">love</td><td align="right">me</td></tr></table>
</body>
</html>

额外介绍一下另一个参数

列参数（valign）
内容居表格顶部：valign="top"
内容居表格中部：valign="middle"
内容居表格底部：valign="bottom"

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><table border="1" width="200px" height="200px"><tr><th>who</th><th>what</th><th>who</th></tr><tr><td align="center" valign="top">i</td><td align="left" valign="bottom">love</td><td align="right" valign="middle">you</td></tr><tr><td align="center">you</td><td align="left">love</td><td align="right">me</td></tr></table>
</body>
</html>

在浏览器中打开

3、表格标签示例

表格边框（border）
表格宽度（width）
表格高度（height）
表头标签（th）
行元素（tr）
列元素（td）

与之前的代码不同的是，此处用到了合并

垂直合并（rowspan）
水平合并（colspan）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><table border="1" width="200px" height="200px"><tr><!-- 1. 垂直合并 2 个单位--><th rowspan="2">姓名</th><!-- 2. 水平合并 2 个单位 --><th colspan="2">爱好</th><!-- 3. 被行元素(爱好)合并<th></th> --></tr><tr><!-- 4. 被元素(姓名)垂直合并 <td></td> --><td align="center">萝卜</td><td align="center">青菜</td></tr><tr><td align="center">susu</td><td align="center">是</td><td></td></tr><tr><td align="center">keke</td><td></td><td align="center">是</td></tr></table>
</body>
</html>

在浏览器中打开

4、表单标签

表单标签（form）
表单文字标注标签（label）
表格单标签（input）
明文输入框（text）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><form><label>用户名：</label><input type="text"></form>
</body>
</html>

在浏览器中打开

我们增加代码的复杂程度，让表单更为复杂！

密文输入框（password）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><form action="" method="post"><!-- 1. div 包裹 单行显示 --><div><label>用户名：</label><input type="text"></div><div><!-- 2. 添加空格让输入框上下对应 --><label>密&nbsp&nbsp&nbsp码：</label><input type="password"></div>   </form>
</body>
</html>

在浏览器中打开

我们新建文件创建一个单选框

单选框（radio）
属性（name）认为二个单选框是一组单选框，只能二选一

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><form><div><label>喜&nbsp&nbsp&nbsp欢：</label><input type="radio" name="love"><label>apple</label><input type="radio" name="love"><label>pie</label></div></form>
</body>
</html>

在浏览器中打开

我们对单选框进行优化，在我们点击文字的时候，单选框也被选中

文字标注（label）的（for）属性与单选框（radio）的（id）属性绑定
单击文字标注的时候，单选框也被点击

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><form><div><label>喜&nbsp&nbsp&nbsp欢：</label><label for="love1"><input type="radio" name="love" id="love1">apple</label><label for="love2"><input type="radio" name="love" id="love2">pie</label></div></form>
</body>
</html>

我们新建文件创建一个多选框

多选框（checkbox）
属性（name）认为三个多选框是一组多选框

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><form><div><label>喜&nbsp&nbsp&nbsp欢：</label><label for="love1"><input type="checkbox" name="love" id="love1">apple</label><label for="love2"><input type="checkbox" name="love" id="love2">pie</label><label for="love3"><input type="checkbox" name="love" id="love3">watermelon</label></div></form>
</body>
</html>

我们新建文件创建一个多行文本输入框

多行文本框（textarea）
初始创建宽（cols）
初始创建高（rows）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><form><textarea cols="80" rows="20"></textarea></form>
</body>
</html>

在浏览器中打开

我们新建文件创建一个下拉框

下拉框（select）
选项（option）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><form><label>口味：</label><select><option>甜甜</option><option>酸酸</option><option>苦苦</option><option>辣辣</option></select></form>
</body>
</html>

在浏览器中打开

5、表单提交的那些事儿

单标签提交属性（submit）
单标签属性（value）修改提交按钮的标注（默认为提交）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><form action="" method="post"><div><label>用户名：</label><input type="text"></div><div><label>密&nbsp&nbsp&nbsp码：</label><input type="password"></div>  <div><input type="submit" value="快提交！"></div></form>
</body>
</html>

在浏览器中打开

特别注意

需要提交表单的时候，需要用到属性（name）
属性（action）定义表单数据提交地址（默认为当前页面）
属性（method）定义表单数据提交方式（get/post）
属性（post）更为安全，采用（http）协议加密传输

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><form action="" method="get"><div><label>用户名：</label><input type="text" name="用户名"></div><div><label>密&nbsp&nbsp&nbsp码：</label><input type="password" name="密码"></div>    <div><input type="submit" value="快提交！"></div></form>
</body>
</html>

在浏览器中进行如下操作
输入用户名（susu）
输入密码（love）
点击提交按钮

采用（post）协议传输

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><form action="" method="post"><div><label>用户名：</label><input type="text" name="用户名"></div><div><label>密&nbsp&nbsp&nbsp码：</label><input type="password" name="密码"></div>   <div><input type="submit" value="快提交！"></div></form>
</body>
</html>

在浏览器中进行如下操作
输入用户名（susu）
输入密码（love）
点击提交按钮

前端 Html 基础相关推荐

eclipese web前端开发教学_Web前端零基础好学吗？新手该怎么学？
众所周知,Web前端是现在很火的行业,找工作的人也多,招聘的公司也多,工作环境也好,各招聘公司给的工资也高,这么火热的行业还是供不应求. Web前端市场的供不应求直接导致前端工程师的待遇提高,另外一方 ...
Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
移动前端开发基础与优化
移动前端开发基础与优化 http://qywx.gitcafe.io/2014/11/22/%E7%A7%BB%E5%8A%A8%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91 ...
前端---JavaScript基础4
文章目录前端---JavaScript基础3 call&apply 原型链原型链操作例子:按钮组件封装:(类似于Bootstrsp里的按钮组件封装) 前端-JavaScript基础3 c ...
前端---JavaScript基础3
文章目录前端---JavaScript基础3 普通对象与函数对象原型及属性判断构造函数继承原型继承组合继承寄生组合式继承前端-JavaScript基础3 普通对象与函数对象原型及属性判 ...
前端---JavaScript基础2
文章目录前端---JavaScript基础2 对象类型判断 call函数对象属性操作深拷贝方法前端-JavaScript基础2 重构以下代码:(以面向对象的方式) 重构后:(其中this指针问 ...
前端---JavaScript基础1
文章目录前端---JavaScript基础1 数据类型面向对象对象创建方式对象类型判断前端-JavaScript基础1 JS是解释型语言:跨平台慢编译型语言:不能跨平台快数据类型 ...
ie9无法获取未定义或 null 引用的属性“indexof”_前端JS基础篇（二）JS基本数据类型和引用数据类型及检测数据类型方法...
JS中的数据类型 (一).基本数据类型(值类型) 1.number:数字 -12.12.5.-12.5 0这些数字都是number: js中增加了一个number类型的数据:'NaN' typeof ...
前端实现可绘制的canvas画布_前端图形学基础（五）——Canvas状态管理
点击右上角的关注,不定期前端干货分享!! 欢迎来到我的前端图形学系列文章: 前端图形学基础(一)--Canvas基础入门前端图形学基础(二)--Canvas基础前端图形学基础(三)--Canvas ...
前端总结·基础篇·CSS（二）视觉
前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

前端 Html 基础