HTML5基础

試著忘記壹切 提交于 2020-02-01 06:52:10

HTML5基础

 

1.1.1 HTML简介及发展史

HTML是用来描述网页的一种语言,它是一种超文本语言,也就是说,HTML不是一种编程语言,仅是一种标记语言(MarKup Language)

1.1.2 HTML的优势

1.世界知名浏览器厂商的支持

2.市场需求

3.跨平台

1.1.3 W3C标准

1.使用W3CW3C标准的原因

随着浏览器市场的激烈竞争,各大浏览器厂商为了吸引用户,都在早期HTML版本的基础上扩展各类标签,个浏览器厂商之间互不兼容,导致HTML编码规则混乱,

违背了HTML发明的初衷,因此需要一个组织来制定和维护统一的国际化Web开发标准,确保多个浏览器都兼容,HTML内容结构都是语义化的。

万维网联盟(Word Wide Web Consortium)简称W3C, 诞生了,因此有W3C组织制定和维护的Web开发标准,也成为W3C标准。它是Web技术领域最权威和具有影响力的

国际中立性技术标准机构。

2.W3C标准的介绍

W3C标准不是某一个标准,而是一系列的标准集合,一个网页主要由三部分组成,即结构(Sructure),表现(Presentation),和行为(Behavior)。

小结:W3C标准包括结构化标准语言(HTML,XML),表现标准语言(CSS),行为标准(DOM,ECMAScript)。

1.1.4  网页编辑工具

使用WebStrom编辑HTML文档的步骤如下。

(1)打开WebStrom编辑器后,选择FIle→New→HTML  File命令,打开“HTML File”对话框,

(如果是第一次安装WebStorm的话)不会出现这个界面,可以首先在出现的那个界面上单击Create New Project(创建一个新的项目文件),然后这个文件夹就会随之在WebStrom

左边出现,接下来要开发的项目子文件就可以放在这个文件下面了。)

(2)在“Name”文本框中输入HTML的文件名为“my_FirstPage”,在“kind”下拉列表框中选择“HTML  5  file”选项,单机“OK”按钮即可创建一个HTML5页面的模板。

(3)在body元素和title元素中添加网页内容。

(4)网页内容添加完成后,鼠标移动到WebStorm编辑器右上方,会出现几个常见的浏览器图标,单击Chrome浏览器图标即可打开该页面。

(使用Chrome浏览器测试,前提是本机安装了Chrome浏览器,其他浏览器也是同理。)

1.1.5 HTML5 文件的基本结构

HTML是一种超文本标记语言,如网页的一个标题,一个段落,一张图片等,这些都是利用一个个HTML标记完成的。最基本的语法就是<标记>内容</标记>。

复制代码
          <html>
          <head>

              <title>我的第一个网页</title>      //头部部分

          </head>
          <body>

                  我的第一个网页                //主体部分

          </body>
          </html>
复制代码

1.1.6 网页的基本信息

  1.DOCTYPE声明

约束HTML文档结构,检验是否符合相关Web标准,告诉浏览器使用哪种规范来解释这个文档的代码

               <!DOCTYPE  html>

2.<tltle>标签

描述一个标题,使读者有兴趣读下去。

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

3.<>meta>标签

<meta>标签描述的内容并不明显,其目的是方便浏览器解析或利于搜索引擎搜索。

(1)文档内容类型,字符编码信息书写如下。

                  <meta  charset="UTF-8">

属性:charset表示字符集编码,常用的编码有以下几种。

  gd2312:简体中文,一般用于包含中文和英文的页面。

  ISO-885901:纯英文,一般用于之包含英文的页面。

  big5:繁体,一般用于带有繁体字的页面。

  UTF-8:国际性同用的字符编码,同样适用于中文和英文的页面。和gd2312编码相比,国际通用性更好。

 (  在保存文件是编码方式一定要与HTML5 页面中<meta>标签中的编码方式保持一致,否则,将会出现乱码。)

(2)搜索关键字哈内容描述信息书写如下。

           <meta  name="Keywords"  content="北大青鸟,IT培训"/>

           <meta  name="description"  content="北大青鸟是国内最大的IT教育集团,致力于为中国培养优秀的IT技术人才"/>

(使用WebStorm工具自动生成的HTML基本结构中的<head>标签里有个属性lang=“en”,它的意思是表示本页面是英文的。Chrome之类的浏览器会提示是否需要翻译)

1.2.1  标题标签

   标题标签表示一段文字的标题或主题,并且支持多层次的内容结构。例如,一级标题采用<h1>,二级标题则采用<h2>,其他级别标题以此类推。HTML共提供了六级标题<h1>~<h6>,

