HTML和HTML5

置顶 | 发表于 | 分类于 ， | 阅读次数：
本文字数： 19k | 阅读时长 ≈ 17 分钟

一、HTML简介

什么是HTML

  • HTML（HyperText Mark-up Language）即超文本标记语言或超文本标签语言。

  • 何为超文本：”超文本”可以实现页面内可以包含图片、链接，甚至音乐、程序等。

  • 网页文件本身是一种文本文件，它通过标记符号来标记要显示的网页中的各个部分。

  • 何为标记：当浏览器遇到对应的标签符号时， 就实现对应的功能！

  • 网页文件扩展名：.html 或 .htm

  • 一个网页文件包括”头”部分（Head）、和”主体”部分（Body），其中”头”部提供关于网页的信息，”主体”部分提供网页的具体内容。

HTML的发展历程

W3C：万维网联盟 这个组织它是非盈利性的组织。它是用于制定WEB标准。也就是一种规范。这个组织它大概制定了200项web标准。

  • 1993 HTML1

  • 1995 HTML2

  • 1995 HTML3

  • 1997 HTML4

  • 1999 HTML4.01

  • 2000 XHTML1.0 可扩展的超文本标记语言

  • 2009 HTML5 它集合了JavaScript、CSS、HTML的功能。

  • 2014 HTML5 Finalized 本身HTML5它预定于2020年才正式发布。

增强的文本编辑器

  • 任何的纯文本编辑器都能够编辑html，比如记事本、editplus、notepad++。
  • 比较有名的编辑器有：
    • DreamWeaver (Adobe公司的产品，这个东西过时了)
    • Sublime （高效率的程序书写编辑器） 文本编辑器
    • WebStorm （更高级的项目级别编辑器）这个编辑器它主要是前端开发工程师

不管用什么编辑器，你都要知道，做网页和编辑器无关，任何的纯文本编辑器都能够编码代码。我们学习的是代码，而不是所谓的编辑器。不过，不可否认，一个好的编辑器，确实能够提高工作效率，代码书写的速度，但是本质上讲，记事本也能书写网页。

sublime的中文意思是”华丽的”，是2011年开始流行的代码编辑器，可以编辑java、c、php等很多语言。

html、css、js在sublime中支持非常好。界面也非常漂亮，安装简单、小巧、插件多。

使用sublime导入项目的步骤：

选择项目选项卡---添加文件夹到项目-------选择我们的项目文件夹

sublime编辑器的快捷键

快捷键 功能
!+tab 可以生成HTML5的结构
ctrl+鼠标滚轮 调整文本的大小
ctrl+shift+D 复制当前行
ctrl+shift+k 删除当前行
ctrl+回车 快速换到下一行

注意：

我们在使用sublime编辑器的 书写HTML标签的时候， 只需要写标签名就可以 ，然后按一下键盘上面的tab键或者回车键 那么就会进行自动的补全！

二、HTML文件结构

标签、标记、节点、元素 这四个名词都是同一个东西。

一个HTML文件它是由三对标签来组成

  • <html></html>这一对标签告诉浏览器这是一个HTML文件，在它们之间是文档的头部\<head>和主体\<body>。

  • <head></head>标签出现在文档的头部分。\<head>与\</head>之间的内容不会在浏览器的文档窗口显示，但是其间的标签有特殊重要的意义

  • <body></body>之间的文本是可见的网页主体内容，body中的标签包含网页中的所有内容（比如文本、超链接、图像、表格和列表等等。）

我们把一个HTML网页可以理解为一封信：信封就好比是这个网页的head标签，虽然说它不是主要的内容 但是它特别重要；信件就好比是这个网页的body标签 一个网页中基本上我们能够看到内容都是放置在body标签里面！

三、标签分类与书写规则

标签分类

  • 标签主要分为双边标签与单边标签

  • HTML标签都是放在一对尖括号里面 <标签名>

  • HTML标签通常是成对出现的（双边标签），比如 \<div>和 \</div>

  • 双边标签中的第一个标签是开始标签，第二个标签是结束标签， 有开始也有结束；

    • <b></b>

  • 双边标签，有开始有结束，其内容在两个标签中间。如 <h1>标题</h1>

  • 也有单独呈现的标签（单边标签） <标签名 />，如：<br />、<hr />和<img src="images/1.jpg" />
  • 单边标签，有开始但是没有结束，其内容在标签属性中赋值。它一般都是用来起到一些特殊的作用。 比如：<br /> 换行 <hr />水平线。
    • 某一些单边标签如果要显示内容 ，需要将内容放置在单边标签里面的的value属性中<input type="text" value="按钮" />。

属性的含义：

为什么标签里面会有属性？属性到底是用来 做什么的？

我们可以用标签来表示一个人 属性一般是用于来描述这个标签有什么

\<人 性别 身高 体重 >张三\</人>

