为什么80%的码农都做不了架构师?>>>   

加油,HTML 虽然很多标签,不过用用就习惯了。很快就能maste !

HTML 是原始内容和浏览器沟通的方式。把原始内容组织成为HTML的格式,浏览器能够认识,并很好的展示出来。

因此,写一个网页最重要的时我们要准备什么样的内容。然后,参考HTML的规则,以HTML的规则对这些内容进行包装。当我们包装成为HTML格式后,浏览器就能够很好的解读了。

HTML的规则是以HTML的标签来表达的,对于HTML规则来说,标签就是内容。也就是我们准备的内容需要包装在标签内部来表示。这也就是当我们打开浏览器,右键查看源代码的时候,总是有很多标签的原因。我们看到的网页就是这份源代码被浏览器解释后的结果,这份源代码就叫做文档(document)。

HTML的标签是有限的,而我们要表达的内容如此的丰富多彩,显而易见,我们写HTML就是用有限的HTML标签表达无限的内容和思想。很像一个翻译是不?呵呵。用有限的字词,表达无尽的诗意。好的翻译呢,我们说优雅,说美;差的呢,我们说牵强,说丧尽节奏,不择手段。

不过这个HTML编写和翻译不同的地方在于,每个人的翻译看起来都不一样;而HTML的翻译在浏览器解释后,是可以看起来一样的,只是查看源代码时才发现原来源代码不同。说HTML编写的好坏呢,如果为了显示效果,不择手段,标签乱堆,那尽管在浏览器解释后,页面看起来是非常漂亮,也是不太好的。这种情况可以前面的八个字概括,丧尽节操,不择手段

所以学习HTML的第一步,就是看看HTML的标签有哪些,这些标签基本用法是做什么的。

常用的标签:

div    这个是最常用的,他表示一块内容。几乎所有的标签都可以由他替代,是个万金油。因为,不管怎么样,展示出来的效果一定可以划分成一块一块的(所以倒着推理,内容也一定可以通过包装成div而现实成为一块一块的)。不过缺点是,div 没有亲戚,也就是,如果两个div在一起,那么他们还是两个div。不会因为他们挨着很近就说他们两个是一对,也不能说他们两个很远,就不是一对。div 是孤独的。

span    这个也比较常用。理由和div的一样。至于和div的区别,动手实验一下就知道了。

p        这个表示一个段落文字。可以用来展示一个段落的文字。

h1~h6    这个是一些列大小的标题。

a        这个是超链接。是从此处到彼处的桥梁。往往表示通过点击此处能够从当前的状态(页面)进入到另一个状态(页面)。

img     这个表示一张图片。可以显示一副图片。

ul li     这个是一套标签,表示列表。ul只是个壳子,代表一个大类别,重要的是li。li之间是有关系。他们属于同一个父类型,他们互为兄弟。

dl dt/dd   , ol li 这两套标签和ul li 是一样的。至于区别,自己动手实验。

form     学名表单。用来接受输入和按钮点击,当输入完毕后,form 就是指定这些输入交给谁,以及如何交付的。form本身不具有输入和按钮点击功能。不过他有一组成员帮组实现。

input    比如百度搜索,那个输入框。特点是你能够输入一行文本。

textarea     比如百度贴吧发表回帖,的那个输入框。特点是能够输入多行文本。

=================华丽的分割线===================

在参与实际的开发过后,我时常会迷惑,HTML到底核心是内容还是样式。如果是内容,那么大概90%以上的时间是在设计layout布局和css样式,如果是样式为主,那么又如何体现html的内容语义化呢?

今天我想到,无论是内容还是样式,都是在为了更好的表达。html的语义化,应该是一种符合常规的表达方式,以至于机器和程序都能够很好的理解。这样看,内容和形式,都是一样的,基于表达的需要产生的。所以如果是针对视觉用户来说,那么边框,颜色等形式也是内容的一部分了。那么再理解通过多层潜逃的div来完成一定的布局或者样式上,就没有心理障碍了。

转载于:https://my.oschina.net/honchy/blog/353291

