HTML进阶篇 - 高级标签 - Version：0623

最新推荐文章于 2024-05-14 11:24:43 发布
最新推荐文章于 2024-05-14 11:24:43 发布
阅读量1k 收藏
点赞数
分类专栏： 前端学习笔记 - 渡一教育
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/popohopo/article/details/80758927
版权

内容复习：如何能够是一段文字独占一行，同时也能够又加粗有些题展示呢？采用标签嵌套的方式来解决，示例源代码如下：

<!DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< meta content= "这是一件你穿了就不想脱的衣服" name= "description" >
< title >淘宝网，淘，我喜欢！ </ title >
</ head >

< body >
< p >
< strong >
< em >This is an example. </ em >
</ strong >
</ p >这是一段“独占一行”功能的测试文本。
</ body >

</ html >

如何来验证是否是独占了一行呢，那么可以在尾标签后面直接添加一串字符，查看是否和前面文字分段显示。

新知识内容：

如何在浏览器页面所显示的文字中插入多个空格字符？使用一个<div>标签设置一个容器，然后网容器中填入英文字符串与中文字符，会发现英文字符串到达容器边界不会换行，而中文字符到达边界后会自动的换行，这是问什么？

浏览器无法识别英文单词，只能识别字母，“空格”，英文单词分隔符；回车符，也是和空格的作用是一样；

空格文本的展示形式；HTML编码表示特殊字符。&nbsp;

比较常用的还有两个：&lt;div&gt;

<!DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< meta content= "这是一件你穿了就不想脱的衣服" name= "description" >
< title >淘宝网，淘，我喜欢！ </ title >
</ head >

< body >
接&nbsp;&nbsp;&nbsp;&nbsp;下来，我给大家讲解一个新标签，叫&lt;div&gt;
</ body >

</ html >

那么如何输出回车字符呢？<br>标签，单标签。<hr>标签，水平线。

order list，有序列表<ol></ol>与<li></li>标签，二者配合使用；其中<ol>标签有一个type属性，它有五种值，对应五种排序方式，分别为1，a，A，i，I；注意这里的i与I所表示的是罗马数字，并非字母。比如，如果使用type=“A”，那么将会使用大些的英文字母作为有序排列，如果超过了26个列表项后，会出现27进制；还有一个reversed属性，示例源代码如下：

<!DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< meta content= "这是一件你穿了就不想脱的衣服" name= "description" >
< title >淘宝网，淘，我喜欢！ </ title >
</ head >

< body >
你们喜欢看的电影
< ol type= "A" reversed= "reversed" >
< li >marvel </ li >
< li >速8 </ li >
< li >返老还童 </ li >
< li >了不起的盖茨比 </ li >
</ ol >
</ body >

</ html >

如果排序时，不希望从1开始，比如从3开始排序，可使用start属性，将其值赋为3即可；但需要注意的是，其中start属性所填写的值必须为“第几个开始”，比如采用小写罗马字符进行有序排列，那么type="i" start="3"，如此这样，那么第一个列表项将会从Ⅲ开始，示例源代码如下：

<!DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< meta content= "这是一件你穿了就不想脱的衣服" name= "description" >
< title >淘宝网，淘，我喜欢！ </ title >
</ head >

< body >
             你们喜欢看的电影
< ol type= "1" start= "3" >
< li >marvel </ li >
< li >速8 </ li >
< li >返老还童 </ li >
< li >了不起的盖茨比 </ li >
</ ol >
</ body >

</ html >

这对有序标签在实际应用开发中基本没什么用！但是他的兄弟，<ul></ul>与<li></li>标签，却有很大的用处。一个大的功能有很多功能子项来构成，每一个功能子项和它的功能和样式基本上都是相同的，可能内容有些小小的差异，这么多的功能子项组成了这样的一个大功能，最好使用<ul></ul>与<li></li>标签来展现，更符合它天生的结构，更符合它的父子结构。比如柜子与抽屉的关系；实际web应用开发中，导航栏的开发，导航栏包含很多菜单项，每一个菜单项是一个功能子项，功能和展示形式基本一样，只不过内容稍有不同，其中<ul>标签的属性type的取值可以为discircle，square，circle等；

<!DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< meta content= "这是一件你穿了就不想脱的衣服" name= "description" >
< title >淘宝网，淘，我喜欢！ </ title >
</ head >

< body >
< ul type= "circle" >
< li >草莓 </ li >
< li >苹果 </ li >
< li >橙子 </ li >
</ ul >
</ body >

