Html (Hypertext MarkupLanguage),是用于描述网页文档的一种标记语言,是一种标准,它通过标记符号来标记要显示的网页中的各个部分。其本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容。如:文字如何处理,画面如何安排,图片如何显示等。于是这样就引出了我们的 html 标签。 html 标签就是 html 语言中所用的标记。

既然是标记,就应该是容易理解的,不然就像是一本牛津词典,还需要日夜来背诵,还不一定记住。

在牛腩新闻发布系统中第一次接触html标签。<div>,<p>,<br/>,<hx>……等都把握搞晕了,也不懂什么意思,就按部就班的敲啊,然后就在想:视频上用到这些标签毕竟是有限的,以后我要是自己做系统,需要显示的web页面更复杂该怎么办?这些标签够用吗?不够用,又该用哪些标签呢?

哪怕仅有这些标签,我过多时间就忘记了,怎么能把这些常用的标签记住,到时候可以联想起来呢?

问题有了,答案很快就有解了,以前没有在意牛腩老师的一些“不重要”的话,这是给了我答案:标题用<hx>,表格用<table>,表格的表头用<th>,标题里有个H ,难道是head。<p>是paragraph(段落),<tr> =table row.然后经过查证,果然如此,既然这样,我们就来揭开html 的面纱吧,看看语义化的标签。不要让CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,比如用<div>来代替<p>标记标题。

几个常用的html标签:

1、<Hx>=head+x

<h1>、<h2>、<h3>、<h4>,作为标题使用,并且依据重要性递减。<h1>是最高的等级。

例如:

<h1>文档标题</h1>

<h2>次级标题</h2>

2、<p>=paragraph:段落标记。

知道了<p>作为段落,就不再使用<br/>来换行了,而且不需要<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行,而且换行的效果优于<br>。段落与段落之间的空隙也可以利用CSS来控制,很容易而且清晰的区分出段落与段落。

3、<ul>、<ol>、<li>

<ul>=unlist无序列表,<ol>=orderlist.有序列表。在web标准化过程中,<ul>还被更多的用于导航条,本来导航条就是个列表。

<li>=list.列表项目。

例如:<ul>

<li>项目一</li>

<li>项目二</li>

<li>项目三</li>

</ul>

<ol>

<li>第一章</li>

<li>第二章</li>

<li>第三章</li>

</ol>(有严格的顺序)

4、<em>、 <strong>

<em> =emphasize。是用作强调的,<strong>是用作重点强调的。

大部分浏览器用斜体显示强调的内容,用粗体来显示重点强调的内容,然而,这是没有必要的,如果是为了确定强调内容的显示方式,最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时,就不要使用强调了。而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好,特别是斜体对于中文来说,那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。

例如:

<p><em>强调</em>的文本通常用斜体显示,

然而,<strong>特别强调</strong> 的文本通常以粗体显示。</p>

5、HTML Table tr td th表格标签元素

定义表格标题

<table>

<tr>

<th>学院;</th>

<th>专业;</th>

<th>班级;</th>

</tr>

</table>

定义表格主体

<table>

<tr>

<td>数学与信息;</td>

<td>信息;</td>

<td>2班;</td>

</tr>

</table>

6<div>=division.在熟悉不过的分块。

在<div>快中可以添加body中的任何元素。

例如:

<div>

<p>

<table>

……

<table>

</p>

</div>

7、<br/>  = blank row,空行。

设定一个空行

二、区别:

div br p三者区别

1、用法不同。

div和p是成对组合闭合标签;以<div>开始,</div>结束;

以<p>开始,</p>结束。

<br/>是单一的闭合标签。

2、使用范围不同。

div标签和p标签是用于网页布局。

div为普通布局标签,如span标签一样布局内容,设置DIV的CSS样式即可实现内容布局效果。

p标签为段落标签,通常用于文章分段。

br标签是用于内容换行。比如文字内容换行排版作用。

br可以放置到div与p中使用,同时div也可以放入p中使用,p也可以放于div中使用。

div与span区别

div占用的位置是一行,

span占用的是内容有多宽就占用多宽的空间距离,和不使用一样效果。

如图:

总结:html 中的标签都是可以语义的话的。一个HTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记。

