html ol标签用罗马数字,HTML重点标签总结
本文的目的通过重点标签的学习前进
一、 iframe 的学习
iframe通俗的的理解就是,可以在页面里面嵌套新的页面
它的使用会使页面变卡,一般会有一个固定的尺寸,默认的。他也属于可替换元素行列。我们可以通过CSS来改变尺寸
frameborder消除边框
name属性与a标签结合
aaaa
a标签的链接会在iframe的内嵌窗口里面打开
二、a标签的学习
a标签四种常见的target
topQQ //在新的页面打开链接
topQQ //在当前窗口打开链接
parentQQ //在父级
topQQ // 在顶级
a标签可以设置download属性,使其不打开链接。而是下载当前页面的HTML。
也可以把你当前目录下的文件下载。
下载
下载文件
a标签会自动添加当前页面的协议。例如以下例子,如果不写http协议,会根据当前页面的协议自动加上,如果当前页面是http协议(通过下面的http-server模拟),那么就打开qq.com,如果只是本地的HTML,那么协议时file协议,不会下载
下载
下载
a标签会在地址栏后加上锚点,即#开始的那串字符串
下载文件
a标签会在地址栏后加上?name=wushao
一定要记得a标签可以发起get请求
下载文件
a标签可以使用伪协议,这是历史遗留问题,以前的前端想在a标签里面直接打开js代码。现在常用于一些奇葩需求。
如果,你不想这个a标签,有任何动作,无法点击,就用伪协议。
topQQ //无法操作了
topQQ
反之如果你只是加锚点,那么会定位到开始位置。
如果你href=" ",那么会刷新页面。
综上所述,如果你对a标签什么也不想做,就用伪协议,详见MDN 的a标签
无障碍建议
锚点标签常常通过将 href 属性设置为 "#" 或 "javascript:void(0)" 来创造一个能阻止页面刷新的伪按钮的方式被滥用。 这些属性值会在拖动 / 复制链接时导致意外行为,在新窗口 / 新标签打开链接,加入书签以及 JavaScript 仍在下载时会出现错误或被禁用。这也会向辅助技术(如屏幕阅读器)传达不正确的语义。在这些情况下,推荐使用 来代替。通常情况下,您应该只将锚点用于正常的 URL 导航。
那么就有三种写法了
href="javaScript:;"
href="javaScript:void(0);"
或者直接 href="#"
小型服务器 npm i -g http-server
它会安装在npm目录下,把bin目录添加到~/.bashrc脚本配置文件里面,在文件的最后一行加上
export PATH="http-server的绝对路径:$PATH"
配置好path之后,就可以直接使用了。
在你想模拟http协议环境的时候,在那个目录下打开http-server就可以用了
三、form标签的学习
form a 标签最大的区别就是form标签是post提交,虽然你可以修改成get,但是没有人蛋疼的这么做。
默认的get方法演示
用户:
密码:
提交
form默认的get方法.png
以上是智障的写法,下面是优雅的写法。
注意form必须要用一个type=submit的input不然无法提交数据!!!!
用户:
密码:
type是submit和button.png
form方法post的方法.png
以前我们在请求里面只能看见前三个部分,有了form标签之后,终于能看到第四部分,form data啦
post解析.png
如果你的form表单里面没有一个type=submit的input,可以使用type=submit的button的标签,也可以使用提交
用户:
密码:
提交
//等价于 提交
form表单有且只有两个方法,你不规定method那么就是get,你就是智障;所以你规定method="post",你不智障;如果你写了这两种之外的方法,那么还是按照get方法提交,你是智障中的战斗机。
四、input button标签的学习
input button 标签的最大区别就是input标签是空标签。
input 标签的type有很多种,后期我有接触到了type="file",还可以加上multiple,上传多文件。(12.28更新)
而且input必须有name属性,因为你提交的数据要用,组成name=value。
//普通文本
//密码
//提交
//复选框
//单选框
复选框和单选框的小练习
用户:
密码:
提交
爱我
馒头
篮球
苹果
橘子
checkbox和radio.png
checked="checked" 与 直接书写 checked 一样的效果
注意以上的代码中,包含的 label标签,有时候我们为了人性化的需求,只要鼠标点中文字的一部分就算选中了,所以用 label标签的for属性与input的id属性关联。
篮球
当然了,你身为一个老司机,应该这么写
篮球
省了两个属性,简洁优雅。
button标签也有很多type
Click me
//仅表示按钮,没有任何作用.它可以有与元素事件相关的客户端脚本,当事件出现时可触发,与js结合使用
Click me
//此按钮提交表单数据给服务器
input 也可以实现滑动的效果
range.png
五、下拉框
湖人
凯尔特人人
马刺
凯尔特人人是默认勾选的
六、table标签的学习
table在古代用来做布局,现在基本不用了。
只有四个元素,thead、tbody、tfoot、colgroup。即使你不写tbody你也有这个标签,而且可以不止一个。thead里面有tr、th,tbody里面有tr、td,tfoot里面有tr、td,colgroup里面有col,用来控制列的宽度,基本不使用了。我现在维护的网页,用的table 布局,修改很麻烦
tr
table row
th
table header
td
table data
Header content 1Header content 2
Footer content 1Footer content 2
//即使写在这里。浏览器也会把他放到底部去
Body content 1Body content 2
//可以包含多个tbody
noscript标签表示如果用户禁用了js,就显示该标签里面的内容
就是里面不能有内容的标签
CSS 里,可替换元素(replaced element)的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有
和 表单元素,如 。 某些元素只在一些特殊情况下表现为可替换元素,例如 和
上面是MDN的原话,反正我看的云里雾里。用图片解释一下吧。
可替换元素.png
img标签的尺寸其实是由src决定的,但只是第三级的重要性,你可以用width修改,你也可以用CSS来修改。
十、display不止三种
不仅仅有 none inline block inline-block 还有很多
常见的display默认的是block的有divp 、form 和HTML5中的新元素: header 、 footer 、 section。我们不需要特别关心display的,因为这个主要由CSS修改
li标签的样式可以改成实心原点,方形,也可以加上罗马数字
具体的细节可以查看MDN list sytle
具体的符号样式的设置可以看list-style-type
比如你想改成方形,就用list-style-type: type
html ol标签用罗马数字,HTML重点标签总结相关推荐
- <ul><ol><dl>列表标签属性
<ul><ol><dl>列表标签属性 1.无序列表标签 源代码 <ul> ul标签表示页面中的无序列表,ul标签 ...
- html_常用标签_盒子标签_图片标签_超链接_列表标签(2)
接着上一篇博客继续完成常用标签学习 本节,将介绍学习: 4.盒子标签 ...
- HTML标签详解之格式标签
本次的HTML教程是学习HTML格式标签,其中包括段落.区块和列表的HTML标签. 1.段落标签:<p>,用来定义文章中的段落,HTML会自动为段落前后添加一个额外空行,做为段落间距. 折 ...
- html基础--列表标签03,03HTML基础--列表标签
列表标签 无序列表(unordered list)作用: 给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后 格式:li 英文是 list item, 翻译为列表项 选择居住 ...
- HTML标签语义化——使用b标签,还是strong标签
HTML标签语义化,相关的内容网上有很多.大家可以去学习一下,看一下你所使用的标签是否具有其真正要表达的意义,标签你用对了吗?今天要介绍的内容是使用b标签,还是strong标签,翻译自http://w ...
- HTML 块标签,行内标签,行内块标签以及之间的相互转换
HTML标签分类 行内标签:包含a.span.em.strong.b.i.u.label.br: 特点:可以多个标签存在一行,不能直接设置行内标签的高度.宽度.行高以及顶和底边距,完全靠内容撑开宽 ...
- 什么是H标签?H1,H2,H3标签?以及和strong标签使用的方法及重要性
大家都知道,seo的一个很重要的一点就是要把网站做的条理清晰,让搜索引擎很容易的读明白,这个条理清晰不仅体现在网站的物理路径,url等地 方.在<h1><h2><h3&g ...
- html中什么是围堵标签,HTML回顾(基础标签)
在对HTML进行回顾之前我们先对web的相关知识进行讲解 JavaWeb:使用Java语言开发基于互联网的项目 软件架构: C/S: Client/Server 客户端/服务器端:在用户本地有一个客户 ...
- 什么是HTML语义化标签?为什么要用H5语义化标签?HTML5语义化标签有哪些
对于大部分初学者来说,可能无法理解,明明在学习的时候,用div标签就能构成页面,为什么要用h5语义化标签?可能有一些前端工作者对HTML标签语义化的概念也不是很清楚,那么究竟什么是HTML语义化标 ...
- HTML5基础标签有哪些,HTML5基础标签
HTML标签 HTML是标记语言,里面的所有功能都是通过标签来实现的,可以说标签就像一个个"砖块",H5前端开发工程师就像是建筑工人,用这些"砖块"按照一定规则 ...
最新文章
- 提升Hadoop计算能力的并行框架
- cannot reshape array of size 5011 into shape (2)
- 排查指南 | 当 mPaaS 小程序提示“应用更新错误(1001)”时
- 高温津贴:关键是消除劳动者“权利贫困”
- hdu 2089 不要62【数位dp】
- 6选择内核启动项_Linux内核都没搞懂,Alot和你还有什么关系?
- C# Task.FromResult的用法
- WinXP利用无线网卡做AP共享上网
- 获取本机IP可区分系统可区分虚拟机和本机java程序跨平台
- WEB-ERROR-PAGE
- access窗体主体居中
- AWE 2017盛大开幕,跨界生态圈刷新未来
- Windows 10无法显示无线网络连接
- 2908. Annoying painting tool
- jetpack4.5.1使用tensorrt加速模型
- 快手2018/9/10
- PMEdit一个富文本框可以编辑文本、并可以显示GIF动画
- JAVA通过poi实现excel表格制作并且将图片放入到指定的单元格中(可以循环插入)
- 北方云APP使用指南
- 【2023年最新版】Kali安装详细教程