书写规则

  • HTML标签是由一对尖括号包围的标签名，比如 \<html>

  • 标签名不区分大小写 ，但是建议使用小写 \<font> \<FONT> \<Font>

  • 如果标签中有属性 ，属性与标签名之间要有一个空格， 如果一个标签内有多个属性， 属性与属性之间要有一个空格， 属性要写在开始标签中 ，不能写在结束标签中

  • 如果标签中有属性， 属性的值是需要加引号的， 单引号和双引号都可以。

  • 每一个标签都需要关闭，单边标签可关可不关。

  • 如果是双边标签， 一定要及时的关闭。

  • 标签与标签之间是有的嵌套关系， 在标签里面可能还会出现其它的标签。

  • 标签与标签之间的嵌套只能使用顺序嵌套， 不能交叉嵌套。

四、文本修饰标签

标签名 功能
或 bold 给文本设置加粗的效果
或 italic 给文本设置斜体的效果
或 underline 给文本设置下划线的效果
或 strikethrough 给文本设置删除线的效果
上标
下标
给文本设置大小 颜色 字体 。 属性： size：给文本设置大小 取值:1~7 1小7大 color：给文本设置颜色 比如：red face：给文本设置字体 比如：宋体 。一般公司使用的都是微软雅黑

五、排版标签

标签名 功能

段落标签
属性： align：用于控制段落里面的内容的水平方向的对齐方式。 取值：left 居左对齐 默认值 center 居中对齐 right 居右对齐

~
 标题标签 加粗显示
1大6小， h1最大 h6最小 align：用于控制标题里面的内容的水平方向的对齐。 取值：left 居左对齐 默认值 center 居中对齐 right 居右对齐

换行标签
水平线标签 也是一个单边标签
color：用于设置水平线的颜色 width：用于设置水平线的宽度 取值：固定值和百分比。固定值的单位像素， 百分比它一定是有一个参照物， 它会参照当前hr标签的父元素。 size：用于设置水平线的粗细， noshade：用于去除水平线的阴影 ， 这个属性它没有值 ， 它的属性值就等于其自身 noshade align：用于控制水平线的水平对齐方式， 取值：left 居左对齐 center 居中对齐 默认值 right 居右对齐		 

预格式化处理标签
  在这一对标签里面的空格与换行会保留，   在PHP中使用的会比较多。		






H1~H6如下所示：




p标签如下图所示：




br标签:




hr标签




pre




六、注释
为什么要写注释？


    

  • 方便项目组里的其它程序员了解你的代码，而且可以方便以后你对自己代码的理解与修改等等。
    

    • 

  • 可以在HTML文档中加入自己的注释。注释不会显示在页面中，它可以用来提醒程序员回忆相关的程序信息。
    

    • 



注释的格式：


1
<!--注释的内容-->


七、字符实体
为什么要有字符实体？


在 HTML 中，某些字符是预留的。


在 HTML 中不能使用小于号（\<）和大于号（>），这是因为浏览器会误认为它们是标签。


如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体


常用字符实体






效果
字符






空格
&nbsp;




>
&gt;




<
&lt;




&
&amp;




¥
&yen;




版权
&copy;




注册
&reg;




×
&times;




÷
&divide;






八、列表标签
列表标签总共有三种：


    

  • 无序列表
    

    • 

  • 有序列表
    

    • 

  • 自定义列表
    

    • 



无序列表
无序列表是在网页布局中使用的最多的标签


无序列表是用来表示一种没有先后顺序之分的列表项！


语法：


ul： 是英文中”unordered list”简写， 无序列表


li：是英文中”list item”简写， 列表项


注意：


    

  • 我们会发现，这是我们学习的第一个”组标签“就是要么不写，要么就写一组！
    

    • 

  • li标签它不能单独的存在，必须是包裹在ul标签的里面 反过来说，ul的子元素必须是li标签，而不能是其它的任何标签！
    

    • 

  • 所有的的内容都应该放置在li标签里面
    

    • 

  • li标签里面可以存放任何内容！ 图片或者是文本或者是其它的标签
    

    • 



无序列表前面， 默认会有一个实心的小圆点。


ul或者li标签有一个属性：


type：表示列表前面的符号的类型


    

  • 取值：disc(默认值 实心的小圆点)、circle(空心圆)、square(实心小方块)
    • 



这个type属性对于我们来说并没有什么实际的用处 ，因为在一个网页中到处都是无序列表 但是我们并没有发现在网页上面有这些符号


列表是可以嵌套的：在ul标签里面再嵌套ul标签


注意：列表之间的嵌套只能是在li标签里面嵌套




有序列表
有序列表是用表示一种有顺序之分的列表项


语法格式：


ol：是英文中”order list”简写 有序列表的意思


li：是英文中”list item”简写 列表项的意思


ol与li的属性：


type：用来设置列表前面的序号


    

  • 取值：1(默认值)、a、A、i(小罗马)、I(大罗马)
    • 



start：用于表示序号从哪里开始 取值：数字


其实有序列表使用的非常少 ，因为能够使用有序实现的其实也可以使用无序列表来实现！




自定义列表
自定义列表是一个组标签，不过比较复杂，因为它出现了三对标签！


