前端基础html,css
一、HTML文档基本结构
<!DOCTYPE html> DOCTYPE 声明了文档类型,指定了文档的引用规范,有助于浏览器中正确显示网页,DOCTYPE声明不区分大小写; <html> 定义了整个HTML文档,描述了文档类型; <head> 定义了文档的头部,是所有头部元素的容器; <meta charset="utf-8"> 中文网页需要使用<meta charset="utf-8">声明,否则会出现乱码
<title>This is my first html</title>
</head>
<body> 定义了HTML文档的主体,为可视化网页内容;
<h1>我的第一个标题</h1> 定义了HTML文档中的一个标题;
<p>我的第一个段落!</p> 定义了HTML文档中的一个段落;
</body>
</html>
2、什么是HTML?
HTML(HyperText Markup Language):是用来描述网页的一种超文本标记语言,严格意义上说,HTML不是一种编程语言,而是一种标记语言。
所谓标记语言,是由一套标记标签构成。
HTML使用标记标签描述网页,HTML文档包含了HTML标签及文本内容。
3、什么是HTML文档?
HTML文档:包含HTML标签和纯文本,用来描述网页。
HTML文档也被称为网页。
4、什么是HTML标签?
HTML标记标签(HTML tag):是由尖括号包围的、成对出现的关键词。
标签对中的第一个标签称为开始标签(开放标签),第二个标签称为结束标签(闭合标签),如<html></html>。
语法格式:<标签>内容</标签>
二 HTML元素
1、HTML元素概念
HTML文档由HTML元素定义。
HTML元素是以开始标签作为起始,以结束标签作为终止,元素的内容是开始标签与结束标签之间的内容。
具有空内容的元素称为空元素,即没有内容的元素,可在开始标签中进行关闭,例如<br />。
大多数HTML元素可以拥有属性。
2、嵌套的HTML元素
HTML文档由嵌套的HTML元素构成。
以上述实例为例,“<p>这是一个段落!</p>”为一个元素,该元素拥有一个开始标签<p>,元素内容“这是一个段落!”,以及一个结束标签</p>。而该元素嵌套在元素<body></body>元素中。
PS:
在XHTML、XML以及未来版本的HTML中,所有的元素必须被关闭,空元素在开始标签中添加斜杠是关闭元素的正确方法。
HTML标签对大小写不敏感,但是尽量使用小写,因为万维网联盟(W3C)在HTML4中推荐使用小写。
注意,关于标签嵌套:
一般,块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。需要注意的是,p标签不能包含块级标签。
三 HTML属性
属性是HTML元素提供的附加信息,一般添加在开始标签中。
属性值应该始终被包括在单引号或者双引号中,如果属性值本身就含有双引号,那么属性值需要使用单引号包围,例如name=‘Love “story” fish’。
属性总是以“名称/值对”的形式出现,如name="value"。
属性实例:
<img src="google.JPG" width="30" height="30">
其中,图片文件位置在src属性中指定,图片的大小由width和height属性设置。
属性和属性值对大小写不敏感,推荐使用小写的属性/属性值。
常用的属性:
属性 | 描述 |
class | 为HTML元素定义一个或多个类名,类名从样式文件引入 |
id | 定义元素的唯一id |
style | 规定元素的行内样式 |
title | 描述元素的额外信息(作为工具条使用) |
一 常用的头部元素标签
<head>元素包含了所有的头部标签元素。
1、<title>标签定义了HTML文档的标题,在HTML/XHTML文档中是必须的。
主要功能:
定义了浏览器工具栏的标题;
当网页添加到收藏夹时,显示在收藏夹中的标题;
显示在搜索引擎结果页面的标题;
2、<base>标签描述了基本的链接地址或链接目标。
该标签作为HTML文档中所有的链接标签的默认链接,即如果HTML文档中的超链接标签没有添加链接地址,则默认访问<base>标签中的链接。 语法格式:<base href="url" target="...">
3、<link>标签定义了文档与外部资源之间的关系,常用于链接到外部样式表。
语法格式:<link rel="stylesheet" type="text/css" href="xxx.css">
4、<style>标签定义了内部的CSS样式。
语法格式:<style type="text/css">css样式规则</style>
5、<meta>标签描述了一些基本的HTML页面元数据,元数据不显示在页面上,但会被浏览器解析。
<meta>元素通常用于制定网页的描述、关键词、文件的最后修改时间、作者,以及其他元数据。
主要有http-equiv、name和content三个属性。前两个指定了元数据信息的名称,content用于指定对应的值。
例如:<meta http-equiv="Content-Type" content="text/html;charset="utf-8" /> <meta name="author" content="LoveStory_Fish" />
6、<script>标签用于加载脚本文件。
7、头部标签元素使用实例
<!DOCTYPE html> <html> <!-- 头部标签元素 --> <head> <!-- 定义文档标题 --> <title>This is my first html</title> <!-- 定义网页默认链接 --> <base href="http://www.baidu.com" target="_blank"></base> <!-- 定义引用的外部资源文件 --> <link rel="stylesheet" type="text/css" href="test.css"> <!-- 定义文档样式 --> <style type="text/css"> p {color: blue} </style> <!-- 定义网页语言 --> <meta charset="utf-8" /> <!-- 定义网页作者 --> <meta name="author" content="LoveStory_Fish" /> <!-- 每30秒刷新当前页面 --> <meta http-equiv="refresh" content="60" /> <!-- 执行javascript脚本代码 --> <script type="text/javascript"> alert("Hello World!") </script> </head> <body> <p>这是一个段落!</p> </body> </html>
二 常用的块级元素标签
浏览器中的块级元素,前后显示折行。
块级元素的特点:
1.块级元素,前后显示折行,从新的一行开始,后面的元素需要另起一行;
2.元素的高度、宽度、行高、上下边距等都可设置;
3.可以通过display:block属性键值对将行级元素转化成块级元素;
1、标题标签
HTML通过<h1> - <h6>六个标签来定义标题。 字体大小按<h1> - <h6>逐渐减小,且重要性递减,<h1>定义最大标题或作主标题(最重要的),<h6>定义最小标题。 标题的重要性:搜索引擎使用标题为网页的结构和内容编制索引,用户也可以通过标题来快速浏览网页。
2、<p>用于定义HTML文档的段落。
3、<hr />定义HTML文档的水平线,一般用于分割内容。
4、<div>HTML文档的分区标签,一帮当作HTML文档的结构化块状元素使用。
用于对网页进行整体分块布局,当作容器来使用。
5、行级元素标签使用实例
注意:一般情况下,段落与段落之间的行距要大于换行的行距。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>This is my first html</title> </head> <body> <!-- HTML注释,不会在浏览器中显示 --> <!-- HTML标题 --> <h1>我的第一个标题</h1> <h2>我的第一个标题</h2> <h3>我的第一个标题</h3> <h4>我的第一个标题</h4> <h5>我的第一个标题</h5> <h6>我的第一个标题</h6> <!-- HTML水平线 --> <hr/> <!-- HTML段落 --> <p>这是一个段落! <!-- HTML折行 --> <br /> 这是段落的一部分内容...</p> <div> <p>这是另一个段落!</p> </div> </body> </html>
三 常用的行级元素标签
行级元素一般按行逐一显示,前后不会自动换行。
行级元素的特点:
1.与其他元素在一行上显示;
2.元素的高度、宽度、行高、上下边距不能被设置,宽度为它所包含的内容的宽度;
3.可以通过display:inline属性键值对将块级元素转化成块级元素;
1、<a>定义了HTML文档的超链接。
超链接可以是文字或者一幅图像,可以点击这些内容来跳转到新的网页或者当前网页中的某个部分。 语法格式:<a href="链接地址" target="目标窗口">链接文本或图片</a>
(1)href属性用来描述链接的地址或目标。
注意:尽量使用正斜杠添加到子文件夹,如果使用反斜杠,则会向服务器产生两次HTTP请求,因为服务器会添加正斜杠到这个地址,然后创建一个新的请求。
(2)target属性可以定义被链接的文档在何处显示。
_blank:在新窗口中打
2、<br />定义HTML文档的折行,在不产生一个新段落且需要进行换行的情况下使用,是一个空的HTML元素。
3、格式化标签
格式化标签可以对输出的文本进行格式化。
(1)常用的文本格式化标签
标签 | 描述 |
<b> | 定义粗体文字 |
<strong> | 定义粗体文字,突出显示重要的文本内容 |
<i> | 定义斜体文字 |
<em> | 定义斜体文字,突出显示重要的文本内容 |
<small> | 定义小号字 |
<big> | 定义大号字 |
<sub> | 定义下标 |
<sup> | 定义上标 |
<ins> | 定义插入字 |
<del> | 定义删除字 |
(2)常用的计算机输出标签
标签 | 描述 |
<code> | 定义计算机代码 |
<kdd> | 定义键盘码 |
<samp> | 定义计算机代码样本 |
<var> | 定义变量 |
<pre> | 定义与格式文本,控制空行和空格(会保留) |
(3)常用引文、引用标签
标签 | 描述 |
<abbr> | 定义缩写 |
<address> | 定义地址 |
<bdo> | 定义文字方向 |
<blockquote> | 定义长的引用 |
<q> | 定义短的引用 |
<cite> | 定义引用,引证 |
<dfn> | 定义一个定义项目 |
(4)文本格式化实例
<body> <b>文本加粗</b><br/> <strong>文本加粗(强调)</strong><br/> <i>文本斜体</i><br/> <em>文本斜体(强调)</em><br/> <big>文本放大</big><br/> <small>文本缩小</small><br/> 文本<sup>上标</sup><br/> 文本<sub>下标</sub><br/> <pre>对连续空格和空行 </pre> 进行控制 <p>该段文字从右往左显示</p> <p><bdo dir="rtl">该段文字从右往左显示</p> 删除错误字体<del>“宋体”</del>,新增字体<ins>华文新魏</ins><br/> </body>
4、<span>在HTML文档中定义一个行内区域,一行内可以被 <span> 划分成多个区域。
四 常用的行内块级元素
1、<img>定义HTML文档中的图像。
<img>是空标签,只包含属性,没有闭合标签。 语法格式:<img src="图片地址" alt="提示文字">
(1)src属性用来定义图像的URL地址。
src属性的值是指图像的位置,浏览器会将图像显示在文档中图像标签出现的地方。
(2)alt属性用来为图像定义一串预备的可替换的文本,替换的文本属性值是用户自定义的。
当浏览器无法载入图像时,浏览器将会显示这个替代性的文本。
(3)height和width属性分别用于设置图像的高度和宽度,属性值默认单位为像素px。
指定图像高度与宽度,当页面加载时就会保留指定的尺寸,如果不指定图片大小,加载页面时有可能会破坏HTML页面的整体布局。
注意:加载图片需要时间,尽量慎用图片。并且需要注意页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,会显示一个破碎的图片。
2、链接与图片综合运用的实例展示:
<body> 文本链接:<a href="http://www.google.cn">链接</a> <br /> 图片链接:<a href="http://www.google.cn"> <img src="google.JPG" alt="goole图标" height="30" width="30"> </a> </body>
CSS
1.什么是CSS?
CSS是Cascading Style Sheet的缩写。译作”层叠样式表单“。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。
1.2 基本格式
CSS规则是由两部分组成,选择器以及一条或多条声明,声明使用分号隔开:
selector { declaration1 ; declaration2 ......}
例如 : h1{ color:r
ed ; font-size:14px ; }
1.3 常用属性
CSS引入方式
从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。现在普遍的规范写法是外联式
1. 外联式
把css代码写在一个单独的外部文件中,这个css样式文件以“.css
”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:
示例代码如下:
<link href="base.css" rel="stylesheet" type="text/css" />
注意: 1、css样式文件名称以有意义的英文字母命名,如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内
2. 内联式
门户网站的 CSS 代码通常采用嵌入式,即通常所说的内联方式 (Inline Style),。把css代码直接写在现有的HTML标签中,并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。
示例代码如下:
<p style="color:red;font-size:12px">这里文字是红色。</p>
内联 CSS 可以有效减少 HTTP 请求,提升页面性能,缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面,因此能防止 CSS 文件无法读取而造成页面裸奔的现象。
3. 嵌入式
嵌入式css样式,就是可以把css样式代码写在<style type="text/css"></style>标签之间,并且一般情况下嵌入式css样式写在<head></head>之间。
示例代码如下:
<style type="text/css"> span{ color:red; } </style>
这样做虽然更为直观,但很大程度上加大了页面体积,不符合结构与表现分离的设计思想。
总结一下:
外联优点:css在同一个文件中,当页面需要修改的时候只需要修改一个文件即可,方便维护。
缺点:HTTP请求多,浏览器要加载完CSS才能渲染页面,因此影响页面的性能。
内置优点:内联 CSS 可以有效减少 HTTP 请求,提升页面性能,缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面,因此能防止 CSS 文件无法读取而造成页面裸奔的现象。
缺点:每次修改css的时候需要修改多个页面
优先级: 内联式>嵌入式>外联式 但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>代码在<style type="text/css">...</style>
总结来说,就近原则(离被设置元素越近优先级别越高)
常用样式属性
1 字体属性Font:
(1)font-style:设置字体样式 (2)font-size:设置字体大小 (3)font-family:设置字体类型如:宋体
(4)font-weight : normal | bold | bolder | lighter | number
2 设置字体粗细
normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用
bolder :特粗体
lighter :细体
3 文本属性Text:
(1)text-align :设置文本对齐方式。
(2)text-decoration : none || underline || blink || overline || line-through
4 设置文本装饰
none : 无装饰 blink : 闪烁 underline : 下划线品 line-through : 贯穿线 overline : 上划线
3 背景属性Background:
(1)background-color:设置背景颜色。 (2)background-image:设置背景图像。background-image: url(图像地址) (3)background-repeat:设置一个指定的背景图像如何被重复显示。
5 定位属性position
(1)position : static | absolute | relative
6 设置对象的定位方式
(1)static :默认值。无特殊定位,对象遵循HTML定位规则 absolute :将对象从文档流中流出,即将其转化为一个“层”,并使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定 位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义 relative :对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置
(2)z-index : auto | number 设置对象的层叠顺序。 auto : 遵从其父对象的定位 number : 无单位的整数值。可为负数
7 方框属性Box:
常用的方框属性有:边界属性Margin、边框属性Border、填充属性Padding。
(1)边界属性Margin: (1-1)margin-top 设置对象的上边距 (1-2)margin-right 设置对象的右边距 (1-3)margin-bottom 设置对象的下边距 (1-4)margin-left 设置对象的左边距 (2)边框属性Border: (2-1)border-style 设置对象的样式
(2-2)border-width 设置对象的宽度 (3-3)border-color 设置对象的颜色 (3)填充属性Padding: (1-1)padding-top 设置对象与上边框之间的距离
(1-2) padding -right 设置对象右边框之间的距离 (1-3) padding -bottom设置对象下边框之间的距离 (1-4) padding -left设置对象左边框之间的距离
8表格属性Table:
(1)border-collapse : separate | collapse
separate : 边框独立(标准HTML)
collapse : 相邻边被合并
设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。
CSS框架属性
CSS布局模型
css布局模型
布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式。
CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
在网页中,元素有三种布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)
1.流动模型
流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征:第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如下代码三个块状元素标签(div,h1,p)宽度显示为100%。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)
2.浮动模型
想让两个块状元素并排显示,怎么办?设置元素浮动就可以实现这一愿望。
任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。div{float:left;} div{ float:right;}
div{ width:200px; height:200px; border:2px red solid; } #div1{float:left;} #div2{float:right;} //一左一右显示
3.层模型
让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位(positioning)属性来支持层布局模型。
层模型有三种形式:1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
绝对定位:position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。
div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; }
相对位置:
position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px,向右移动100px;
#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; }
固定位置:
fixed:表示固定定位,与absolute定位类型类似,但它相对移动的坐标是固定不变的视图(屏幕内的网页窗口)本身,不会随浏览器窗口的滚动条滚动而变化,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。(相当于浏览网页时弹出的小广告)
几个基础知识
- URL 组成
- 状态码
- 200
- 301
- 304
- 307
- 403
- 404
- 500
- HTTP 方法
- GET
- POST
- PUT
- DELETE
- HEAD
- OPTIONS
- TRACE
- HTTP 首部
- cache-control
- connection
- date
- accept
- if-Modified-Since
- if-Match
- ETag
- content-encoding
长度值
相对长度:以属性的前一个属性单位为基础来设置当前属性
em:相对字符的高度.该设置以当前元素使用的文章高度为单位
px:像素点
%:百分比
绝对长度:不会随着显示装置的不同而改变
in:英寸(1 in = 2.54 cm) cm:厘米 mm:米 pt:点(1 pt = 1/72 in) pc:帕(1 pc = 12 pt)
块标签和内联标签
#内联标签
<span>span</span> <!-- 内联标签 --> <a href="#">a链接</a> <!-- 内联标签 --> <strong>strong</strong> <!-- 内联标签 --> <em>em</em> <!-- 内联标签 --> <time>时间</time> <!-- 内联标签 --> <mark>标记</mark> <!-- 内联标签 -->
1. 独占一行显示
2. 支持所有的样式
3. 不设置宽度,宽度撑满父级的空间
1. 可以在一行显示
2. 不支持宽高,上下的margin,上下padding支持的也有问题
3. 代码换行会解析出一个空格(字体和字体大小,可以控制空格大小)
4. 宽度由内容撑开
1. 可以在一行显示
2. 支持宽高
3. 代码换行会解析出一个空格
4. 不设置宽度的时候,宽度由内容撑开
1. a标签中 不能包含a标签
2. 内嵌标签中不能包含块标签
3. 部分块标签中 也不能再包含块标签: p, h1-h6, dt
4. 注意以下几种嵌套是固定的:
ul下只能包含li,li的父级也只能是ol或ul,当然li中可以随意放置
ol下只能包含li,li的父级也只能是ol或ul,当然li中可以随意放置
dl下只能包含dt和dd,dt,dd的父级也只能是 dl,当然dd中可以随意放置
float: 浮动
left
right
none
1. 在浮动元素下边添加<div class="clearFix"></div>
.clearFix {
clear: both;
}
#position: relative;相对定位
1. 元素之间相对定位,不设置位置偏移,元素和之前不会有任何变化.
2. 元素移动之后,原始位置会被保留(不脱离文档流)
3. 根据元素原始的位置,来计算坐标
4. 提升层级
#position: absolute 绝对定位
1. 脱离文档流
2. 提升层级
3. 根据有定位的父级来计算自己的坐标,如果父级没有定位,就一级级向上找,如果所有的父级都没有定位,就根据document来计算自己的坐标.
4. 触发BFC
5. 使内嵌元素支持宽高
6. 不设置宽度的时候,宽度由内容撑开
#position: fixed;固定定位
1. 脱离文档流
2. 提升层级
3. 把元素固定在可视区的某个位置上
4. 触发BFC
5. 使内嵌元素支持宽高
6. 不设置宽度的时候,宽度由内容撑开
z-index 层级
1. 只能加给定位元素
2. 数值越大层级越高
3. 在同级元素之间比较层级
BFC作用:
1. 包含浮动元素
2. 阻止margin向外传递
3. 不被浮动元素覆盖
BFC触发条件:
1) float的值不为none;
2) overflow的值不为visible;
3) display的值为 table-cell、table-caption和inline-block之一;
4) position的值不为 static或 relative中的任何一个;