学校第7周笔记整合

分手后的思念是犯贱 2022-09-17 05:21 177阅读 0赞

# HTML #

## 简介 ##

HTML是用来描述网页的一种语言，它是一种超文本标记语言（Markup Language），不属于编程语言

## 发展史 ##

1.  超文本标记语言——在1993年6月互联网工程工作小组草案发布（并非标准）
2.  HTML2.0——1995年11月作为RFC 1886发布，在RFC2854于2000年6月发布之后被宣布过时
3.  HTML3.2——1996年1月14日，W3C推荐标准。
4.  HTML4.0——1997年12月18日，W3C推荐标准
5.  HTML4.01（微小改进）——1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的HTML4.01语法是国际化标准组织和国际电工委员会的标准
6.  XHTML1.0——2000年1月26日发布，是W3C推荐标准，后来经过修订于2002年8月1日重新发布
7.  XHTML1.1——2001年5月31日发布
8.  XHTML2.0——W3C的工作草案，由于改动过大，学习这项新的技术成本过高而失败，现在最常用的还是XHTML1.0标准
9.  HTML5——目前最新的版本，于2004年被提出，2007年被W3C接纳并成立新的HTML工作团队，2008年1月22日公布HTML5第一份正式草案，2012年12月17日HTML5规范正式定稿，2013年5月6日，HTML5.1正式草案公布

## 优劣势 ##

1.  **世界知名浏览器对HTML5的支持**
    
     *  微软：2010年3月16日，微软于拉斯维加斯举行了MIX10技术大会上宣布以推出Internet Exploror(IE)9浏览器开发预览版，此版本将更多的支持CSS3，SVG和HTML5等互联网浏览的通用标准
     *  Google：2010年2月19日，Google Gears项目经理伊安 · 费特通过博客宣布，谷歌将放弃对Greas浏览器插件项目的支持，重点开发HTML5项目
     *  苹果：2010年6月7日，苹果在开发者大会的会后发布了Safari5.这款浏览器支持10个以上的HTML5的技术，包括全屏播放，HTML5的地理位置，HTML5的形式验证等
     *  Opera：2010年5月5日，Opera软件公司首席技术官Hakon Wium Lif先生在访华之际，接受了中国软件咨询网等少数几家媒体采访，他认为HTML5和CSS3将是全球互联网发展的未来趋势
     *  Mozilla：2010年7月，Mozilla基金发布了FireFox4浏览器的第一个测试版，从官方文档看，他对HTML5是完全级别的支持
2.  **市场需求**
    
    现在的市场已经迫不及待地要求有一个统一的互联网通用标准。HTML5之前的情况是，由于各浏览器之间的不统一，仅修改Web浏览器之间的由于兼容性而引起的bug就浪费了大量时间，而HTML5的目标就是将Web带入一个成熟的应用平台，在HTML5平台上，视频，音频，图像动画及同计算机的交互都被标准化
3.  **跨平台**
    
    HTML5可以做到跨平台开发，用户只用打开浏览器访问就可以，PC网站，各种移动设备，插件等核心代码就可以不需要重复编写，极大减少了开发人员的工作量

# W3C标准 #

1.  **使用W3C标准的原因**
    
    因为在早期web开发语言标准并不统一，则需要一个组来指定和维护统一的国际化Web开发标准，确保多个浏览器都能兼容，HTML内容结构都是语义化的。在这样的背景下，万维网联盟（World Wide Web Consortium,W3C）诞生了，因此由W3C组织和维护的Web开发标准，也称为W3C标准。它是Web技术领域最据权威和具有影响力的**国际中立性技术标准机构**，为了能在不同的浏览器上看到同样的效果，就需要一个中间的开发者遵循一个统一的规范，标准经行网页开发，才能满足用户的需求
2.  **W3C标准介绍**
    
    W3C不是某一个标准，而是一系列的标准集合，一个网页一共由三个部分组成：结构（Structure），表现（Presentation），行为（Behavior）
    
     *  在一个网页中同样可以分为很多部分，包括各级标题，正文，图片，列表等，这就是这个网页的结构。每个组成部分的字体，颜色，间距等属性构成了它的表现。用户通过单击让某个元素移动，消失等动画交互就称他为行为
    
     *  W3C的三个标准
        
         *  **结构**化标准语言（HTML，XML）
         *  **表现**标准语言（CSS）
         *  **行为**标准语言（DOM，ECMScript ）