dl：英文中”definition list”简写 表示定义列表。


dt：英文中”definition title”简写 表示定义标题。


dd：英文中”definition description “简写 表示对定义标题的描述。


注意：


dt、dd这两对标签它只能出现在dl标签里面 ，反过来说dl里面只能有dt与dd。


定义列表使用非常灵活，每一个dt是可以配多个dd的




九、图片标签
语法
img：是英文中”image”简写， 图片


src：是英文中”source”简写 ，资源




alt属性
alt  它是英文”alternate”的简写， 替代。 如果当图片不存在了， 就显示alt这个属性中的文字信息！


注意：


img是一个单边标签， 单边标签也是需要关闭的！


其它属性


  属性名   功能
  title        当把鼠标放在图片上面时， 显示的文字信息
  width        给图片设置宽度
  height       给图片设置高度






注意：


最好不要给图片同时设置宽度与高度！因为它会将图片给变形！只需要设置其中个属性即可等比例缩放，除非这张图片的是宽高是一样的。


十、文件地址
什么叫文件地址？
用于描述，一个文件在磁盘上的位置


位置：相对路径和绝对路径


绝对路径
一个文件在磁盘上面的真实位置！






相对路径
相对于当前文件的描述目标文件位置关系


平级关系 ：  目标文件与当前文件是在同一个目录下面


./ 表示当前文件夹


./文件名 平级关系


直接写文件名 平级关系




上级关系 ：目标文件在当前文件的上一级目录下面


../上一级


../../上二级




下级关系  ：当前文件与目标文件的文件夹在同一个目录下面


格式：


目标文件的文件夹名称/目标文件


或者


./目标文件的文件夹名称/目标文件




注意：


    

  • 使用绝对路径的时候：当 当前文件的位置发生改变时， 不会影响到目标文件， 可以找目标文件。
    

    • 

  • 使用相对路径的时候：当 当前文件的位置发生改变时 ，会影响到目标文件， 找不到目标文件。
    

    • 



十一、表格标签
表格的基本用法
表格一般多用网站的后台，不是网站的前台。


2007年之前，表格是一组标签！


1
2
3
4
5
<table>
    <tr>
    	<td></td> 
    </tr>   
</table>


tr：table row  表格行


td：table data   表格的普通单元格标签


th：table header 表格的标题单元格标签 文本会加粗显示并且水平居中


结构说明：


    

  • <table></table>  表示表格开始表格结束
    

    • 

  • <tr></tr>  表示表格中的行标签 ，一个表格中有多少行就应该书写多少对tr标签
    

    • 

  • <td></td>表示表格中的单元格标签 ，一行中有多少个单元格就应该书写多少对td标签
    

    • 

  • 表格中所有的内容都必须在放置在td标签里面， 也就是说只有td标签才能存放内容。
    

    • 

  • <th></th>表示标题单元格标签， 这个单元格里面的文本会加粗显示并且会居中。
    

    • 



table标签的常用属性




属性名
功能






border
给表格设置边框    单位是像素   取值：0~n




width
给表格设置宽度    取值：固定值和百分比




height
给表格设置高度   一般不用 因为表格的高度一般是由其内容来决定的




background
给表格设置背景图片， 可以使用相对路径和绝对路径




bgcolor
给表格设置背景颜色




bordercolor
用于设置表格边框的颜色




align
给表格设置水平方向的对齐方式      取值：left(居左对齐   默认值)         center 居中对齐         right     居右对齐




cellpadding
表格中的单元格里面的内容到单元格边框之间的距离 内填充




cellspacing
表格中单元格与单元格之间的距离  外边距




rules
All   合并表格的边框线   很细的表格边框线






tr标签的属性




属性名
功能






align
用来设置行里面的内容水平方向对齐方式   取值：left  默认值  居左对齐         center    居中对齐         right      居右对齐




valign
用来设置行里面的内容垂直方向对齐方式   取值：top  顶部对齐          middle    居中对齐  默认值          bottom    底部对齐




bgcolor
给行设置背景颜色  一般用于设置隔行变色的表格




height
给行设置高度




background
给行设置背景图片






align属性：




height属性：




bgColor：




td或th标签的属性
在单元格上面设置






属性名
功能






align
用来设置单元格里面的内容水平方向对齐方式  。 取值：left  默认值  居左对齐         center    居中对齐         right      居右对齐




valign
用来设置单元格里面的内容垂直对齐方式 。  取值：top  顶部对齐          middle    居中对齐  默认值          bottom    底部对齐




bgcolor
给单元格设置背景颜色




height
给单元格设置高度 会影响到当前行的整个高度




width
给单元格设置宽度 会影响到当前单元格所在的列的宽度




rowspan
跨行合并单元格




colspan
跨列合并单元格






bgColor与background




width与height






Emmet语法 - 快速的生成HTML标签 


