HTML阶段-第三天HTML基础和HTML语义化（1-3节）

Web前端基础课程

第一阶段：Web前端开发环境搭建

• 操作系统操作常用高级设置和快捷键
• Sublime安装和配置
• Atom安装和配置
• WebStorm安装和配置

第二阶段：HTML5基础

• HTML基础
• 语义化标签与SEO

第三阶段：CSS3基础

• CSS属性基础
• CSS布局
• 面向对象的CSS
• less、sass、styleus、postcss *
• 第四阶段：JavaScript基础
• JavaScript语法基础
• JavaScript数组、字符串、流程控制语句、
• JavaScript高级简介
• 综合项目

第一节：HTML基础

• 什么是浏览器
• 什么是服务器
• 常见名词解释
• 认识网页
• 网页内容划分：结构、样式、行为

---

什么是浏览器

• 浏览器帮助用户进行浏览网页的软件
• 360双核浏览器、qq浏览器、
• 浏览器与浏览器内核：
• ie：trident、safari:webkit、ff:gecko、chrome,opera:blink

常用浏览器介绍
浏览器是网页运行的平台，常用的浏览器有
IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。

图片1.jpg

• IE浏览器由微软公司推出，有6.0、7.0、8.0、9.0、10.0、11.0等版本，最新的是IE11.0和斯巴达浏览器edge。

• Mozilla Firefox，中文通常称为“火狐”，Firebug是火狐浏览器下的一款开发插件，是开发HTML、CSS、JavaScript等的得力助手。在实际网页制作过程中火狐浏览器是最常用的浏览器。

• Google Chrome，又称谷歌浏览器，是由Google（谷歌）公司开发的开放原始码网页浏览器。

名词解释

• Internet：因特网，互联网。可以实现全球信息互联的网络。

• WWW：万维网（world wide web），它是提供网站相关服务，人们可以通过万维网服务进行网上聊天、网上冲浪、网购、搜索资料、查看天气、查看新闻、交友聊天等。

• W3C：万维网联盟创建于1994年.是Web技术领域最具权威和影响力的国际中立性技术标准机构。我们后面学的html、css等标准都是由此机构主导制定。

• HTTP：超文本传输协议（HTTP，HyperText Transfer Protocol），也就是浏览器和服务器端的网页传输数据的约束和规范。

• Web：web （互联网总称）web的本意是蜘蛛网和网的意思，在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本（hypertext）、超媒体（hypermedia）、超文本传输协议（HTTP）等。

• DNS：DNS（Domain Name System，域名系统），因特网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过主机名，最终得到该主机名对应的IP地址的过程叫做域名解析（或主机名解析）

• 域名： www.itcast.cn

---

什么是Web服务器和服务器

浏览器浏览页面背后的秘密（了解）：

• 浏览器接受用户操作→浏览器封装HTTP请求→连接服务器：DNS解析→发送请求Request→服务器接收请求→处理请求→返回响应报文→浏览器接收响应报文→渲染页面呈现

• HTTP协议（了解，就业班详细讲）

认识网页

• 网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。

网页的组成

• HTML：页面结构
• CSS：页面样式表现
• JavaScript：交互行为
• Web标准：结构表现行为之间的关系

HTML部分

1. HTML发展历史
2. HTML的页面结构
3. HTML语法

HTML简介

• HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。

• HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。

• HTML之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”点。通过超链接将网站与网页以及各种网页元素链接起来，构成了丰富多彩的Web页面。

HTML发展历程

• HTML 1.0 超文本标记语言(第一版) -在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)
• HTML 2.0 -1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
• HTML 3.2 -1996年1月14日,W3C推荐标准
• HTML 4.0 -1997年12月18日,W3C推荐标准
• HTML 4.01(微小改进) -1999年12月24日,W3C推荐标准
• XHTML 1.0 -发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布
• XHTML 1.1 -于2001年5月31日发布
• HTML5.0 2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成

HTML标准的选择

• 目前最新的HTML版本是HTML5。
• 部分国内的网站还是使用XHTML标准，但是HTML5标准是趋势

HTML语法

