第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),因为 它相对较小,且 ...
随机推荐
- 关于android界面菜单，project显示问题
刚用android studio不久,遇到了一个问题:界面菜单project不小心被关掉了,百度各种搜索无结果.我想大多数人都遇到过类似问题,此类问题其实很简单但是对于初学者来说就有点苦恼了.所以在此 ...
- 【洛谷】CYJian的水题大赛 解题报告
点此进入比赛 \(T1\):八百标兵奔北坡 这应该是一道较水的送分题吧. 理论上来说,正解应该是DP.但是,.前缀和优化暴力就能过. 放上我比赛时打的暴力代码吧(\(hl666\)大佬说这种做法的均摊 ...
- Hadoop完全分布式集群环境搭建
1. 在Apache官网下载Hadoop 下载地址:http://hadoop.apache.org/releases.html 选择对应版本的二进制文件进行下载 2.解压配置 以hadoop-2.6 ...
- PostgreSql的使用
title: PostgreSql的使用 tags: PostgreSql --- PostgreSql官网: https://www.postgresql.org/ 1 PostgreSql的安装 ...
- 理解dropout
理解dropout 注意:图片都在github上放着,如果刷不开的话,可以考虑FQ. 转载请注明:http://blog.csdn.net/stdcoutzyx/article/details/490 ...
- Oracle11g 主机身份证明问题
oracle 11g的web database control中,进行一些操作需要主机身份证明,比如进行数据备份.数据的导出导入等;这样对于数据库的安全增强了一定的保证.如果我们有进行适当的配置,可以 ...
- 使用IP地址方法登录MySQL数据库Can't connect to MySQL server的原因。mysql -h 192.168.1.104 -P3306 -uroot -p 失败
mysql -h 192.168.1.104 -P3306 -uroot -p 然后输入你安装时设置的MySQL密码 发现Can't connect to MySQL server 你的IP 解决方法 ...
- rand()和srand()
C++中rand() 函数的用法 1.rand()不需要参数,它会返回一个从0到最大随机数的任意整数,最大随机数的大小通常是固定的一个大整数. 2.如果你要产生0~99这100个整数中的一个随机整数, ...
- js字符串去掉所有空格
字符串去掉所有空格 "abc 123 def".replace(/\s/g, "") 字符串去掉左右两端空格 " abc 123 def " ...
- 【php】如何配置自主域名腾讯企业邮箱
腾讯企业邮配置 protocal ssl smtp port 465 host smtp.exmail.qq.com user email account passwd email passwd