合并单元格的时候需要注意的问题：


    

  1. 要明确知道使用哪一个属性， 跨行还是跨列；
    

    2. 

  2. 在哪一个单元格中书写合并单元格的属性， 在合并单元格的在第一个单元格中写属性；
    

    3. 

  3. 属性值合并多少个单元格 ，值就是多少；
    

    4. 

  4. 合并完成以后要删除多余的单元格 n-1。
    

    5. 



跨列合并如下：






跨行合并如下图：






caption
<caption></caption>  指的整个表格的标题标签




表格其它标签介绍
\<thead>\</thead> 表格的头部标签 ，只能有一对。


\<tbody>\</tbody> 表格的主体标签 ，可以有多个。


如果我们在写table标签时没有写tbody ，浏览器会自动给我们增加tbody， 也就是说将所有的tr标签放置于tbody标签里面。


\<tfoot>\</tfoot> 表格的脚部标签 ，只能有一对。 这一对标签它主要是用于来统计数据来用。


上面的这三个标签 ，我们在编写代码的时候可以加上 ，也可以不加 ！如果不加， 那么浏览器会默认给tr标签的外面添加一个元素为tbody标签。


在一个表格 thead与tfoot标签只能出现一对， 但是tbody可以有多对。






注意：


Thead与tfoot标签里面必须要有tr标签


十二、超级链接
什么是超级链接
一个网站，它是由很多个HTML网页组成的，HTML网页之间是可以通过超级链接来实现相互跳转的功能！从而就形成了”网”！


基本用法
a它是英文中”anchor”简写 ，中文意思”锚” ，就好像是从一个网页上面往另外一个网页上面扔出一个”锚”！




href：它们是英文中”hypertext reference “ ，中文意思”超级链接地址”。




a标签的另外属性
title  ： 标题。 当把鼠标放上超级链接上面显示的文本信息 。公共属性 通用属性 ，每一个标签都拥有这个属性！


target：链接的目标文件打开方式


    

  • _blank在新窗口中打开链接的目标文件
    

    • 

  • _parent 在父窗口中打开链接的目标文件
    

    • 

  • _self 在本窗口中打开链接的目标文件 默认值
    

    • 

  • _top在最顶级窗口中打开链接的目标文件
    

    • 

  • framename 在框架网页中打开链接的目标文件
    

    • 





不单单只能给文字设置超级链接 ， 同样可以给图片设置超级链接！




空链接
什么是空链接：没有指定的链接地址的超级链接。


作用：就是用于配合JavaScript来使用！


第一种方法： 


1
<a href="#">内容</a>


第二种方法：


1
<a href="javascript:void(0)">内容</a>




锚点链接
可以通过锚点链接跳转到一个网页的不同的位置！


如何实现锚点链接？


第一步：定义一个锚点


在定义锚点时 a标签的中间不要写任何内容 


1
<a name="锚点名"></a>


或者


1
<a id="锚点名"></a>


建议使用id这个属性来实现定义锚点 ，因为凡是有#出现 ，其实都是找ID属性的值 ，注意在定义锚点的时候 ，a标签双边标签的中间位置不要放置任何内容


第二步：找到锚点


在浏览器中的网址的最后面#锚点名


或者


1
<a href="#锚点名">内容</a>




注意：


在找锚点的时候 ，不要忘记了有一个#号。


回到顶部的案例：直接使用空链接中的href="#"就可以实现回到网站的顶部功能




十三、框架网页
什么是框架网页
框架网页：将一个网页窗口划分为若干个小窗口，每一个小窗口里面都可以存放一个独立的网页！


框架网页一般多用于网站的后台！


基本用法
框架网页是由框架集(frameset)和框架页(frame)组成！框架页是存放于框架集中， 也就是说 frame这个标签是放置在frameset这个标签里面。


注意：只有框架集标签才可以分割！


    

  • \<frameset>\</frameset> 框架集
    

    • 

  • \<frame /> 框架页
    

    • 



当我们在实现框架页面时 frameset这一对标签它就代替了 body标签 的功能 ！


1
2
3
4
<frameset>
    <frame />
    <frame />
</frameset>




frameset的属性


    

  • rows ：它是用来将一个网页窗口进行水平分割
    

      

    • 举例：rows=”180,*“ 将一个网页窗口分割为上下型。 上窗口占据180个像素的高度， 其它的部分都给到下窗口。
      

      • 

    • 举例：rows=”180,100,*“ 将一个网页窗口分割为上中下型 。上窗口占据180个像素， 中间的窗口占据100个像素 其它的部分都给到下窗口。
      

      • 

    

    • 

  • cols：它是用来将一个网页窗口进行垂直分割
    

      

    • 举例：cols=”180,*“ 将一个网页窗口分割为左右 ，左窗口占据180个像素 ，其它的部分都给到右窗口。
      

      • 

    • 举例：cols=”180,100,*“ 将一个网页窗口分割为左中右型 ，左窗口占据180个像素 ，中间的窗口占据100个像素 其它的部分都给到右窗口。
      

      • 

    

    • 