并赋予了标题一定的外观,所以标题字体加粗,<h1>字号最大,<h6>字号最小。

复制代码
<html>
<head>
    <title>不同标题标签的对比</title>
</head>
<body>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
</body>
</html>
复制代码

1.2.2  段落标签和换行标签

     段落标签<p>......</p>表示一段文字等内容。

复制代码
<html>
<head>
    <title>段落标签的应用</title>
</head>
<body>
        <h1>北京欢迎你</h1>
        <P>北京欢迎你,有梦想谁都了不起!</P>
        <p>有勇气就会有奇迹。</p>
        
</body>
</html>
复制代码

     (使用<h1>标签来表示标题,使用<p>标签表示一个段落,这里就对应了上面介绍的HTML内容的语义化。)

         换行标签<br/>表示强制换行显示,该标签比较特殊,没有结束标签,直接使用<br/>表示标签的开始和结束。

复制代码
<html>
<head>
    <title>换行标签的应用</title>
</head>
<body>
        <h1>北京欢迎你</h1>
        <P>
            
            北京欢迎你,有梦想谁都了不起!
            有勇气就会有奇迹。<br/>
            北京欢迎你,为你开天辟地
            流动中的魅力充满朝气。<br/>
            北京欢迎你,在阳光下分享呼吸
            让黄土地刷新成绩。<br/>
            北京欢迎你,像音乐感到你
            让我们都加油超越自己。<br/>
            
         </p>
        
</body>
</html>
复制代码

1.2.3  水平线标签

     水平线标签<hr/>表示一条水平线,注意该标签与<br/>标签一样,比较特殊,没有结束标签。

复制代码
<html>
<head>
    <title>换行标签的应用</title>
</head>
<body>
<h1>北京欢迎你</h1>
<br/>                        //水平线标签
<P>

    北京欢迎你,有梦想谁都了不起!
    有勇气就会有奇迹。<br/>
    北京欢迎你,为你开天辟地
    流动中的魅力充满朝气。<br/>
    北京欢迎你,在阳光下分享呼吸
    让黄土地刷新成绩。<br/>
    北京欢迎你,像音乐感到你
    让我们都加油超越自己。<br/>

</p>

</body>
</html>
复制代码

1.2.4  字体样式标签

        使用<stong>标签让字体变粗,<em>标签让文字倾斜。

  (<strong>标签不但能让字体加粗,实际上<strong>标签还有一个更重要的“身份”,它是一个带有语义化的标签,它有强调,加强语气的作用)

注释:

<!--注释内容-->

特殊符号:

特殊符号 字符实体 实例
空格 &nbsp; <a href ="#">百度</a>&nbsp;&nbsp;<a href ="#">Google</a>
大于号 &gt; 如果时间&gt;晚上6点,就坐车回家
小于号 &lt; 如果时间&lt;早上7点,就走路上学
引号 &quot; W3C规范中,HTML的属性值必须用成对的&quot;引起来
版权号 &copy &copy;2013-2018 北大青鸟

这些实体符号必须以“&”开头,以“ ;”结尾

5.图像标签

常见的图片格式

1.JPG格式:采用的是有损压缩,会造成图片失真,不过压缩之后体积很小,而且比较清楚,比较适合在网页中应用

2.GIF格式:GIF格式文件支持透明色,在网页背景和多一些多层特效得显示上用的非常多,还支持动画

3.BMP格式;  它不支持文件压缩,也不适用于Web页

4.PNG格:他兼有GIF格式和JPG格式的优势,同时具备GIF格式不具备的特征,PNG是一种新兴的Web图像格式

图像标签基本语法:

<img src="图片地址" alt="图像代替的文字" title ="鼠标悬停提示文字" width ="图片宽度" height=" 图片高度"/ >

其中src属性表示图片路径,alt 实行指定的代替文字,表示图像无法显示时(如图片路径错误或网速太慢时)代替显示的文本。 title 属性可以提供额外的提示或帮助信息,当鼠标光标移至图片上时显示的文字

width和height两个属性分别表示图片的宽度和高度

6.超链接标签

超链接基本用法

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

href:表示链接地址的路径

target:指定链接在哪个窗口打开,常用的取值—self(自身窗口)、—blank(新建窗口)

超链接既可以是文本链接,也可以是图像超链接

链接地址分为相对路径和绝对路径

绝对路径:指向目标完整路径,一般指向本站点外的文件

相对路径:相当于当前页面的路径,一般指本站点内的路径

另外的两个特殊符号:“ ../”表示当前目录的上级目录,“../../”表示当前目录的上上级目录

超链接的应用场合:

1.页面间链接:A页到B页

2.锚链接:

 <a name ="a">目标位置乙</a>

<a name="#a">当前位置甲</a>

