|
一、HTML的认识（了解） 本章的学习知识内容： 什么是HTML？ 动态网页与静态网页 HTML，XHTML，DHTML HTML的历史 HTML的开发工具 浏览器的认识
1. 初识HTML <!DOCTYPE HTML> <html> <head> <meta charset="gbk"/> <title>初识HTML</title> </head> <body> <h1>Hello HTML</h1> </body> </html> 2. 什么是HTML？ • HTML 指的是超文本标记语言 (Hyper Text Markup Language) 超文本：就是指页面内可以包含图片、链接，甚至音乐、视频等非文字元素； 标 记：一种标记符，可以告诉浏览器如何显示其中的内容； 比如：<h1>我很粗</h1> ，<h1></h1>就是一种标记符 • HTML 不是一种编程语言（因为HTML中没有变量，流程控制等），它是一种标记语言 (markup language) • HTML 使用标记标签来描述网页内容 为什么要学习HTML？ 应用程序一般分为两种架构： 1、C/S架构 ：客户端和服务器端架构，比如我们使用的QQ、迅雷、360安全卫士等等； 2、B/S架构 ：浏览器/服务器结构，比如我们使用淘宝、京东、百度、网盘等等；能直接通过浏览器使用的应用都是B/S架构； C/S架构特点是需要用户下载安装软件，有更新时需要重新下载安装，非常麻烦。而B/S架构特点是用户电脑上面只需有浏览器就可以使用，非常便捷。我们以后开发的应用也是B/S架构。 总结：随着互联网的发展，B/S结构的应用越来越多，功能越来越强大，拥有优秀的用户体验，是互联网发展的趋势。浏览器呈现内容需要使用HTML，所以我们必须学习HTML。 3. 动态网页与静态网页 静态网页，html代码和内容书写完毕后，页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。 而动态网页则不然，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。 注意：不要将动态网页和页面内容是否有动画效果混为一谈，比如网页中幻灯片效果，文字滚动效果，如果内容本身没有变化，那么也属于静态网页。 4. HTML，XHTML，DHTML HTML：超文本标记语言 XHTML：XML+超文本标记语言（结构比较严谨的HTML） XML：是一种格式非常规范，严谨的一门语言（非常简单） DHTML：动态HTML（HTML+CSS+Javascript） 5. HTML的发展历程 超文本标记语言（第一版 HTML1.0）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）： HTML 2.0——1995年11月发布，于2000年6月发布之后被宣布已经过时; HTML 3.2——1997年1月14日，W3C推荐标准; HTML 4.0——1997年12月18日，W3C推荐标准; HTML 4.01——1999年12月24日，W3C推荐标准
XHTML1.0——发布于2000年1月26日，是W3C推荐标准，推出的目的是为了更好的规范HTML语法，与HTML4.01几乎一模一样。 XHTML 1.1，于2001年5月31日发布，W3C推荐标准。 XHTML 2.0，W3C工作草案，然后就没有然后了。
HTML 5——2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。保留HTML4所有功能，增加很多新的功能。 总结：HTML 4.01是最经典的HTML版本，XHTML在PC上使用率高，HTML5是最新的HTML版本，最前沿，新开发的网站几乎都是采用此版本。 W3C：万维网联盟，是Web技术领域最具权威和影响力的国际中立性技术标准机构，该组织制定Web技术标准。 6. HTML的开发工具 Dreamwear：Adobe的一款可视化开发网页的软件（适合UI和初学者） HBuilder：强力的前端开发工具 EditPLUS：简单便捷的轻型编辑软件 Sublime：提示功能比较强大(轻，小，需要安装插件) Vi / Vim ：Linux 系统上的最著名的文本/代码编辑器 记事本：用来装逼的 任意一个文本工具都可以开发 HTML，我们建议使用 HBuilder 7. 浏览器的认识 国内计算机上常见的网页浏览器有，IE、Firefox、Safari(苹果电脑)，Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、傲游浏览器、世界之窗浏览器等，浏览器是最经常使用到的客户端程序。
对于开发者而言，Firefox和Chrome是不错的选择，因为它们有强大开发者功能。 二、HTML入门（掌握） 本章的学习知识内容： HTML代码文件 HTML的基本结构 HTML基本结构的认识 HTML的注释 HTML的编码问题 HTML的规范 1. 编写一个最简单的HTML文件 1）新建一个文本文档 2）将后缀名改为html（htm） 3）就可以在里面开始写HTML代码了 好好学习，天天向上 <br /> <h1>好好学习，天天向上</h1>
4）点击文件，使用浏览器打开查看效果 2. HTML的语法 2.1 HTML文件格式 一般我们写的代码需要存储在文件中，HTML代码一般保存在后缀名为 .html 或 .htm 文件中比如index.html或者 index.htm，所以为了让大家知道你文件中是什么内容，我们编写一个HTML网页时文件名的后缀为html或htm，建议使用 .html。 2.2 HTML标签格式 2.2.1什么是 HTML 标签？ • HTML标签也称为HTML标记，由开始标签和结束标签组成，用于表现结构化的内容，将内容构造成为一个完整的网页。 • 开始标签是被括号包围的元素名。 • 结束标签是被括号包围的斜杠和元素名。 如：<h1></h1> <b></b> 注意：有些 HTML 元素没有结束标签，比如 <br /> 2.2.2 单标签与双标签 1） 双标签 双标签是指由开始标签和结束标签组成，比如前面认识到的html，body，head，title，h1等等都是双标签； 例：<b>内容</b>
2） 单标签 单标签是指没有结束标签的标签，由一个标签构成即为开始也是结束； 但根据XHTML的规范，标签一定要有结束，于是写上自结束符号： / 例：<hr />
问题： 哪些标签是双标签，哪些是单标签？ 有没有规律？ 2.2.3 标签属性 定义：属性描述标签的更多细节 比如字体标签<font>，如果需要设置字体大小，我们就需要使用size属性；
语法：<标签名 属性名="属性值" 属性名="属性值" ....> <!-- 设置字体的标签 --> <font size="7">大不大</font>
属性值可以加双引号，也可以加单引号，也可以不加引号；千万不要在一个值又加单引号又加单引（混合），我们建议大家都使用双引号。
HTML 标签拥有通用属性，也就是每个标签都有属性（有个别例外）。 Base，head，html，meta，script，style，title标签不提供下面的属性： 属性 值 描述 class class_rule 或 style_rule 元素的类(class) id id_name 元素的某个特定id style 样式定义 内联样式定义 title 提示文本 显示于提示工具中的文本 3. HTML的基本结构 <!DOCTYPE html> <html> <head></head> <body></body> </html> DOCTYPE: 文档声明 html: 标签告知浏览器其自身是一个 HTML 文档 head: 标签用于定义文档的头部（文档的描述信息） body: 标签用于定义文档的主体（文档的主体内容）
4. HTML基本结构的认识 <!-- 文档声明：位于文档的首行，告知浏览器文档使用哪种 HTML 或 XHTML 规范。让浏览器通过正确的方式解析我们的网页，使网页能正常显示。 --> <!DOCTYPE html> <!-- html标签：告诉页面这是一个HTML文档 ，还可以声明这个网页是面向哪种语言的用户 --> <html> <!-- head标签:就是一个网页的头,头部中的内容一般存放描述文档的信息。 --> <head> <!-- meta元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词等。
声明文件的编码是UTF-8的编码，告诉浏览器，你用什么编码去解析这个文件 UTF-8 : 国际通用码 GBK/GB2312 : 中文编码 这里的编码必需要和文件的编码完全一致 --> <meta charset="UTF-8"/> <!-- 提供给搜索引擎的关键字信息 --> <meta name="keywords" content="Java培训、UI培训、PHP培训"/> <meta name="description" content=""/> <!-- title : 网页的标题，会显示在标题栏 --> <title>你看得见我嘛？</title> </head> <!-- body标签:就是一个身体 一般来说:body里面的内容要显示出来 --> <body> 我是一个中国人 </body> </html> 5. HTML的注释 语法：<!-- 注释 --> 含义：注释标签用来在源文档中插入注释。注释会被浏览器忽略。您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。
注意：注释不能嵌套 <!-- 注释 <!-- 注释 --> 注释嵌套是错误的 --> 6. HTML的编码问题 常见的编码格式有： UTF-8 国际通用编码字符集，UNICODE的灵活版 GBK/GB2312 中文编码字符集 BIG5 中文繁体字符集 iso8859-1 西方欧洲语言字符集，通常叫做Latin-1 UNICODE 大字符集，包含了地球上所有语言的编码
HTML的编码声明为： <meta charset="utf-8"/>
文件编码是指HTML文件保存到硬盘中的编码格式，一般在保存的时候设置，常见的开发工具都可在编辑的时候设置。
注意：2个地方必须保持一致（文件编码+HTML编码声明） 7. HTML的规范 1) HTML标签是由尖括号包围的关键词，比如 <html> 2) HTML标签通常是成对出现的，比如<b>和</b> 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签 3) HTML不区别大小写(我们建议使用小写) 4) HTML 可以嵌套，但是不允许交叉嵌套 三、HTML基本标签（掌握） 本章的学习知识内容： 基础标签 -> i,em,b,strong,u,p,br,hr,hn,del,pre 其它标签 -> div，span , header , footer , script , style , link 特殊符号 1. 基础标签 1.1 hn标签 hn标签不是一个标签，而是一组标签的缩写：h1 h2 h3 h4 h5 h6
定义和用法 <h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
例子： <h1>这是标题 1</h1> <h1>这是标题 2</h1> <h2>这是标题 3</h2> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6> 1.2 p标签 定义和用法 <p> 标签定义段落。
p 元素会自动在其前后创建一些空白（段间距）。浏览器会自动添加这些空间，您也可以在样式表中规定。
实例 以下代码标记了一个段落： <p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p> 1.3 br标签 定义和用法 <br> 可插入一个简单的换行符。
<br> 标签是单标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中规定单标签也需要结束，把结束标签放在开始标签中，也就是 <br />。
请注意，<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。而br 则不会。 1.4 hr标签 定义和用法 <hr> 标签在 HTML 页面中创建一条水平线。
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
实例 被水平线分隔的标题和段落： <h1>This is header 1</h1> <hr /> <p>This is some text</p> 2. 文本标签 2.1 b标签和 strong标签 定义和用法 <b> <strong> 标签呈现粗体文本效果。
<b> 标签是基于内容的样式标签 <strong> 的物理版本，但它没有后者的扩展意义。
<b> 标签明确地将包括在它和其结束标签之间的字符或者文本变成粗体。如果某种加粗的字体不可用，浏览器将使用一些其他的表现方法，例如反相显示或者加下划线等。 注意： HTML5中建议使用 <strong> 而不使用 <b> 2.2 i标签和 em 标签 定义和用法 <i> <em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
在文本中加入强调也需要有技巧。如果强调太多，有些重要的短语就会被漏掉；如果强调太少，就无法真正突出重要的部分。这与调味品一样，最好还是不要滥用强调。 注意： HTML5中建议使用 <em> 而不使用 <i> 2.3 small标签 定义和用法 <small> 标签呈现小号字体效果。
<small> 标签和它所对应的 <big> 标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用。
与 <big> 标签类似，<small> 标签也可以嵌套，从而连续地把文字缩小。每个 <small> 标签都把文本的字体变小一号，直到达到下限的一号字。 2.4 big标签 <big> 标签呈现大号字体效果。 2.5 pre标签 pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。 2.6 u标签（了解） <u> 标签可定义下划线文本。 提示：请尽量避免为文本加下划线 - 用户会把它混淆为一个超链接！ 2.7 del标签 <del> 定义文档中已被删除的文本。 2.8 sub标签 <sub> 定义文档中的下标文本。 2.9 sup标签 <sup> 定义文档中的上标文本。
3. 布局标签 3.1 span标签 定义和用法 <span> 标签被用来组合文档中的行内元素。 注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。 3.2 div标签（重点中的重点） 定义和用法 <div> 可定义文档中的分区或节。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
注意： div span两个标签没有特殊的功能，只是作为一个内容容器，但使用频率很高，主要与CSS配合使用。 Div：块标签(它会独占一行，主要用于布局) Span:行内标签(不会独占一行，用于勾选需要CSS修饰的内容) 块标签与行内标签的区别： 块标签独占一行，宽度默认为100%； 行内标签多个并排一行，宽高为内容大小。 3.3 header标签（了解） HTML5新增的语义标签，类似div，定义 section 或 page 的页眉。 3.4 footer标签（了解） HTML5新增的语义标签，类似div，定义 section 或 page 的页脚。 3.5 section标签（了解） 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。也是属于HTML5新增的语义标签。 3.6 article标签（了解） <article> 定义文章 <article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14日发布.....</p> </article> 3.7 details标签（了解） 定义元素的细节。 <details> <summary>title is here</summary> <p>All pages and graphics on this web site are the property.</p> </details> 3.8 summary标签（了解） 为<details>元素定义可见的标题。 3.9 nav标签（了解） 定义导航链接，HTML5中新增的属性 <nav> <a href="index.html">首页</a> <a href="kecheng.html">课程设置</a> <a href="lianxi.html">联系我们</a> </nav>
4. 资源标签（了解） 4.1 script标签 定义和用法 <script> 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。 可以使用 type 属性规定脚本的 MIME 类型。 JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。 4.2 style标签 定义和用法 <style> 标签用于为 HTML 文档定义CSS样式。
在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。 type 属性定义 style 元素的内容。唯一的值是 "text/css"。 style 元素通常位于 head 部分中。 4.3 link标签 定义和用法 <link> 标签定义文档与外部资源的关系。 <link> 标签最常见的用途是链接样式表。
实例 链接一个外部样式表： <head> <link rel="stylesheet" type="text/css" href="theme.css" /> </head> 5. 特殊符号 需求： 显示需要在网页中输出 “<JavaScript权威指南>”？ 浏览器会把“<>”解析为标记，不会出现我们想要的效果；
在HTML中有一些特殊意义的东西，使用一个符号来进行表示： 格式：&符号名; 空格 (小空格)   空格 (大空格，占一个中文位置) > 大于 > < 小于 < & &
其他特殊符号，可以使用输入法直接插入，也可以查手册翻符号名和编号。 比如：© ™ ÷ 6. 基本标签总结 i/em 斜体(强调) ,HTML5建议使用em 双标签 b/strong 加粗(重要) ,HTML5建议使用strong 双标签 u 下划线 双标签 del 删除线 双标签 p 段落(默认情况下和上下的内容之间有段间距) 双标签 br 换行 单标签 h(n) 标题 (h1-h6 从大到小的 换行 加粗，上下内容之间有距离) 一个网页里面，建议只出现一个h1与h2 双标签 hr 水平线 单标签 pre 预格式文本，原样显示内容（标签会解析） 双标签 sub 下标 双标签 sup 上标 双标签 span 无格式行内标签 双标签 div 布局块 双标签
|