frame的属性


    

  • noresize=”noresize”  不可以调整小窗口的大小
    

    • 

  • src：链接小窗口显示的网页！
    

    • 

  • name：规定小窗口的名称。 非常重要， 给每一个小窗口取一个名字 。
    

    • 

  • scrolling：控制框架页的滚动条  yes|no|auto
    

    • 







在frame标签中有一个非常重要的属性叫：name 。它主要是用于给框架页取名字 ，方便查找 




浮动框架
浮动框架又称之为内联框架：它就好比在一个页面上面挖出一个坑，然后往这个坑里面填入一个页面！


\<iframe>\</iframe> 这一对标签可以放置在body标签里面！




  属性名      功能
  src             放入页面的地址
  width        浮动框架的宽度
  height       浮动框架的高度
  name         浮动框架的名称








十四、表单
表单的主要功能
表单它主要是用来收集用户输入的相关数据！


注意：


一个完整的表单，是由”form标签”和”表单控件标签”组成！




form标签的属性
注意：在写表单的的时候一定要有这个标签




    

  • action：将表单中收集的用户数据提交给”表单的处理程序”进行相关的处理！这个属性可以不写 如果不写表示将表单的数据提交给当前页面进行处理！
    


    

    • 



    

  • method：  指表单数据的提交方式。 取值：get(默认值)|post
    

      

    • get：  如果method属性没有书写， 则默认表示表单数据以”get”方式进行提交 ，以get方式进行提交的数据会显示在浏览器的地址栏中。
      

        

      • 显示格式：action属性的值?name的属性值=value属性值 &name的属性值=value属性值
        

        • 

      • 如果有多个表单数据会以&符号进行连接
        

        

        • 

      

      • 

    

    • 

  • 如果使用的是post进行提交的方式， 不会将表单数据显示在浏览器的地址栏中， 直接发送给表单的处理程序进行处理。
    

    • 



get方式与Post方式之间的优缺点： 


1、以get方式提交的表单数据 ，相对来说不安全 。
2、以get方式只能提交少量的数据。
3、以post方式提交的数据相对安全 ，因为不会将数据显示在浏览器地址栏中。
4、以post方式可以提交大量的数据！ 2M左右。


enctype


值有两个：


1
application/x-www-form-urlencoded   //(默认值)


基本上我们都不用写enctype这个属性 ，不写就表示使用默认值。


只有在一种情况下要书写enctype这个属性 ：


1
multipart/form-data


只有在上传文件的时候需要使用enctype这个属性 。在上传文件的时候需要将 enctype这个属性的值设置为multipart/form-data和method这个属性的值一定要设置为POST 






表单控件标签


单行文本框
1
<input type="text" name="名称" value="值" disabled />


    

  • name属性的作用是用来区分表单控件标签的数据
    • 

  • value属性表示是用户输入的数据
    • 

  • disabled 表示禁用
    • 

  • readonly 表示只读
    • 

  • 文本框里面的内容是以明文进行显示
    • 





disabled属性与readonly之间的区别：




    

  1. 这两个属性都是用来表示不能对input标签进行编辑 (相同点)；
    

    2. 

  2. 使用了disabled这个属性的Input标签， 它不能够将当前的这个表单控件标签里面的数据发送给服务器进行处理；
    

    3. 

  3. 使用了readonly这个属性的Input标签 ，它能够将当前的这个表单控件标签里面的发送给服务器进行处理
    

    4. 





单行密码框
1
<input type="password" name="名称" value="值" />


    

  • name属性的作用是用来区别表单控件标签的数据
    

    • 

  • value属性表示是用户输入的数据
    

    • 

  • 密码框里面的内容是以掩码方式显示 ，用户看不见
    

    • 







单选按钮
1
<input type="radio" name="名称" value="值" checked="checked" />


    

  • 一组单选按钮一定是只能选择一个， 单选按钮是一组相互排斥的按钮！
    

    • 

  • 如何实现相互排斥的按钮：将它们的name属性值设置为一样。
    

    • 

  • 单选框的value属性一定要有值 
    

    • 

  • 程序如何知道用户选择的是哪一个选项：是通过value属性值来确定的。
    

    • 

  • checked：表示被选中， 这个属性本身没有值 ，就等于其自己。
    

    • 





多选按钮
1
<input type="checkbox" name="名称" value="值" checked="checked" />


    

  • 一组多选按钮name属性值也要一样！
    

    • 

  • checked：表示被选中， 这个属性本身没有值 ，就等于其自己
    

    • 

  • checkbox这个标签的value属性一定要有属性值
    

    • 





提交按钮
1
<input type="submit" name="submit" value="提交" />


一般情况下提交按钮的name属性不写 ，因为我们根本就不需要来接受到提交按钮的value属性值。因为它永远是固定的。


功能：就是将表单数据提交给表单的处理程序




重置按钮
1
<input type="reset" name="名称" value="值" />


将表单中表单控件标签输入的内容将其重置！




图片按钮
1
<input type="image" src="图片的地址" />