3.功能性连接:

mailto电子邮件地址

 

1.1.1 HTML简介及发展史

HTML是用来描述网页的一种语言,它是一种超文本语言,也就是说,HTML不是一种编程语言,仅是一种标记语言(MarKup Language)

1.1.2 HTML的优势

1.世界知名浏览器厂商的支持

2.市场需求

3.跨平台

1.1.3 W3C标准

1.使用W3CW3C标准的原因

随着浏览器市场的激烈竞争,各大浏览器厂商为了吸引用户,都在早期HTML版本的基础上扩展各类标签,个浏览器厂商之间互不兼容,导致HTML编码规则混乱,

违背了HTML发明的初衷,因此需要一个组织来制定和维护统一的国际化Web开发标准,确保多个浏览器都兼容,HTML内容结构都是语义化的。

万维网联盟(Word Wide Web Consortium)简称W3C, 诞生了,因此有W3C组织制定和维护的Web开发标准,也成为W3C标准。它是Web技术领域最权威和具有影响力的

国际中立性技术标准机构。

2.W3C标准的介绍

W3C标准不是某一个标准,而是一系列的标准集合,一个网页主要由三部分组成,即结构(Sructure),表现(Presentation),和行为(Behavior)。

小结:W3C标准包括结构化标准语言(HTML,XML),表现标准语言(CSS),行为标准(DOM,ECMAScript)。

1.1.4  网页编辑工具

使用WebStrom编辑HTML文档的步骤如下。

(1)打开WebStrom编辑器后,选择FIle→New→HTML  File命令,打开“HTML File”对话框,

(如果是第一次安装WebStorm的话)不会出现这个界面,可以首先在出现的那个界面上单击Create New Project(创建一个新的项目文件),然后这个文件夹就会随之在WebStrom

左边出现,接下来要开发的项目子文件就可以放在这个文件下面了。)

(2)在“Name”文本框中输入HTML的文件名为“my_FirstPage”,在“kind”下拉列表框中选择“HTML  5  file”选项,单机“OK”按钮即可创建一个HTML5页面的模板。

(3)在body元素和title元素中添加网页内容。

(4)网页内容添加完成后,鼠标移动到WebStorm编辑器右上方,会出现几个常见的浏览器图标,单击Chrome浏览器图标即可打开该页面。

(使用Chrome浏览器测试,前提是本机安装了Chrome浏览器,其他浏览器也是同理。)

1.1.5 HTML5 文件的基本结构

HTML是一种超文本标记语言,如网页的一个标题,一个段落,一张图片等,这些都是利用一个个HTML标记完成的。最基本的语法就是<标记>内容</标记>。

复制代码
          <html>
          <head>

              <title>我的第一个网页</title>      //头部部分

          </head>
          <body>

                  我的第一个网页                //主体部分

          </body>
          </html>
复制代码

1.1.6 网页的基本信息

  1.DOCTYPE声明

约束HTML文档结构,检验是否符合相关Web标准,告诉浏览器使用哪种规范来解释这个文档的代码

               <!DOCTYPE  html>

2.<tltle>标签

描述一个标题,使读者有兴趣读下去。

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

3.<>meta>标签

<meta>标签描述的内容并不明显,其目的是方便浏览器解析或利于搜索引擎搜索。

(1)文档内容类型,字符编码信息书写如下。

                  <meta  charset="UTF-8">

属性:charset表示字符集编码,常用的编码有以下几种。

  gd2312:简体中文,一般用于包含中文和英文的页面。

  ISO-885901:纯英文,一般用于之包含英文的页面。

  big5:繁体,一般用于带有繁体字的页面。

  UTF-8:国际性同用的字符编码,同样适用于中文和英文的页面。和gd2312编码相比,国际通用性更好。

 (  在保存文件是编码方式一定要与HTML5 页面中<meta>标签中的编码方式保持一致,否则,将会出现乱码。)

(2)搜索关键字哈内容描述信息书写如下。

           <meta  name="Keywords"  content="北大青鸟,IT培训"/>

           <meta  name="description"  content="北大青鸟是国内最大的IT教育集团,致力于为中国培养优秀的IT技术人才"/>

(使用WebStorm工具自动生成的HTML基本结构中的<head>标签里有个属性lang=“en”,它的意思是表示本页面是英文的。Chrome之类的浏览器会提示是否需要翻译)

1.2.1  标题标签

   标题标签表示一段文字的标题或主题,并且支持多层次的内容结构。例如,一级标题采用<h1>,二级标题则采用<h2>,其他级别标题以此类推。HTML共提供了六级标题<h1>~<h6>,

并赋予了标题一定的外观,所以标题字体加粗,<h1>字号最大,<h6>字号最小。

