观看了几组介绍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、设置字符集、缩放、关键词、描述、语言...
经常使用到的大概就是上述几个作用
说在最后:可能白天喝了大杯咖啡的原因,大晚上的翻来覆去睡不着,于是就着今天的学习起来总结了一下笔记,这些标签虽然很基础很基础,但做了前端半年之久我对它们仍然有不少的错误理解,加粗的字体内容是我先前完全不知或理解有误的内容,另外的便是我觉得罗列出来可能有利于初学者正观的点。挺长的一页,自我表扬下哇咔咔,望坚持(*^__^*) (哇呜,肚子好饿怎么破。。)