图片按钮它具有将表单进行提交的功能 ，同时它会将鼠标点击图片上面的坐标值也会进行提交！


PHP可以有选择性的来接受表单数据。




文件上传
1
<input type="file" name="名称" />


如果要实现文件上传的功能 一定要将form标签中的method属性的值设置为”POST” 同时要将enctype这个属性的值设置：multipart/form-data




普通按钮
1
<input type="button" name="名称" value="值" />


    

  • 普通按钮它不具有表单提交和重置的功能
    

    • 

  • 普通按钮几乎没有什么功能 它一般需要配合JavaScript来使用！
    

    • 





隐藏域
1
<input type="hidden" name="名称" value="值" />


隐藏域这个表单控件里面的数据，我们在浏览器上面是看不见的！比如说有一些数据有重要， 但是不想给普通用户看到。 这个数据又需要提交到服务器上面 ，这个时候我们就可以使用隐藏域来实现 ！




使用按钮标签
    

  • 提交按钮 \<button type=”submit”>内容\</button>
    

      

    • 它可以等价于\<input type=”submit” />
      • 

    

    • 

  • 重置按钮 \<button type=”reset”>内容\</button>
    

      

    • 它可以等价于\<input type=”reset” />
      • 

    

    • 

  • 普通按钮 \<button type=”button”>内容\</button>
    

      

    • 它可以等价于\<input type=”button” />
      • 

    

    • 





下拉列表
1
2
3
4
5
<select name="名称">
    <option value="值"></option>
    <option value="值" selected="selected"></option>
    <option value="值"></option>
</select>


selected：这个属性表示被选中 ，这个属性本身也没有值 ，其值也要等于自己




文本域
富文本编辑器


在线编辑器  ， 它本身就是文本域 ，只不过使用了js代替为富文本编辑器


比如论坛回帖、博客、课堂反馈！


1
<textarea cols="列数" rows="行数" name="名称"></textarea>




十五、标签中的公用属性
何为公用属性？


每一个标签中都会公用的属性！


    

  • title：标题。 当鼠标放上的时候显示的文字信息！
    

    • 

  • class：我们将class的属性值称之为”类名”，只要是拥有相同的class的属性值， 不管是什么标签 ，我们都可以将其称之为一类！class属性一般多用于CSS中。
    

    • 

  • id：id的属性，在一个HTML文档中， ID的属性值必须要唯一！它就好多我们的身份证号码一样！id属性一般多用于JavaScript中
    

    • 

  • style：它主要是用来设置CSS样式的！
    

    • 





十六、字符编码
何为字符编码？
是多个字符的集合，字符集种类较多，每个字符集包含的字符个数不同，


为什么需要有字符编码？
计算机只能识别二进制


字母”A”在电脑上是如何存储的呢？


小张的电脑上面字母”A”是使用二进制的”110”来表示，而小王的电脑上面的字母”A”是使用二进制的”111”来表示，当小张与小王的电脑进行通信时，这样双方交换信息时就会误解。


小张同学 A -- 110 B-- 111


小王同学 A -- 111 B--110


ASCII字符编码
ASCII（American Standard Code for Information Interchange，美国信息交换标准代码） 


1个字节共可以表示256位；


在ASCII编码下 一个字符 占用一个字节；


ASCII通常将这个编码称之为单字节编码；


美国国家标准学会 于1967年制定的！美国标准信息交换码！它是使用1个字节来存储字符！每一个字符占据1个字节。共可以存储256个字符！


1个字节共可以表示8个位 共可以表示256种状态！


1个字节可以存储256个字符！


英文国家 的文字1个字节可不可以表示完！


单字节编码：英文数字它们就是单字节编码 一个英文或者是数字占用一个字节！


GB2312
GB2312字符编码它是中国标准化局于1980年制定！它是使用2个字节来存储字符！2个字节共可以存储65536个字符！只存储了6000多个汉字！一个汉字是采用2个字节来表示。


中国上下5000的文化 ，汉字博大精深 ，远远不止6000个汉字！


有一些生僻字 GB2312这个编码还没有收录到！


GBK
它是使用2个字节来存储字符！它总共存储了2W多个汉字！这里存储的只是简体中文！


在GBK或者是GB2312中 一个汉字是占用两个字节！


Big5
大5码


主要是用于存储繁体中文！


中国国家内的人民可以通过电脑进行正常的交流！


中国人民想与日本鬼子进行交流


比如我们班上有位同学找了位日本女朋友 GBK是用来翻译中文 日语翻译不了 就会变成乱码！


就是涉及到国家与国家之间进行交流！


Unicode
基本上是全世界的编码的集合！大概收录了100多个万字符！每一个字符都采用4个字节来进行表示！4个字节共可以表示42亿！比较浪费资源！


A本身就只需要使用1个字节来存储！


一个汉字本身只需要使用两个字节来存储 这个Unicode它偏用4个字节来进行存储 有两个字节的空间浪费！


UTF-8
对unicode编码的一种改进，不同的字符占用不同的字节！


一个汉字是使用三个字节来存储的！


