《Web前端技术H5+CSS3》笔记--第一章 HTML基础[云图智联]

时间 2020-07-19

标签 Web前端技术H5+CSS3 笔记第一章 html 基础云图栏目 HTML 繁體版

原文原文链接

1.1 HTML简介

1.1.1 HTML：Hyper Text Markup Language（超文本标记语言）

在学习使用HTML以前，你们常常会问，什么是HTML？HTML是用来描述页面的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言。 HTML由一套标记标签组成，在制做网页时，HTML使用标记标签来描述网页。javascript

1.1.2 发展史

1.1.3 HTML5的优点

HTML5自正式推出以来，就以一种惊人的速度被迅速推广着，各主流浏览器对于HTML5表现出来的热烈欢迎、积极支持。

一、世界知名浏览器厂商对HTML5的支持
        经过对Internet、Explorer、Google、Firefox、Safari、Opera等主要的web浏览器发展策略调查，发现它们都在支持HTML5上采起了措施
        - 微软：2010年3月16日，微软与拉斯维加斯市举行的MIX10技术大会上宣布已推出InternetExplorer(IE)9浏览器开发者预览版。
        - Google：2010年2月19日，GoogleGears项目经理伊安~费特经过博客宣布，谷歌将放弃对Gears浏览器插件项目支持、重点开发HTML5项目
        - 苹果：2010年6月7日，苹果开发者大会的会后发布了Safari5。这款浏览器支持10个以上HTML5的新技术，包括全屏播放、HTML5地理位置、HTML5的形式验证等功能
        - Opera：2010年5月5日，Opera软件公司首席技术官Hakon Wium Lie先生在访华之际，接受了中国软件资讯网等少数几家媒体采访，他认为HTML5和CSS3将是全球互联网发展的将来趋势
        - Mozilla：2010年7月，Mozilla基金会发布了Firefox4浏览器的第一个测试版，从官方文档看，它对HTML5是彻底级别的支持
二、市场的需求
        如今的市场已经火烧眉毛地要求有一个统一的互联网通用标准。HTML5以前的状况是，因为各浏览器之间不统一，仅修改web浏览器之间的因为兼容性而引发的bug就浪费了大量的时间。而HTML5的目标就是将web带入一个成熟的应用平台，在HTML5平台上，视频，音频，图像，动画及同计算器的交互都被标准化。
三、跨平台
        HTML5能够作到跨平台开发，用户只用打开浏览器便可访问应用，PC网站、各类移动设备，插件等核心代码就能够不须要重复编写，极大地减小了开发人员的工做量。html

1.1.4 W3C标准

发明HTML的初衷是实现信息资料的网络传播和共享，但愿HTML文档具备平台无关性，即同一个HTML文件，在不一样的浏览器上看到一样的页面内容和效果。可是遗憾的是，随着浏览器市场的激烈竞争，各大浏览器厂商为了吸引用户，都在早期HTML版本的基础上扩展各种标签，各浏览器之间互不兼容，致使HTML编码规则混乱，违背了HTML发明的初衷，所以须要一个组织来指定和维护统一的国际化web开发标准，确保多个浏览器都兼容，HTML内容结构都是语义化的。前端

W3C标准不是某一个标准，而是一系列的标准集合，一个网页主要有三部分组成，即结构、表现、行为。 html5

对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其余标准组织制订的标准，好比ECMA（European Computer Manufacturers Association）的ECMAScript标准。java

1.1.5 网页编辑工具

一、开发工具：记事本、Dreamweaver、UltraEdit、Sublime、WebStorm等
        你能够从以上软件的官网中下载对应的软件，按步骤安装便可。
        接下来咱们将为你们演示如何使用 WebStorm来建立 HTML 文件。
二、使用WebStorm编辑HTML文档以下：
        1.打开WebStorm编辑器后，选择File->New->HTML File命令，打开“HTML File”对话框;
        2.在“Name”文本框中输入HTML的文件名为“my_firstPage”在“Kind”下拉列表框中选择HTML5 file选项后OK按钮便可建立一个HTML5页面的模板;
        3.在body元素和title元素中添加网页内容;
        4.网页内容添加完成后，鼠标移动到编辑器的右上方，会出现几个常见的浏览器图标，单击Chrome浏览器附表便可打开页面;
        5.在Chrome浏览器中能够显示出结果。web

2.1 HTML基础

2.1.1 HTML5的基本结构

<html>
    <head>
             <title>个人第一个网页</title>
    </head>
    <body>
             个人第一个网页
    </body>
</html>

标签都是成对出现的。有一个开头标记就应该有一个对应的结束标记记，“<>”开始，以“</>”结束，要求成对出现，标签之间有缩进，提现层次感，方便阅读。 chrome

HTML5的基本结构分为两部分。整个HTML包括头部｛head｝和主体｛body｝两部分，头部包括网页标题｛title｝等基本信息，主体包括页面的内容信息，如图片、文字等。编程

