1. 网页的相关概念
网页有文字、图片、链接、音频、视频等元素组成。
2. 常见的浏览器
浏览器 | 内核 |
---|---|
谷歌 | Blink |
火狐 | Gecko |
苹果 | Webkit |
IE | Trident |
欧朋 | Blink |
浏览器内核(渲染引擎):解析代码,负责读取网页内容并且显示网页
3. web标准的构成
结构 | HTML | 网页元素的结构和内容 |
表现 | CSS | 网页的外观和位置,包括版式、颜色、大小等 |
行为 | JS | 网页的模式与交互 |
4. HTML
HTML是超文本标记语言,包含图片、链接、音频视频等 。
HTML语法规范:
01.所有标签包含在 < > 中间
02.双标签,大多数成对出现,例:<html></html>
03.单标签 ,例<br>
标签的关系:包含关系、并列关系。
5. HTML基本结构标签
<html ></html>
文档的声明
<head></head>
文档的头部
<title></title>
文档的标题
<body></body>
文档主体
<html>
<head>
<title></title>
</head>
<body></body>
</html>
6. DOCTYPE和lang
<!DOCTYPE html>
文档声明,告诉浏览器当前页面试H5的网页。写在页面第一行。
<html lang=”en”>
指定内容使用的语言 en英文 zh-CN中文
<meta charset=”UTF-8”>
编码格式
7. HTML标签
标题标签:h1~h6
段落标签:<p>
显示一段文字
换行标签:<br>
将文字强行换行
文本格式化标签:strong\b(加粗)、em\i(倾斜)、del\s(删除)、ins\u(下划线).
div和span标签:div一行只能放一个,span 一行可放多个
图像标签:<img>
属性 src(图片路径 必须写):指定图像文件的路径和文件名
alt(文本):替换文本,图像不显示是出现
title(文本):提示文本,鼠标停留时出现
width(宽度):图像宽度
height(高度):图像高度
Border(边框):边框的粗细
8.路径
01.相对路径 相对于当前html文件位置的某个文件位置
同一路径:直接写文件名
上级文件: …/
下级文件:一个 /
02.绝对路径 文件或文件夹的绝对位置,能够直接定位
9.链接标签 <a>
从一个页面链接跳转到另一个页面或者页面其他位置
<a href=”跳转目标” target=”窗口打开方式”>文本或图像</a>
01.target
—> _self(默认当前窗口打开)/ _blank(新窗口打开)
02.href
—>外部链接 <a href="http://www.baidu.com"></a>
—>内部链接<a href="路径/XXX.html"></a>
—>空链接 #表示,点击不跳转,但会刷新页面
锚点链接:实现当前页面中不同位置的跳转
第一步–> <p id=”锚点名称”></p>
第二步–> <a href=”#锚点名称”></a>