第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),因为 它相对较小,且 ...
随机推荐
- Python3基础12（collections、struct、itertools、chardet等的使用）
import struct import base64import itertoolsimport chardet from collections import namedtuple,default ...
- UVA Stacks of Flapjacks 栈排序
题意:给一个整数序列,输出每次反转的位置,输出0代表排序完成.给一个序列1 2 3 4 5,这5就是栈底,1是顶,底到顶的位置是从1~5,每次反转是指从左数第i个位置,将其及其左边所有的数字都反转,假 ...
- hive 报错FAILED: Error in metadata: java.lang.RuntimeException: Unable to instantiate org.apache.hadoop.hive.metastore.HiveMetaStoreClient FAILED: Execu
使用hive一段时间以后,今天在使用的时候突然报错,如下: hive> show databases;FAILED: Error in metadata: java.lang.RuntimeEx ...
- linux 命令——54 ping(转）
Linux系统的ping 命令是常用的网络命令,它通常用来测试与目标主机的连通性,我们经常会说“ping一下某机器,看是不是开着”.不能打开网页时会说“你先ping网关地 址192.168.1.1试试 ...
- IOS 图形上下文栈
- (void)drawRect:(CGRect)rect { // 获取上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 保存一份最纯 ...
- Linux 开启关闭防火墙
开放防火墙端口添加需要监听的端口 /sbin/iptables -I INPUT -p tcp --dport 8080 -j ACCEPT/sbin/iptables -I INPUT -p tcp ...
- Python监控日志中经常访问的ip
一.需求:每分钟检查一次日志文件,如果这一分钟内同一个ip请求次数超过200次,加入黑名单 1.日志文件中,每一行的格式为:XXX.XXX.XXX.XXX - - [04/Jun/2017:05:25 ...
- js当中mouseover和mouseout多次触发(非冒泡)
JS当中,mouseover和mouseout多次触发事件,不光是冒泡会产生,就是不冒泡,在一定条件下 ,也会产生多次触发事件: 例如下面的结构的情况下,我在class="ceng_up f ...
- java编程基础——从上往下打印二叉树
题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 题目代码 /** * 从上往下打印出二叉树的每个节点,同层节点从左至右打印. * Created by YuKai Fan on 20 ...
- UOJ#386. 【UNR #3】鸽子固定器(链表)
题意 题目链接 为了固定S**p*鸽鸽,whx和zzt来到鸽具商店选购鸽子固定器. 鸽具商店有 nn 个不同大小的固定器,现在可以选择至多 mm 个来固定S**p*鸽鸽.每个固定器有大小 sisi 和 ...