2.1.2 网页的基本信息

一、DOCTYPE 声明
在这个HTML5文件最上面有一行关于DOCTYPE文档类型的声明，约束HTML文档结构。检查是否符合相关WEB标准，同时告诉浏览器使用那中规范来解释这个文档中的代码。DOCTYPE声明必须位于HTML文档的第一行。 canvas

HTML5:浏览器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

HTML4：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wwww.w3.org/TR/xhtml1-transitional.dtd">

二、<title>标签
使用<title>标签描述页面的标签，相似一个文档的标题，为一个简介的主题，并能使读者有兴趣。

<title>搜狐-中国最大的门户网站</title>

三、<meta>标签
使用<meta>标签描述网页的摘要信息，包括文档内容类型、字符编码信息，搜索关键字、网站提供的功能和服务的详细描述等。<meta>标签的内容并不显示，其目的是方便浏览器解析或利于搜索引擎搜索，它采用“名称/值”对的方式描述摘要信息。

meta标签可分为两大部分：http-equiv和name变量。

http-equiv至关于http的文件头做用，它能够向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

1.文档内容类型，字符编码信息书写以下：

HTML5:

<meta charset="UTF-8">

HTML4:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

  属性：charset表示字符集编码，经常使用的编码有如下几种。
        1.gb2312：简体中文，通常用于包含中文和英文的页面；
        2.ISO-885901：纯英文，通常用于只包含英文的页面；
        3.big5：繁体，用于带有繁体字的页面；
        4.UTF-8：国际性通用的编码，一样适用于中文和英文的页面。和gb2312编码相比，国际通用性更好。

2.搜索关键字和内容描述信息书写以下：

<meta name="keywords" content="云图智联">
<meta name="description"content="云图智联是国内的IT教育集团，致力于为中国培养优秀的IT技术人才">

网站示例：

<!--京东-->
 <meta name="description"
          content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通信、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

<!--淘宝-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <title>淘宝网 - 淘！我喜欢</title>
  <meta name="spm-id" content="a21bo" />
  <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各种服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
  <meta name="aplus-xplug" content="NONE">
  <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />

2.1.3 HTML5的基本标签

一、标题标签

<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>

标题标签表示一段文字和标题或主题，而且支持多层的内容结构。例如，一级标题采用h1，二级标题采用h2，其余级别标题以此类推。HTML共提供了六级标题h1~h6，并赋予了标题必定的外观，全部标题字体加粗，h1字号最大，h6字号最小。

二、段落标签、换行标签和水平线标签

<p>段落标签</p>
<br/><!--换行标签-->
<hr><!--水平线标签-->

三、字体样式标签

<!--加粗-->
<strong></strong>
<b></b>
<!--倾斜-->
<em></em>
<i></i>
<!--字体缩小-->
<small></small>
<!--删除线-->
<s></s>
<!--下划线-->
<u></u>

四、图像标签

（1）常见的图像格式

1.JPG格式
        JPG格式图像是在Internet上被普遍支持的图像格式，它是联合图像专家组格式的英文缩写。JPG格式采用的是有损压缩，会形成图像画面的失真，不过压缩以后的体积很小，并且比较清晰，因此比较适合在网页中应用此格式最适合用于排和或连续取色调图像的高级格式，这事由于JPG文件能够包含数百万种颜色。随着JPG格式文件品格式质的提升，文件的大小和下载时间也会随着增长。一般能够经过压缩JPG格式文件在图像品质和文件大小之间达到良好的平衡。

2.GIF格式
        GIF格式图像是网页中使用最普遍，最普通的一种图像格式，它是图像交换格式的英文缩写。GIF格式文件支持透明色，使得GIF格式在网页的背景和一些多层特效的显示上用得很是多；还支持动画，这是它最突出的一个特色，所以GIF格式图像在网页中应用很是普遍。

3.BMP格式
        BMP格式图像在Windows操做系统中使用得比较多，它是位图的英文缩写。BMP格式图像格式与其余Microsoft Windows程序兼容。它不支持文件压缩，也不是用于Web页。

4.PNG格式
        PNG格式是20世纪90年代中期开始开发的图像文件储存格式，它兼有GIF和JPG格式的优点，同时具有GIF格式不具有的特性。

（2）图像标签

<img src="path" alt="text" title="text"  width="x"  height="y" />

src属性表示图片路径，alt属性指定图像的代替文本，表示图像没法显示时（如图片路径错误或网速太慢等）替代先是文本，这样，即便当图像没法显示时，用户还能够看到网页丢失的信息内容。

title属性能够提供额外的提示或帮助信息，当鼠标移至图片上时显示提示信息，方便用户使用。

width和height两个属性分别表示图片的宽度和高度，若是不设置，那么图片默认显示原始大小。

五、超连接标签

（1）超连接包含两部份内容，一是连接地址，即连接的目标，能够是某个网站或文件路径，对应a标签的href属性；二是连接文本或图像，点击该文本或图像，将跳转到href属性指定的连接地址。