如果我们以后做的网站是面向中国的用户， 其实我们可以使用GB2312来进行表示。


但是如果我们做的网站有一天出国了 ，走向世界了， 那么就应该使用UTF-8。


十七、head标签
title标签
它主要的作用是用于给网页设置标题！






meta标签
用于告诉浏览器使用什么字符编码来解析当前的HTML文件


1
<meta charset="utf-8" >








基本上市面的所有的编辑器都是UTF-8的！


如何来保证HTML文件不出现乱码？


    

  1. 我们要确认编辑器的默认编码方式
    

    2. 

  2. 告诉浏览器使用编辑器的默认编码方式这个编码来解析HTML文件
    

    3. 



二码合一：编辑器的编码和告诉浏览器的编码是一样的


注意：


工作的时候 ，千万不要将别人写好的PHP代码使用记事本打开！会出现BOM头！


一、HTML5简介
什么是HTML5
HTML5是W3C和WHATWG两个组织研发的


    

  • W3C叫万维网联盟，主要制定WEB标准，是一个非盈利性的组织。
    

    • 

  • WHATWG (Web Hypertext Application Technology Working Group)叫web超文本技术工作组，是由Firefox(火狐)、Chrome（谷歌）、safari（苹果）、IE（微软）等浏览器公司成立了一个组织。
    

    • 

  • HTML5它是新一代的互联网标准。它的出现是为了取代HTML4.01和XHTML1.0
    

    • 

  • XHTML可扩展的超文本标记语言， 它的出现是为了取代HTML4.01 。
    

    • 

  • HTML5它是于2014年9月份正式发布
    

    • 

  • HTML5它已经不再简单的超文本标记语言
    

    • 

  • HTML5= HTML+CSS+JavaScript 的集合
    

    • 

  • HTML5它主要是在移动端使用的非常多！就是因为移动端的兴起才导致HTML5的发展！
    

    • 



目前支持HTML5的浏览器有哪些？


注意：


并不是上面的浏览器都对HTML5的非常好的支持，它们都只能支持HTML5的某一部分功能！


HTML5的文档结构
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
    <head>
   		<meta charset="UTF-8">
    </head>
    <body></body>
</html>




HTML5新增的语义化标签
语义化：当我们看到这些标签时就能明白它其中的含义！


我们在html4和XHTML的时代的时候要实现一个盒子！就要使用div与span标签 。但是在HTML5中新增了语义化标签和div标签同样功能的标签，但是这些标签具有语义化！


    

  • \<header> 头标签
    

    • 

  • \<nav>    导航标签 navigator
    

    • 

  • \<aside>  侧边栏标签
    

    • 

  • \<article> 文章标签
    

    • 

  • \<footer> 页脚标签
    

    • 

  • \<section> 栏目标签
    

    • 





表单控件标签中新增的属性




属性
功能






required
必填项内容不能为空




placeholder
提示信息  占位符




autofocus
自动获取焦点






required属性：


required属性功能比较强大， 但是使用不多


    

  • 第一点：因为用户没有办法指定输入的长度的问题 
    

    • 

  • 第二点：required属性显示的效果比较固定 ，不一定适合所有的网站的风格
    

    • 



Placeholder 




autofocus




表单控件input标签新增的type属性值
这里新增的input标签中的type属性值其实主要是用于移动端






属性值
功能






email
限定用户输入的内容必须是一个email类型




url
限定用户输入的内容必须网站要包含http://




date
限定用户输入的必须是日期类型  年月日




week
限定用户输入的必须是周类型




time
限定用户输入的必须是时间类型  小时和分钟




month
限定用户输入的必须是月类型




number
限定用户输入的必须是数值类型




color
颜色拾色器




range
范围






注意： 


如果浏览器不能解析type的属性值就会把它当成单行文本框来使用！type="text"










网页多媒体标签
flash


网页小游戏 AS3.0 actionscript3.0 ---JavaScript ECMA


HTML5它自己开发一个标签来支持视频、音频、动画的播放！


视频
1
<video></video>


这个标签有浏览器兼容性的问题 它支持的视频格式有限， 大概支持3种视频格式


mp4，ogg，webm








属性
值
描述






src
url地址
要播放的视频的url地址。




Autoplay
autoplay
如果出现该属性，视频则自动播放




controls
controls
如果出现该属性，则向用户显示控件，比如播放按钮




width
像素
设置视频播放器的宽度。




Height
像素
设置视频播放器的高度




loop
loop
如果出现该属性，视频则重复播放












音频
1
<audio></audio>








属性
值
描述






src
url地址
要播放的音频的url地址。




autoplay
autoplay
如果出现该属性，音频则自动播放




controls
controls
如果出现该属性，则向用户显示控件，比如播放按钮




loop
loop
如果出现该属性，音频则重复播放






嵌入标签
1
<embed />






属性
值
描述






src
url地址
设置嵌入内容的URL




width
像素
设置嵌入内容的宽度




height
像素
设置嵌入内容的高度








