HTML标记与属性

说到HTML标记就得先说说HTML元素

HTML文档是由HTML元素组成的,而HTML文档就是我们平常所见到的网页,我们看到的网页上的表格、图片、列表,都是网页上的元素

可以说网页就像是拼图一般,而元素就是一块一块的图,用一个一个的元素将我们的网页拼接完整

当然,单单是使用HTML来书写网页的话可能还不能达到我们所预期的要求,那么那时我们就需要加入CSS(层叠样式表)来进行样式的布置,这个我们在CSS板块去讲如何将我们的网页做得漂亮


现在元素的概念应该是有了,那元素和标记又有什么关系呢?

可以说,我们的元素是由我们的标记构成的

当然我们的标记可以分为两种:1、单标记;2、双标记。当然网上也有其它的说法,这仅仅是说法的不一样,如果觉得网上的说法好,这个也没有什么

现在先讲一个标记规则,标记是由成对出现的<>来书写的,所有的标记都必须按<标记符号>这种方式书写,比如<p>段落标记


那既然分为单标记和双标记,怎么去构成元素呢?

单标记:元素=<img>

双标记:元素=<p>内容文本</p>      <p>起始标记       </p>结束标记

这样举例子,大家应该看得懂吧,单标记是没有内容文本的,所以没有</img>这个部分,不过个人建议开始学习HTML的同学在写单标记时这样书写<img />,在>前加上一个“/”,这样的话可以很清楚的看见自己的这个元素的结束

这里有个提醒大家注意的问题,就是双标记一定记得是成对出现的,并且在后面使用嵌入标记时一定要按照规定书写

嵌入标记:就是在一个标记中一个标记,典型的例子就是我们的html文档的<html><head></head><body></body></html>,嵌入时一定不要将结束标记写错位置

还是不能明白的话

比如后面我们要学习到的<p>标记和<span>标记,嵌入时正确的书写形式:<p><span></span></p>,错误的书写形式:<p><span></p></span>

一定要注意,虽然是个小问题,但初学者很容易在书写双标记时没有成对出现,顺序会出错


讲了一些很简单的细节的东西,接下来我们讲讲标记的属性

什么是标记的属性呢?

比如:<img src="hellow.gif">这个元素中出现了src="hellow.gif",这个src就是<img>标记的属性,而=后面用""包裹起来的是属性的值,其作用是告诉我们浏览器,在遇到这个标记时需要加载后面src值的hellow.gif图片

当然我们标记的属性还有很多很多,在之后代码的练习中遇到了可以通过W3Cschool网站进行意思查询,这里只需要知道什么是属性就可以了


现在讲讲我们的一些标记

<!doctype html>告诉浏览器HTML的版本(这种格式为HTML5版本),后面html是指明该文档的根元素,什么是根元素呢,就是说本文档的根部,也是最大的元素,其中包含了所有的其它元素<html lang="en"></html>标记,中间包含网页的内容,lang="en"表示搜索引擎搜索时,告知搜索引擎该网页时中文网页还是英文网页,中文网页为zh-CN,当然现在的lang规定中对这种网页分类又做了改变,可以在网上查查最新的分类


<head></head>网页的头部分,其中有<meta 标记,一般的html5网页会默认有charset="UTF-8">这个是告诉网页我的网页编码集是UTF-8,这个和网页乱码有关系

其中还有<title></title>标记是书写窗口名


<body></body>网页的身体部分,所有导航栏以下的网页内容都写在该标记中

在<body></body>中常见的标记有:

<h1>~<h6>    标题标记(heading),也就是正文的标题,分为6档,字体会自动加粗,h1到h6表示重要性,这个和之后浏览器的索引有关系,切记:不要简单认为只是按字体大小来区分,是按照其重要性来进行排列,详细可自行去查看W3C上的注解             默认:块级元素


<p></p>   段落标记(paragraph)     默认:块级元素


<blockquote></blockquote> 引用文本(blockquote) 和<p>区别在于默认缩进    块级元素