<a href="path" target="目标窗口位置">连接文本或图像</a>

href：连接地址的路径;

target：指定连接在哪一个窗口打开，经常使用的取值有_self（自身窗口）、_blank（新建窗口）。
超连接便可以是文本超连接，也可使图片超连接

（2）经常使用的超连接
    1>页面间连接
    从一个页面连接到另外一个页面
    2>锚连接
    锚连接也称锚点连接，命名锚点连接（也叫书签连接）经常用于那些内容庞大繁琐的网页，经过点击命名锚点，自动跳转到咱们设置锚点的位置，相似于咱们阅读书籍时的目录页码或章回提示。
    锚点连接能够跳转到页面的任何位置。通常用于在页面下面的时候，点击回到最上面。锚点连接的名称能够随意取，只起到标记做用。

1.从A页面的甲位置跳转到本页中的乙位置

示例：

<a href="#a1">a1</a>
    <a href="#a2">a2</a>
    <a href="#a3">a3</a>
    <a href="#a4">a4</a>

    <div id="a1">a1</div>
    <div id="a2">a2</div>
    <div id="a3">a3</div>
    <div id="a4">a4</div>

2.从A页面的甲位置跳转到B页面中的乙位置

示例：

<!--A页面-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<title>锚连接</title>
</head>
<body>
<p>
    [<a href="help.html#register">A位置</a>] 
    [<a href="help.html#login">B位置</a>]
</p>
</body>
</html>

<!--B页面-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>锚连接</title>
    <style>
        div{
            width: 100%;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<h4><a name="register">A位置</a></h4>
<div>
    <h2>A位置</h2>
</div>
<h4><a name="login">B位置</a></h4>
<div>
    <h2>B位置</h2>
</div>
</body>
</html>

3>功能性连接

<!--下载图片-->
<a href="img/qq.jpg">点击下载图片</a>

<!--发送邮件-->
<a href="mailto:Webmaster@ytzl.cn">联系咱们</a>

<!--引用脚本语言-->
<a href="javascript:alert('哈哈哈哈')"></a>

六、注释和特殊符号

<!--注释符号-->

当页面的HTML结构复杂或内容较多时，须要添加必要的注释方便代码阅读和维护。同时，有时为了调试，须要暂时注释掉一些没必要要的HTML代码。特殊符号通常以"&"符号开头，";"结尾。

3.1 练习

3.1.1 制做《悟空》歌词

需求：
      一、标题使用标题标签，文字使用p标签标题与正文之间的分隔线使用水平线标签；歌词词结束后使用换行标签换行
      二、人名加粗显示，时间斜体显示
      三、制做页面版权部分

<h2>悟空</h2>
<hr/>
<p>《悟空》是<strong>戴荃</strong>创做并演唱的歌曲，收录于<i>2015年8月7日</i>发行的中国好歌曲第二季导师原创专辑《奇幻游乐园》中。</p>
<p>
    月溅星河，长路漫漫，<br>
    风烟残尽，独影阑珊；<br>
    谁叫我身手不凡，<br>
    谁让我爱恨两难，<br>
    到后来，肝肠寸断。<br>
</p>
<hr/>
<p>&copy; 2015-2025 云图智联</p>

3.1.2 制做图书简介页面

使用学过的图像标签、标题标签、水平线标签、斜体标签、加粗标签、段落标签等制做京东读书新闻资讯页面，主标题使用一级标题标签，副标题使用二级标题标签，二级标题与图片之间使用水平线分隔。

<h1>HTML5+CSS3从入门到精通（标准版）</h1>
<h2>做者：将来科技</h2>
<hr/>
<p><img src="images/book.jpg" alt="图书" width="200"/></p>
<p><em>HTML 5 CSS 3 JavaScript从入门到精通（标准版）</em></p>
<p><em>  以基础知识、示例、实战案例相结合的方式详尽讲述了HTML  CSS  JavaScript及目前*的前端技术html5移动开发 html5实战 html5 canvas html5 app html5入门 html5 动画  html5揭秘 html 游戏 html5权威指南 的基本知识都有涉及。</em></p>
<p><strong>全书分两大部分，共12章</strong></p>
<p>介绍了HTML5入门和CSS3实战入门内容：使用HTML标签标识网页内容，使用CSS设计网页基本样式，如使用并美化文本、图像、超连接、列表、表单和表格等</p>
<p>第二部分为CSS3布局部分，主要讲解使用CSS3设计完整网页的方法和技巧，以及CSS3中的各类新技术应用；</p>
<p>&copy; 2015-2025 云图智联</p>

3.1.3 锚连接的应用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            display: block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
        }
        div{
            width: 400px;
            height: 400px;
            margin-top: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<a href="#a1">a1</a><a href="#a2">a2</a><a href="#a3">a3</a><a href="#a4">a4</a>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div id="a4">a4</div>
</body>
</html>