</ html >

HTML语句是最基本的“楼”的架子，装修主要由CSS来负责；示例模拟了一下淘宝网页中的部分导航栏功能，示例源代码如下：

<!DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< meta content= "这是一件你穿了就不想脱的衣服" name= "description" >
< title >淘宝网，淘，我喜欢！ </ title >
< style >
*{
margin: 0px;
padding: 0px;
}
ul{
list-style:none;

}
li{
margin: 0px 10px;
float:left;
color:#f40;
font-size: 14px;
font-weight:bold;
height: 25px;
line-height: 25px;
padding: 0px 5px;
}
li:hover{
background-color:#f40;
color:#fff;
border-radius: 15px;
}
a{
color:#f40;
text-decoration:none;
}
a:hover{
color:#fff;
}
< / style >
</ head >

< body >
< ul >
< li >
< a href= "https://qiang.taobao.com" >海抢购 </ a >
</ li >
< li >电器城 </ li >
< li >司法拍卖 </ li >
< li >中国质造 </ li >
< li >兴农扶贫 </ li >
</ ul >
</ body >

</ html >

<img>标签，是一个单标签，具有一个src属性，其值为：1.网上的url；2.本地的绝对路径；3.本地的相对路径；

它的其他属性，如alt属性，图片占位符；这个属性用于图片不能正常展示时或者没能正常加载出来，图片出错没能显示出来，可以使用文字来简单叙述一下，是用来容错。

title属性，图片提示符；

<!DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< meta content= "这是一件你穿了就不想脱的衣服" name= "description" >
< title >淘宝网，淘，我喜欢！ </ title >
</ head >

< body >
< img src= "微信图片_20180621103739.jpg" alt= "this is a handsome man."
style= "width:250px" title= "this is a handsome man.i think you will like him." >
</ body >

</ html >

anchor，锚，<a>标签，超级链接；它的href属性，HyperText reference，超文本引用，它的值为跳转链接，指向目标地址；<a>标签内部可以包裹任何东西，比如当你放入一张图片的时候，它就具有了跳转链接的作用；可以添加CSS行间样式；

是否可以在新的标签页内打开链接？可以加入target属性，赋值为_blank即可；

<!DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< meta content= "这是一件你穿了就不想脱的衣服" name= "description" >
< title >淘宝网，淘，我喜欢！ </ title >

< style >

/* *{
margin:0px;
padding:0px;
} */
a{
line-height: 100px;
text-decoration:none;
color:#fff;
}
< / style >
</ head >

< body >
< a href= "https:www.baidu.com" style= "width:100px;height:100px;
background-color:red;display:block;" target= "_blank" >
< img src= "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=458756119,112096367 & fm=27 & gp=0.jpg"
alt= "美胸" title= "这个美胸不错吧！" >
</ a >
</ body >

</ html >

<a>标签的第二个作用：作为锚点，记录一个位置，可以通过该标签回到该位置；可以加入position属性，当赋值为fixed时，那么就会出现固定在窗口区域的某一个固定位置。

<a>标签的第三个作用：在移动端网页中具备打电话，发邮件等功能；<a href="tel:25257758">给志勇大帝拨打电话</a>；如果是发邮件，那么href="mailto:popohopo@163.com"

<a>标签的第四个作用：协议限定符，具有一定的黑客功能；没有太大的实际应用；<a href="javascript:while(1){alert('让你手贱')}">你点我试试看呀，come on，来呀！</a>

最后一个标签，很重要！表单标签<form></form>标签，它能够发送数据给后端工程师；method属性，发送方式，它的赋值有两种，get与post；action属性，发送给谁，“谁”的地址，后端的地址；它里面还需要一些组件，<input>标签，type属性，决定<input>标签能够长成什么样子，取值可以为text或password，submit，radio等；

发送数据必须有两个值，一个是数据名，一个是数据值（数据内容），此二者缺一不可。是否提交成功，如何判断？

密码框，只对用户自己不可见，给你用户自己一个心理安慰。

<!DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< meta content= "这是一件你穿了就不想脱的衣服" name= "description" >
< title >淘宝网，淘，我喜欢！ </ title >
</ head >

< body >
< form method= "get" action= "" >
< p >
username:
< input type= "text" name= "username" >

</ p >
< p >
password:
< input type= "password" name= "password" >
</ p >
< input type= "submit" value= "点我试试看，登陆吧" >
</ form >
</ body >

