新手笔记——HTML
什么是HTML
HTML:超文本标记语言 （Hyper Text Markup Language）
HTML不是一种编程语言，而是一种标记语言，描述网页的语言
HTML使用标签描述网页中图片、文本、音乐、视频、超链接等
HTML的发展历史
XHTML 1.0网页结构代码
HTML 4.01网页结构代码
HTML 5网页结构代码
开发环境及开发工具
开发环境：Windows（ Windows操作系统是美国微软公司研发的一套操作系统） Linux（Linux是一套免费使用和自由传播的类Unix操作系统） Mac OS X(mac OS是苹果公司为Mac系列产品开发的专属操作系统)
开发工具：Dreamweaver（简称“DW”，中文名称 "梦想编织者"，DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。） Eclipse（Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。） FrontPage（FrontPage，是微软公司出品的一款网页制作入门级软件。） WebStorm（WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。）
WebStorm有的：智能的代码补全、代码提示、自动保存......
HTML基本标签
名称 标签 实例
标题标签 <h1>~<h6> <h1>静夜思</h1>
段落和换行标签 <p>...</p>、<br/> <p>床前明月光<br/>疑是地上霜 </p>
水平线标签 <hr/> <hr/>
斜体 <em>...</em> <em>举头望明月</em>
字体加粗 <strong>...</strong> <strong>低头思故乡</strong>
图像标签
常见图片格式：jpg（全称是Joint Photographic Experts Group是常见的一种图像格式）、 gif(Graphics Interchange Format的原义是“图像互换格式”,动图) 、 bmp（全称Bitmap是Windows操作系统中的标准图像文件格式）、 png（便携式网络图形是一种无损压缩的位图片形格式，其设计目的是试图替代 GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性）
<img src="图片路径" alt="替换文本" width="x" height="y"/>
src：绝对路径、相对路径 alt：图片损坏后显示的替换文本 width：宽度 height：高度
PS: ../ 返回上一级目录
超链接
<a href="链接地址" target="目标窗口位置">文本或图像</a>
href：绝对路径、相对路径 target:目标窗口位置 ：_self:自身窗口 _blank:新建窗口
超链接的应用
1、页面间连接：A页到B页，网上常见连接
2、锚链接：跳至自身固定位置，或A页跳到B页固定位置，需要锚标记
锚链接 同页面<a href="#锚点名" >文本或图像</a> <a name="锚点字" >文本或图像</a>
锚链接 不同页面 1.html <a href="2.html#锚点字" t>文本或图像</a> 2.html <a name="锚点字" t>文本或图像</a>
3、功能性连接：电子邮件、QQ、MSN等连接
功能性连接 <a href="mailto:邮箱地址" >文本或图像</a>
注释和特殊符号
特殊符号 字符实体 实例
空格 <a href="#">百度</a> | <a href="#">新浪</a>
大于号（>） > 如果时间> 晚上6点，就坐车回家
小于号（<） < 如果时间< 早上7点，就走路去上学
引号（"） " W3C规范中，HTML的属性值必须用成对的"引起来
版权符号© © ©2003-2019北大青鸟
<!-- 注释内容 --> 规范意识 *****
W3C标准
World Wide Web Consortium，万维网联盟
规范：
1.标签名称、属性名称必须小写
2.标签必须严格嵌套，并且必须闭合，即使空元素标签也必须闭合
3.属性值必须用引号引起来
例：<p><img src="image/p1.jpg" alt="核桃" /><br/>无漂白薄皮核桃</p>
网页上播放视频和音频的方法
1. 第三方自主开发的播放器
2. Flash
3. HTML5媒体元素
HTML5的媒体元素
视频元素 ：video
音频元素：audio
视频元素
语法：<video src="视频路径" controls></video>
例子：<video src="video/video.mp4" controls></video>
视频路径:指定要播放的视频文件路径 controls（控制）：提供播放。暂停和音量的控件
主流浏览器支持的视频格式
视频格式\浏览器 IE Firefox Opera Chrome Safari
Ogg 不支持 3.5+ 10.5+ 5.0+ 不支持
MPEG4 9.0+ 不支持 不支持 5.0+ 3.0+
WedM 不支持 4.0+ 10.6+ 6.0+ 不支持
例：<video controls>
<source src="video/video.mp4"type="video/mp4"/>
video文件夹名/video.webm 视频video/视频类型webm
<source src="video/video.mp4" type="video/mp4"/>
</video>
自动播放属性
autoplay(自动播放)
例:<video autoplay>
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
你的浏览器不支持video元素
</video>
音频元素
语法：<audio src="音频路径" controls="controls"></audio>
音频路径:指定要播放的视频文件路径 controls（控制）：提供播放。暂停和音量的控件
主流浏览器支持的音频格式
音频格式\浏览器 IE Firefox Opera Chrome Safari
Ogg 不支持 3.5+ 10.5+ 3.0+ 不支持
MPEG4 9.0+ 不支持 不支持 3.0+ 3.0+
WedM 不支持 4.0+ 10.6+ 不支持 3.0+
例：<audio controls>
<source src="music/music.mp3" type="audio/mpeg"/> music文件夹名/music.mp3 音频audio/音频类型mpeg
<source src="music/music.ogg" type="audio/ogg"/>
你的浏览器不支持audio元素
</audio>
HTML5的结构元素
元素名 描述
header 标题头部区域的内容（用于页面或页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section Wed页面中的一块独立区域 必须要有一个标题
article 独立的文章内容
aside 相关内容或应用（常用与侧边栏）
nav 导航类辅助内容
例：<header><h2>网页头部</h2> </header>
<section><h2>网页主体部分</h2></section>
<footer><h2>网页底部</h2></footer>