二、计算机的单位与进制
计算机中的单位
计算机中的最小单位：比特(Bit) 1个比特位 = 2种状态 1与0 (二进制)


字节(Byte) 1个字节 = 8个比特位 2^8^ = 256 2^16^ = 65536


KB 1KB = 1024个字节


MB 1MB = 1024KB


GB 1GB = 1024MB 256G ------> 200G


TB 1TB = 1024GB


但是硬件在出产的时候都是以1000作为单位来进行计算！


计算机中的进制
一种进位的机制 0 1 01 二进制 八进制 十进制 十六进制


二进制：0 1


八进制：0 1 2 3 4 5 6 7


十进制：0 1 2 3 4 5 6 7 8 9


十六进制：0 1 2 3 4 5 6 7 8 9 A B C D E F


计算机它只能识别二进制！ 我们在电脑上面输入任何东西它都将其转换化二进制来进行存储


进制：它是一种进位的机制！


生活中的进制：


十进制


24小时1天


60分钟1小时


365天1年


7天1周


计算机中的进制


二进制：0、1 运算规则：逢二进一


八进制：0、1、2、3、4、5、6、7 运算规则：逢八进一


十进制：0、1、2、3、4、5、6、7、8、9 运算规则：逢十进一


十六进制：0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F 运算规则：逢十六进一


基数：二进制的基数就是2 、八进制的基数就是8 、十进制的基数是10、十六的基数的16


位权：每一个位上面都有个权重值


按权展开相加法


先来观察如何将十进制转换为十进制：


123456.78 = 1*10^5^+2*10^4^+3*10^3^+4*10^2^+5*10^1^+6*10^0^ + 7*10^-1^+8*10^-2^


二进制数转换为十进制


101011 = 1*2^5^+0*2^4^+1*2^3^+0*2^2^+1*2^1^+1*2^0^


将其他进制转换为十进制：


(123456.78)~10~ = 1*10^5^+2*10^4^+3*10^3^+4*10^2^+5*10^1^+6*10^0^+7*10^-1^+8*10^-2^
~(1101)~2~ = 1*2^3^+1*2^2^+0*2^1^+1*2^0^ = 8+ 4+1 = 13


(567)~8~ = 5*8^2^+6*8^1^+7*8^0^ 320 +48+7 = 375


(ABC)~16~ = 10*16^2^+11*16^1^+12*16^0^ = 2748


将十进制转换为二进制 分为整数部分和小数部分 


整数部分除2取余法 


(67)~10~ = (1000011)~2~




小数部分：


乘2取整法 保留几位小数 也就是说一个问题：如果保留的小数位越多 就越精确 保留的小数越少 就越不精确


(0.75)~10~ = (0.11)~2~


将二进制与八进制之间进行互转


一位八进制要等于三位二进制 


二转八：三合一 将三位二进制合并为一位8进制数


八转二：一拆三 将一位8进制数拆分为三位二进制数 


二进制与十六进制之间进行相互转换


二转十六：四合一 将四位二进制合并为一位16进制


十六转二：一拆四 将一位16进制数拆分为四位二进制 


八进制与十六进制之间进行互转


八转十六：一拆三再四合一 先将一个8进制拆分为3位二进制 再将4位二进制合并为一个16进制 


十六转八：一拆四再三合一 先将一个16进制拆分为4位二进制 再将3位二进制合并为一个8进制 


三、网页中的颜色表示方式
\<font color=”red”>\</font>   用于给文本设置大小、字体、颜色


颜色的表示方式
比如我们需要给文本设置颜色， 就必须要使用到font标签。


font标签里面有一个color的属性， 这个属性的值有三种表示方式。




    

  • rgb(x,x,x)  rgb色彩模式 ，十进制表示方式
    • 

  • #xxxxxx    十六进制表示方式
    • 

  • colorname    表示颜色的英文单词
    • 



rgb(红,绿,蓝) r---->red g----->green b----->blue


#xxxxxx 十六进制表示方式


rgb(255,0,0) 表示红色


#FF0000 表示红色 15*16^1^+15*16^0^


rgb色彩模式
在自然界中有三种基本的颜色 红色、绿色、蓝色 三原色 其它的颜色都可以通过这三种混合而成


计算机同样的引用了这个色彩模式 一个基本色采用一个字节来表示 256种级别的颜色


三种基本色 可以混合出 256^3^ 1677万颜色


问题：我们有三种方式可以来表示颜色 我们最好使用哪一种来表示颜色？




三原色
    

  • 在自然界中有三种基本的颜色：红、绿、蓝 。其RGB色彩模式它的颜色都可以通过这三种基本色混合而成！它们又称之为加色模式！
    

    • 

  • 在计算机中同样也是有三种基本色：红、绿、蓝 。每一个基本色是使用1个字节来表示 ，每一个基本色共可以表示256种级别的颜色！那么这三种基本色可以混合多少种颜色？256*256*256 = 1677万种 。虽然并不一定可以完全表示我们自然界中所有的颜色。
    

    •