「前端-HTML」 HTML-表格-表单-第二篇
前端-HTML-第二篇
这是HTML第二篇，共三篇，如需看其他篇请点击跳转
目录
- 前端-HTML-第二篇
- HTML 列表
- 1.无序列表
- 2.有序列表
- 3.自定义列表
- 其他
- pre标签
- HTML实体
- HTML 排版标签
- 标签的通用属性
- 1.id属性
- 2.class属性----类
- 3.name属性
- 4.style属性
- HTML 表格
- 1.相关标签汇总
- 2.对齐方式
- 3.单元格间距和填充
- 4.合并单元格
- 综合案例--个人简历
- HTML表单
- 表单域
- 表单元素
- 1.文本框
- 2.密码框
- 3.单选框
- 4.复选框
- 5.文件上传
- 6.普通按钮
- 7.提交按钮
- 8.重置按钮
- 9.下拉菜单
- 10.文本域
- 综合练习-基本提交页面
- HTML框架
- 1.使用的标签
- 上下显示
- 左右显示
- 2.框架嵌套
- 3.框架中跳转
- 4.内嵌框架
- iframe属性及解释
- 第二篇HTML标签-及属性总结一览表
- 总结：
HTML 列表
1.无序列表
如上图，无序列表就是项目中没有顺序的列表，前面用圆点进行标记。
语法：
<ul> <!-- ul:代表标签的模块，范围 --><li>这里写内容</li> <!-- li:代表列表的每一项 -->
</ul>
其中ul和li还有type类型就是列表类型，其中，ul为全局，li为单个
<li type="circle">这里写内容</li>
实心圆：disc （默认）
空心圆：circle
正方形：square
注：无序列表项里面至少有一个li标签，可以写多个，写无序列表前必须写ul，内容要写在li中
案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表</title>
</head>
<body><!--ul 为无序列表 type为无序列表的类型--><ul><li type="disc">iPhone12的5G有啥不一样?</li><li type="circle">中央政治局在学习的量子是个啥?</li><li type="square">北京年底计划完成5万5G基站建设</li><li>SpaceX再将60颗星链卫星送入太空</li></ul>
</body>
</html>
2.有序列表
如上图，项目中，前面带有数字，字母的，就是有序列表，有序列表是分前后顺序的
语法：
<ol><li>这里写内容</li>
</ol>
ol的属性 type：可以是数字、大小写字母、罗马数字start：属性是，开始，从第几个开始，这里填写数字，不是首写字母
案例
<!doctype html>
<html>
<head>
<meta charset="utf-8"><title>有序列表</title>
</head>
<body><!--ol 为有序号的列表 type是类型li为内容--><ol type="A" start="2"> <li> 云南男子离婚路上把夫妻扔下</li><li> 3500万存款"不翼而飞" 银行未</li><li> 轻松一刻：愚公"偷"山！小偷来回</li><li> 女面试官问我："我裤子拉链"</li></ol>
</body>
</html>
3.自定义列表
自定义列表就是可以自己定义，其中，其他频道为自定义列表的标题
语法：
<dl> <!-- 为自定义列表的范围，就是如上图框选的部分--><dt></dt> <!-- 为自定义列表的标题，也就是如上图的其他频道 --><dd></dd> <!-- 为自定义列表的内容，也就是如上图 体育、娱乐……--><dd></dd>
</dl>
案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义列表</title>
</head>
<body><dl><dt>其他频道</dt><dd>体育</dd><dd>娱乐</dd><dd>财经</dd><dd>汽车</dd></dl>
</body>
</html>
其他
pre标签
预排版标签：<pre></pre>
就是不打乱，你自己定义的排版
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>pre预排版标签</title>
</head><body><pre>上左 右下</pre>
</body>
</html>
案例
HTML实体
在HTML中，不能使用小于号（<）和大于号（>）,因为浏览器会解析为标签，就不会显示
实体：替换特殊字符的代码
所以引入了实体这个概念
语法：
表示：空格
< 小于号
> 大于号
常用实体字符
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格 |
|
|
| < | 小于号 |
<
|
| > | 大于号 |
>
|
| & | 和 |
&
|
| ￥ | 人民币 |
¥
|
| © | 版权 |
©
|
| ® | 注册商标 |
®
|
| ± | 正负号 |
±
|
案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实体</title>
</head><body><p>大小于号被解析了</p><p>大小于号</p>
</body>
</html>
HTML 排版标签
这两个标签没有语义，他们的显示方式不同，一个想象成盒子，另外一个只存放文字
div标签：一般用于存放图片、文字、视屏等网页内容----存放一切内容------用作盒子
span标签：一般只用于存放文字--------存放文字
<div>枫梓林</div>
<div>枫梓林的博客</div>
<span>此标签不换行</span>
<span>div换行</span>
标签的通用属性
1.id属性
id属性是标签的唯一标识，一个页面中可以有很多id属性，但是每个标签的id属性的值必须是唯一的，常用于javascript
2.class属性----类
通常用来使用class属性值给标签设置样式，样式一样的标签可以设置同样的class
3.name属性
设置标签的名字，可以有同样的名字，常用于表单中
4.style属性
设置标签样式 css
HTML 表格
表格很常用，用于排版，写日程表，课表等
1.相关标签汇总
| 标签 | 说明 |
|---|---|
<table></table>
|
表格 |
<tr></tr>
|
行 |
<td></td>
|
单元格 |
<th></th>
|
每列标题 |
<caption></caption>
|
表格标题 |
基本框架
<table border="1"> <!-- border="1" 为表格的表框，必须加在talbe上 --><caption>课程表</caption> <!-- 为标题注意：是嵌套在table中--><tr> <!-- 为行就是首行，相当于整个第一行 --> <th></th> <!-- 为单元格的首行 特点：字体加粗 --> <th>周一</th> <th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td>第一节</td> <!--单元格 就是把行分成列--><td>数学</td><td>语文</td><td>英语</td><td>化学</td><td>生物</td></tr> <tr><td>第二节</td><td>数学</td><td>语文</td><td>英语</td><td>化学</td><td>生物</td></tr></table>
2.对齐方式
（1）水平对齐
将单元格中的字体对齐，
可以对 talbe、tr、td、th，分别设置 tr为行的全局，其他为单个 对table设置align属性是将整个列表在页面中对其的方式
语法：align="center/left/right"居中/右/左
案例
（2）垂直对齐
将单元格的字体上下左右对齐
语法：valign="top/middle/bottom"顶部/中部/底部
3.单元格间距和填充
单元格间距（cellspacing）：单元格和单元格距离
单元格填充（cellpadding）：单元格和内容的距离
4.合并单元格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MndF2GVn-
导入：我们发现上方两个语文和两个生物是一样的我们可以像Excel一样进行合并
合并行(rowspan)：把不同的行合并起来，写在上面的单元格上面
合并列(colspan)：把不同列合并起来，写在左边的单元格上面
取值是数值，需要合并几个单元格就写数字几就行，一旦合并了单元格，就需要将多余的单元格删掉
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格的运用</title>
</head><body><table border="1" width="500" height="300"><caption>课程表</caption><tr><th></th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td>第一节</td><td>数学</td><td>语文</td><td>英语</td><td>化学</td><td>生物</td></tr> <tr><td>第二节</td><td rowspan="2">语文</td><td>英语</td><td>化学</td><td>生物</td><td>数学</td> <tr ><td>第三节</td><td>英语</td><td>化学</td><td colspan="2">生物</td></tr></table>
</body>
</html>
综合案例–个人简历
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>个人简历</title>
</head>
<body><table width="600" border=1 cellspacing=0 align="center"><caption><h2>个人简历</h2></caption><tr align="center"><td rowspan="5">个<br />人<br />资<br />料</td><td>姓名</td><td> </td><td>性别</td><td> </td><td>出生年月</td><td> </td><td rowspan="4">相片</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> </td></tr><tr align="center"><td>应聘职位</td><td colspan="6"></td></tr><tr align="center"><td>技能</td><td>外语水平</td><td colspan="2"></td><td>电脑水平</td><td colspan="3"></td></tr><tr align="center"><td rowspan="4">教<br>育<br>背<br>景</td><td colspan="2">起止日期</td><td colspan="2">毕业院校</td><td colspan="2">专业</td><td>详细情况</td></tr><tr align="center"><td colspan="2"> </td><td colspan="2"> </td><td colspan="2"> </td><td> </td></tr><tr align="center"><td colspan="2"> </td><td colspan="2"> </td><td colspan="2"> </td><td> </td></tr><tr align="center"><td colspan="2"> </td><td colspan="2"> </td><td colspan="2"> </td><td> </td></tr><tr align="center"><td rowspan="4">工<br>作<br>经<br>历</td><td colspan="2">起止日期</td><td colspan="2">公司名称</td><td colspan="3">主要职位及职责</td></tr><tr align="center"><td colspan="2"> </td><td colspan="2"> </td><td colspan="3"> </td></tr><tr align="center"><td colspan="2"> </td><td colspan="2"> </td><td colspan="3"> </td></tr><tr align="center"><td colspan="2"> </td><td colspan="2"> </td><td colspan="3"> </td></tr><tr align="center"><td rowspan="3">能<br>力<br>情<br>况</td><td colspan="2">个人荣誉</td><td colspan="5"> </td></tr><tr align="center"><td colspan="2">兴趣特长</td><td colspan="5"> </td></tr><tr align="center"><td colspan="2">个人期望</td><td colspan="5"> </td></tr><tr align="center"><td rowspan="4">自<br>我<br>评<br>价</td><td colspan="7" rowspan="4"></td></tr></table>
</body>
</html>
HTML表单
表单的作用是用来收集用户输入的信息，提交到服务器，如上图昵称、密码 +86 手机号码 立即注册 勾选对话框 都是表单
表单的组成：表单域和表单元素
表单域的标签：<form></form> ：用来放置表单的元素，
表单域
标签：<form></form>
标签：<form></form>
案例：
作用：将表单元素的值收集起来，发送给服务器，form标签的action属性的值就是数据提交的地址第一次提交，没有数据，因为很多表单元素都没有name属性，服务器接收数据靠的就是表单的name属性
注意：form是一个双标签，里面包含所有需要一次性提交给服务器的表单元素
<form>用户名：<input type="text" name="username" />密码：<input type="password" name="password" /><input type="submit" />
</form>
表单元素
1.文本框
特点：文本框，输入内容为明文，常用于提交用户名
语法：<input type="text">
<form>用户名：<input type="text" name="username" maxlength="6" />
</form>
2.密码框
特点：输入内容为密文，常用于提交密码等，属性和文本框用法一样
语法：<input type="password">
案例：
<form>密码：<input type="password" name="password">
</form>
3.单选框
只能选择一项的表单----性别选择
特点：只能选择一个，选择另外一个就不能选择另一个了（因为表单他是单独的，如果要想让他实现，点击另外一个，另外一个不选，就要，让两者建立关系，此时用name建立，并且名字要一样）无法输入的表单元素必须赋值：value“值” ，默认选中项使用chencked="checked"属性，就是在加载完页面默认选中表单
语法：<input type"radio" value="0">
案例：
<form><input type="radio" value="0" name="sex">男<input type="radio" value="1" name="sex" checked="checked">女
</form>
4.复选框
可以选择多项的表单、属性与单选框一样
语法：<input type="checkbox" value="0">
案例：
<form><input type="checkbox" />阿里巴巴<input type="checkbox" />百度<input type="checkbox" />腾讯
</form>
5.文件上传
提交文件到服务器
语法：<input type="file">
6.普通按钮
可编辑的按钮
语法：<input type="button" value="可以编辑提交内容">
7.提交按钮
提交表单按钮
语法：<input type="submit">
8.重置按钮
只重置当前重置按钮表单域中的内容
语法：<input type="reset>"
9.下拉菜单
通常用于选择城市，区等
10.文本域
就是贴吧的留言框如下
语法：<textarea></textarea>
案例
<form><textarea cols="40" rows="10"></textarea>
</form>
综合练习-基本提交页面
源码
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>注册</title>
</head>
<body><form action=""><table width="550" align="center"><caption><h4>请填写域名信息（请您务必填写真实，有效和完整的域名注册信息。）</h4></caption><tr><td align="right">登录账号： </td><td><input type="text" /></td></tr><tr><td align="right">密码： </td><td><input type="password" /></td></tr><tr><td align="right">性别： </td><td><input type="radio" name="sex" />男<input type="radio" name="sex" />女</td></tr><tr><td align="right">注册网址： </td><td><input type="text" value="www." /></td></tr><tr><td align="right">注册网址后缀： </td><td><input type="checkbox" name="suffix" checked="checked" />.com<input type="checkbox" name="suffix" checked="checked" />.cn<input type="checkbox" name="suffix" checked="checked" />.net<input type="checkbox" name="suffix" checked="checked" />.org</td></tr><tr><td align="right">域名持有者（中文）： </td><td><input type="text" /></td></tr><tr><td align="right">域名持有者（拼音文）： </td><td><input type="text" /></td></tr><tr><td align="right">所属区域： </td><td><select><option value="">中国</option><option value="">美国</option><option value="">英国</option><option value="">法国</option></select><select><option value="">-省份-</option><option value="">河南省</option><option value="">安徽省</option><option value="">江苏省</option></select></td></tr><tr><td align="right">单位所在地： </td><td><input type="text" /></td></tr><tr><td align="right">单位负责人： </td><td><input type="text" /></td></tr><tr><td align="right">通信地址： </td><td><input type="text" /></td></tr><tr><td align="right">联系电话： </td><td><input type="text" /></td></tr><tr><td></td><td><input type="submit" /><input type="reset" /></td></tr></table></form>
</body>
</html>
HTML框架
如上图：CSDN主页运用了很多框架来定义页面布局，在每一个框架中，放页面，可以来实现不同效果
1.使用的标签
<frameset>:框架集，rows属性设置框架分几行显示，cols属性设置框架分几列显示；
<frame>：框架，src属性是引入要显示的页面
注：框架页面中不能出现body标签可以用<noframes></noframes>
上下显示
语法：
<frameset rows="100,*,10"> <!-- 100.为第一个页面高度为100 ，* 为第二个页面高度是剩下两个页面的值，10为第三个页面高度为10--><frame src="引入的页面1"> <!--这个页面是存放在其他页面，也可以是百度，也可以是自己写的--><frame src="引入的页面2"><frame src="引入的页面3">
</frameset>
案例1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>框架</title>
</head><frameset rows="100,*,100"><frame src="a页面.html"><frame src="b页面.html"><frame src="c页面.html"></frameset><noframes></noframes>
</html>
左右显示
用法和上下显示差不多，只是把rows换成了cols
案例2
2.框架嵌套
3.框架中跳转
案例：比如我在a页面上写一个 超链接跳转到百度，我让他在c页面显示，
全画面
a页面画面
4.内嵌框架
就是在页面中嵌套的框架，框架可以改变大小
<iframe src="http://www.baidu.com" width="500" height="200" marginwidth="0" marginheight="0" frameborder="0"></iframe>
iframe属性及解释
| 属性 | 说明 |
|---|---|
src
|
内嵌框架中存放的页面 |
width和height
|
内嵌框架的宽度和高度 |
marginwidth
|
内嵌框架中的页面距离内嵌框架的宽度 |
marginheight
|
内嵌框架中的页面距离内嵌框架的高度 |
frameborder
|
内嵌框架边框 |
第二篇HTML标签-及属性总结一览表
总结：
今天学习了，两个重点，表格和表单，还有列表，建议慢慢按照步骤来，不要急。
相关系列
第一篇：「前端-HTML」 HTML-标签的基本使用-第一篇
第二篇：「前端-HTML」 HTML-表格-表单-第二篇
第三篇：「前端-HTML」 HTML-H5-新特性-第三篇
创作不易，感谢支持，转载请联系我fengzilin_blog@163.com，我是枫梓林
「前端-HTML」 HTML-表格-表单-第二篇相关推荐
- 2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单 标签 图片 图片<img src="#" alt="文本说明 不能加载图片时显示" title= ...
- 【4001】通过html做一个静态页面的表格表单，嘿嘿。
学习目标: [ 1]学习前端第一天掌握 html(主要表单表格相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知识做静态页面表格表单完成效果,效果图如下: 表单不加颜色是这样的,自己看着设计: ...
- 定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
- 「前端工程化」该怎么理解？
大家好,我是若川.今天分享一篇「前端工程化」的好文.非广告,请放心阅读.可点击下方卡片关注我,或者查看系列文章.今天发文比较晚,以往都是定时早上7:30发文,也不知道是不是有点早. 一.什么是前端工程 ...
- 前端_网页编程 Form表单与模板引擎（下）
目录 续上一篇 6. 模板引擎的实现原理 6.1 正则与字符串操作 6.1.1 基本语法 6.1.2 分组 6.1.3 字符串的replace函数 6.1.4 多次replace 6.1.5 使用wh ...
- 前端_网页编程 Form表单与模板引擎（中）
目录 ... ... (续上篇) 四.模板引擎的基本概念 1.定义 2. 优点 五.art-template模板引擎 1.art-template模板引擎介绍 2. art-template的安装 3 ...
- 前端_网页编程 Form表单与模板引擎（上）
目录 一.form表单的基本使用 1. 什么是表单? 2. 表单的组成部分 3. < form>标签的基本属性 3.1 action 3.2 target 3.3 method 3.4 e ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
- vue.js 表格表单序号
vue.js 表格表单序号 表格是动态的,通过v-for="(item,index) in sites" 循环出来的表格 ,通过index属性,实现表格序号自增, 结合页码和每页数 ...
最新文章
- iOS项目的本地化处理（多国语言）
- .net通过获取客户端IP地址反查出用户的计算机名
- OpenCv 005---图像像素的算术操作
- JS动态添加多个事件
- reids 源码 zipmap.c 压缩map的实现
- 滴滴出行的数据架构和信息流处理思路解析
- UE4中Bebavior Tree中Delay及其后面代码失效的原因
- 软硬负载之间的对比及优缺点
- vscode代码编辑框控件_vscode编辑器的使用及插件
- 出租车GPS数据处理
- android 蓝牙播放器,Android 蓝牙音乐播放器
- AD工程文件与原理图、PCB文件的储存关系
- 【电脑配置】开发人员必备，黑苹果双系统安装教程
- VSCode svn忽略文件提交
- vue点击按钮打开下拉菜单_vue+element下拉框样式的点击按钮
- linux限制进程带宽,再Linux系统中限制网络带宽使用的教程
- §1.1自然数 上•序数理论
- JS String.toDate
- 防止表单重复提交的实现方法！
- 几种android实时视频网络传输方案比较