# HTML5文件的基本结构 #

HTML是一种超文本标记语言，如网页的一个标题，一个段落，一张图片等，这些都是利用HTML的标记完成的，最基本的语法为：

<标记>内容</标记>

HTML5的基本结构分为两部分，整个HTML包括头部（head）和主体（body）两个部分，头部包括网页标签（title）等基本信息，主题包括网页内容信息，如图片，文字等

<html>
        <head>
            <titile>我的第一个网页</titile>	
        </head>	
        
        <body>
        我的第一个网页
        </body>	
    </html>

## 网页的基本信息 ##

1.  **DOCTYPE声明**：为了约束HTML文档的结构，检验是否符合相关web的标准，同时告诉浏览器，使用哪种规范来解释这个文档中的代码。DOCTYPE声明必须位于文档的第一行
2.  **title标签**：使用title标签描述的是网页的标题，类似一篇文章的标题
3.  **mate标签**：使用该标签来描述网页摘要的重要信息，包括文档内容类型，字符编码信息，搜索关键字，网站提供的功能和服务的详细描述等。mate标签描述的内容并不显示，其目的是方便浏览器解析或利于搜索引擎搜索，它采用"名称/值"的方法来描述重要信息

属性：charset表示字符集编码，常用的编码及有

*  gb2312：简体中文，一般用于包含中文和英文的页面
 *  ISO-885901：纯英文，一般用于只包含英文的页面
 *  big5：繁体，一般用于带有繁体字的页面
 *  UFT-8：国际性通用的字符编码，同样适用于包含中文和英文的页面，和gb2312相比国际通用性更好

属性：中keywords表示搜索关键字，description表示网站具体内容的描述

# 网页的基本标签 #

