第1章 HTML基础
1.1 HTML概述
1.1.1 什么是HTML
HTML（Hyper Text Markup Language，超 文本 标记 语言）是纯文本类型的语言，它是Internet上用于编写网页的主要语言，使用HTML编写的网页文件也是标准的纯文本类型的文件。
查看网页源代码的方式
- F12键或鼠标右键-"查看网页源代码"
1.1.2 HTML发展历程
- 1993 年HTML首次以因特网草案形式发布
- 2.0
- 3.0（20世纪90年代见证了HTML大幅发展）
- 1999 年 4.0.1
此时，业界普遍认为HTML已经“无路可走”了，Web焦点转移至XML和XHTML上。
- 2004年WHATWG（Web Hypertext Application Technology Working Group，Web超文本应用技术工作组）成立，创立HTML5规范并开发新功能。Web2.0时代到来！
至此，旧的静态网站逐渐让位于需要更多特性的动态网站和社交网站。HTML5能解决实际问题，目前已经成为了HTML新一代标准！
1.2 HTML文件基本结构
一个HTML文件由一系列的元素和标记组成。元素是HTML文件中重要组成部分，HTML5用标记来规定元素的属性和它在文件中的位置。
1.2.1 HTML的基本结构
1. 标记
- 单独标记
格式：<元素名称>或<元素名称/>推荐使用后者 如:
<br/> 此处为：单独标记
- 成对标记
格式：<元素名称>要控制的元素</元素名称> 大多数标记都是成对出现的，由首标记和尾标记组成或者成为开始标记和结束标记（开始标签和结束标签）如：
<title>天晴天朗,IT爱好者</title> 此处为：成对标记
在HTML文件中某个元素的完整定义语法如下：
<元素名称 属性1="值1" 属性2="值2" ... 属性N="值N">元素资料</元素名称> HTML的完成定义语法
2. 元素
用一组HTML标签将一段文字包含其中，这段文字与标签组合在一起称之为“一个元素”。
<title>天晴天朗,IT爱好者</title> 此处的整体，称之为“一个元素”
3. HTML文件结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>此处是网页页签的标题</title>
</head>
<body> </body>
</html>
HTML文件结构
- 其中，<html>与</html>分别是指“文件开始”和“文件结束”
- <head>与</head>之间的部分是HTML文件的“文件头”——用于说明文件的标题和整个文件的一些公共属性
- <body>与</body>之间的部分是HTML的“文件主体”
如果不加以说明，均是指嵌套在<body>与</body>这一“成对标签”中。
1.2.2 HTML基本标记
1. 文件开始标记<html></html>
用于表示该文件是用“超文本标记语言”（HTML）编写的。<html>和</html>成对出现，分别位于文件的“最前面”和“最后面”。
2. 文件头部标记 <head></head>
文件头部用来规定该文件的标题和文件的一些属性。标题出现在Web浏览器窗口的标题栏中。如：“京东(JD.COM)-正品低价..”字样，就是该文件的标题。
3. 文件标题标记<title></title>
每个HTML文件都需要一个文件名称，网页的名称写在<title>和</title>之间，嵌套在<head>和</head>之间。
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
4. 元信息标记 <meta>
meta元素提供的信息是用户不可见的，一般用来定义页面信息的名称、关键字、作者等，一个HTML头页面中可以有多个meta元素。
<meta charset="UTF-8"> <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title> <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">
元信息标记
5. 页面的主体标记 <body></body>
<body>和</body>分别表示网页“主体部分”的开始和结束。常见属性如下：
1 text 设定页面文字的颜色
2 bgcolor 设定页面背景的颜色
3 background 设定页面背景的图像
4 bgproperties 设定页面背景图像为固定状态，不随页面滚动
5 link 设定页面默认的链接颜色
6 alink 设定鼠标正在单击时的链接颜色
7 vlink 设定访问过后的链接颜色
8 topmargin 设定页面的上边距
9 leftmargin 设定页面的左边距
6. 页面注释
- 给代码加注释，是一种很好的编程习惯，习惯成就人生！
- 尊重自己的劳动成果，尊重他人的阅读感受！
- 适当的注释可以帮助用户更好地了解网页中各个模块的划分，锻炼自己换位思考的能力！
在HTML文档中，注释分为3类：
- <html></html>中的注释
- CSS层叠样式表
- JavaScript
注释说明 单行注释： <!--注意哦，此处是<html></html>中的“单行注释”哦！--> /*注意哦，此处是CSS层叠样式表中的“单行注释”哦！*/ //注意哦，此处是JavaScript中的“单行注释”哦！ 多行注释： /* 注意哦，此处是JavaScript中“多行注释”哦！ 注意哦，此处是JavaScript中“多行注释”哦！ 注意哦，此处是JavaScript中“多行注释”哦！ */
HTML+CSS+JavaScript注释
错误注释举例：
<!--这里可以添加注释吗？！--> 错误001
<!DOCTYPE html>
<html lang="en">
<head>
<--指定页面编码格式--> 错误002
<meta charset="UTF-8">
<title><!--天晴天朗的博客地址：https://home.cnblogs.com/u/tqtl911/--></title>错误003
</head>
<body>
<h1>欢迎来到我的博客！cnblogs</h1> /*给cnblogs添加一个注释*/ 错误004
</body>
</html>
错误001：<!DOCTYPE html>之前不可以添加注释的哦！
错误002：注释标记不完整，<---->前面缺少一个"英文感叹号！"注意哦，是英文的哦！
错误003：<title></title>>标签内部不可以添加注释的哦！
错误004：注释符号使用错误！HTML中应该使用<!--这里是注释哦-->，而/*这里是注释哦*/是CSS层叠样式表中的注释符号。
HTML错误注释举例
1.3 编写第一个HTML文件
1.3.1 HTML文件的编写方法
- 手工直接编写
- 使用可视化软件
- 由Web服务器一方实时动态生成
1、由于HTML语言编写的文件是标准的ASCII文本文件，可使用任何编辑器进行打开。如Windows自带记事本工具或者使用Notepadd++等工具进行编辑。
2、Webstorm、Pycharm、Hbuilder、Sublime等IDE工具，大大提高编写速度。
3、通过后端的网页编程实现，如JSP、ASP、PHP，一般情况下需要数据库配置完成。
<!DOCTYPE html><!--注意，这里的上方是不可以添加注释的哦！-->
<html lang="en">
<head>
<!--指定页面的编码格式，统一用万国码，UTF—8-->
<meta charset="UTF-8">
<!--注意哦，此处用了"我们"而不是"我"，大家一起共同成长！-->
<title>我们的第一个HTML文件，体验进入"Web前端"的世界！</title>
</head>
<body text="#663399"><!--设置文字的颜色，body的属性之一哦！-->
<h2 align="center">HTML5真的很简单哦！</h2><!--添加一个标题，给自己鼓劲儿吧！-->
<hr width="50%"/><!--看到这里是注释，在此处添加一条横线，宽度占比50%！-->
<p>希望我的博客能祝你学到前端的知识，一起共同努力吧！</p>
<p>
谨记：编程，让你的人生不受限！<br/>
编程改变人生，代码改变世界！<br/>
让我们一起喝下这碗"纯粹的"心灵鸡汤吧！
</p>
</body>
</html>
编程，让你的人生不受限！
“终身”学习，生活充满诗意！
第1章 HTML基础的更多相关文章
- 《利用python进行数据分析》读书笔记--第四章 numpy基础：数组和矢量计算
http://www.cnblogs.com/batteryhp/p/5000104.html 第四章 Numpy基础:数组和矢量计算 第一部分:numpy的ndarray:一种多维数组对象 实话说, ...
- java面向对象编程——第二章 java基础语法
第二章 java基础语法 1. java关键字 abstract boolean break byte case catch char class const continue default do ...
- 《零成本实现Web自动化测试--基于Selenium》第一章 自动化测试基础
第一篇 Selenium 和WebDriver工具篇 第一章 自动化测试基础 1.1 初识自动化测试 自动化测试有两种常见方式 1.1.1 代码驱动测试,又叫测试驱动开发(TDD) 1.1.2 ...
- 【windows核心编程】 第六章 线程基础
Windows核心编程 第六章 线程基础 欢迎转载 转载请注明出处:http://www.cnblogs.com/cuish/p/3145214.html 1. 线程的组成 ① 一个是线程的内核 ...
- [Python笔记][第一章Python基础]
2016/1/27学习内容 第一章 Python基础 Python内置函数 见Python内置函数.md del命令 显式删除操作,列表中也可以使用. 基本输入输出 input() 读入进来永远是字符 ...
- 第一章 jQuery基础
第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...
- 0003.5-20180422-自动化第四章-python基础学习笔记--脚本
0003.5-20180422-自动化第四章-python基础学习笔记--脚本 1-shopping """ v = [ {"name": " ...
- web前端学习python之第一章_基础语法(二)
web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
- web前端学习python之第一章_基础语法(一)
web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
- UNIX环境高级编程--第一章 UNIX基础知识
第一章 UNIX基础知识 1.2 UNIX体系结构 从严格意义上说,可将操作系统定义为一种软件,它控制计算机硬件资源,提供程序运行环境.我们将这种软件称为内核(kernel),因为 它相对较小,且 ...
随机推荐
- uLua学习之数据交互（三）
前言 在上节中,大概谈了一下如何在lua脚本中调用unity3d中的方法来创建游戏物体,这只是很小的一个方面,uLua的优势在于对unity3d中C#语言的扩展和定制.那么如何扩展和定制呢?其中的数据 ...
- 关于HTML中时间格式以及查询数据库的问题
1.默认时间格式,加入属性dateFormate="yyyy-MM-dd" 2.设置默认值,value="2017-6-22" 3.在JavaScript中将获 ...
- iBrand 教程：Xshell 软件安装过程截图及配置
下载 教程中使用的相关软件下载网盘: https://pan.baidu.com/s/1bqVD5MJ 密码:4lku 安装 请右键以管理员身份运行进行软件安装,安装过程如下: 配置 安装完成并运行软 ...
- LeetCode Rotate Array 翻转数组
题意:给定一个数组,将该数组的后k位移动到前n-k位之前.(本题在编程珠玑中第二章有讲) 思路: 方法一:将后K位用vector容器装起来,再移动前n-k位到后面,再将容器内k位插到前面. class ...
- POJ 3666 Making the Grade（区间dp）
修改序列变成非递减序列,使得目标函数最小.(这题数据有问题,只要求非递减 从左往右考虑,当前a[i]≥前一个数的取值,当固定前一个数的取值的时候我们希望前面操作的花费尽量小. 所以状态可以定义为dp[ ...
- 棋盘V(最小费用最大流)
棋盘V 时间限制: 1 Sec 内存限制: 128 MB提交: 380 解决: 44[提交] [状态] [讨论版] [命题人:admin] 题目描述 有一块棋盘,棋盘的边长为100000,行和列的 ...
- python基础一 day17 初识递归
#递归函数 # 了解什么是递归 : 在函数中调用自身函数 # 最大递归深度默认是997/998 —— 是python从内存角度出发做得限制 # 能看懂递归 # 能知道递归的应用场景 # 初识递归 —— ...
- 小弟在研究CUDA时出现一个问题，求解
这是<GPU高性能编程CUDA中文实战>中的例子,第七章,热传导模拟,但是出现下面的问题,求牛人解读.小弟跪谢... 主要问题就是关键字变白. 但是添加需要的头文件后一些系统自带的关键字也 ...
- 去除myeclipse中doget和dopost方法中的注释
当我们使用myeclipse新建servlet时发现doget和dopost方法中有一些无用的注释,每次新建一个servlet时都要手动删除特别麻烦. 下面就教大家如何去除这些注释! 以myeclip ...
- 数据库sql语句的exists和in的区别
性能变化的关键: #1 执行的先后顺序 谁是驱动表,谁先执行查询,谁后执行查询 #2 执行过程 exists的优点是:只要存在就返回了,这样的话很有可能不需要扫描整个表. in需要扫描完整个表,并 ...