（2）前端-初识HTML与CSS-table、form标签

table-表格标签

作用

用来给一堆数据添加表格语义

宽高

table 表格的宽高

tr th td 单元格的宽高

都属于块级元素，宽默认为100%，高由内容撑起

水平垂直对齐

水平方向 align — left center right
table 表格
tr td 单元格内容
垂直方向 valign — top mid bottom
tr td 单元格内容

<!-- table标签就是一个表格 --><!-- align="center" 表格水平居中 --><table border="1" width="300" height="200" align="center" cellspacing="10" cellpadding="20"><!-- 每一个tr标签就是一行 --><!-- align="center" 单元格内容水平居中 --><!--tr与th搭配用来表示表头，字体为居中的粗体文本tr与td搭配用来表示表体，字体为左对齐的普通文本
--><tr align="center"><!-- th标签 文字加粗 居中显示 --><th>姓名</th><th>年龄</th><th>身高</th></tr><tr align="center"><!-- 每一个td标签就是一行中的一个单元格 或 一列 --><td align="left" valign="top">张三</td><td>29</td><td>190cm</td></tr></table>
<!-- 细线表格 添加一个CSS样式 -->
<table border="1" style="border-collapse: collapse;"><tr align="center"><th>姓名</th><th>年龄</th><th>身高</th></tr>
</table>

表格外边距内边距(在元素中为margin、padding)

cellspacing外边距单元格和单元格之间的距离默认2px
cellpadding内边距单元格的边框和文字之间的间隙默认1px

表格完整结构

标题caption 表头thead,th 主体tbody,td 附加tfoot

<!-- caption作用: 指定表格的标题thead作用: 指定表格的表头信息tbody作用: 指定表格的主体信息tfoot作用: 指定表格的附加信息--><table align="center" border="2"><!-- 标题 --><caption>个人信息</caption><!-- 表头信息 --><thead><!-- 千万不要忘了tr标签 --><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><!-- 表体信息 --><tbody><tr><td>张三</td><td>29</td><td>男</td></tr></tbody><!-- 表尾信息 --><tfoot></tfoot></table>

单元格合并

水平方向合并列 colspan
垂直方向合并行 rowspan

<table border="1"><tr align="center"><th colspan="2">姓名</th><th rowspan="2">年龄</th></tr><tr align="center"><td>张三</td><td>29</td></tr></table>

form-表单标签

表单的格式

<form action="提交的服务器接口地址"><表单元素></form>

input标签

name:表单提交时，会作为参数的名称，结合输入的值进行匹配，组成参数名=参数值的结构
placeholder:提示

 <!-- 明文输入框 -->账号:<input type="text" name="account" value="" id=""><br><!-- 暗文输入框 -->密码:<input type="password" name="password" id="">

    <!-- 单选按钮 --><input type="radio" name="gender" id="" value="male" checked>男<br><input type="radio" name="gender" id="" value="female">女<br>

    <!-- 文件选择器 --><input type="file" name="file" id=""><br>

    <!-- 提交按钮 --><!-- 当我们点击submit按钮时，收集当前表单元素中所有表单的值，进行参数传递，传递给action中的服务器接口 --><input type="submit" value="提交"><br><!-- 要想把表单中填写好的数据提交到远程服务器, 必须具备两个条件1.form表单添加一个action属性, 指定需要提交到的服务器地址。2.给要提交的表单元素添加一个name属性。 -->

  <!-- 普通按钮 --><input type="button" value="我是一个普通按钮"><br>

    <!-- 重置按钮 清空表单 --><input type="reset" value="重置"><br>

 <!-- 图片按钮  --><input type="image" src="">

 <!-- 复选框 --><input type="checkbox" name="xxx" value="xxx" checked><!-- 多选框默认选中 checked -->

 <!-- 隐藏域 --><input type="hidden" name="userid" value="123456"><br>

其他表单元素

label

  <!-- label --><!-- 通过for属性绑定了account，则选择该标签，对应输入框也被选中 --><label for="account">账号</label><input type="text" id="account"><br>

select

作用: 用于定义下拉列表

<!-- select 下拉列表 --><select name="" id=""><optgroup label="水果"><option value="">苹果</option><option value="">梨子</option><option value="">桃子</option></optgroup><optgroup label="粉"><option value="">螺蛳粉</option><option value="">老友粉</option><option value="">桂林米粉</option></optgroup></select><br>

textarea

作用: 定义一个多行输入框

 <textarea name="" id="" cols="30" rows="10"></textarea>

fieldset组件

用于在一个web表单中对多个控件和标签进行分组

