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>