「前端-HTML」 HTML-表格-表单-第二篇

it2023-09-16 80

前端-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>  <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> <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="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>表格标题

基本框架

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标签的action属性的值就是数据提交的地址第一次提交，没有数据，因为很多表单元素都没有name属性，服务器接收数据靠的就是表单的name属性

注意：form是一个双标签，里面包含所有需要一次性提交给服务器的表单元素

表单元素

1.文本框

特点：文本框，输入内容为明文，常用于提交用户名

语法：<input type="text">

2.密码框

特点：输入内容为密文，常用于提交密码等，属性和文本框用法一样

语法：<input type="password">

案例：

3.单选框

只能选择一项的表单----性别选择

特点：只能选择一个，选择另外一个就不能选择另一个了（因为表单他是单独的，如果要想让他实现，点击另外一个，另外一个不选，就要，让两者建立关系，此时用name建立，并且名字要一样）无法输入的表单元素必须赋值：value“值” ，默认选中项使用chencked="checked"属性，就是在加载完页面默认选中表单

语法：<input type"radio" value="0">

案例：

4.复选框

可以选择多项的表单、属性与单选框一样

语法：<input type="checkbox" value="0">

案例：

5.文件上传

提交文件到服务器

语法：<input type="file">

6.普通按钮

可编辑的按钮

语法：<input type="button" value="可以编辑提交内容">

7.提交按钮

提交表单按钮

语法：<input type="submit">

8.重置按钮

只重置当前重置按钮表单域中的内容

语法：<input type="reset>"

9.下拉菜单

通常用于选择城市，区等

10.文本域

就是贴吧的留言框如下

语法：<textarea></textarea>

案例

综合练习-基本提交页面

源码

<!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框架

如上图：主页运用了很多框架来定义页面布局，在每一个框架中，放页面，可以来实现不同效果

1.使用的标签

<frameset>:框架集，rows属性设置框架分几行显示，cols属性设置框架分几列显示；

<frame>：框架，src属性是引入要显示的页面

注：框架页面中不能出现body标签可以用<noframes></noframes>

上下显示

语法： <frameset rows="100,*,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内嵌框架中存放的页面width和height内嵌框架的宽度和高度marginwidth内嵌框架中的页面距离内嵌框架的宽度marginheight内嵌框架中的页面距离内嵌框架的高度frameborder内嵌框架边框

第二篇HTML标签-及属性总结一览表

总结：

今天学习了，两个重点，表格和表单，还有列表，建议慢慢按照步骤来，不要急。相关系列第一篇：「前端-HTML」 HTML-标签的基本使用-第一篇第二篇：「前端-HTML」 HTML-表格-表单-第二篇第三篇：「前端-HTML」 HTML-H5-新特性-第三篇创作不易，感谢支持，转载请联系我fengzilin_blog@163.com，我是枫梓林

最新回复(0)