列表ol、ul、dl  列表标记单独存在是没有什么意义的          块级元素

有序列表(orderd list) ol,需要和li标记进行联合使用做出有序的列表,字体前面默认为数字,从1、2、3....连续

无序列表(unorderd list) ul,需要和li标记进行联合使用,和有序列表的区别在于前面部分默认是点

自定义列表(defined list) di,自定义列表,和前面两个列表有较大的区别,在书写自定义列表前先得书写dt自定义标题,然后在标题下面写dd自定义内容,并且每个标题内容写完后接着书写dt,然后加上dd:<dl><dt>人称</dt><dd>你</dd><dd>我</dd><dt>姓氏</dt><dd>赵</dd><dd>钱</dd></dl>


预排版<pre> 将我们书写的文本的原本格式保持下来,除了该标记的内容可以有回车换行以外,其它的标记内容换行都不起作用,并且该标记中的内容中出现几个空格就会写出来,其余标记的内容的空格都会被省略为一个,换行也会变为一个空格       块级元素


分区块<div> 本身没有什么意义,可以看做是一个盒子,一般将一些元素放入,可以起到一个分区的效果,但现在HTML5中已不建议全篇使用div进行分区,HTML5中一个重要思想就是语义化,出现了一系列具有意义的类似div的标记代替div的使用,在网页制作的学习前期可以使用div进行简单的分区,在CSS使用中,有重要的作用   块级元素


跨越多个字符<span> 和<p>标记是很类似的,不过因为它是内嵌元素,那这个地方就要提一提什么是内嵌什么是块级元素了


块级和内嵌元素,简单用一句话概括就是块级元素独占一行,后面的内容会换行,内嵌元素则不会使后面的内容换行后面的内容会跟在其内嵌元素后面;


这样的话应该知道<span>和<p>标记的区别了,当然块级元素和内嵌元素在之后学习了CSS内容后就可以进行改变,所以要对块级和内嵌有一个深刻的印象,在之后学习CSS时再深入了解和探究


特殊字符,其实就是一些标准键盘上没有的符号,通过特殊字符可以在网页上实现这些字符的输入,当然最常用的是在网页上书写HTML网页,其中在使用<、>时会遇到这个问题,当然,也不需要死记硬背那些特殊字符,在一般的编辑器中输入&就可以进行查找,实在找不到就去百度查查即可,以&开始";"结束   也可以认为是内嵌元素虽然没有被<>包裹


超链接<a> 是网页上很常见的一个标记,其中它最重要的是有一个href的属性,通过这个属性可以达到链接网页,下载,做描点等功能   内嵌元素


图像<img src="" alt="" title=""> 在网页上显示图片,src的值是图片的路径,alt是当图片加载失败时显示的文字,title是当鼠标放在图片上时显示出来的文字,现在仅支持部分格式的图片,如:GIF,JPG,PNG    内嵌元素


多媒体信息<object> 插入一个多媒体信息,不过现在已经被HTML5使用其实元素替换<video>视频<audio>音频替换   内嵌元素


表格<table> 国内在2008年前的网页布局普遍是使用表格来进行布局的,不过现在主要运用于通过JS和AJAX来进行局部数据刷新      块级元素

其中包含两个元素

<thead></thead> 表格的头部,书写标题的位置,其中使用<tr></tr>来表示一行数据,<th></th>表示一列数据

<tbody></tbody> 表格的身体,书写表格中的数据,使用<tr></tr>表示一行数据,<td></td>表示一列数据


<td></td>与<th></th>的区别,th在td的基础上字体加粗,并且进行了居中


<table>中有两个属性:cellspacing设置每个格子之间的间隔,border设置边框的大小    


插入其它网页<iframe> 在其它页面中加入网页,目前已经很少使用,使用src属性来插入指定的内容    块级元素


还有一个更为常用的标记——表单,在下面会单独进行介绍,本内容一定要了解每个标记的意思和用处,并且区分它是块级还是内嵌元素,多进行练习,这些知识并不难理解

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值