html标签认识的一些查漏补缺

观看了几组介绍html标签的视频,虽然很基础但认真瞧下去发现以往对这些标签的认识还是有许多不到位的地方,现总结:

  对于h1-h6标签,由于默认样式的原因每次使用都要特别的重新设置样式,所以在写网页的时候我都是习惯使用span或层取代之,但其实这样做是不对的,因为h1-h6设计的初衷是有其语义的,它是SEO重要的衡量指标

  文本突出从强到弱有三个标签,分别是:

    <mark>标签:mark标签存在的意义就是为了标示标识,如匹配搜索项以及提示拼写错误等,例如我们页面ctrl+f进行关键字搜索时关键字会黄底高亮的效果一般,mark实现的就是这个效果。

    <strong>标签:strong标签强调文本内容,但不改变其含义(此处说的含义大概是SEO对文本内容含义的理解吧),在页面表现上是标签内文本加粗。

    <em>标签:表示感情上的强调,增强了语气(作用于机器搜索以及盲人阅读方面)。

  p、div、span、img:

    p:用于文章的分段,上下带边距。

    div:主要用于布局工作,做一些分割容器。

    span:行内书写,与mark相似,但span无语义(主要用于改变局部样式)

    img:img是图片标签,其中的alt属性的值是在图片没有成功加载时显示文本内容。图片的width属性值是百分比的时候,指相对于父容器的百分比。

  不知道有多少人像我一样不管有序列表还是无序列表统统使用<ul>标签,其实这样做也是不标准的

  在页面用到有序列表的时候我们应该使用的标签是<ol>,虽然ul通过样式的设置也能展现出同ul一样的页面效果,但ol标签实际上是语义标签,自有设计它的理由存在,具体不表(其实就是我忘了)。

  ol主要有三个属性:

    start:指定开始标签的初始值

    type:指定标签的序号,可以是数字(默认)、大小写字母以及大小写罗马数字

    recersed:这个是HTML5新增的属性,主要用于有序列表的逆序展示。

  至于ul的话也是有type属性的,但并不建议使用,可以用css进行设置,因为这是样式层的东西,数据跟表现要分离

  对于a标签,一直以来我都以为它便是超链接的作用,今天才知道原来还有其它的应用,在此拓展一下:

  1、href = ”malito:[email protected]“  #当href赋值如右时,默认会打开我们本地上的邮箱客户端(没有则打开一个空白页面)[我在谷歌上测过,确是没有打开空白页面的,本地上没有邮箱客户端无从测试...周一上班倘若记起另测吧]

  2、href = "#id"          #这个是把a标签当锚点使用,这个作用其实我还是有点印象的,遥记当时上课老师提过的,但过后便忘了,后来也没有这方面的需求就也没记起过,在此提下。

  接下来谈的是table,在此不得不提一句我们学校至少教网页的老师真是渣得一塌涂地,几乎现在所有人都鄙视的做网页的行为在我们第一次接触网页的时候她便是让我们如此做的,譬如用表格布局,使用DW拖拽控件做网页...诸如此类,而且,没记错的话,当时已经是13年的下半年了,以至于后来自己一知半解的在网上找资料时看到许多人对使用table的吐槽与鄙视竟然深以为然,一直到年初出来实习,看到公司项目竟然还在用table感觉到非常的不可思议,这不是网上人深恶痛绝,早已抛弃了的东西吗?怎么我们的项目还在使用,对此我还对我们主管提出过质疑,他给我的回答是该用的地方还是需要用的,我半解还疑。今天标签介绍的视频听到系统的解释才算是完完全全的释疑!!

  table是一种语义化标签,当今网上许多人对使用table相当的鄙视,但其实这是不对的,使用表格布局确实是一种让人鄙视的行为,但是在该用表格的地方非要使用层进行布局那也是相当愚蠢的。

  另外,tr标签是一种虚拟的格式,表格的样式应该写在表格上,不要对tr进行样式的设置,否则浏览器的兼容可能会让你很麻烦。

  表格有两个属性是必须写的:cellpadding、cellspacing,因为这两个属性在不同浏览器有不同的表现,为了兼容各类浏览器,最后手动设值

  html的全局属性:

    class:对html没有任何意义(此处指的应该是对浏览器解释没有任何意义),主要是用于css设置样式

    contenteditable:HTML5新增属性,使标签可编辑。

    data-*:自定义属性,这也是HTML5新增属性,HTML5有一套api能更好的读取(相比较于命名随便的自定义属性而言)

    dir:规定元素中内容的文本方向,HTML5新增属性。[这个我实验了一下并没有生效,可能浏览器版本的问题吧]

    id:页面唯一定义标签的属性

    draggable:规定元素是否可拖动

    lang:规定元素内容的语言

    spellcheck:规定是否对元素进行拼写和语法检查[应该还是浏览器不兼容的原因,我试验的时候没有看到相关效果]

    style:规定元素的行内css样式

    tabindex:规定元素的tab键次序

    title:规定有关元素的额外信息

    translate:规定是否应该翻译元素内容

  表单元素:

    lable有个for元素用于绑定单选框|多选框

    file标签的accept属性制定file控件接受的文件类型

    image按钮有提交表单的作用

    隐藏域作用于js交互

    option标签上传到服务器上的值以value值为准

    

 提交数据到服务器是有两种方法的:

    1、表单(常规方法)

    2、ajax

 外部资源的引入有两种方式

   1、src  替换网页的内容

   2、href  用于标示资源和文档的关系

 

 iframe(现在用途有限)会创建一个包含另外一个文档的内嵌框架,src属性引入文档(正常需求不会这么做)。简单的说该标签作用就是在网页中嵌套网页

 

 meta标签可提供有关页面的元信息,这个无须死记,稍作了解便可

   data-spm、设置字符集、缩放、关键词、描述、语言...

  经常使用到的大概就是上述几个作用