</ html >

单选框与复选框的展示：

如何是单选当中的多个选择框属于同一道题？可以通过name属性名称来设置；

<!DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< meta content= "这是一件你穿了就不想脱的衣服" name= "description" >
< title >淘宝网，淘，我喜欢！ </ title >
</ head >

< body >
< form method= "get" action= "" >
我们所喜欢的男明星：
< p style= "border:2px solid red; padding-left:25px;" >
< input type= "radio" name= "star" value= "小贝" >贝克汉姆
</ p >
< p >
< input type= "radio" name= "star" value= "小莱" >莱昂纳多
</ p >
< p >
< input type= "radio" name= "star" value= "handsome" >志勇大帝
</ p >
< input type= "submit" value= "提交" >
</ form >
</ body >

</ html >

登陆界面中，当聚焦或者失去焦点后，输入框中的文字变化情况的模拟，示例源代码如下：

<!DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< meta content= "这是一件你穿了就不想脱的衣服" name= "description" >
< title >淘宝网，淘，我喜欢！ </ title >
</ head >

< body >
< form method= "GET" action= "" >
< P >username:
< input type= "text" name= "username" value= "请输入用户名" style= "color:#999"
onfocus= "if(this.value == '请输入用户名'){this.value = ''; this.style.color = '#424242';console.log(this);}"
onblur= "if(this.value == ''){this.value = '请输入用户名'; this.style.color = '#999';}" >
</ P >
< P >password:
< input type= "password" name= "password" >
</ P >
< input type= "submit" value= "提交" >
</ form >
</ body >

</ html >

在这里用到了一些JavaScript代码，在查看这里的this到底指代的是谁的时候，可以使用console.log()函数进行输出处理；