<form action=""><fieldset><legend>请登录</legend>账号:<input type="text"><br>密码:<input type="password"><input type="submit"></fieldset></form>

HTML5新增表单元素

datalist

作用: 给输入框绑定待选项

<!--给输入框添加一个list属性,将datalist的id对应的值赋值给list属性-->
<input type="text" list="username">
<datalist id="username"><option>zhangsan</option><option>lisi</option><option>wangwu</option>
</datalist>

progress 进度条

<progress value="70" max="100">70%</progress>

邮箱输入框

邮箱:<input type="email" name="" id="">

时间选择器

<input type="date" name="endTime" id="">

设色器

<input type="color">

提交按钮

<input type="submit" value="提交">

练习

制作一份个人简历

    /*css样式*/table {border-collapse: collapse;}td {width: 100px;height: 33px;}

<!-- body中的内容 -->
<b><table border="1" cellspacing="0" cellpadding="5"><caption><h1>个人简历</h1></caption><tr align="center"><td>学院</td><td></td><td>性别</td><td></td><td>出生年月</td><td></td><td rowspan="3"><img src="图片.png" width="100%" alt=""></td></tr><tr align="center"><td>身份证号码</td><td></td><td>民族</td><td></td><td>政治面貌</td><td></td></tr><tr align="center"><td>婚姻状况</td><td></td><td>健康状况</td><td></td><td>身高</td><td></td></tr><tr align="center"><td>现户口所在地</td><td></td><td>所学专业</td><td></td><td>学历</td><td colspan="2"></td></tr><tr align="center"><td>最后毕业学校</td><td></td><td>毕业时间</td><td></td><td>技术职称</td><td colspan="2"></td></tr><tr align="center"><td>现工作单位</td><td></td><td>参加工作时间</td><td></td><td>现从事专业</td><td colspan="2"></td></tr><tr align="center"><td rowspan="6">主要简历</td><td colspan="2">起止年月</td><td colspan="2">在何单位</td><td colspan="2">任何职务</td></tr><tr align="center"><td colspan="2"></td><td colspan="2"></td><td colspan="2"></td></tr><tr align="center"><td colspan="2"></td><td colspan="2"></td><td colspan="2"></td></tr><tr align="center"><td colspan="2"></td><td colspan="2"></td><td colspan="2"></td></tr><tr align="center"><td colspan="2"></td><td colspan="2"></td><td colspan="2"></td></tr><tr align="center"><td colspan="2"></td><td colspan="2"></td><td colspan="2"></td></tr><tr align="center"><td>业务专长及工作成果</td><td colspan="6"></td></tr><tr align="center"><td>通讯地址</td><td colspan="2"></td><td>邮政编码</td><td colspan="3"></td></tr><tr align="center"><td>联系电话</td><td colspan="2"></td><td>Email地址</td><td colspan="3"></td></tr></table></b>

（2）前端-初识HTML与CSS-table、form相关推荐

前端基础知识总结---CSS篇
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出! 目录 1.介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的? 2.CSS 选 ...
Web前端之浅谈css
Web前端之浅谈CSS CSS 什么是CSS? CSS的三种引用方式 CSS常用选择器介绍选择器权重字体属性文本属性元素分类 display属性: 块状元素行内元素行内块元素盒模型内边 ...
寒假中前端学习归档html/css
寒假中前端学习归档html/css 001blog: <!DOCTYPE html> <html><head><meta charset="utf- ...
小蓝同学的前端之旅--HTML\CSS集成复习
小蓝同学的前端之旅--HTML\CSS集成复习前端学习路线复习模式 api的重要性 HTML基础总结 head标签的常用标签 body标签中常用标签文本元素标签表格标签表格分组框架表单 ...
前端基础HTML和css总结
HTML[Hyper Text Markup Language] 超文本标记语言,不是编程语言软件架构: 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端 ...
16.JAVA之前端，HTML，CSS(选择器，盒子模型)，JS，JQuery，Json，ajax
一.Web前端技术栈 1.HTML超文本标记语言实现页面展现,形成静态网页 2.CSS层叠样式表实现页面美化 3.JS javascript脚本语言实现 ...
Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1．高度塌陷举个例子我们看一下. 我们在 ...
一个div 上下两行_web前端工程师如何理解 CSS 布局和块级格式化上下文
CSS是web前端中的重要内容,很多初学者在学习CSS时都会遇到各种各样的问题,今天就给大家分享web前端开发如何理解CSS不惧和块级格式化上下文.也许你从未听说过这个术语,但是如果你曾经用 CSS ...

（2）前端-初识HTML与CSS-table、form