1.  标题标签：h1~h6;
2.  段落标签：p
3.  换行标签：br
4.  水平线标签：hr
5.  字体样式标签：粗体Strong或者b，斜体em或者i
6.  注释：
7.  特殊符号：
    
    <table> 
     <thead> 
      <tr> 
       <th>特殊符号</th> 
       <th>字符实体</th> 
       <th>示例</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>空格</td> 
       <td><strong>&amp;nbsp</strong>;</td> 
       <td>这里是<strong>&amp;nbsp</strong>;中国</td> 
      </tr> 
      <tr> 
       <td>大于号(&gt;)</td> 
       <td><strong>&amp;gt</strong>;</td> 
       <td>我今天<strong>&amp;gt</strong>;8点中回家，就吃不到晚饭</td> 
      </tr> 
      <tr> 
       <td>小于号(&lt;)</td> 
       <td><strong>&amp;lt</strong>;</td> 
       <td>我今天<strong>&amp;lt</strong>;7点中回家，就能迟到晚饭</td> 
      </tr> 
      <tr> 
       <td>引号(")</td> 
       <td><strong>&amp;quot</strong>;</td> 
       <td>这里是：<strong>&amp;quot</strong>;中国<strong>&amp;quot</strong>;（W3C的规范中，属性值需要用引号括起来）</td> 
      </tr> 
      <tr> 
       <td>版权符号(©)</td> 
       <td><strong>&amp;copy</strong>;</td> 
       <td><strong>&amp;copy</strong>;中国 腾讯 2008-2021</td> 
      </tr> 
     </tbody> 
    </table>

## 图像标签 ##

**常见的图像格式：**

1.  JPG格式
2.  GIF格式
3.  BMP格式
4.  PNG格式

**图像标签语法：**

绝对路径：从别的服务器中使用绝对路径提取的图片

相对路径：电脑中自己的图片路径（提取相对链接时可以使用“../”回到上一级调取图片）

## 超链接标签 ##

使用href属性跳转到属性指定地址

基本语法：

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

*  href：表示链接地址路径
 *  target：指定连接在哪个窗口打开，常用的取值有**\_self(自身窗口)**和**\_blank(新建窗口)**

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

**超链接的应用场合**

*  页面间链接：A页到B页，最常用，用于网站导航
    
        <a href = "www.baidu.com" title = "百度">百度</a>
 *  锚链接：A页甲位置到A页乙位置或A页甲位置到B页乙位置
    
    **设置标记**
    
        <a name = "marker">目标位置乙</a>
    
    **跳转链接**
    
        <a href = "#marker">当前位置甲</a>

*  功能性链接：在页面中调用其他程序功能，如电子邮件，qq，MSN等

**跳转到邮件**

邮箱链接的用法为：mailto

## 列表标签 ##

列表它可以时信息结构化和条理化并以列表的样式显示出来

列表分为：无序列表，有序列表，定义列表

1.  **无序列表**
    
    ul作为列表的开始，li作为列表的内容
    
        <ul>
            <li>内容1</li>
            <li>内容2</li>
            <li>内容3</li>
        </ul>
    
    ul中只能嵌套li标签，li中能嵌套任意标签（W3C标准）
    
    **无序列表的特性**
    
     *  没有顺序，每个li标签中都要独占一行（块元素）
     *  默认li标签项面前有个实心小圆点
     *  一般用于无序类型的列表，如导航，侧边栏新闻，有规律的图文组合模块等

1.  **有序列表**
    
    ol作为列表的开始，li作为列表的内容
    
        <ol>
            <li>内容1</li>
            <li>内容2</li>
            <li>内容3</li>
        </ol>
    
    和无序列表相同：ol中只能嵌套li标签，li中能嵌套任意标签（W3C标准）
    
    **有序列表的特性：**
    
     *  有顺序，并且每个li标签中都要独占一行（块元素）
     *  默认li标签项面前有顺序标记
     *  一般用于排序类型的列表，如试卷，问卷选项等

1.  **定义列表**
    
    定义列表的开始使用dl标签，dt作为列表的起始项，dd作为内容项
    
        <dl>
            <dt>标题1</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
            <dt>标题2</dt>
            <dd>内容1</dd>
        </dl>
    
     *  没有顺序，每个dt标签，dd标签独占一行（块元素）
     *  默认没有标记
     *  一般用于（一个标题下有一个或多个列表项）\*n情况

## 表格 ##

**为什么使用表格**

1.  简单通用：由于表格行列的简单结构，以及在生活中的广泛应用，因此对他的理解和编写都很方便
2.  结构稳定：表格通常每行的列数一致，同行的单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐，这种严格的约束形成了一个不易变形的长方形盒子结构，堆叠排列起来结构很稳定

**表格的基本结构**

1.  单元格：单元格时表格中最小的单位，一个或多个单元格纵横排列组成了表格
2.  行：一个或多个单元格横向堆叠形成了行
3.  列：由于表格单元格宽度必须一致，因此单元格纵向排列形成了列

**表格的基本语法**

<table> 
        <tr>    
            <th>第一行第一列单元格内容<th> 
            <th>第一行第二列单元格内容<th>
        </tr>
        <tr>    
            <th>第二行第一列单元格内容<th> 
            <th>第二行第二列单元格内容<th>
        </tr>
    </table>

border是表格边框属性，表格边框属性写在变迁table中

**表格的跨行与跨列**

1.  表格的跨列
    
    跨列是指单元格的横向合并
    
        <table>
            <tr>
                <td colspan = "所跨的列数">单元格内容</td>
            </tr>
        </table>
    
    col是column的缩写，span为跨度，所以colspan的意思为跨列
2.  表格的跨行
    
    跨列是指单元格在垂直方向上的合并
    
        <table>
            <tr>
                <td rowspan = "所跨的列数">单元格内容</td>
            </tr>
        </table>
    
    row是行的意思，rowspan为跨行

## 媒体元素 ##

HTML5支持网页播放音频视频元素

### 视频元素 ###

视频英译video，而在HTML中的video元素是用来播放视频的，支持Ogg，MPEG4，WebM等视频格式，其用法如下

其中src属性用于指定要播放的视频文件的路径，controls属性用于提供播放，暂停和音量控件，此外，还可以使用width和height设置视频的宽度和高度

如果浏览器不支持video元素，可以在video元素中的插入一段文字用于提示，这样旧的浏览器就可以显示这段文字给用户

**video元素的应用**

<video controls>
        <source src="video/video.wemb"/>
        <source sre="video/video.mp4">
        你的浏览器不支持video标签
    </video>

*  使用了source元素来链接到不同的视频文件，浏览器会自动选第一个可以识别的格式
 *  autoplay属性可以使视屏文件自动播放

### 音频元素 ###

音频元素在HTML5问世之后，终于可以使音频播放领域实现统一的标准，让用户告别插件的繁琐

**audio元素的基本语法**