后端码农谈前端(HTML篇)第一课:HTML概述

一、什么是HTML?

HTML不是编程语言,是用来描述网页文档(页面结构)的一种标记语言;

HTML指超文本标记语言(Hyper Text Markup Language),之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。;

HTML规定了自己的语法规则,用来表示比“文本”更丰富的意义,比如图片,表格,链接等。浏览器 (IE,FireFox等)软件知道HTML语言的语法,可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。

二、HTML是什么样的?

简单地来说,HTML的语法就是给文本加上表明文本含义的标签(Tag),让用户(人或程序)能对文本得到更好的理解。

下面是一个最简单的HTML文档:

<html>
  <head>

    <title>第一个Html文档</title>

  </head>

  <body>

    欢迎访问<a href="http://hanzhaoxin.cnblogs.com/">我的博客</a>! 

 

  </body>

</html>

所有的HTML文档都应该有一个<html>元素,<html>元素可以包含两个部分:<head>和<body>。

<head>元素用于包含整个文档的一般信息,比如文档的标题(<title>元素用于包含标题),对整个文档的描述,文档的关键字等等。

文档的具体内容就要放在<body>元素里。<a>元素用于表示链接,在浏览器(如IE,Firefox等)中查看HTML文档时,点击<a>标签括起来的内容时, 通常会跳转到另一个页面。这个要跳转到的页面的地址由<a>元素的href属性指定。上面的<a href=http://hanzhaoxin.cnblogs.com/>中,href属性的值就是http://hanzhaoxin.cnblogs.com/。

三、HTML文档可以包含哪些内容 ?

通过不同的标签,HTML文档可以包含不同的内容,比如文本,链接,图片,列表,表格,表单,框架等。

  • 文本 :HTML对文本的支持是最丰富的,你可以设置不同级别的标题,分段和换行,可以指定文本的语义和外观,可以说明文本是引用自其它的地方,等等等等。

  • 链接 :链接用来指出内容与另一个页面或当前页面某个地方有关。 
  • 图片 :图片用于使页面更加美观,或提供更多的信息。 
  • 列表 :列表用于说明一系列条目是彼此相关的。 
  • 表格 :表格是按行与列将数据组织在一起的形式。也有不少人使用表格进行页面布局。 
  • 表单 :表单通常由文本输入框,按钮,多选框,单选框,下拉列表等组成,使HTML页面更有交互性。 
  • 框架 :框架使页面里能包含其它的页面。 

四、对于HTML我会说哪些概念?

文档:HTML文档俗称网页。

标签:用尖括号包围的关键词我们成为标签。通常HTML标签成对出现,如:<a>、</a>。

  • 开始标签:标签对中的第一个标签是开始标签,也成为开放标签。如<a>。

  • 结束标签:标签对中的第二个标签是结束标签,也成为闭合标签。如</a>。

元素:我们把匹配的标签对以及它们包围的内容称为元素。即(元素 = 开始标签 + 内容 + 结束标签)。如:<a href="http://hanzhaoxin.cnblogs.com/">我的博客</a>。

  • 块级元素:在浏览器默认显示时以新行来开始(和结束)的元素。

  • 内联元素:又称行内元素,在浏览器默认显示时在同一行按从左至右顺序显示,不单独占一行的元素。

属性:开始标签中那些以名称/值对的形式出现的内容,我们称之为属性。如上例中:href="http://hanzhaoxin.cnblogs.com/"。(href是属性名称,"http://hanzhaoxin.cnblogs.com/"是属性值)。

时间: 2024-11-05 14:47:07

后端码农谈前端(HTML篇)第一课:HTML概述的相关文章

后端码农谈前端(CSS篇)第一课:CSS概述

一.从扮演浏览器开始 扮演浏览器是Head First图书中很有意义的一个环节.可作者忘记了告诉我们扮演浏览器的台本.我们从这里开始. 上图是webkit内核渲染html和css的流程图.从该图我们可以知道以下几个关键信息: HTML的解析过程和CSS的解析过程是独立完成的.HTML被解析成DOM树:CSS被解析成样式规则. HTML与CSS在被解析后,会结合在一起形成视图,然后被绘制.显示. 二.导图 导图是该系列文章的安排目录,一定程度上参考了王福朋先生的<学习CSS的思路>. 三.概念扫

后端码农谈前端(HTML篇)第二课:常见元素

一.根元素 <doctype> 定义文档类型. <html> 定义 HTML 文档. 二.元数据元素 <head> 定义关于文档的信息. <meta> 定义关于 HTML 文档的元数据. <link> 定义文档与外部资源之间的关系,一般用于引入样式表. <base> 定义页面上所有链接的默认地址或默认目标. <title> 定义文档标题. <style> 定义文档的样式信息. 三.脚本元素 <script