说在最后:可能白天喝了大杯咖啡的原因,大晚上的翻来覆去睡不着,于是就着今天的学习起来总结了一下笔记,这些标签虽然很基础很基础,但做了前端半年之久我对它们仍然有不少的错误理解,加粗的字体内容是我先前完全不知或理解有误的内容,另外的便是我觉得罗列出来可能有利于初学者正观的点。挺长的一页,自我表扬下哇咔咔,望坚持(*^__^*) (哇呜,肚子好饿怎么破。。)

    

  

  

  

时间: 2024-10-14 22:37:44

html标签认识的一些查漏补缺的相关文章

近来的java小总结(2.1):类的知识的查漏补缺

首先,我是一名新手,所以,要带着批判的眼光来看下面的文章   这篇文章说了些什么? 这文章是我近来8.6号来在编程思想上打的代码,从0~200页的源码接近到在这里,下文正是总结这0~200页的的知识,涉及到接口,内部类.初始化,数值计算的一些细节.此文章不会一下子写完,可能隔一天可能再补下来.因为代码确实有点多.. 注意 1 我的注释不一定正确(不过各小标题和代码一定是正确的,因为是书本上的原话,但是注释不一定正确),如果你确信我的内容的话,你可能会损失很大,因为我只是个菜鸟,我只是来补救一些知

查漏补缺——java多态

---恢复内容开始--- 刚学完java,开始了查漏补缺阶段阶段,为了巩固自己的知识和为别人提供一些微末的帮助决定开通博客,求各位大牛们指出我的不足,不要吝惜言语,也希望我的总结可以对别人有帮助,对自己对他人负责. 开始正文:术语多态:可以定义为“有多种形态”,多态引用是一个一个在不同时刻可以指向不同类型对象的引用变量.通过多态引用可以调用不同的具体的方法. 类方法的多态性的实现有两种方式: 1:方法重载:可以声明多个同名但是参数不同(个数.类型和顺序)的方法.注意呵呵重载方法只能声明在一个类里

近来的java小总结(2.2):类的知识的查漏补缺