面朝大海绽放你的微笑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
最新直播系统带商城源码 附搭建教程（价值2w多）
08-05
最新直播系统带商城源码 附搭建教程 功能介绍： 礼物系统：普通礼物、豪华礼物、热门礼物、守护礼物、幸运礼物 提现方式：统一平台提现日期及方式，方便用户执行充值提现操作 连麦送礼PK：主播之间可进行互动连麦送礼PK，PK结束有相应的奖惩 直播间红包：平台主播及用户都可发红包，有多种红包类型及红包提醒 主播守护：可进行平台充值，守护心仪的主播，主播守护时长有多种设置 小视频拍摄：单独的小视频模块，包含视频列表，视频拍摄、编辑、上传、互动等 引导图功能：优化更新系统引导图，后台可上传图片或视频内容，视频内容可跳过 动态：点击动态可进入动态详情页，包含话题的动态点击话题可进入该话题动态列表，可查看该话题下所有动态信息，用户可对动态进行点赞、评论、举报等操作 商城：可通过商品名称搜索商品，搜索后可根据销量价格等进行筛选 商品详情：查看商品的名称价格销量评价等信息，可进入店铺，可与客服沟通，可直接购买 直播观看送礼提示：用户赠送礼物后，直播间公屏聊天处有送礼提示 直播购物车：观众在直播间中可查看主播直播购物车中的商品，点击某个商品跳转到商品介绍页面，商品介绍上有购买按钮，
简单的赛车小游戏，附源码
08-05
初始化和配置：设置游戏窗口大小、pygame 混音器等。 音频管理：AudioManage 类用于加载和播放背景音乐和音效。 精灵类：BaseSprite 是所有游戏对象的基类，EnemySprite、PlayerSprite 和 BgSprite 是继承自 BaseSprite 的具体精灵类。 精灵管理类：EnemyManage、PlayerManage 和 BgManage 分别管理敌人、玩家和背景精灵。 用户界面管理：UIManage 类管理游戏开始界面、游戏进行中的界面和游戏结束界面。 游戏管理：GameManage 类是游戏的主要控制类，负责游戏状态的维护、事件处理、更新绘制以及碰撞检测。 游戏循环：gm.run() 是游戏的主循环，它持续运行直到游戏退出。
高级HTML与CSS面试题
前端程序猿的博客
05-14 443
Composition API通过函数组合和逻辑抽离提升了代码的可复用性。可以将逻辑提取到可复用的函数中，然后在多个组件中使用。Event Loop是JavaScript处理异步操作的机制。它包括调用栈、消息队列和事件循环。CSS性能问题常见于选择器效率、重排（reflow）和重绘（repaint）。在响应式设计中，复杂布局可以通过Flexbox和Grid布局来实现。这个例子使用了CSS Grid来实现响应式网格布局，Flexbox来实现单个项的居中对齐。回调，因为微任务队列优先于宏任务队列。
ppo学习之ppo算法实现.zip
08-05
ppo算法 ppo学习之ppo算法实现.zip
tampermonkey安装
08-05
tampermonkeytampermonkey安装。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
[java毕业作品]VB+ACCESS电脑销售管理系统设计与实现(源代码+论文)
08-05
[java毕业作品]VB+ACCESS电脑销售管理系统设计与实现(源代码+论文)
SVDD进行异常检测的MATLAB代码.zip
最新发布
08-05
SVDD进行异常检测的MATLAB代码.zip
源代码-yy迷你留言板.zip
08-05
源代码-yy迷你留言板.zip
各省份城市专精特新企业基本信息表2013-202403员工人数主营业务注册资本主要产品等
08-05
各省份城市专精特新企业基本信息表2013-202403员工人数主营业务注册资本主要产品等 41w多记录，100多MB数据的网盘链接） 主要指标： 统计截止日期 机构ID 公司名称 经营状态 财务审计机构 财务审计机构统计时间 成立日期 注册资本 注册资本币种 员工人数 员工人数统计类型 员工人数统计时间 主营业务 其他业务 主营业务所属门类 主要产品 公司登记注册类型 所属省份 所属城市 注册地址 办公地址 工商注册号 网址 电话 邮箱 经营范围 统一社会信用代码 ISIN编码
centos加固.pdf
08-05
centos加固.pdf
GC032A datasheet（侵删）
08-05
GC032A datasheet（侵删）
面向对象C++重要培训资料分享12面向对象C++开发技术资料.zip
08-05
面向对象C++重要培训资料分享12面向对象C++开发技术资料.zip
uniapp调用蓝牙打印
08-05
uniapp调用蓝牙打印
“人力资源+大数据+薪酬报告+涨薪调薪”
08-05
人力资源+大数据+薪酬报告+涨薪调薪，在学习、工作生活中，越来越多的事务都会使用到报告，通常情况下，报告的内容含量大、篇幅较长。那么什么样的薪酬报告才是有效的呢？以下是小编精心整理的调薪申请报告，欢迎大家分享。相信老板看到这样的报告，一定会考虑涨薪的哦。
[毕业设计]VB+ACCESS班级事务自动化管理系统(源代码+论文+相关文档).zip
08-05
[毕业设计]VB+ACCESS班级事务自动化管理系统(源代码+论文+相关文档)
基于(struts + spring + hibernate) java Smart系统-题库及试卷管理模块的设计与开发.zip
08-05
SMART系统是一个采用新思路、新架构、新技术开发出来的一个新型智能在线考试信息管理系统，该系统主要实现了学生在线考试与评估以及对各种评估信息的管理和维护。本文针对教育工作的具体需求，用struts + spring + hibernate搭建的框架为设计平台，以B/S（Browser/Server）模式开发与设计题库及试卷管理模块。本设计为Smart系统的一部分。主要设计和实现了学校考试的出卷方式与试题库的管理。论文首先阐述了题库管理及试卷管理系统的详细需求分析、数据库的合理设计以及系统设计原理，给出了计算机管理环境下的题型分类、试卷生成的方法，并从科学、实用的角度构造系统功能模块，包括试题录入、题库维护、生成试卷、试卷管理等功能。其次介绍了各个模块功能的具体实现，包括：题库权限管理、手动出卷、自动出卷等。最后通过本模块的应用，可以满足评估系统中考试需求，对教育评估的发展起到一定的促进作用。struts + spring + hibernate
ISO26262功能安全培训1—概念层.ppt
08-05
ISO26262功能安全培训1—概念层
基于JAVA的贪食蛇手机游戏设计.zip
08-05
基于JAVA的贪食蛇手机游戏设计实现源码，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 基于JAVA的贪食蛇手机游戏设计实现源码，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 基于JAVA的贪食蛇手机游戏设计实现源码，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 基于JAVA的贪食蛇手机游戏设计实现源码，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 基于JAVA的贪食蛇手机游戏设计实现源码，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。
MySQL-主从复制（MD格式）
08-05
MySQL-主从复制（MD格式）
应收账款管理带自动报表.xlsm
08-05
销售管理表，财务报表，占比分析，消费能力分析，日程安排，提成表，考核表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值