HTML简单介绍及入门1
1.1 快捷键介绍
ctrl+c (复制) ctrl+v(粘贴) ctrl+s(保存) ctrl+a(全选) windows+d(返回桌面)
window+e(打开最近访问的文件)
1.2 了解web前端基础
pc端 （网页、网站）
移动端（手机上的安卓软件）
1.3 网页介绍
组成：文字，图片，视频，按钮，搜索框，音频…… 等元素组成
web标准：制作网页的规范
web标准：结构标准（html：写网页结构）
表现标准（css：美化网页）
行为标准（js：响应效果）
浏览器：访问网页 建议用google（如果用谷歌没问题，其他就没问题）
主流浏览器：谷歌、IE、欧鹏、火狐、safari（苹果系统）、
浏览器与服务器之间的关系
1.4 html 简单介绍
概念：Hyper Text Markup Language 超文本标记语言
超文本：在网页中能够实现页面跳转的文本（超链接标签）
标记：在网页中显示的标签（在网页中做记号）
结构：
//指定文档类型 <html> //根标签 <head> <title>网页标题</title> </head> <body> 在浏览器中看到的所有网页信息都要放在body标签中 </body> </html>
结构中标签的分类
单标签：标签只有开始没有结束
如:<link> <hr>
双标签：标签有开始有结束
如：<head></head> <body></body>
标签关系分类：嵌套关系（父子关系） head 和 title
并列关系（兄弟关系） head 和 body
1.5 写html 用什么写都可以（记事本等等）
文件后缀名问题
注意：文件后缀名决定文件的打开方式
网页的后缀名是：.html 或者 .htm
1.6 开发工具
DW Sublime webstorm 等等
安装sublime
新建文件
方式一： 1.ctrl+n 2.ctrl+s 3.!+tab（必须保证是html文件才可以使用这个)
方式二：直接new file 新建
方式三：在本地文件夹中新建，导入Sublime
新建文件夹
方式一：在本地里新建，然后导入Sublime
方式二：在Sublime中新建 在左侧右键+new folder +文件名（不用后缀）
Sublime常用的快捷键 ctrl+shift+d 快速复制
ctrl+f 快速查找
ctrl+h 查找替换
ctrl+l 快速关闭
1.7 单标签
注释标签 <!-- 注释的信息 --> ( 快捷键：ctrl+/ )
换行标签 <br>
横线标签 <hr>
1.8 双标签
1.8.1 标题标签
<h1> </h1>（一号标题）
<h2> </h2>（二号标题） ……
h1~h6 h1最大，h6最小
从语义化角度出发，一般只出现一个一号标题
注：快速改数字 鼠标左键点击1后面,按住ctrl拖到后面的1后面再单击鼠标左键，改成2
1.8.2 段落标签 <p></p>
1.8.3 表示强调的标签
文本标签 <font></font>
改变颜色属性 <color></color> //color是属性，不是标签
改变文字大小属性 <size></size>
文字加粗标签 <strong></strong> 或者 <b></b> 推荐用strong
文字斜体显示 <em></em> 或者 <i></i> 推荐用em
下划线标签 <ins></ins> 或者 <u></u> 推荐用ins
删除线 <del></del> 或者 <s></s> 推荐用del
1.8.4没有语义的双标签
<div></div> 块标签，实现网页布局
<span></span> 在网页布局过程中使用，行元素
注：div与span的区别：基本一致，只是div自动换行
div标签中可以包含任何标签
1.9 多媒体标签
图片标签
写法：<img >
属性：src：设置一个要显示图片的路径
title：当鼠标放在图片上时，描述图片的属性（设置鼠标悬停到图片上的文字提示）
alt：①对图片的描述信息（当图片显示不出来时显示，当图片可以显示出来时则看不见）
②为搜索引擎服务（搜索信息时的关键字）
width：宽度
height：高度
注： 设置了宽度或高度，只改变一个，另一个会根据宽高比自动改变
1.10 路径
1.10.1 绝对路径
绝对路径 E:\a\b.html (不建议用)
①带有磁盘目录的路径 如：<img src=”E:\a\b.html”>
②带有具体的网址 如：http://www.baidu.com/img/1.jpg
1.10.2 相对路径：
①如果资源文件（img）和当前文件（html）在同一个文件夹中，src=”文件名”
②如果资源文件（img）和当前文件（html）不在同一个文件夹中，如果页面在图片的上一级目录中，src=”图片所在文件夹名称加上+图片名称”
如：<img src=”1/1.html” alt=””>
③如果资源文件（img）和当前文件（html）不在同一个文件夹中，如果页面在图片的下一级目录中，src=”+图片名称
如：<img src=” ..\b.html”alt=””>
注：一个../代表返回一级
1.11 超链接
写法： <a href=” ” title=” ” target=“_self ”></a>
作用： 跳转页面
属性： <a href=”#” > 不跳转到任何页面/跳转到本页面 </a>
title: 设置鼠标悬停在超链接上的文字提示
target: ① _self 默认值在当前页面中打开新页面
② _blank 在新窗口中打开页面
超链接跳转到其他页面的其他写法
在head中写 <base target=”_blank”> 可以直接在新页面中打开
1.12 锚链接
锚链接属于超链接的另一种用法，实现的是本页面内部的跳转
如：返回顶部 <a href=”#”></a>
返回笑脸处 <div id=”xl”>笑脸</div> <a href=”#xl”></a>
1.13 特殊字符
1.14 html5（补充，了解）
导航标签 <nav></nav>
区域 <section></section>
底部 <footer></footer>
侧边栏 <aside></aside>
文章 <article></article>
视频标签<video src=”movie.mp4”controls autoplay loop></video>
属性：controls 显示控制面板 autoplay 自动播放 loop 循环播放
多种视频格式
<video controls> <source src="movie.mp4"> <source src="movie.mp3"> <source src="movie.avi"> <source src="movie.rmvb"> </video>
音频标签
<audio src="See you again.mp3" controls autoplay loop></audio>
1.1 快捷键介绍
ctrl+c (复制) ctrl+v(粘贴) ctrl+s(保存) ctrl+a(全选) windows+d(返回桌面)
window+e(打开最近访问的文件)
1.2 了解web前端基础
pc端 （网页、网站）
移动端（手机上的安卓软件）
1.3 网页介绍
组成：文字，图片，视频，按钮，搜索框，音频…… 等元素组成
web标准：制作网页的规范
web标准：结构标准（html：写网页结构）
表现标准（css：美化网页）
行为标准（js：响应效果）
浏览器：访问网页 建议用google（如果用谷歌没问题，其他就没问题）
主流浏览器：谷歌、IE、欧鹏、火狐、safari（苹果系统）、
浏览器与服务器之间的关系
1.4 html 简单介绍
概念：Hyper Text Markup Language 超文本标记语言
超文本：在网页中能够实现页面跳转的文本（超链接标签）
标记：在网页中显示的标签（在网页中做记号）
结构：
//指定文档类型 <html> //根标签 <head> <title>网页标题</title> </head> <body> 在浏览器中看到的所有网页信息都要放在body标签中 </body> </html>
结构中标签的分类
单标签：标签只有开始没有结束
如:<link> <hr>
双标签：标签有开始有结束
如：<head></head> <body></body>
标签关系分类：嵌套关系（父子关系） head 和 title
并列关系（兄弟关系） head 和 body
1.5 写html 用什么写都可以（记事本等等）
文件后缀名问题
注意：文件后缀名决定文件的打开方式
网页的后缀名是：.html 或者 .htm
1.6 开发工具
DW Sublime webstorm 等等
安装sublime
新建文件
方式一： 1.ctrl+n 2.ctrl+s 3.!+tab（必须保证是html文件才可以使用这个)
方式二：直接new file 新建
方式三：在本地文件夹中新建，导入Sublime
新建文件夹
方式一：在本地里新建，然后导入Sublime
方式二：在Sublime中新建 在左侧右键+new folder +文件名（不用后缀）
Sublime常用的快捷键 ctrl+shift+d 快速复制
ctrl+f 快速查找
ctrl+h 查找替换
ctrl+l 快速关闭
1.7 单标签
注释标签 <!-- 注释的信息 --> ( 快捷键：ctrl+/ )
换行标签 <br>
横线标签 <hr>
1.8 双标签
1.8.1 标题标签
<h1> </h1>（一号标题）
<h2> </h2>（二号标题） ……
h1~h6 h1最大，h6最小
从语义化角度出发，一般只出现一个一号标题
注：快速改数字 鼠标左键点击1后面,按住ctrl拖到后面的1后面再单击鼠标左键，改成2
1.8.2 段落标签 <p></p>
1.8.3 表示强调的标签
文本标签 <font></font>
改变颜色属性 <color></color> //color是属性，不是标签
改变文字大小属性 <size></size>
文字加粗标签 <strong></strong> 或者 <b></b> 推荐用strong
文字斜体显示 <em></em> 或者 <i></i> 推荐用em
下划线标签 <ins></ins> 或者 <u></u> 推荐用ins
删除线 <del></del> 或者 <s></s> 推荐用del
1.8.4没有语义的双标签
<div></div> 块标签，实现网页布局
<span></span> 在网页布局过程中使用，行元素
注：div与span的区别：基本一致，只是div自动换行
div标签中可以包含任何标签
1.9 多媒体标签
图片标签
写法：<img >
属性：src：设置一个要显示图片的路径
title：当鼠标放在图片上时，描述图片的属性（设置鼠标悬停到图片上的文字提示）
alt：①对图片的描述信息（当图片显示不出来时显示，当图片可以显示出来时则看不见）
②为搜索引擎服务（搜索信息时的关键字）
width：宽度
height：高度
注： 设置了宽度或高度，只改变一个，另一个会根据宽高比自动改变
1.10 路径
1.10.1 绝对路径
绝对路径 E:\a\b.html (不建议用)
①带有磁盘目录的路径 如：<img src=”E:\a\b.html”>
②带有具体的网址 如：http://www.baidu.com/img/1.jpg
1.10.2 相对路径：
①如果资源文件（img）和当前文件（html）在同一个文件夹中，src=”文件名”
②如果资源文件（img）和当前文件（html）不在同一个文件夹中，如果页面在图片的上一级目录中，src=”图片所在文件夹名称加上+图片名称”
如：<img src=”1/1.html” alt=””>
③如果资源文件（img）和当前文件（html）不在同一个文件夹中，如果页面在图片的下一级目录中，src=”+图片名称
如：<img src=” ..\b.html”alt=””>
注：一个../代表返回一级
1.11 超链接
写法： <a href=” ” title=” ” target=“_self ”></a>
作用： 跳转页面
属性： <a href=”#” > 不跳转到任何页面/跳转到本页面 </a>
title: 设置鼠标悬停在超链接上的文字提示
target: ① _self 默认值在当前页面中打开新页面
② _blank 在新窗口中打开页面
超链接跳转到其他页面的其他写法
在head中写 <base target=”_blank”> 可以直接在新页面中打开
1.12 锚链接
锚链接属于超链接的另一种用法，实现的是本页面内部的跳转
如：返回顶部 <a href=”#”></a>
返回笑脸处 <div id=”xl”>笑脸</div> <a href=”#xl”></a>
1.13 特殊字符
1.14 html5（补充，了解）
导航标签 <nav></nav>
区域 <section></section>
底部 <footer></footer>
侧边栏 <aside></aside>
文章 <article></article>
视频标签<video src=”movie.mp4”controls autoplay loop></video>
属性：controls 显示控制面板 autoplay 自动播放 loop 循环播放
多种视频格式
<video controls> <source src="movie.mp4"> <source src="movie.mp3"> <source src="movie.avi"> <source src="movie.rmvb"> </video>
音频标签
<audio src="See you again.mp3" controls autoplay loop></audio>