一、HTML
1、网页的基本组成
1.1 什么是网页?
网页通常是HTML格式的文件,需要通过浏览器来渲染解析最终展示在页面上,而网站就是相关网页的集合。
1.2 什么是HTML?
HTML(Hyper Text Markup Language)超文本标记语言(不等于编程语言),是用来描述网页的一种语言。
1.3 网页的形成
网页通常由一些链接、文字、图片、声音、视频等元素组成,这些元素利用html标签描述出来,然后交由浏览器解析来显示给用户。
2、常用的浏览器以及内核
浏览器内核(渲染引擎):负责读取网页内容,整理讯息,计算网页的显示方式饼显示页面。常用浏览器及其对应的内核如下表所示:
浏览器 | 内核 | 备注 |
IE | Trident | IE、猎豹、360、百度等也是Trident内核 |
Safari | Webkit | |
Chrome/Opera | Blink | Blink其实是Webkit的分支 |
Firefox | Gecko |
目前国内一般浏览器都会采用Webkit/Blink内核,如360、UC、QQ、搜狗等。
3、Web标准
Web标准由有W3C(万维网联盟)和其他标准化组织制定的一系列标准的集合,我们所写的代码都需要遵守这个标准规范。
3.1 为什么需要Web标准?
因为网页是由浏览器展示给用户的, 市面上有非常多浏览器,这些浏览器又是由不同厂商开发的,这样的话不同的浏览器显示的页面或者排版就会有差异。比如同样的一段文字,有的浏览器文字默认大小为14px,而有的游览器文字默认大小为16px,这就导致了不同浏览器的显示差异。
3.2 Web标准的构成
主要包括:结构(structure)、表现(presentation)、行为(behavior)。
结构(HTML):用于对网页元素进行整理和分类;
表现 (CSS):用于设置网页元素的版式、颜色、大小等外观样式;
行为(Javascript): 指网页模型的定义及交互的编写。
Web标准提出的最佳体验方案:结构、表现、行为相分离,简单来说就是结构写到html文件中、表现写到css文件中,行为写到javascript中。
4、HTML语法规范
4.1 标签形式
所有的标签都需要被包含在<>中,标签一般成对出现,书写形式:<标签名> <标签名/>,也有一些自结束标签(比较少),书写形式:<标签名 />
4.2 标签关系
包含关系(也可称作父子关系、嵌套关系):
<head>
<title> </title>
</head>
并列关系(也可称作兄弟关系):
<head> </head>
<body> </body>
5、HTML基本结构标签
页面内容都是在基本标签的基础上进行扩展书写的。
<html> //根标签
<head> //头部标签
<title> </title> //网页名称标签
</head>
<body> //网页的主体部分,网页内的所有内容都放在其中
</body>
</html>
6、开发工具
Visual Studio Code
7、HTML常用标签
名称 | 功能 |
<!DOCTYPE> | 文档类型声明,用于告诉浏览器使用那种HTML版本来显示网页 |
<h1~h6> | |
<p> | 用于定义段落,它可以将整个网页分为若干个段落 |
<br /> | 用于强制文本换行显示 |
<strong>或<b> | 用于文本加粗 |
<em>或<i> | 用于文本倾斜 |
<del>或<s> | 用于给文本添加删除线 |
<ins>或<u> | 用于个文本添加下划线 |
<div> | 没有语义,就是一个容器,用来装内容。默认情况下一行只能放一个div |
<span> | 没有语义,就是一个容器,用来装内容。默认情况下一行能放多个span |
<img /> | 用于定义页面中的图像,该标签有个必写属性src,用于指定图像的路径和文件名。 可选属性: alt:替换文本,当图片不能显示时就显示alt中的文本 title:提示文本,当鼠标放到图片上时就会显示title中的文本 width:设置图像的宽度 height:设置图像的高度 border:设置图像的边框粗细 |
<a> | 用于定义超链接,作用是从一个页面链接到另一个页面 <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> 必选属性:href,用于指定链接目标的url地址 可选属性:target,_self为默认值,_blank为在新窗口中打开 |
9、相对路径
相对路径分类 | 符号 |
同一级路径 | |
下一级路径 | / |
上一级路径 | ../ |
10、绝对路径
绝对路径是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
例:"D:\test\img\logo.png"或完整的网络地址"http://www.mytest.cn/images/logo.png"
11、超链接分类
- 外部链接:例如<a href="http://www.baidu.com">百度</baidu>
- 内部链接: 网站内部页面之间的相互跳转,直接链接内部页面名称即可,例如<a href="index.html">首页</a>
- 空连接:如果暂时没有确定链接目标时,<a href="#">首页</a>
- 下载链接:如果href里面的地址是一个文件或压缩包,会直接下载这个文件
- 网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接
- 锚点链接:点击链接时可以快速定位到页面中的某个位置,例如:<a href="#目标标签id属性值">第二页</a>
12、html中的注释和特殊字符
注释:<!-- 注释内容 -->
特殊字符 | 描述 | 字符的代码 |
空格符 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
¥ | 人民币 | ¥ |
© | 版权 | © |
® | 注册商标 | ® |
° | 摄氏度 | ° |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 平方 | ² |
³ | 立方 | ³ |
二、CSS
1、定位(position)用于设定元素在文档中的位置,会将元素转换为块级。
定位分类:
- static:静态定位,默认值,没有定位,不能设置偏移值(left、top、right、bottom),占用文档流。
- relative:相对定位,占用文档流,它会出现在文档流中它该出现的位置。可以通过设置偏移值改变其位置,它相对于自身所占的位置做偏移。
- absolute:绝对定位,脱离文档流,相对于body做偏移。一般与相对定位结合使用,此时它相对于父级是relative定义的元素做偏移(relative元素是absolute元素的父级)
- fixed:固定定位,脱离文档流,相对于浏览器窗口左上角做偏移。 一般在开发中用来固定导航栏。
2、z-index
当多个元素添加绝对定位,元素将会叠加在一起,使用z-index可以设置元素显示的层次
注意:用在static和relative上将无效
元素可以拥有负的z-index值
一般元素为文档流,文档流的z-index默认为0,脱离了文档流,在文档流之上(定位、浮动) z-index为0-1之间。如果将z-index值设置为大于或者等于1,元素将会在定位或者浮动流之上。
3、网站开发策略:先整体再局部,自顶向下,逐步细化。
4、常用布局方式
双飞翼布局:有三列组成,两端固定,中间自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双飞翼布局</title>
<style>
.container{
padding: 0 200px;
min-width: 200px;
}
.left{
position: relative;
left: -200px;
float: left;
width: 200px;
min-height: 200px;
background-color: antiquewhite;
margin-left: -100%;
}
.center{
float: left;
width: 100%;
background-color: aqua;
min-height: 200px;
}
.right{
position: relative;
right: -200px;
float: left;
width: 200px;
background-color: blueviolet;
margin-left: -200px;
min-height: 200px;
}
</style>
</head>
<body>
<!-- 双飞翼布局:一共三列,两边固定,中间自适应 -->
<div class="container">
<div class="column center">center</div>
<div class="column left">left</div>
<div class="column right">right</div>
</div>
</body>
</html>