20201213-1 HTML基本标签（一）

a标签点击跳转失效--IE6、7的奇葩bug

一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何响应. 出现这个bug的条件是:1.a标签下包含div这样的块元素 2.块元素必须设置width和height属性值 3.该块元素下包含img 解决方法:改结构或者让三个条件的某一个失效就可以了 2015-05-22 补充 1.就算将a标签设置为display:block;也同样失效 2.只要不在i…

IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字体的属性,所以也就出现“多余占位”的bug. 解决方法: 一.让html标签相接输出.例如:<div></div>. ——太过麻烦,代码也不规则,不好维护. 二.设置font-size:0; ——不能完美fix~ 二.使用注释符.例如:<div>…

百度MIP页规范详解 —— canonical标签

百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误这个标签怎么写?又是干什么用的呢? 简单来说,canonical标签用于关联原页面和MIP页,保证MIP页继承原页面权重,在移动搜索时优先展现MIP页.Canonical标签是MIP页连接外界的重要桥梁,不写或写错会导致MIP页不能和原页面产生联系,导致权重丢失,MIP页不展现. 0. "原页面&qu…

【CSS进阶】伪元素的妙用--单标签之美

最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值得一看).采用单标签完成各种图案,许多图案与本文有关. 也希望觉得不错的同学顺手在我的 Github 点个 star : CSS3奇思妙想 . 正文从这里开始,本文主要讲述一下伪元素 before 和 after 各种妙用. :before和::before的区别在介绍具体用法之前,简单介绍下伪类和…

TODO：Laravel 使用blade标签布局页面

TODO:Laravel 使用blade标签布局页面本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop,@push.使代码精简.提高页面下载速度.表现和内容相分离.站在开发者的角度看,web页面都可以提取相同的内容进行分离,让每个页面代码尽显主题内容,简洁明快,干扰信息少. 1. Laravel的blade标签代码格式是"命名.blade.php",这样是不是很简洁. 2. 创建统一布局风格…

css-父标签中的子标签默认位置

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .a{ width: 100px; height: 100px; background: red; position: relative; top: 40px; left: 50px; padding: 30px; } .b{ width: 50px;…

xpath提取多个标签下的text

title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Python,xml,scrapy] --- 本文首发在http://kingname.info 在写爬虫的时候,经常会使用xpath进行数据的提取,对于如下的代码: <div id="test1">大家好!</div> 使用xpath提取是非常方便的.假设网页的源代码在s…

多个Img标签之间的间隙处理方法

1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> <img src="/i/eg_tulip.jpg" alt="郁金香" heig…

html5标签canvas函数drawImage使用方法

html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在canvas中(x,y)处绘制图片. drawImage(image,x,y,width,height):在canvas中(x,y)处绘制图片,并将其缩放到指定的宽度和高度. drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,w…

NET Core-TagHelper实现分页标签

这里将要和大家分享的是学习总结使用TagHelper实现分页标签,之前分享过一篇使用HtmlHelper扩展了一个分页写法地址可以点击这里http://www.cnblogs.com/wangrudong003/p/5607743.html,今天分享的是net core的另外一种能写分页标签的方法具体是继承TagHelper,如下将讲述实现一个简单分页和总要注意步奏. 1.继承父类TagHelper并重写Process方法(这里还有一个异步的方法ProcessAsync各位可以自己尝试下) 2.…

mybatis_常用标签

1.<where></where>标签的作用可以动态的添加where关键字可以自动去掉第一个拼接条件的and关键字 <where> <if test="username!=null and username!=''"> and username like '%${username}%' </if> <if test="gender!=null and gender!=''"> and gen…

来吧，HTML5之基础标签(下)

<dialog> 标签定义对话框或窗口. <dialog> 标签是 HTML 5 的新标签.目前只有 Chrome 和 Safari 6 支持 <dialog> 标签. <dir> 标签定义目录列表.不赞成使用dir标签,请使用css样式: <div> 标签可以把文档分割为独立的.不同的部分.它可以用作严格的组织工具,并且不使用任何格式与其关联.如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效.…

来吧，HTML5之基础标签(上)

什么是html5 HTML 5 是下一代的 HTML.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 学习过程中标签的理解 <a>标签定义超链接,也就是锚.导航到某个网址或文件,应用其中的href属性.链接页面通常显示在当前浏览器窗口中,除非您规定了另一个目标(target 属性). 在 HTML 4.01 中,<a> 标签可以是超链接或锚.在 HTML5 中,<a> 标签始终是超链接,但是如果未设置 href 属性,则只是超链…

用javascript 写个函数返回一个页面里共使用了多少种HTML 标签

今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到是否蒙B了,如果是我面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答案,静下心想了想,突然..有了方法,完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</…

Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

Android XML shape 标签使用详解一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景.但是,也肯定也有人在能使用 Drawable 的地方选择使用一张 png 图(或者是一张 .9 图)作为 View 的背景,因为后者把问题交给 UI 设计人员去了,省事.当然,使用图片这种在项目中也很常见,如果不考虑 apk 大小,内存占用问题的话,是没有任何问题的.如果要给 apk 瘦身,减少内存…

