PHP语言学习之html5的学习，一周总结

浏览数：23 / 时间：2015年06月09日

通过这周的html5的学习我整理了一下一些东西和一些总结

写代码的时候也开头都要对齐这样开起来很舒服，这些都是用到缩进键搞定的，比如<html></html>在一块写，要前后对齐，这样容易发现错误，而且看起来比较清晰

写代码是还有英文和中文的标点符号的问题，这些都要是注意的，（这基本是我在学习的时候遇到的问题）

要掌握好重要的标签，这样能够更好的学习。。。。

开始学习html 5

什么是html5
HTML是由W3C的维护的
HTML是大小写不敏感的,HTML与html是一样的
HTML文件必须使用.html或.htm为文件名后缀
HTML文件是一个文本文件,包含了一些HTML元素,标签等
HTML语言是一种标记语言,不需要编译,直接由浏览器执行
HTML是Hypertext Markup Language的英文缩写,即超文本标记语言
HTML是用来制作网页的标记语言
html5的新的特性
比如 calendar、date、time、email、url、search
比如 article、footer、header、nav、section
对本地离线存储的更好的支持
新的特殊内容元素
用于媒介回放的 video 和 audio 元素
新的表单控件
用于绘画的 canvas元素
html的语法
标签
HTML标签名和属性都是不区分大小写的：
例如：<body>、<BODY>或<Body>都是定义相同的标记。
但推荐全部使用小写字母书写。
标签是大小写无关的,<body>跟<BODY>表示意思是一样的，标准推荐使用小写，这样符合XHTML标准。
单标签（不成对）: <标签名 />
如： <br /> <hr/>
双标签（成对）: <标签名>内容</标签名>
如： <table></table> 即分起始和结束
标签都是闭合的（两种形式：成对与不成对）
通常要用两个角括号括起来:“<”和“>”。
标签是HTML中最基本单位,也是最重要组成部分。
属性
属性由属性名和值成对出现。
语法格式如下：
<标签名属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值">
<!– 输出内容… --
>
</标签名>
标签可以拥有多个属性。
标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。
HTML属性一般都出现在HTML的开始标签中, 是HTML标签的一部分。
html的主体结构
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>
文本标签
链接到一个外部JS文件：<script type="text/javascript" src="script.js"></script>
嵌入JS:<script type="text/javascript">
alert("这是一个js脚本");
</script>
注：嵌入js,可以放在<html></html>内的任何位置。
嵌入样式表：<style type="text/css">
body { margin: 0; padding:0;text-align:center;}
</style>
注：嵌入样式表只能书写在<hea></head>头部标签内，不同于<script></script>
网页基底文件：<base href="http://www.baidu.com"></base>
网页内超链接打开方式：<base target="_blank"></base>
链接一个外部样式表：<link rel="stylesheet" type="text/css" href="style.css" > 注：可以重复使用链接多个外部样式文件
网页刷新信息：<meta http-equiv="refresh" content="10;url=http://www.baidu.com"> 10秒后跳转到百度页面
网页版权信息：<meta name="copyright" content="2009-2014©版权所有">
网页作者：<meta name="author" content="UI by vilin">
网页描述信息：<meta name="description" content="80字以内的一段话，与网站内容相关">
网页关键字：<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">
网页标题：<title>网页标题</title>
编码字符集：<meta charset="utf-8"> HTML5 支持 HTML5向下兼容
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> HTML 4支持
多媒体标签
图片标签<img>
<img width="300" alt="这是一张美女图片" title="瑶瑶" src="yaoyao.jpg"> 单标签
属性：html4支持：width (宽度)、 height（高度)、 alt(简单描述)、 title(图片标题)、 src(图片位置)、 border（边框)、 align(位
置)、 usemap（图片映射)、
html5支持：width、 height、 alt、 title、 src、usemap、
图片链接：<a href="http://www.lampbrother.net" target="_blank"><img alt="图片链接“ src="baobao.jpg"></a>
图片映射：<img src="taiyangxi.bmp" alt="这是一张图片" width="150" border="1" usemap="#ty" />
<map id="ty" name="ty">
<area shape="circle" coords="125,100,14" href="#" />
<area shape="circle" coords="90,114,10" href="#" />
<area shape="rect" coords="0,0,78,260" href="#" />
</map>
音频标签<audio> </audio>
属性：src(文件位置)、autoplay（自动播放)、controls(控件) 、preload（自动加载)、loop(循环播放) source(源)、
实例1：<audio src="baidahuang.mp3" autoplay controls loop></audio>
实例2：<audio autoplay controls loop>
<source type="audio/mpeg" src="baidahuang.mp3">
<source type="audio/ogg" src="beidahuang.ogg">
你的浏览器不支持音频控件。
</audio>
html5新增标签
属性：src(文件位置)、autoplay（自动播放)、controls(控件) 、preload（自动加载)、loop(循环播放) source(源)、
实例1：<audio src="baidahuang.mp3" autoplay controls loop></audio>
实例2：<audio autoplay controls loop>
<source type="audio/mpeg" src="baidahuang.mp3">
<source type="audio/ogg" src="beidahuang.ogg">
你的浏览器不支持音频控件。
</audio>
视频标签<video> </video>
属性：src(文件位置)、autoplay（自动播放)、controls(控件) 、preload（自动加载)、loop(循环播放) source(源)、poster(图
片封面)
实例1：<video src="baidahuang.mp4" autoplay controls loop></video>
实例2：<video autoplay controls loop poster="manbu.jpg">
<source type="video/mpeg" src="baidahuang.mp4">
<source type="video/ogg" src="beidahuang.ogg">
你的浏览器不支持视频控件。
</video>
注：还有preload 属性预先加载，如果使用 autoplay该属性，将忽略该属性
html5新增标签
属性：src(文件位置)、autoplay（自动播放)、controls(控件) 、preload（自动加载)、loop(循环播放) source(源)、poster(图片封面)
实例1：<video src="baidahuang.mp4" autoplay controls loop></video>
实例2：<video autoplay controls loop poster="manbu.jpg">
<source type="video/mpeg" src="baidahuang.mp4">
<source type="video/ogg" src="beidahuang.ogg">
你的浏览器不支持视频控件。
</video>
注：还有preload 属性预先加载，如果使用 autoplay该属性，将忽略该属性
超级链接标签
邮件链接：<a href="mailto:[email protected]">给vilin发邮件</a>
锚点：html4 命名锚点：<a name="top"></a> 访问锚点：<a href="#top">回到顶端</a>
html5 命名锚点：<a id="top"> </a> 访问锚点：<a href="#top">回到顶端</a>
链接 <a href="http://www.baidu.com" target="_blank"></a>
target属性： _self:当前窗口打开链接，是默认值，_blank: 开启一个新的窗口打开链接。
_parent:在父级窗口打开文件，常用于框架。_top:在顶层窗口打开
文件，常用于框架。
文本的基本标签
文字上标字体标签：<sup> </sup> 2的3次方： 2<sup>3</sup>
文字下标字体标签：<sub> </sub> 我是<sub>下标</sub>
<strong> </strong> html4: 表示强调，通常为粗体字。
html5: 表示重要的文本
<em> </em> 表示强调，通常为斜体字。
<cite> </cite> 用于引证、举例，通常为斜体字
下划线字体标签： <u> </u> 字体会有下划线效果 html4已不赞成使用，html5 不支持。
斜体字标签：<i> </i> 字体会有斜体字效果 <i>字体是斜体字</i>
粗体字标签：<b> </b> 字体会有加粗效果 <b>字体会被加粗</b>
标题字标签：<hn> </hn> n为1-6，定义了六级标题，而且会自动换行插入一个空行，n值越大，字体越小。
格式化标签
组合元素标签：<figure></figure>:主要是对图片进行描述，补充搜索引擎对图片的识别。html4不支持，html5新标签。
<figure>
<figcaption>黄浦江上的的卢浦大桥
</figcaption>
<img
src="./shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
对话标签：<dialog><dt></dt><dd></dd><dt></dt><dd></dd></dialog>
<dt></dt>定义角色 <dd></dd>对话内容 html4不支持，html5支持。
定义元素细节标签：<details><summary></summary></details> 定义元素细节标签，
用户可进行查看，或通过点击进行隐藏。html4不支持 html5支持
自定义列表：<dl><dt></dt><dd><dd></dl> 与<ul><ol> 类似，具体请看实例：
有序列表：<ol><li></li></ol> 显示特定的项目顺序，与无序列表<lu>使用方式基本相同。
无序列表：<ul><li></li></ul> 使用<ul>作为无序的声明，使用<li>作为每个项目的起始。没有序列号，
使用缩进的形式表示一定的层次性。
预格式化标签：<pre> </pre> 页面中显示的和源代码中书写的格式效果完全一致
段落标签： <p> </p> 即换行之后插入一个空行
分隔线标签：<hr> 单标签水平分隔线标签
换行标签：<br> 单标签如果有多个换行可以连续使用多个<br> 标记
通过一周的学习，自己能够写出一些简单的静态网页
第4天的时候自己写出了个人简历表格
和能写出一些超链接的东西