JavaEE-HTML常用标签了解(二)

表格标签

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域.

<table  border="1"  width="500"height="500">  <!-- border表示边框,width与height表示表格尺寸 -->
<tr >
<th>th</th>
<th>th</th>
<th>th</th>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr><td>td</td><td>td</td><td>td</td>
</tr>
<tr><td>td</td><td>td</td><td>td</td>
</tr></table>
</body>

table 包含 tr , tr 包含 td 或者 th

合并单元格

跨行合并: rowspan=“n”
跨列合并: colspan=“n”

合并单元格一般需要一下几个步骤:
1.先确定跨行还是跨列
2.找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
3.然后删除多余的单元格

将上面的代码进行改动:

 <table  border="1"  width="500"height="500">   <!-- border表示边框,width与height表示表格尺寸 --><tr >
<th  colspan="3">th</th></tr>
<tr>
<td rowspan="3">td</td>
<td rowspan="3">td</td>
<td rowspan="3">td</td>
</tr>
<tr></tr>
<tr></tr></table>

将内容相同的表格全部进行了合并.

列表标签

无序列表 ul(Unordered List),li(List Item)
有序列表 ol(Ordered List),li(List Item)
自定义列表 dl(总标签),dt(小标题),dd(围绕标题来说明)

<ul>五一假期你会去干嘛<li>宅家</li><li>旅游</li><li>未知</li></ul><ol>五一假期你会去干嘛<li>宅家</li><li>旅游</li><li>未知</li></ol><dl><dt>五一假期你会去干嘛</dt><dd>宅家</dd><dd>旅游</dd><dd>未知</dd></dl>

ul/ol 中只能放 li 不能放其他标签, dl 中只能放 dt 和 dd

表单标签

表单控件: 输入框, 提交按钮等. 重点是 input 标签

type:取值种类有很多, button, checkbox, text, file, image, password, radio 等
name:给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一
value: input 中的默认值
checked:默认被选中
maxlength: 设定最大长度

1.文本框

请输入你的姓名:  <input type="text">

2. 密码框

请输入你的密码:  <input type="password">

3. 单选框

性别:<input type="radio" name="sex" >男<input type="radio" name="sex" checked="checked" >女<!-- checked="checked"  指定默认是女 --><input type="radio" name="sex"> 未知

4. 复选框

五一假期要去干嘛?<input type="checkbox"> 宅家<input type="checkbox"> 旅游<input type="checkbox"> 没确定

5. 普通按钮

<input type="button" value="按钮">

6.选择文件

  <input type="file">

select 标签
下拉菜单

<select ><option value="地址">北京</option><option value="地址">上海</option><option value="地址"  selected="selected">西安</option>  <!-- option 中定义 selected="selected" 表示默认选中 --></select>

无语义标签

div 标签, division 的缩写, 含义是分割
span 标签, 含义是跨度

两个盒子,用于网页布局.
div 是独占一行的, 是一个大盒子
span 不独占一行, 是一个小盒子

 <div><span>啦啦</span><span>啦啦</span></div><div><span>啦</span><span>啦</span><span>啦</span></div>

HTML特殊字符

有些特殊的字符在 html 文件中是不能直接表示的(例如在html文件中空格打许多个但是在网页里只显示一个)

空格: &nbsp;
小于号: &lt;
大于号: &gt;
按位与: &amp;

JavaEE-HTML常用标签了解(二)相关推荐

HTML常用标签（二）
HTML常用标签锚点链接标签 base标签 pre标签特殊字符锚点链接标签锚点链接: 作用: 通过锚点链接可以快速定位到我们想要的内容,一般当一张网页比较长时我们会使用这标签对内容进行定位. ...
HTML5 的知识分享（二）：HTML5 的常用标签
经过我的上一篇博客可以让大家简单地了解了一下 HTML5 的基础标签,现在再和大家分享一下 HTML5 的常用标签吧基础标签与常用标签的主要区别在于:要先有基础标签的基础才可以灵活的使用常用标签. ...
HTML(一、语法规范，二、结构标签，三、开发工具，四、HTML常用标签，五、注释和特殊字符)
文章目录前言一.html语法规范 1. html基本语法规范 2. 标签关系二.基本结构标签 1. 第一个 HTML 网页 2. 基本结构标签总结: 三.开发工具 1. vscode工具的创建工 ...
前端 | （二）各种各样的常用标签 | 尚硅谷前端html+css零基础教程2023最新
学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频系列笔记: [HTML4](一)前端简介 [HTML4](二)各种各样的常用标签 [HTML4](三)表单 ...
滚动屏幕显示隐藏div_HTML结构-常用标签：a·img·table·form·input·iframe·div
学习目标: 掌握html的结构,head与body的区别掌握常用标签掌握a标签,img标签掌握table标签掌握form标签,input标签掌握iframe 和frameSet标签掌握di ...
HTML5的基础知识的梳理及常用标签
HTML5的基础知识的梳理及常用标签 1.HTML5的介绍前端:展示页面.与用户交互 - HTML 后端:数据的交互和传递 - JavaEE/JavaWeb 1.前端开发的工作模式网页的组成部分( ...
mybatis常用标签和动态查询
这里是修真院后端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析后端知识/技能,本篇分享的是: [mybatis ...
web.xml 常用标签配置（转）
2019独角兽企业重金招聘Python工程师标准>>> 1.Web.xml作用: 每一个javaWeb工程都有一个web.xml配置文件,web.xml文件是用来初始化工程配置信息的 ...
html(常用标签)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>常用标 ...

JavaEE-HTML常用标签了解(二)

目录

表格标签

合并单元格

列表标签

表单标签

无语义标签

HTML特殊字符

JavaEE-HTML常用标签了解(二)相关推荐

最新文章

热门文章