1 首先,我是一名新手,所以,要带着批判的眼光来看下面的文章   这篇文章说了些什么? 这文章是我近来8.6号来在编程思想上打的代码,从0~200页的源码接近到在这里,下文正是总结这0~200页的的知识,涉及到接口,内部类.初始化,数值计算的一些细节.此文章不会一下子写完,可能隔一天可能再补下来.因为代码确实有点多.. 注意 1 我的注释不一定正确(不过各小标题和代码一定是正确的,因为是书本上的原话,但是注释不一定正确),如果你确信我的内容的话,你可能会损失很大,因为我只是个菜鸟,我只是来补救一

java知识查漏补缺

一.重写(override)和重载(overload)的区别 二者除了名字相似,其实没什么联系 范围不同:重写发生在同一个类的不同方法之间.重载发生在父类和子类自荐. 前提: 重写要求:方法名相同,参数列表不同,对于返回值类型不要求相同. 重载要求:方法名形同,参数列表也相同.重载是实现多态的关键,注意如果父类中的方法是private类型,那么子类中对应方法不算重载,而相当于是定义了一个新方法. 二.final的用法 修饰类:该类不能被继承 修饰方法:该方法不能被重写 修饰属性:该属性初始化后不

自家用的java小总结(2.4):类的知识的查漏补缺(内部类)

1 2      首先,这是一篇自己用的文章,不对读者承担任何责任,所以,要带着批判的眼光来看下面的文章   1 发现了,得加上输出结果,怕自己出错,~~   这篇文章说了些什么? 这文章是我近来8.6号来在编程思想上打的代码,从0~200页的源码接近到在这里,下文正是总结这0~200页的的知识,涉及到接口,内部类.初始化,数值计算的一些细节.此文章不会一下子写完,可能隔一天可能再补下来.因为代码确实有点多.. 注意 1 我的注释不一定正确(不过各小标题和代码一定是正确的,因为是书本上的原话,但

查漏补缺

查漏补缺[1].this语句:this语句用于构造函数之间进行相互调用.this语句只能定义在构造函数的第一行,因为初始化要先执行.[2].对象的初始化过程 Person p =new Person("hei",10); 1.因为new用到了Person.class,所以先找到Person.class文件加载到内存中 2.执行类中的静态代码块,如果有的话,给Person.class类进行初始化 3.在堆内存中开辟空间,分配内存地址 4.在堆内存中建立对象的特有属性,并进行默认初始化 5

《CSS权威指南》基础复习+查漏补缺

前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司,事情不算多,于是拿起<CSS权威指南>进行"基础学习"+"查漏补缺",本篇文章主要是总结了些自己认为CSS中值的注意的几个知识点(本文知识点仅限本书范围内,若要讲CSS全部样式,那本兽还是选择慢慢懵逼去~). 选择器 这里要说明的是类选择器的嵌套选择与多类

hibernate查漏补缺2

Hibernate对象状态 瞬时(transient):由new操作符创建,且尚未Hibernate Session关联.瞬时对象不会被持久化到数据库,也不会被赋予持久化标识. 持久(persistent):持久化的实例在数据库中有对应的记录,并拥有一个持久化标识. 持久化的实例可能是刚被保存,或刚被加载的,无论哪一种,它都只存在于相关联的Session作用范围内.这点很重要.Hibernate会检测处于持久化状态的对象的任何变动,在当前操作单元执行完毕时,将对对象数据与数据库同步. 脱管(de

今天开始慢下脚步,开始ios技术知识的查漏补缺。

从2014.6.30 开始工作算起.现在已经是第416天了.不止不觉,时间过的真快. 通过对之前工作的总结,发现,你的知识面,会决定你面对问题时的态度.过程和结果. 简单来讲,知识面拓展了,你才能有更多的备选方法,才更有可能选择到一条最最有效的路. 趁现在正好有时间,时机又正好,开始我的技术总结补缺之路吧. 参考教材<疯狂iOS讲义>.主要原因是,知识比较全面,涉及面比较广.适合查漏补缺. 开始吧.看我能坚持多久. 版权声明:本文为博主原创文章,未经博主允许不得转载.