html重点标签总结
一、 iframe
的学习
iframe通俗的的理解就是,可以在页面里面嵌套新的页面
它的使用会使页面变卡,一般会有一个固定的尺寸,默认的。他也属于可替换元素行列。我们可以通过CSS来改变尺寸
frameborder
消除边框
name
属性与a标签结合
<!-- <iframe name=iframe src="http://qq.com" ></iframe> -->
<iframe name="000" src="" ></iframe>
<a target="000" href="http://qq.com">aaaa</a>
a
标签的链接会在iframe的内嵌窗口里面打开
二、a
标签的学习
a标签四种常见的target
<a href="http://qq.com" target="_blank">topQQ</a> //在新的页面打开链接
<a href="http://qq.com" target="_self">topQQ</a> //在当前窗口打开链接
<a href="http://qq.com" target="_parent">parentQQ</a> //在父级
<a href="http://qq.com" target="_top">topQQ</a> // 在顶级
a
标签可以设置download属性,使其不打开链接。而是下载当前页面的HTML。
也可以把你当前目录下的文件下载。
<a href="http://qq.com" download>下载</a>
<a href="222/分配的ip地址.xls" download>下载文件</a>
a
标签会自动添加当前页面的协议。例如以下例子,如果不写http协议,会根据当前页面的协议自动加上,如果当前页面是http协议(通过下面的http-server模拟),那么就打开qq.com
,如果只是本地的HTML,那么协议时file协议,不会下载
<a href="//qq.com" download>下载</a>
<a href="//qq.com" download>下载</a>
a
标签会在地址栏后加上锚点,即#开始的那串字符串
<a href="#kkkk" download>下载文件</a>
a
标签会在地址栏后加上?name=wushao
一定要记得a标签可以发起get请求
<a href="?name=wushao" download>下载文件</a>
a
标签可以使用伪协议,这是历史遗留问题,以前的前端想在a
标签里面直接打开js代码。现在常用于一些奇葩需求。
如果,你不想这个a
标签,有任何动作,无法点击,就用伪协议。
<a href="javaScript:;" target="_top">topQQ</a> //无法操作了
<a href="javaScript:alert(1);" target="_top">topQQ</a>
反之如果你只是加锚点,那么会定位到开始位置。
如果你href=" "
,那么会刷新页面。
综上所述,如果你对a
标签什么也不想做,就用伪协议,详见MDN 的a标签
无障碍建议
锚点标签常常通过将 href 属性设置为
"#"
或"javascript:void(0)" 来创造一个能阻止页面刷新的伪按钮的方式
被滥用。 这些属性值会在拖动 / 复制链接时导致意外行为,在新窗口 / 新标签打开链接,加入书签以及 JavaScript 仍在下载时会出现错误或被禁用。这也会向辅助技术(如屏幕阅读器)传达不正确的语义。在这些情况下,推荐使用<button>
来代替。通常情况下,您应该只将锚点用于正常的 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 action="users" >
用户:<input type="text" name="name"><br>
密码:<input type="text" name="password"><br>
<!-- <input type="submit" value="提交"> -->
<input type="button" name="button" value="button">
<button type="submit">提交</button>
</form>
以上是智障的写法,下面是优雅的写法。
- 注意form必须要用一个type=submit的input不然无法提交数据!!!!
<form action="users" method="post">
用户:<input type="text" name="name"><br>
密码:<input type="text" name="password"><br>
<input type="submit" value="提交">
<input type="button" name="button" value="button">
</form>
以前我们在请求里面只能看见前三个部分,有了form标签之后,终于能看到第四部分,form data啦
post解析.png- 如果你的form表单里面没有一个type=submit的input,可以使用type=submit的
button
的标签,也可以使用<button >提交</button>
<form action="users" >
用户:<input type="text" name="name"><br>
密码:<input type="text" name="password"><br>
<!-- <input type="submit" value="提交"> -->
<input type="button" name="button" value="button">
<button type="submit">提交</button>
//等价于 <button >提交</button>
</form>
form表单有且只有两个方法,你不规定method那么就是get,你就是智障;所以你规定method="post",你不智障;如果你写了这两种之外的方法,那么还是按照get方法提交,你是智障中的战斗机。
四、input
button
标签的学习
input
button
标签的最大区别就是input
标签是空标签。input
标签的type
有很多种,后期我有接触到了type="file",还可以加上multiple,上传多文件。(12.28更新)
而且input必须有name属性,因为你提交的数据要用,组成name=value。
<input id="POST-name" type="text" name="name"> //普通文本
<input id="POST-name" type="password" name="password"> //密码
<input id="POST-name" type="submit" value="提交"> //提交
<input id="POST-name" type="checkbox" name="name"> //复选框
<input id="POST-name" type="radio" name="name"> //单选框
- 复选框和单选框的小练习
<form action="users" method="post">
用户:<input type="text" name="name"><br>
密码:<input type="text" name="password"><br>
<!-- <input type="submit" value="提交"> -->
<input type="button" name="button" value="button">
<button type="submit">提交</button>
<br>
<input id="love" type="checkbox" name="loveme"> <label for="love">爱我 </label>
<input id="eat" type="checkbox" name="loveme"> <label for="eat">馒头 </label>
<input id="play" type="checkbox" name="loveme" checked> <label for="play">篮球 </label>
<input id="apple" type="radio" name="name" checked="checked"><label for="apple">苹果 </label>
<input id="orange" type="radio" name="name"><label for="orange">橘子 </label>
</form>
checked="checked" 与 直接书写 checked 一样的效果
- 注意以上的代码中,包含的
label
标签,有时候我们为了人性化的需求,只要鼠标点中文字的一部分就算选中了,所以用 label标签的for属性与input的id属性关联。
<input id="play" type="checkbox" name="loveme" checked> <label for="play">篮球 </label>
- 当然了,你身为一个老司机,应该这么写
<label ><input type="checkbox" name="loveme" checked> 篮球 </label>
- 省了两个属性,简洁优雅。
button
标签也有很多type
<button name="button" type="button"> Click me </button>
//仅表示按钮,没有任何作用.它可以有与元素事件相关的客户端脚本,当事件出现时可触发,与js结合使用
<button name="button" type="submit"> Click me </button>
//此按钮提交表单数据给服务器
- input 也可以实现滑动的效果
<input type="range" name="" value="">
五、下拉框
<select>
<option value="1">湖人</option>
<option value="2" selected>凯尔特人人</option>
<option value="3">马刺</option>
</select>
凯尔特人人是默认勾选的
六、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 |
<table>
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
</tr>
</tfoot>
//即使写在这里。浏览器也会把他放到底部去
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
</tbody>
//可以包含多个tbody
noscript
标签表示如果用户禁用了js,就显示该标签里面的内容
七、空元素
就是里面不能有内容的标签
八、可替换标签
CSS 里,可替换元素(replaced element)的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有
<img>
<object>
<video>
和 表单元素,如<textarea>
<input>
。 某些元素只在一些特殊情况下表现为可替换元素,例如<audio>
和 <canvas>
上面是MDN的原话,反正我看的云里雾里。用图片解释一下吧。
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
作者:吴少在coding
链接:https://www.jianshu.com/p/34c8e98b441b
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
html重点标签总结的更多相关文章
- 11、Jsp加强/EL表达式/jsp标签
1 Jsp基础回顾 Jsp基础 1)Jsp的执行过程 tomcat服务器完成:jsp文件->翻译成java文件->编译成class字节码文件-> 构造类对象-> 调用方法 to ...
- [应用篇]第三篇 JSP 标准标签库(JSTL)总结
有一种友谊叫做: "陪我去小卖部." "不去," "我请你" "走." 你想起了谁:胖先生?还有人陪你吗? JSP 标准 ...
- EL标签
1.EL的作用 jsp的核心语法: jsp表达式 <%=%>和 jsp脚本<% %>. 开发jsp的原则: 尽量在jsp页面中少写甚至不写java代码. 使用EL表达式替换掉 ...
- JSTL标签(核心标准库)
使用JSTL标签步骤 1) 导入jstl支持的jar包(标签背后隐藏的java代码) 注意:使用javaee5.0的项目自动导入jstl支持jar包 2)使用taglib指令导入标签库 <%@t ...
- Html学习笔记(二) 简单标签
标签的重点 标签的用途 标签在浏览器中的默认样式 <body>标签: 在网页上显示的内容 <p>标签: 添加段落 <hx>标签: 添加标题 标签一共有6个,h1.h ...
- 关于HTML的常用标签
目录 前言 html常用标签 排版标签 图像标签 链接标签 注释标签 预格式化文本pre标签&特殊字符 语义化标签 前言 本文主要是对html的常用标签一个总结归纳,对所学的内容做一个查漏补缺 ...
- HTML基本概念及基本标签
HTML基本概念及基本语法 1.HTML的基本概念 1.1 B/S.C/S基本概念 B/S(Browser/Server):指的是浏览器端与服务器端工作模式,优点相对节省本地存储空间,不足是需要占用 ...
- java的JSP技术
java的JSP技术 [toc] 1.JSP简介 Jsp技术是用来开发java web的页面显示的,所有MVC模型里面的视图层,所以视图层的开发 jsp不是编程语言,三个英文是java server ...
- Servlet,jsp,JSP技术 ,JSP编程
一.Servlet 思考 1 浏览器可以直接打开JAVA/class文件吗? 不可以 2浏览器可以打开HTML.JS 文件吗? 可以 3 JAVA程序可以生成HTML文件吗?可以的,用IO流. 4 ...
随机推荐
- <数据结构>XDOJ323.判断有向图中是否有环
问题与解答 问题描述 判断有向图中是否有环. 输入格式 输入数据第一行是一个正整数,表示n个有向图,其余数据分成n组,每组第一个为一个整数,表示图中的顶点个数n,顶点数不超过100,之后为有向图的邻接 ...
- Java中常见的转义字符
转移字符对应的英文是escape character , 转义字符串(Escape Sequence)字母前面加上捺斜线"\"来表示常见的那些不能显示的ASCII字符.称为转义字 ...
- Ubuntu16.04下,erlang安装和rabbitmq安装步骤
文章来源: Ubuntu16.04下,erlang安装和rabbitmq安装步骤 准备工作,先下载erlang和rabbitmq的安装包,注意他们的版本,版本不对可能会导致rabbitmq无法启动,这 ...
- XML解析和创建的JAXB方式
1.说明 JAXB是Java Architecture for XML Binding, 即用于XML绑定的Java体系结构, JAXB作为JDK的一部分, 能便捷地将Java对象与XML进行相互转换 ...
- CS基础 float 浮动的使用方法
html代码: <body> <div class='red'> </div> <div class='green'> </div> < ...
- Pond Skater
题目 Snuke,水上平衡车,住在一个矩形池塘,可以看成 H 列 W 行,(i, j) 表示第 i 列第 j 行.池塘里长着荷叶,荷叶是不能进入的.如果 cij 是 @,表示荷叶.如果 cij 是 . ...
- linux(CentOS7) 之 克隆虚拟机并配置网络(固定ip)
克隆机器 原机关机状态下,克隆. 下一步 选择当前状态,下一步 选择创建完整克隆,下一步 设置虚拟机名称(完成后可以修改).克隆机安装位置,下一步 等待克隆完成 克隆完成 配置网络 添加网卡(因为物理 ...
- Flask_请求钩子(七)
在客户端和服务器交互的过程中,有些准备工作或扫尾工作需要处理,比如: 在请求开始时,建立数据库连接: 在请求开始时,根据需求进行权限校验: 在请求结束时,指定数据的交互格式: 为了让每个视图函数避免编 ...
- Java HotSpot(TM) 64-Bit Server VM warning: ignoring option MaxPermSize=256M; support was removed in 8.0
目录 启动一个Java Standalone程序时报错 解决办法 解释 参考 启动一个Java Standalone程序时报错 Java HotSpot(TM) 64-Bit Server VM wa ...
- 解压安装Cacti在apache中的补充
如果你不是安装 Cacti 到 Apache 默认的网络目录文件夹位置,那么在 /etc/httpd/conf.d 中新增配置文件 cacti.conf,并且按如下内容编辑.设置 /your/cact ...