后端码农谈前端(HTML篇)第三课:常见属性

一.HTML全局属性 1.核心属性 属性 描述 id 设置元素的唯一 id. class 设置元素的一个或多个类名(引用样式表中的类). style 设置元素的行内样式(CSS内联样式). title 设置有关元素的额外信息(可在工具提示中显示). 2.语言属性 属性 描述 lang 设置元素内容的语言代码. 3.键盘属性 属性 描述 accesskey 设置访问元素的键盘快捷键. tabindex 设置元素的 tab 键次序. 二.常见元素属性: 1.<a>元素的属性: 属性 描述 href

后端码农谈前端(CSS篇)第八课:继承与层叠

一.继承 继承:所谓CSS样式继承,就是子元素应用父元素的规则声明.(由这一特性,可将CSS属性分为可继承属性和非可继承属性.)可继承属性:属性值可由父元素继承给子元素的属性称之为可继承属性. 哪些属性是可继承属性? 1.文本样式属性 text-indent.text-align.word-spacing.letter-spacing.text-transform.text-decoration.direction.white-space 2.字体样式属性 font.font-family.fo

老码农谈NDK开发

关于NDK,我也天真过 5.6年前刚拿到HTC的G1开始做Android开发时,得知Java可以和C混编激动不已,真的是拿到钥匙见什么都是锁,老想着用NDK做些事情.到后来公司做了一个带有强烈技术风格的业务决策,我被迫把NDK来回折腾了很长时间,也没能折腾出什么成果,但这个决策却把公司折腾完蛋,我也就对NDK渐渐心恢意冷了,真正体会到,做业务,服务用户为主,技术上,好用是王道. 今天收到一封邮件(来自:[email protected]),让我谈谈NDK,真的挠到了我的痒处,一直有些话是想跟对N

码农的产品思维培养第一节(人人都是产品经理读书笔记)

在前段时间,密集的推出Android学习记录之后,我觉得接下来的Android开发进入了一个精进演变的过程,革命性的东西略缺.每日更新特别新的东西也违背认知规律.所以以后关于Android方面的知识,碰到什么,然后记录什么. 而今天,在前一篇日志里面,我描述了我为什么要去理解"产品经理",从这一节开始,我要实施我的计划.所以,和Android记录一样,我要记录这个过程.对自己是一个回归总结吸收的过程,同时也希望能够帮助到更多的朋友,如果你也心存学习进取之心,如果你也如我一般疑惑未解心不

第一课 MongoDB 概述与安装

1.课程大纲 本次课主要介绍 MongoDB 背景知识和 MongoDB 的安装与配置,让大家对 MongoDB 有一个初认识. 其基本的知识点包含: NoSQL数据库概述 MongoDB 数据库简单介绍 Linux 下安装 MongoDB 数据库 Mac 和 Windows 下安装 MongoDB 数据库 2.课程简单介绍 MongoDB是由MongoDB.inc研发的一款NoSQL类型的文档型数据库,MonogoDB名字来源于英文单词humongous,这个单词的意思是巨大无比.暗喻Mong

【爱上Linux】第一课 Linux概述

学习应该是快乐的事情.快乐的东西应该要分享开来,人人都快乐! 在本课中,和朋友们一起来思考这些问题. 问题一:谈Linux学习? 从四个方面来看,为什么要学习Linux?怎么学习Linux?学习Linux什么内容?学了Linux后可以做什么? 为什么要学习Linux呢?用数据说话吧 1 世界500强的高性能计算机95%的系统都是基于Linux系统架构的. 2 在智联招聘网站上面检索Linux的关键词,深圳就有3000多个岗位. 3以Linux为内核的发行版本,据不完全统计,有200多个. Lin

2016.12.6第一课汇编概述、进制、

汇编概述 机器语言:机器使用的语言,0和1组成. 汇编语言:为了便于记忆机器语言,机器语言的助记符,通过编译器翻译成机器能认识的机器语言. 高级语言:为了更好的记忆和辨认,编译器将其编译成机器语言. c和c++的关系:c和c++没有本质区别,只是编译器做的事越来越多了,越来越来越强大了. c语言是c++的基础,站在编译器的角度学习c语言. 为什么要学汇编:程序员的鄙视量 学习环境: vc6,vs2010,vs2013,vs2016 推荐使用vc6,vc6添加的额外的代码少,底层的程序员一般都使用