揭开Html 标签的面纱,忘不了的html .的更多相关文章

  1. ASP.NET 运行时详解 揭开请求过程神秘面纱

    对于ASP.NET开发,排在前五的话题离不开请求生命周期.像什么Cache.身份认证.Role管理.Routing映射,微软到底在请求过程中干了哪些隐秘的事,现在是时候揭晓了.抛开乌云见晴天,接下来就 ...

  2. 带你揭开ATM的神秘面纱

    相信大家都用过ATM取过money吧,但是有多少人真正是了解ATM的呢?相信除了ATM从业者外了解的人寥寥无几吧,鄙人作为一个从事ATM软件开发的伪专业人士就站在我的角度为大家揭开ATM的神秘面纱吧. ...

  3. netty源码分析之揭开reactor线程的面纱(二)

    如果你对netty的reactor线程不了解,建议先看下上一篇文章netty源码分析之揭开reactor线程的面纱(一),这里再把reactor中的三个步骤的图贴一下 reactor线程 我们已经了解 ...

  4. 揭开Future的神秘面纱——结果获取

    前言 在前面的两篇博文中,已经介绍利用FutureTask任务的执行流程,以及利用其实现的cancel方法取消任务的情况.本篇就来介绍下,线程任务的结果获取. 系列目录 揭开Future的神秘面纱—— ...

  5. 揭开Future的神秘面纱——任务执行

    前言 此文承接之前的博文 解开Future的神秘面纱之取消任务 补充一些任务执行的一些细节,并从全局介绍程序的运行情况. 系列目录 揭开Future的神秘面纱——任务取消 揭开Future的神秘面纱— ...

  6. 揭开Future的神秘面纱——任务取消

    系列目录: 揭开Future的神秘面纱——任务取消 揭开Future的神秘面纱——任务执行 揭开Future的神秘面纱——结果获取 使用案例 在之前写过的一篇随笔中已经提到了Future的应用场景和特 ...

  7. SparkSQL大数据实战:揭开Join的神秘面纱

    本文来自 网易云社区 . Join操作是数据库和大数据计算中的高级特性,大多数场景都需要进行复杂的Join操作,本文从原理层面介绍了SparkSQL支持的常见Join算法及其适用场景. Join背景介 ...

  8. 揭开HTTPS的神秘面纱

    摘自:https://www.cnblogs.com/hujingnb/p/11789728.html 揭开HTTPS的神秘面纱   在说HTTP前,一定要先介绍一下HTTP,这家伙应该不用过多说明了 ...

  9. EntityFramework Core表名原理解析,让我来,揭开你神秘的面纱

    前言 上一节我们针对最开始抛出的异常只是进行了浅尝辄止的解析,是不是有点意犹未尽的感觉,是的,我也有这种感觉,看到这里相信您和我会有一些疑惑,要是我们接下来通过注解.Fluent APi.DbSet分 ...

随机推荐

  1. server正式的环境性能测试nginx-php 指着寻求突破的表现

    因为我是第三级城市语言.无法接触到更牛接触逼公司或环境.这是你母亲的现场环境摸过几次.截至完毕,测试已设法提高空间. 公司须要的站点执行环境.不能由于我这边的瓶颈而阻碍了公司进行,希望各位大能能不吝惜 ...

  2. ADS-B 雷达 显示终端5.8

    改动日志 1  更新背景地图. 增加了全国范围内的国际航路.区域航路信息,全部航路信息来自网络及中国民用航空局公布的公开资料:航路採用深蓝色画笔绘制航路中包括有航路代码.高度及报告点信息.代码及报告点 ...

  3. 【转】Oracle修改表空间为自动扩展

    1.数据文件自动扩展的好处1)不会出现因为没有剩余空间可以利用到数据无法写入2)尽量减少人为的维护3)可以用于重要级别不是很大的数据库中,如测试数据库等 2.数据文件自动扩展的弊端1)如果任其扩大,在 ...

  4. JQ优化性能

    一.注意定义jQuery变量的时候添加var关键字这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:$loading = $('#loading'); / ...

  5. jQuery库(noConflict)冲突解决机制

    很多JSFramework库选择使用$符号作为一个函数或变量名,而在实际的项目开发,模板语言,则有可能"$"符号是模板语言keyword.例如Veclocity模板语言,$它是ke ...

  6. loadrunner必用函数web_reg_save_param获取多个符合边界值条件的使用方法

    在做loadrunner性能脚本开发时,常常碰见一个需求:符合web_reg_save_param函数中定义的左右边界值的值有多个,而我们的常规写法默认返回的是符合条件的第一个,而有时我们却需要使用后 ...

  7. POJ 3928 &amp; HDU 2492 Ping pong(树阵评价倒数)

    主题链接: PKU:http://poj.org/problem?id=3928 HDU:http://acm.hdu.edu.cn/showproblem.php?pid=2492 Descript ...

  8. Java集合之ArrayList源码分析

    1.简介 List在数据结构中表现为是线性表的方式,其元素以线性方式存储,集合中允许存放重复的对象,List接口主要的实现类有ArrayList和LinkedList.Java中分别提供了这两种结构的 ...

  9. HDU 4945 2048(DP)

    HDU 4945 2048 题目链接 题意:给定一个序列,求有多少个子序列能合成2048 思路:把2,4,8..2048这些数字拿出来考虑就能够了,其它数字不管怎样都不能參与组成.那么在这些数字基础上 ...

  10. iOS基础 - Quartz 2D绘图

    一.Quartz 2D Quartz 2D是一个二维图形绘制引擎,支持iOS环境和Mac OS X环境. Quartz 2D以PDF的规范为基础的图形库,用来绘制二维文字和图形,允许相同的绘图指令在任 ...