列表标签 ul ol dl
列表标签分为三种:
无序列表 ul
有序列表 ol
定义列表 dl
无序列表, 无序列表中的每一项是
效果:

立即学习“前端免费学习笔记(深入)”;
注意:
li 不能单独存在,必须包裹在ul里面;反过来说,ul的“儿子”不能是别的东西,只能有li。
ul的作用,并不是给文字增加小圆点的,而是增加无序列表的“语义”的。
属性
type=”属性值”。 属性值可以选:disc(实心圆点,默认),square(实心方点),circle(空心圆)
效果如下:

有序列表,里面的每一项是
效果:

属性:
type=”属性值”;属性值可以是:1,a,A,i,I; 结合start属性表示从几开始
定义列表
dl 没有属性。dl的子元素只能是 dt 和 dd
dt:列表的标题,这个标签是必须的
dd:列表的列表项,可以不写
备注:dt,dd只能在dl里面;dl里面只能有dt,dd
- 第一条规则
- 不准睡觉
- 不准交头接耳
- 不准下神
- 第二条规则
- 可以泡妞
- 可以找妹子
- 可以看mv
效果:

表格标签
表格标签用表示
一个表格
是由每行
组成的,每行是由
组成的。 所以我们要记住,一个表格是由行组成的(行是由列组成的),而不是由行和列组成的。
<table> <tr> <td></td> <td></td> <td></td> </tr></table>
属性
-
border:边框。像素为单位
-
style="border--collapse;collapse;":单元格的线和表格的边框合并
-
width:宽度。像素为单位
-
height:高度。像素为单位
-
bordercolor:表格边框的颜色
-
align:表格的水平方式。属性值可以填:left right center
注:这里不是设置表格里的内容的对齐方式,如果想要设置内容的对齐方式,要对单元格标签进行设置
-
cellpadding:单元格内容到边的距离。像素为单位。默认情况下,文字是紧挨着左边那条线的,即默认情况下的值为0
-
cellspacing:单元格和单元格之间的距离(外边距)。像素为单位,默认下为0
-
bgcolor="":表格的背景颜色
-
background="路径":背景图片。背景图片的优先级大于背景颜色
行
一个表格就是一行一行组成的
属性
-
dir:公有属性,设置这一行单元格内容的排列方式。可以取值:ltr:从左到右;rtl:从右到左
-
bgcolor:设置这一行的单元格的背景颜色
-
height:一行的高度
-
align="center":一行的内容水平居中显示,取值:left,center,right
-
valign="center":一行的内容垂直居中,取值:top,middle,bottom
单元格
属性
单元格的合并
如果要将两个或多个单元格合并,则就要删掉其余单元格,只留一个单元格 单元格的属性:
表格的标题。使用时和tr标签并列
效果:

表单标签 表单标签用表示,用于与服务器的交互。表单就是收集用户信息的,就是让用户填写的,选择的
属性:
-
name:表单的名称,用于JS来操作或控制表单时使用
-
id:表单的名称,用于JS来操作或控制表单时使用
-
action:指定表单数据的处理程序,一般是PHP
-
method:表单数据的提交方式,一般取值:get(默认)和 post
action属性就是表示,表单将提交到哪里。 method属性表示用什么HTTP方法提交,有get、post两种。
get提交和post提交的区别: GET方式: 将表单数据,以"name=value"形式追加到action指定的处理程序的后面,两者间用"?"隔开,每一个表单的"name=value"间用"&"号隔开。 特点:只适合提交少量信息,并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。
POST方式: 将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。 特点:可以提交海量信息,相对来说安全一些,提交的数据格式是多样的(Word、Excel、rar、img)。
Enctype: 表单数据的编码方式(加密方式),取值可以是:application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。
输入标签(文本框)
用于接收用户输入
属性:
-
type="text":文本类型。属性值可以为:
-
注:如果要限制上传文件的类型,需要配合JS来实现验证,对上传文件的安全检查:一是扩展名的检查,二是文件数据内的检查
-
text(默认):文本类型
-
password:密码类型
-
radio:单选按钮,名字相同的按钮作为一组进行单选(单选按钮,天生不能互斥,如果想要互斥,必须要有相同的name属性)
-
checkbox:多选按钮,名字相同的按钮作为一组进行选择
-
checked:将单选按钮或多选按钮默认处于选择状态。当标签的type="radio"时,可以用这个属性,属性值也是checked
-
hidden:隐藏框,在表单中包含不希望用户看见的信息
-
button:普通按钮,结合JS代码进行使用
-
submit:提交按钮,传送当前表单的数据给服务器或者其他程序处理,这个按钮不需要写value自动就会有"提交"文字,点击按钮后,这个表单就会被提交到form标签的action属性中指定的我那个页面区
-
reset:重置按钮,清空当前表单的内容,并设置为最初的默认值
-
image:图片按钮,和提交按钮的功能完全一致,只不过图片按钮可以显示图片
-
file:文件选择框
-
value="内容":文本框里的默认内容
-
size="50":表示文本框可以显示五十个字符,一个英文或一个中文都算一个字符
注:size属性值的单位不是像素
-
readonly:文本框只读,不能编辑。因为它的属性值是readonly,所以属性值可以不写
-
disabled:文本框只读,不能编辑。光标点不进去,属性值可以不写
下拉列表选项
标签里面的每一项都用表示,select是"选择",option是 "选项"
属性:
属性:
<form> <select> <option>小学</option> <option>初中</option> <option>高中</option> <option>大学</option> <option selected="">研究生</option> </select> <br><br><br> <select size="3"> <option>小学</option> <option>初中</option> <option>高中</option> <option>大学</option> <option>研究生</option> </select> <br><br><br> <select multiple=""> <option>小学</option> <option>初中</option> <option selected="">高中</option> <option selected="">大学</option> <option>研究生</option> </select> <br><br><br> </form>
效果:

多行文本输入框
text是"文本",area是"区域"
属性:
-
value:提交给服务器的值
-
rows="":指定文本区域的行数
-
cols="":指定文本区域的列数
-
readonly:只读
<form> <textarea name="txtInfo" rows="4" cols="20">路飞学城</textarea></form>

|
以上就是HTML body标签中的相关标签2的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1546407.html
赞 (0)
打赏
微信扫一扫
支付宝扫一扫
HTML5新特性之离线缓存技术-php中文网
上一篇
2025年12月21日 18:11:25
一个完整的HTML对象是什么样的,如何生成?
下一篇
2025年12月21日 18:11:50
相关推荐
-
文本的重要性:文本是页面中最主要的内容,也是唯一可以被搜索引擎识别的内容,所以特别重要 1. ~ 刚才学过的标题就是一个文本标签 2.标题标签默认为加粗显示,编号越大,字体就越小,编号与大小成反比,要注意 3.经常与标题标签配对使用还有一个水平分隔线标签 ,它是一个单标签 标签,用来描述页面中的段…
-
1. 很多小伙伴,对网络的第一印象可能就是网站上有很多可以一点击就可以打开的页面 2. 你点击的可能是一个标题文本,也可能是一张图片,一个按钮,但本质上其实就是一个链接 这里我们打创想鸟首页,来体验一下,可以看到链接无处不在,没有链接就没有互联网 3.链接标签是,它的最重要的属性就href,就是要跳…
-
图像标签可能是最大最感兴趣的啦,俗话说,有图有真相,一张图片,胜过万语千言 页面中有了图像,会瞬间变得多姿多彩,使用户的体验也瞬间提升 但是图像是外部资源,加载到当前页面是需要时间的,所以图像虽好,也不能滥用 用得好,画龙点睛,用不好,画蛇添足 图像使用标签,这是在之前前端初体验课程中提到过 立即学…
-
1.元素:页面中可以看见的内容,都是元素,元素是用标签来表示的 2.标签:用来描述元素的,根据元素的不同,标签也有很多种类,例如文本,图像等 3.根据标签描述的对象不同,分为双标签和单标签二类。 4.如果标签中有文本或者子标签的话,一般采用双标签来描述,例如 … 5.如果标签中的内容来自…
-
1.每个元素都有一些自己与众不同的地方,这些可以通过属性来进行设置 2.属性: 必须写在起始标签内,如果是单标签就直接写在标签内 3.属性的基本格式: 属性名=”属性值”,值可以加引号,也可不加引号,也可以是单引号, 推荐使用双引号,这是大家都在遵守的行业约定 1. 标签有一…
-
使用 htmlspecialchars() 转义特殊字符可防止XSS攻击,将 、”、& 转为HTML实体;strip_tags() 可删除HTML标签但不完全安全;需保留安全标签时推荐使用 HTML Purifier 库进行严格过滤;实际开发中应结合 trim()、htmlspe…
-
正确使用label标签的for属性或嵌套方式可实现表单控件与标签的关联,提升可访问性和用户体验。一、通过for属性匹配控件id,实现点击标签聚焦输入框,需确保id唯一;二、将input嵌套在label内,无需for属性即可实现联动;三、单选按钮组中,每个radio应有唯一id并用for属性对应lab…
-
HTML根元素是html标签,位于DOCTYPE声明后,包裹head和body部分,定义文档起点;通过lang属性指定语言可提升可访问性和SEO。 如果您在学习HTML结构时遇到关于页面最外层元素的疑问,可能是对文档的基本构成不够清晰。HTML文档中的根元素是整个网页内容的容器,所有其他元素都嵌套在…
-
使用p标签可创建HTML段落,浏览器自动添加前后空白区分段落。1、用 开始, 结束,包裹独立文本;2、可嵌套strong、em等内联标签格式化文字,但不可嵌套块级元素;3、通过style或class自定义字体、颜色、缩进等样式;4、避免用br模拟段落换行,应使用p标签确保语义正确,提升可读性与SEO…
-
答案:使用HTML5的footer标签结合语义化结构展示版权与联系方式,通过©和JavaScript动态显示年份,用ul列表整理地址、电话、邮箱并添加mailto:和tel:链接,配合CSS设置背景、文字颜色、居中布局及border-top分隔线,提升可读性与美观度。 如果需要在HTML5页面底部展…
-
推荐使用strong标签进行语义加粗,b标签仅用于视觉加粗;strong示例为重要文字,b示例为加粗文字,前者利于SEO和无障碍访问。 如果您在编写HTML文档时希望突出某些文本,使其以加粗形式显示,可以通过特定标签实现这一效果。以下是常用的加粗标签及其使用方法: 一、使用标签加粗文字 标签不仅使文…
-
HTML input输入框通过设置type属性实现多种数据输入方式:1. text用于单行文本,可设placeholder、maxlength;2. password隐藏输入内容,建议关闭自动填充,支持minlength;3. number限制数值输入,支持min、max、step;4. email…
-
正确编写HTML文档类型声明需先确定版本,再选用对应语法并置于首行。①DOCTYPE声明位于文档顶部,用于告知浏览器HTML版本,避免怪异模式;②HTML5使用简洁声明,不引用DTD且要求小写;③HTML 4.01 Strict需完整引用DTD路径,格式为;④HTML 4.01 Transition…
-
答案:通过meta标签的http-equiv=”refresh”可实现页面跳转或自动刷新,content设置时间与URL实现跳转,仅设时间则刷新页面,需注意避免无限循环。 如果您希望在HTML页面中实现跳转或自动刷新功能,可以通过使用meta标签中的refresh属性来完成。…
-
使用article、section、main、header和footer标签可实现网页内容的语义化结构:首先用article包裹独立内容如文章或评论,确保每篇独立内容有单独article标签且可嵌套;其次用section划分主题区块,每个区块需有标题并避免仅用于布局;接着用main标记页面核心内容,…
-
表单通过form标签定义数据提交结构,设置action和method属性指定目标地址与请求方式;使用input、textarea等元素收集用户输入,确保关键字段包含name属性;添加type为submit的按钮触发表单提交;利用select、radio实现选项选择,并通过label提升可访问性;需上…
-
使用HTML的标签可创建水平分割线以分隔内容区域,通过内联样式或CSS类可自定义颜色、高度、边框等样式,推荐使用CSS类提高代码复用性,还可通过设置border:none并结合background属性实现虚线、渐变等定制化效果。 如果您希望在网页中分隔不同内容区域,使页面结构更清晰,可以通过HTML…
-
定义列表使用dl、dt、dd标签实现,其中dl为容器,dt表示术语,dd提供描述,适用于词汇表等场景。 如果您希望在网页中展示术语及其定义、名词及其解释等内容,HTML 提供了专门的标签来创建定义列表。这种结构化的标记方式有助于提升内容的语义化和可读性。以下是关于如何正确使用 dl、dt、dd 标签…
-
首先检查视频格式与标签设置,使用video标签并添加controls属性;提供MP4、WebM、OGG多种格式以提升兼容性;设置autoplay、loop、muted等属性优化播放行为;通过width、height和CSS调整尺寸与样式,确保视频正常播放且美观。 如果您在网页中插入视频但无法正常播放…
-
使用colspan和rowspan属性可合并HTML表格的单元格。colspan=”n”将单元格横向合并n列,需确保行内总列数逻辑一致;rowspan=”n”将单元格纵向合并n行,后续行应省略对应单元格以防错位;两者可同时使用于同一单元格以实现复杂布局…