第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),因为 它相对较小,且 ...
随机推荐
- 小div在大div里面 垂直居中
方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width ...
- 定时器new Timer().schedule()的使用
Timer是一种工具,线程用其安排以后在后台线程中执行的任务.可安排任务执行一次,或者定期重复执行.实际上是个线程,定时调度所拥有的TimerTasks. TimerTask是一个抽象类,它的子类由 ...
- Jsoup查找dom元素
package com.open1111.jsoup; import org.apache.http.HttpEntity;import org.apache.http.client.methods. ...
- pta编程题19 Saving James Bond 2
其它pta数据结构编程题请参见:pta 题目 和简单版本不同的是,简单版本只需判断能否到达岸边,而这个版本要求求出最少跳数的路径. 简单版本用dfs实现,而这道题用BFS实现. 注意: 岛半径为7.5 ...
- js 中//<![CDATA[ 意义
CDATA内部所有东西都会被解析器忽略,加入文本中包含了大量< 和 $符号,就像编程中经常出现的情况一样,那么这个元素就可以被定义为一个CDATA部分 ,CDATA 区段开始于 "&l ...
- Mybatis- 配置
主配置文件 properties 第一种 <properties> <property name="jdbc.driver" value="com.my ...
- 2018. 2.4 Java中集合嵌套集合的练习
创建学生类有姓名学校和年龄 覆盖toString() 1.创建三个学生对象,放到集合ArrayList 2.输出第2名学生的信息 3.删除第1个学生对象 4.在第2个位置插入1个新学生信息 5.判断刘 ...
- python_31_集合
# 集合是一个无序的,不重复的数据组合,它的主要作用如下: # 去重,把一个列表变成集合,就自动去重了 # 关系测试,测试两组数据之前的交集.差集.并集等关系 s = set([3, 5, 9, 10 ...
- WARNING you have Transparen Huge Pages..
redis启动警告: WARNING you have Transparent Huge Pages (THP) support enabled in your kernel. This will c ...
- Python读取图片，并保存为矩阵
from scipy.misc import imread,imshow img = imread('D:test.bmp') print img[:,:,2].shape imshow() 注意im ...