Effective前端2：优化html标签

div { float: left; } .keyboard > div + div { margin-left: 8px; } --> div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme-info .field{font-weight:bold}#crayon-theme-info .field,#crayon-theme-info .value…

JSP 标准标签库(JSTL)

JSP 标准标签库(JSTL) JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签,SQL标签. 除了这些,它还提供了一个框架来使用集成JSTL的自定义标签. 根据JSTL标签所提供的功能,可以将其分为5个类别. 核心标签格式化标签 SQL 标签 XML 标签 JSTL 函数 JSTL 库安装 Apache Tomcat安装JSTL 库步骤如下: 从Apache的标准标签库中下载…

Spring配置文件标签报错：The prefix "XXX" for element "XXX:XXX" is not bound. .

例如:The prefix "context" for element "context:annotation-config" is not bound. 这种情况是因为没有申明该标签,然后就使用了.解决方发是,在配置文件头部加入相应的信息即可( 即xmlns:context="http://www.springframework.org/schema/context"). 这种情况是因为没有申明该标签,然后就使用了.解决方发是,在配置文件头部加…

Struts2入门(五)——OGNL和标签库

一.前言 OGNL和标签库的作用,粗暴一点说,就是减少在JSP页面中出现java代码,利于维护. 1.1.OGNL 1.1.1.什么是OGNL? OGNL(Object-Graph Navigation Language):对象图形导航语言,是一种功能强大的表达式语言,通过简单的语法,就能够任意存取对象的属性或者调用对象的方法,能够遍历整个对象的结构图,实现对象属性的类型转换功能. 1.1.2.OGNL的基本知识 1.OGNL表达式的计算是围绕OGNL上下文进行的 OGNL上下文实际上就是一个M…

javaScript中的小细节-script标签中的预解析

首先介绍预解析,虽然预解析字面意思很好理解,但是却是出坑出的最多的地方,也是bug经常会有的地方,利用好预解析的特性可以解决很多问题,并且提高代码的质量及数量,浏览器在解析代码前会把变量的声明和函数(整个函数体)提前到当前作用域的最顶端. 细节问题: 在多对的script标签中如果有相同的函数,那它们相互之间是不会受影响的,在第二对script标签中声明变量或者是创建函数,在第一对script标签中是无法访问到的,这就说明了,javaScript的预解析只会在各自的script标签中发生,同时,…

HTML5笔记2——HTML5音/视频标签详解

音视频的发展史早期:<embed>+<object>+文件问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick Time .Flash 问题:每个厂商每个标准,网站编码和格式也都不相同,flash的出现解决了面的问题,但是apple在07年决定任何设备将不再支持flash.而安卓也在4.0版本之后不再支持Flash, 因为Flash很占内存. HTML5认为浏览器应该原生支持音视频,因为他们现在也是web中的一等公民…

安卓客户端a标签长按弹框提示解决办法

昨天工作时候发现一个bug,是关于a标签的,在安卓客户端中,如果是a标签的话,长按会出现一个弹框,如图所示是因为安卓客户端的长按触发机制,以后进行wap端开发的时候,如果用到跳转页面尽量不要用a标签,取而代之可以用别的标签+onclick="window.location.href='';"的方式. 好久没有写博客了,最近在看工作流方面的东西和一些别的知识,比如orm,aop,spring框架等等,但总是看着看着就困,看到首页很多大神都写了好多那种很高深的文章,自己还在这么小的领域里…

HTML5 标签 details 展开搜索

details有一个新增加的子标签--summary,当鼠标点击summary标签中的内容文字时,details标签中的其他所有元素将会展开或收缩. 默认状态为收缩状态设置为展开状态为 <details open>…

Jquery 获得当前标签的名称和标签属性

得到标签的名称 $("#name").prop("tagName"); 或者 $("#name")[0].tagName; 注意:1.得到的名称为大写的 ,既"INPUT""TEXTAREA"的格式 2.注意"tagName"的大小写得到标签的属性 $("#name").prop("type"); $("#name")[0].…

a标签绝对定位，点击区域被图片遮挡（IE下）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> img{border:none;display:block;width:120px;height:120px;} .arrow{width:200px;height:200px;position:…

s:form标签

2017-01-07 17:43:18 基本的用法    <s:form action="save"> <s:hidden name=…

fmt标签把时间戳格式化日期

jsp页面标签格式化日期 <%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %> <f:formatDate value="时间戳" pattern="yyyy"/>…

一个标签的72变，打造一个纯CSS图标库

每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不甚满意. 终于下定心思来改造一个可缩放的图标库.github先上:https://github.com/qieguo2016/iconoo,目前提供下载link标签引入和npm+webpack的引入方式,详见项目的readme.(喂,来个star!).上图: 关于改造,一开始的想法就是使用百分比尺寸…

HTML5 <details> 标签

HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息. 用法一般情况下,details用来对显示在页面的内容做进一步骤解释.其展现出来的效果和jQuery手风琴插件差不多. 其大致写法如下: <details> <summary>Google Nexus 6</summary> <p>商品详情:</p> <dl> <dt>屏幕</dt> &…