网页的简介
- 网页即浏览器显示给用户看的页面,通常这些页面都是浏览器内核把代码渲染后展示出来的效果。一般有文本、图像、链接、音频、视频等元素来组成。
浏览器介绍
- 常用的五大浏览器(按照市场占用率排列)
1.谷歌(内核:blink);
2.IE|Edge(内核:Trident|EdgeHtml);
3.safari(内核:webkit);
4.firefox(内核:Gecko);
5.opera(内核:blink)。
Web标准
- 正因为各大浏览器的内核不同,为了保证渲染出来的效果一致,w3c推出了web标准。
1.结构标准:用html来书写;
2.样式标准:用css来书写;
3.行为标准:用js来书写。
HTML介绍
- 超文本标记语言,网页中可以包含各种多媒体文件,需要不同的标签来声明。作用是绘制网页结构
html标签
-
标签类型:有单标签和双标签;
-
标签关系:父子关系和并列关系;
-
hmtl骨架(最新H5):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
常用开发工具:
- sublime轻量级;
- webstorm功能强大的IDE工具。
- 一些常用的编辑操作:
- 标签字母+tab 快捷生成标签格式
- html:5+tab 快捷生成html5骨架
- ol>li*5 快捷生成ol标签格式,5个li
字符集:
- 强烈推荐用现在最强大的字符集UTF-8
各种标签:
-
<h1-6></h1-6>
标题标签,独占一行,有6个等级。一般h1标签一个页只用一次,用于展示LOGO -
<p></p>
段落标签。独占一行 -
<hr />
下划线标签 -
<br />
换行标签 -
<strong></strong>
加粗并强调标签 -
<em></em>
倾斜 -
<del></del>
删除线 -
<ins></ins>
下划线 -
<base target="_blank" />
写在head标签中全局设置超链接打开新窗口
标签属性:
- 除了标签必须带的属性之外,例如:
<img src=""><a href="">
等等之外,一般不建议过多使用标签属性,建议用CSS来调整样式
锚点定位:
-
同页面锚点定位:
<a href="#锚点名">锚点</a>
<h2 name="名">跳转点</a>
-
不同页面锚点定位:
<a href="xxxx.html#锚点名">锚点</a>
<h2 name="名">xxxx.html页面的跳转点</a>
特殊字符:
-
& nbsp;
空格 -
& lt;
< -
& gt;
> - 只记录几个常用的,其他用的时候翻手册。
注释标签
- 注意:注释顾名思义作用是解释代码的,是针对同事或者后续接收人员看代码用的,不显示到页面。
<!- - 注释语句 - ->
路径
-
相对路径(三种情况):
- 同级路径,使用./调用文件名,例如:
<a href="./文件"></a>
- 下级路径,使用/来引导,例如:
<a href="下一级目录名/文件"></a>
- 上级路径,使用../(上两级就用../../,以此类推)来引导,例如
<a href="../文件"></a>
- 同级路径,使用./调用文件名,例如:
-
绝对路径:
http://www.itcast.cn/images/logo.gif,包含了完整路径的地址。
网友评论