HTML 学习 第一步内容相关推荐

  1. UNP学习第一步:unp.h的安装及第一个程序的运行

    UNP学习第一步:unp.h的安装及第一个程序的运行 unp.h的安装 源代码编译 静态库安装 运行第一个程序 启动daytime服务 unp.h的安装 源代码编译 在书籍网站(http://www. ...

  2. python安装包_迈出Python学习第一步:Python开发环境的下载与安装

    所谓"磨刀不误砍柴工"."工欲善其事,必先利其器",都在告诉我们一个道理:要做好一个事情,事先做好充分的准备工作是非常重要的.所以在我们正式学习用Python编 ...

  3. 学习java第一步_Spring Boot 学习第一步(搭建初步环境)

    学习一个东西的第一步是要学会如何迅速搭建起来一个可用的环境,也就是demo.这里我选择的开发环境是Eclipse, Maven + Spring Web 项目结构在Eclipse下面的实现 我们在这里 ...

  4. Spring Boot 学习第一步(搭建初步环境)

    学习一个东西的第一步是要学会如何迅速搭建起来一个可用的环境,也就是demo.这里我选择的开发环境是Eclipse, Maven + Spring Web 项目结构在Eclipse下面的实现 我们在这里 ...

  5. 深度学习第一步(anaconda、pytorch安装)

    不讲太多序言,做个无趣的男孩子,上来就上干货 第一步:anaconda安装 1.首先下载anaconda 官网咱们就不说了,下载慢,还容易出问题 直接上国内好资源,在清华镜像源下载安装包 anacon ...

  6. JAVA学习第一步-配置JAVA开发环境和学习资料

    写代码配置开发环境非常重要 java开发环境配置 1 windows中环境配置 1.1 JDK工具包 1.2 IDEA 1.3 eclipse安装 2 Linux下安装 2.1 VMware虚拟机 2 ...

  7. AliOS Things物联网操作系统学习第一步:Windows下AliOS Things开发环境搭建

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 人工智能编程入门博客 之前如果想要使用AliOS Things开发ESP8266模块的固件,开发环境 ...

  8. knockout学习第一步

    第一次接触knockout,就感觉和ng有太多神似!MVVM框架中Angular是好,但这么大而全的框架,学习难度可不低呢,上手起码也得要个一两周吧.而knockoutjs专注于数据绑定,只需一两天就 ...

  9. python编程基础是什么-编程学习第一步,让你20天搞定Python编程

    大家好,欢迎大家阅读篇文章,Python是当前火爆的编程语言之一:从后台开发到自动化,从数据分析到人工智能,都有Python的身影.我们掌握Python,就有了进入这些行业的可能.下面简单介绍下老猫和 ...

最新文章

  1. 再记一次ceph object unfound的艰辛历程
  2. Squid、Varinsh和Nginx有什么区别,工作中你怎么选择?
  3. 第十六期:Vue 3.0 前瞻,体验 Vue Function API
  4. 【CodeForces - 706C】Hard problem(dp,字典序)
  5. Java 8 为什么要使用Lambda表达式
  6. 如何从标签创建新分支?
  7. curl 慢 不稳定_徐工起重机:龟速一样"慢"的机器,竟还有人抢着买?
  8. 2022年CXO领导力峰会暨IT东方会技术高管年会
  9. ACCESS实例1——简易文档管理器
  10. ECharts实操手册
  11. R软件中调用windows字体二
  12. 利用JS代码批量自动取消抖音所有关注
  13. dsp2812 pmsm foc之EVA初始化详解
  14. 电厂计算机监控系统的结构及功能,水电厂计算机监控系统
  15. 各个版本的精易模块分享下载
  16. USRP X310 Windows烧录
  17. 虚拟机创作ubuntu18的ISO镜像
  18. OneDrive说明与OneNote的同步操作
  19. 【大学生软件测试基础】三角形构成问题 - 决策表
  20. win10计算机睡眠 隔几分钟就唤醒,Win10电脑睡眠时经常被自动唤醒如何解决

热门文章

  1. html mint ui,vue mint-ui初次使用总结
  2. CSS学习05之结构伪类选择器
  3. python如何导入matlab数据,python学习-python到matlab数据的传输
  4. linux安装jdk8_Skywalking系列博客1-安装单机版 Skywalking
  5. python读取二进制数据中的while循环_在Python中读取二进制文件并循环遍历每个字节...
  6. Python-OpenCV 处理图像(五):图像中边界和轮廓检测
  7. Yann LeCun:深度学习硬件前瞻
  8. 大白话系列之C#委托与事件讲解(三)
  9. 五个方法成为更好的程序员
  10. 从源代码剖析Mahout推荐引擎