HTML部分
一.什么是网页
网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页常见以 .htm或.html后缀结尾的文件，因此将其俗称为HTML文件。
HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。
二.html基本语法概述
1.HTML标签是由尖括号包围的关键词，例如<html>。
2.HTML标签通常是成对出现的，例如<html>和</html>，我们称为双标签。标签对中的第一个标签是
开始标签，第二个标签是结束标签。
3、有些特殊的标签必须是单个标签(极少情况)，例如<br/>，我们称为单标签。
标签关系
双标签关系可以分为两类:包含关系和并列关系
三.html的基本结构
HTML主要由三个部分组成：文档声明、文档头部和文档主体。
文档声明：通常位于HTML文件的第一行，如<!DOCTYPE html>
文档头部：由<head>标签定义，包含了文档的元信息。
文档主体：由<body>标签定义，包含了网页的所有内容。
四.html常用标签
1.标题标签<h1> - <h6>
为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标即<h1>-<h6>.
单词 head 的缩写，意为头部、标题。
标签语义:作为标题使用，并且依据重要性递减。
特点:
（1）加了标题的文字会变的加粗，字号也会依次变大。
(2)一个标题独占一行。
2.段落和换行标签
<p>标签用于定义段落，它可以将整个网页分为若干个段落。
单词paragraph ['paeragraef]的缩写，意为段落。
标签语义:可以把HTML文档分割为若干段落。
特点:
（1）文本在一个段落中会根据浏览器窗口的大小自动换行.
（2）段落和段落之间保有空隙.
<br/>希望某段文本强制换行显示，就需要使用换行标签 。
单词 break的缩写，意为打断、换行。
标签语义:强制换行。
特点:
（1）<br /> 是个单标签。
（2）<br/> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
3.文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML 中的文本格式化标签，使文字以特殊的方式显示。
标签语义:突出重要性,比普通文字更重要
加粗 ：<strong></strong>或者<b></b>
倾斜 ：<em></em>
删除线 ：<del></de|>
下划线： <ins></ins> 或者<u></u>
4.<div> 和<span>标签
<div>和<span>是没有语义的，它们就是一个盒子。
div 是 division 的缩写，表示分割、分区。span意为跨度、跨距。
特点:
（1）<div> 标签用来布局，但是现在一行只能放一个<div>大盒子
（2）<span> 标签用来布局，一行上可以多个<span>小盒子
5.图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像
<img src="图像URL"/>
单词image的缩写，意为图像。
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名.所谓属性:简单理解 是属于这个图像标签的特性。
图像标签的其他属性:
src 图片路径 必须属性
alt 文本 替换文本。图像不能显示的文字
title 文本 提示文本。鼠标放到图像上，显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细
图像标签属性注意点:
图像标签可以拥有多个属性，必须写在标签名的后面。
②属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③属性采取键值对的格式，即key=“value”的格式，属性=“属性值”。
6.链接
<a href="跳转目标”target="目标窗口的弹出方式*>文本或图像</a>
单词anchor [' aenka(r)]的缩写，意为:锚。
两个属性的作用如下:
href ：用于指定链接目标的url地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能
target： 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。
链接分类:
（1）外部链接: 例如< a href=*http:// www.baidu.com">百度</a>.
（2）内部链接:网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href="index.html">首页
（3）空链接: 如果当时没有确定链接目标时，<a href="#*> 首页 </a>
●在链接文本的href属性中，设置属性值为#名字的形式，如<a href=*#two*> 第2集</a>
●找到目标位置标签，里面添加一个id属性=刚才的名字，如:<h3 id="two">第2集介绍</h3>
CSS部分
一.选择器
CSS 选择器
标签选择器:根据HTML元素名选择元素。
类选择器:使用,符号和类名选择元素。
ID 选择器:使用#符号和ID选择元素。
复合选择器
（以下重点是类选择器、id选择器）
二.类选择器
1.多类名使用方式
<div class="red font20">嗯呢</div>
(1)在标签class属性中写多个类名
(2)多个类名中间必须用空格分开
(3)这个标签就可以分别具有这些类名的样式
2.多类名的使用场景
(1)可以把一些标签元素相同的样式(共同的部分)放到一个类里面
(2)这些标签都可以调用这个公共的类,然后再调用自己独有的类.
(3)从而节省CSS代码,统一修改也非常方便.
各个类名中间用空格隔开
三.id选择器
id 选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以 id 属性来设置id选择
注意:id属性只能在每个HTML文档中出现一次。口诀:样式*定义,结构id调用,只能调用一次
选择器和类选择器的区别
（1）类选择器(class)可以多次使用
（2）id选择器只能只用一次
四.css的引入方式
内联样式:直接在HTML元素中使用style 属性应用样式。
内部样式表:在HTML 文档的<head>部分使用<style> 标签定义样式。
外部样式表:创建一个单独的.css文件，然后在HTML文档的<head>部分使用<link> 标签引入。
五.定位
1.静态定位：这是元素的默认定位方式。静态定位的元素不会受到 top, bottom, left, right 等属性的影响，它们会按照正常的文档流进行布局。
2.相对定位：相对于元素原本在文档流中的位置进行定位。通过设置 top, bottom, left, right 属性，可以使元素相对于其原始位置进行偏移。
3.绝对定位：元素会相对于最近的已定位父元素（即设置了 position 属性的元素）进行定位。
4.固定定位：元素会相对于浏览器窗口进行定位，即使页面滚动，它也会保持在固定的位置。
（一般网页布局会将标准流，浮动，定位搭配使用）
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
