HTML基础入门（1）
1.HTML 概述
1.1网页概述
1.1.1什么是网页
大家平时上网查询资料，上网看电视看小说购物等，看到的都是网页，例如：学校的官网，百度，就是具体的网页。****传智专修学院
1.1.2 网页是如何编写的
开发人员编写网页内容，然后通过浏览器处理，就变成了多姿多彩的网络世界
1.2 浏览器概述
浏览器是网页运行的平台，每一台计算机如果要网浏览内容，就必须安装浏览器，win7/win8/win9操作系统默认安装的是IE浏览器，win10操作系统默认安装时Edge浏览器，那么还有其他浏览器吗？
1.2.1 常见浏览器
常用的浏览器有：谷歌（Chrome）、IE等，我们的课堂中大部分情况都使用Chrome。
Chrome浏览器：简洁、快速、高效，浏览器中的王者，现阶段市场占有率最高的浏览器。
IE浏览器：曾经的浏览器霸主，但仍有很多用户使用，因为操作系统默认浏览器，不会安装其他浏览器用户只能使用。
网页和浏览器的关系就相当于子弹跟枪的关系.子弹要通过枪械才能完成使命.
还有一些其他常见的浏览器，提供图标，增加大家阅历：
1.2.2 其他浏览器
60极速浏览器、QQ浏览器、猎豹安全浏览器、百度浏览器、2345浏览器、傲游、世界之窗浏览器 等第三方浏览器，都是在常见浏览器的基础上，添加一些特殊插件的产物。例如：
360安全浏览器，Chrome和IE双内核的浏览器。
QQ浏览器，Chrome Tab高速组件和自带IE高级内核双内核的浏览器。
猎豹安全浏览器，采用Trident和WebKit双渲染内核。
扩展
如果我们手头上有“韭菜鸡蛋”的馅，我们就可以包饺子，可以包包子，也可以做馅饼。饺子和包子对应的就是浏览器，韭菜鸡蛋馅对应的就是浏览器底层程序，开发人员将这类程序称为“内核”。
Chrome和IE使用不同的内核，相当于韭菜鸡蛋馅和牛肉尖椒馅。
IE使用的是Trident内核
Chrome和Safari使用了相同开源内核WebKit，只是各自又添加了特色的内容。
1.2.3 1.2.3浏览器的市场份额
查看百度统计：http://tongji.baidu.com/data/browser
1.3 网页的访问流程
1.4 什么是HTML
HTML（英文：Hyper Text Markup Language）中文为超文本标记语言。
文本：就是网页上编写普通文字等信息。
超文本：就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记：就是标签。例如：一个链接
1.5 编写第一个网页
编写第一个网页的步骤是：
1.建：创建txt文件，在任意位置创建“文本文档”。（鼠标右键新建文本文档）
2.名：修改文件扩展名，修改成“模板.html”。（F2快捷键 或 文件上右键重命名）
3.编：使用“记事本”编辑html文档，并按照指定格式，编写HTML内容。
4.查：双击html文档，使用浏览器查看结果。
步骤1：建
步骤2：名
步骤3：编
<html>
<head>
<title>这是标题</title>
</head>
<body>
这里是正文
</body>
</html>
步骤4：显
总结：
练习:
创建Html文件
要求标题是自己的名字
正文内容书写自己的简单介绍,如性别,年龄,爱好,近期最想做的一件事等.
1.6 HTML基本语法概述
1.6.1 扩展名
HTML文件的扩展名为*.html。因为历史原因，开发中也会看到*.htm作为扩展名，但不建议使用。上世纪操作系统要求所有文件的扩展名必须是三位，所以*.html和*.htm没有其他区别。
1.6.2 HTML内容
html文档一般必须包含3种标签：html、head、body
html 是html文档的最外围标签，整个文档只能有一个。包含：头标签head和体标签body。
head 是头标签，head标签中的内容浏览器处理后一般不显示。只有title显示标题。
body 是体标签，主要用于编写需要显示的内容，html的大多数标签都放在body中。
1.6.3 标签概述
HTML标签都是HTML规范规定固定内容，开发中，我们只需要知道标签名和标签解析后的效果即可。HTML标签在使用中大体可以划分成两类：
标签的类型:
1.双标签：由开始标签和结束标签组成，必须成对出现
<开始标签>标签体</结束标签>
例如：html、head、body等
2.单标签：只有开始标签，一般需要添加/表示结束
<标签名 />
例如：br、img 等
注意：
在开发中应该编写成“
xxx
”，实际我们发现编写成“xxx”显示效果一样。这是因为现在所有的浏览器都具有非常强大的容错能力。语法是错误的，只是浏览器自动帮着纠正了，如果有一天浏览器不帮这个忙了，结果将会不可预测。要求：双标签必须编写结束标签。
标签的关系
一个页面是由很多个标签组成的，标签和标签之间的关系主要有两种：
1.父子（嵌套）关系
比如前面代码中的：
<head>
<title>
</title>
</head>
2.并列关系
比如前面代码中的：
<head>/head>
<body></body>
编码规范：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。
注意：标签书写不能交叉
练习：以下标签关系中哪个是错误的：
A <head></head><body></body>
B <strong><div></div></strong>
C <head><title></head></title>
D <body><div></div></body>
2.搭建环境
浏览器开发人员工具打开指令F12或ctrl+shift+c，自行完成学习
2.1 HBuilder介绍
使用记事本或Notepad++开发HTML代码效率比较低，现阶段比较流行的前端IDE(集成开发环境)是HBuilder。HBuilder是在eclipse的基础上，将不需要的内容删除，将需要的内容进行强化。
快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML等语言的开发效率。
2.1.1 HBuilder下载与安装
下载地址：HBuilder下载地址
安装与使用，参考《HBuilder安装.doc》.
2.2 HBuilder使用
2.2.1 创建Web项目
步骤1：创建Web项目
步骤2：填写项目信息
步骤3：创建完成
练习:
创建Web项目
要求项目名称为 day01_自己名字 如 day01_zhangsanfeng
2.2.2 创建HTML页面
步骤1：创建HTML页面
步骤2：填写HTML页面名称
步骤3：创建完成
2.2.3 查看HTML内容
2.2.4 执行效果
书写如下代码
查看运行效果
网页效果
练习:
创建一个网页标题是 我爱祖国 然后在正文抒发对祖国的热爱.并查看效果.
2.3 文档声明
文档声明：通知浏览器文档所使用的 HTML 规范。不同版本的规范浏览器处理方式不同。常见规范版本：HTML5、HTML4.01。以后开发中我们使用HTML5规范。规范都是固定格式。
HTML5规范【掌握】
<!DOCTYPE html>
HTML4.01规范(了解)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
2.4 设置编码
2.4.1 编码
计算机中存储都是0和1，但不同的国家显示的文字和符号各不相同，0和1通过编码处理后，将显示成网络世界中文字和符号。常见的编码有：GBK、UTF-8
GBK：中文国标码，支持英文、简体中文、繁体中文。
UTF-8：万国码，支持很多国家文件和符号。开发中最常用的编码。
2.4.2 设置密码
HTML5简化写法：(固定格式)
<meta charset="UTF-8">
HTML标准版
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
扩展：搜索引擎优化（SEO）
例如：百度、谷歌等搜索引擎，会根据网页中meta设置keywords和description作为用户搜索的关键字进行内容检索。
3. HTML基本语法
自学地址：w3school
3.1 排版标签
3.1.1 注释标签
HTML注释以“ ”结尾，为HTML源码内容，提供给开发人员编写说明性文字，当浏览器解析显示时将被忽略。格式如下：
<!--注释-->
3.1.2 标题标签 ：
HTML提供<h>系列标签，用于修饰标题，包含：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。<h1> 定义最大的标题，要求一个html页面中只能有一个h1标签。<h6> 定义最小的标题。
标题会自动加粗。且自成一行，不会与其他h标签共属一行。
例如：
<head>
<head/>
<body>
<h1>你过来呀<h1/>
<h2>你过来呀<h2/>
<h3>你过来呀<h3/>
<h4>你过来呀<h4/>
<h5>你过来呀<h5/>
<h6>你过来呀<h6/>
<body/>
和不是标题
…传智专修学院（www.czzx.com）…
…
扫一扫
367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