复制代码
<html>
<head>
    <title>不同标题标签的对比</title>
</head>
<body>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
</body>
</html>
复制代码

1.2.2  段落标签和换行标签

     段落标签<p>......</p>表示一段文字等内容。

复制代码
<html>
<head>
    <title>段落标签的应用</title>
</head>
<body>
        <h1>北京欢迎你</h1>
        <P>北京欢迎你,有梦想谁都了不起!</P>
        <p>有勇气就会有奇迹。</p>
        
</body>
</html>
复制代码

     (使用<h1>标签来表示标题,使用<p>标签表示一个段落,这里就对应了上面介绍的HTML内容的语义化。)

         换行标签<br/>表示强制换行显示,该标签比较特殊,没有结束标签,直接使用<br/>表示标签的开始和结束。

复制代码
<html>
<head>
    <title>换行标签的应用</title>
</head>
<body>
        <h1>北京欢迎你</h1>
        <P>
            
            北京欢迎你,有梦想谁都了不起!
            有勇气就会有奇迹。<br/>
            北京欢迎你,为你开天辟地
            流动中的魅力充满朝气。<br/>
            北京欢迎你,在阳光下分享呼吸
            让黄土地刷新成绩。<br/>
            北京欢迎你,像音乐感到你
            让我们都加油超越自己。<br/>
            
         </p>
        
</body>
</html>
复制代码

1.2.3  水平线标签

     水平线标签<hr/>表示一条水平线,注意该标签与<br/>标签一样,比较特殊,没有结束标签。

复制代码
<html>
<head>
    <title>换行标签的应用</title>
</head>
<body>
<h1>北京欢迎你</h1>
<br/>                        //水平线标签
<P>

    北京欢迎你,有梦想谁都了不起!
    有勇气就会有奇迹。<br/>
    北京欢迎你,为你开天辟地
    流动中的魅力充满朝气。<br/>
    北京欢迎你,在阳光下分享呼吸
    让黄土地刷新成绩。<br/>
    北京欢迎你,像音乐感到你
    让我们都加油超越自己。<br/>

</p>

</body>
</html>
复制代码

1.2.4  字体样式标签

        使用<stong>标签让字体变粗,<em>标签让文字倾斜。

  (<strong>标签不但能让字体加粗,实际上<strong>标签还有一个更重要的“身份”,它是一个带有语义化的标签,它有强调,加强语气的作用)

注释:

<!--注释内容-->

特殊符号:

特殊符号 字符实体 实例
空格 &nbsp; <a href ="#">百度</a>&nbsp;&nbsp;<a href ="#">Google</a>
大于号 &gt; 如果时间&gt;晚上6点,就坐车回家
小于号 &lt; 如果时间&lt;早上7点,就走路上学
引号 &quot; W3C规范中,HTML的属性值必须用成对的&quot;引起来
版权号 &copy &copy;2013-2018 北大青鸟

这些实体符号必须以“&”开头,以“ ;”结尾

5.图像标签

常见的图片格式

1.JPG格式:采用的是有损压缩,会造成图片失真,不过压缩之后体积很小,而且比较清楚,比较适合在网页中应用

2.GIF格式:GIF格式文件支持透明色,在网页背景和多一些多层特效得显示上用的非常多,还支持动画

3.BMP格式;  它不支持文件压缩,也不适用于Web页

4.PNG格:他兼有GIF格式和JPG格式的优势,同时具备GIF格式不具备的特征,PNG是一种新兴的Web图像格式

图像标签基本语法:

<img src="图片地址" alt="图像代替的文字" title ="鼠标悬停提示文字" width ="图片宽度" height=" 图片高度"/ >

其中src属性表示图片路径,alt 实行指定的代替文字,表示图像无法显示时(如图片路径错误或网速太慢时)代替显示的文本。 title 属性可以提供额外的提示或帮助信息,当鼠标光标移至图片上时显示的文字

width和height两个属性分别表示图片的宽度和高度

6.超链接标签

超链接基本用法

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

href:表示链接地址的路径

target:指定链接在哪个窗口打开,常用的取值—self(自身窗口)、—blank(新建窗口)

超链接既可以是文本链接,也可以是图像超链接

链接地址分为相对路径和绝对路径

绝对路径:指向目标完整路径,一般指向本站点外的文件

相对路径:相当于当前页面的路径,一般指本站点内的路径

另外的两个特殊符号:“ ../”表示当前目录的上级目录,“../../”表示当前目录的上上级目录

超链接的应用场合:

1.页面间链接:A页到B页

2.锚链接:

 <a name ="a">目标位置乙</a>

<a name="#a">当前位置甲</a>

3.功能性连接:

mailto电子邮件地址

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!