1. HTML标签以 ”<“开头。
2. 紧接着就是标签名（中间没空格）
3. 标签名之后如果有属性的话，加空格然后是 属性名=""
4. 如果有多个属性，属性间用空格隔开，空格可以有多个。
5. 属性结束后可以加一个或多个空格。
6. 然后是结束标签">",如果是闭合标签需要在标签名前加”/"，例如：
7. 单标签，斜线没有任何意义，可有可无。
8. 标签中间可嵌套内容。

HTML整体结构标签

• Doctype标签，文档协议声明标签
• 文档协议声明标签，非常重要
• 协议不同影响整个页面显示的效果
• 目前主流用HTML5的协议文档
• html标签，文档标签
• head，文档头部标签
• body，文档内容部分标签
• p段落标签
• h1标题标签
• 案例：新闻详情页面

第三节：HTML头部标签

• doctype标签
• head标签
• title标签
• link标签
• meta标签
• script标签
• style标签

---

• 标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范。主要用于浏览器解析文档标签的依据。
• 必需在开头处使用标记为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。
• 标记和浏览器的兼容性相关，删除，就是把如何展示HTML页面的权利交给浏览器。这时，IE6，IE7，IE8，Firefox2，Firefox3，Chrome，有多少种浏览器，页面就有可能有多少种显示效果，这是不被允许的。

在sublime中

• html:xt + tab //输出xhtml 过渡标准
• html:xs +tab //输出xhtml 严格标准
• html:4t
• html:4s
• html:5

HTML基本文档格式 标记

标记位于 标记之后，也称为根标记，用于告知浏览器其自身是一个 HTML 文档， 标记标志着HTML文档的开始，标记标志着HTML文档的结束，在他们之间的是文档的头部和主体内容。

所有的标签必须写在 两个闭合标签之间。

可以通过lang属性设置当前文档的主要语言是什么，帮助搜索引擎解析文档

HTML基本文档格式 标记

标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在标记之后。
head标签定义的内容只是提供给浏览器使用，不用于用户的呈现。
主要用来封装其他位于文档头部的标记，例如标记，之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下：

title标签对于网站SEO至关重要，标题的好坏直接影响网站的SEO
SEO（Search Engine Optimization）：网站搜索引擎优化

Link标签

引入DNS预先解析
dns预解析(了解)

引入网站icon图标：

引入css样式，【后面讲】

HTML呈现标签

---

• body标签
• 标题标签h1-h6
• 段落标签：p
• 注释标签
• 换行标签 br
• 水平线标签 hr

HTML基本文档格式— 标记

标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于标记内，标记中的信息才是最终展示给用户看的。
一个HTML文档只能含有一对标记，且标记必须在标记内，位于头部标记之后，与标记是并列关系。

标题标签： h1-h6，块级标签

我是页面内容的标题
标题作为页面的标题性的内容，一定要符合语义。标题1到6数字不是定义标题的样式大小，而是定义标题的在整个页面中的权重。
标题标签只能 嵌套 行内标签。

段落标记，行内标签

在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是
。
段落文本
是HTML文档中最常见的标记，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

段落标签也只能嵌套行内标签。

水平线标记

---

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标记来完成，
就是创建横跨网页水平线的标记。其基本语法格式如下：
 
是单标记，在网页中输入一个
，就添加了一条默认样式的水平线。

HTML空格合并处理

为了方便开发人员开发缩进合理的HTML页面，浏览器解析渲染HTML时 换行符、连续多个空格等会合并成一个空格在浏览器里面进行显示。

如果需要换行怎么办呢？

    
    


    

        12
            34
    

换行标记

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标记
，这时如果还像在word中直接敲回车键换行就不起作用了。

HTML常用标签

段落标签：p，  
我是段落
。
水平线标签：hr  

换行标签：br，
。普通的空格和换行会进行合并。
文本节标签：span，行内标签。
    定义着重文字。  定义斜体字(不推荐)。
    定义加重语气。
   定义下标字*。
   定义上标字。
   定义删除字
注释标签：
案例：复杂案例。

文本格式化标记

• 在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标记，使文字以特殊的方式显示。
• 文本格式化常用标记

图片1.jpg