23万字 前端HTML与CSS学习笔记总结篇(超详细)
前端HTML与CSS学习笔记总结篇(超详细)
第一部分 HTML
第一章 职业规划和前景
-
职业方向规划定位:
-
web
前端开发的前景展望:- 未来
IT
行业企业需求最多的人才 - 结合最新的
html5
抢占移动端的市场 - 自己创业做老板
- 随着互联网的普及
web
开发成为企业的宠儿和核心
- 未来
-
web
职业发展目标:-
第一、梳理知识架构
- 负责内容的
HTML
- 负责外观的
css
(层叠样式表) - 负责行为的
js
-
ps
切图
- 负责内容的
-
第二、分解目标(起步阶段、提升阶段、成型阶段)
-
起步阶段:
- 基本知识的掌握
- 常用工具的掌握
- 沟通技巧的掌握(围绕客户的需求)
- 良好的开发习惯(加注释、对齐方式)
-
提升阶段:
- 熟悉掌握
HTML
基本标签和属性 - 熟练掌握
css
的基本语法和使用 - 浏览器兼容和w3c标准的掌握
- 结合
html
+css
+js
开始系统项目的开发
- 熟悉掌握
-
成型阶段:
- 精通
DIV
+CCS
布局 - 精通
css
样式表控制html
标签 - 熟悉运用
js
制作动态网站的效果 - 能独立开发完成网站
- 精通
-
-
第二章 html基本结构
-
认识HTML:
-
html
不是一种编程语言,是一种标志语言 - 标记语言是由一套标识标签组成的
-
html
使用标签来描述网页
-
-
html
结构:
|
|
- 不成对出现的标签
<br>
<hr>
<meta>
<img>
<input..>
<option..>
<link>
-
HTML 基本标签的讲解:
-
<html>
<head>
<body>
标签 -
<h1>
—-<h6>
仅仅用于标题文本,不要为了产生粗体文本使用它们 -
<p>
标签 段落标签 -
<strong><b>
标签 -
都会让文字产生加粗效果
-
<strong>
用于强调文本,强度更深,表示重要文本—>用于SEO
优化 -
<b>
只是视觉加粗效果—>单纯为了产生加粗
-
-
<em>
<i>
标签-
em
用于强调文本 -
i
只是视觉斜体效果 -
<strong>
比<em>
强调更强
-
- 特殊符号:
-
 
; —->空格 -
>
; —>大于号 -
<
;—>小于号 -
"
;—>引号 -
©
;–>版权号
-
-
第三章 html基本标签
-
HTMl
基本标签:-
span
标签- 对被用来组合文档中的行内元素
- 注意:span没有固定的格式表现,当对它应用样式时,才会产生视觉上的变化
-
<pre>
标签- 文字的格式按源码的排版来显示,我们称之为预处理格式
-
<a>
标签—>他有一个必不可少的属性 href-
target
属性: -
_self
(在原来页面打开) -
_blank
(新窗口打开) -
_top
(打开时忽略所有的框架) -
_parent
(在父窗口中打开)
-
-
创建锚点和锚链接
- 锚点也是一种超链接,是页面内进行跳转的超链接
- 第一步:创建锚点
<a name="锚点名称"></a>
- 第二步:使用创建好的锚点名称
<a href="#锚点名称">内容</a>
- 第一步:创建锚点
- 锚点也是一种超链接,是页面内进行跳转的超链接
-
marquee
标签- 可以创建一个内容滚动效果
-
|
|
-
direction
表示滚动方向,取值有(left,right,up,down,默认left) -
loop
表示滚动循环的次数,默认为无限循环
|
|
- 表示当鼠标移上区域的时候停止滚动,鼠标移开继续滚动
第四章 img图片标签与路径
-
图片标签与路径:
- 常见图片格式
jpg
png
gif
-
Gif
(只支持全透明) -
Jpeg
/jpg
-
Png
半/全透明都支持
- 常见图片格式
-
图片标签写法 :
<img src="" alt="" width="" height="" />
-
图片四要素:
-
src=""
图片路径 -
alt=""
图片含义 -
width=""
图片宽度 和图片大小保持一致 -
height=""
图片高度 和图片大小保持一致 title=""
-
-
路径知识:
-
相对路径、绝对路径:
- 相对路径:(Relative Path) 相对于该文件的路径;
- 绝对路径:(Absolute Path) 从磁盘出发的路径;
-
<img src="" …… align="" />
align
属性–设置图片与后面文字的位置关系
值–top
、bottom
、middle
、absmiddle
、left
、right
-
-
在静态页面中:
-
/
开头表示根目录; -
./
表示当前目录;(斜画线前面一个点) -
../
上级目录;(斜画线前面两个点) -
直接用文件名不带/也表示同一目录
- 这些都是相对于当前文件的位置来说的,如果用绝对路径的话就是写全了。
-
第五章 三种列表的讲解
- 三种列表的知识讲解:
-
<ul>
无序列表- 无序列表是一个没有顺序项目的列表,此列表项默认粗体圆点进行标识
-
|
|
-
-
有序列表
- 有序列表也是一列项目,只是列表项目使用的是数字进行标记。 有序列表始于
<ol>
标签。每个列表项始于<li>
标签。
- 有序列表也是一列项目,只是列表项目使用的是数字进行标记。 有序列表始于
|
|
-
列表符号
-
无序列表-列表符号:
-
type="circle"
空心圆type=“disc”
实心圆 默认值type="square"
方块符
-
-
有序列表-列表符号
-
type="A"
A B C D -
type="a"
a b c d -
type="1"
1 2 3 4 默认值type=”I” I II III type=”i” i ii iii
-
-
列表嵌套
-
无序列表-嵌套
-
|
|
- 有序列表-嵌套
|
|
- 定义列表
- 定义列表不仅仅是一列项目,而是项目及其注释的组合。定义列表以
<dl>
标签开始。每个定义列表项以<dt>
开始。每个自定义列表项的定义以<dd>
开始。
- 定义列表不仅仅是一列项目,而是项目及其注释的组合。定义列表以
|
|
-
dd
是对dt
的解释-
< dl>< /dl>
用来创建一个普通的列表, -
< dt>< /dt>
用来创建列表中的上层项目, -
< dd>< /dd>
用来创建列表中最下层项目, -
< dt>< /dt>
和< dd>< /dd>
都必须放在< dl>< /dl>
标志对之间。
-
|
|
-
dl
是definition list
的缩写 -
dt
是definition title
的缩写 -
dd
是definition description
的缩写
-
list-style
属性具有三个属性分量: -
list-style-position
:设置列表项图标的位置,位于文本内或者文本外 -
list-style-type
: 设置列表项图标的类型 -
list-style-image
:使用图像设置列表项图标
第六章 表单元素(上)
-
表单标签:
-
<form>
表单标签-
<form>
表单是一个包含表单元素的区域,包括起来的都是表单的内容123<form><input type="text"/></form>
-
-
-
HTML标签 -
Action
和确认按钮:- 当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
|
|
-
HTML
标签 - 隐藏域隐藏标签: -
隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器
|
|
-
<input>
标签的掌握-
常用
type
类型:<input type="" name="" value="" />
-
type="text"
单行文本输入框 -
type="password"
密码(maxlength=""
) -
type="radio"
单项选择(checked="checked"
) -
type="checkbox"
多项选择 -
type="button"
按钮 -
type="submit"
提交type="image"
图片提交 -
type="file"
上传文件 -
type="reset"
重置 -
type="hidden"
隐藏
-
-
关于表单中的设置默认值:
123<input type="text" name="" value="今天心情不错" /><input type="radio" name="" value="" checked="checked"><input type="checkbox" name="" value="" checked="checked">
|
|
-
textarea
没有默认值 -
<label>
标签的使用-
<label></label>
-
label
元素不会向用户呈现任何特殊效果。 - 不过,它为鼠标用户改进了可用性。
- 如果您在
label
元素内点击文本,就会触发此控件。 - 就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
-
-
<label>
标签的for
属性应当与相关元素的id
属性相同。 -
例子:(重要—注册表单–用户体验–必做)
123<p>单向选择</p><label for="male">男:</label><input type="radio" name="sex" id="male"/><label for="nv">女:</label><input type="radio" name="sex"checked="check"/>
-
第七章 表单和表格(下)
- 表单和表格标签:
-
<textarea>
文本域标签 -
<textarea>
标签: -
<textarea></textarea>
是文本域标签,可以在其中插入一段文字内容,它有两个常用属性rows
和cols
-
-
注意:
-
rows
表示这个文本域有多少行 -
cols
表示这个文本域有多少列
-
-
除了这两个属性它还有
readonly
(只读,文本域的内容无法改变,相当于协议)和title
(鼠标放上提示) -
<select>
标签的掌握- 注:当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将
<select>
表单数据提交给服务器时包括name
属性123456<form><select name="" id=""><option value="1">1月</option><option value="2">2月</option></select></form>
- 注:当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将
-
常用到的属性:
disabled=“disabled” name="sel" size="2"
-
<table>
表格标签 -
<table>
表格标签:<table>
是表格标签,可以用它定义一个表格。123456<table border="1"><tr><td>姓名</td><td>性别</td></tr></table> -
注意:
<table>
的border
属性不能少
-
<tr>
<td>
标签的使用-
<tr>
行标签:-
<tr>
可以定义表格中的一行,一个<tr></tr>
表示一行。
-
-
|
|
-
<td>
单元格标签:-
<td>
可以定义表格中的一个单元格,<td></td>
表示一个单元格。1234567<table border="1"><tr><td >姓名</td><td>性别</td><td>爱好</td></tr></table>
-
border-collapse
属性设置是否将表格边框折叠为单一边框: -
border-collapse:collapse
; -
colspan
左右合并 -
rowspan
上下合并
-
第一部分总结:
- 非可视化标签:
head
meta
style
scrpit.
.. - 可视化标签:
img
div
span
a
ul
li
… - 只有可视化标签,才能用
css
改变它 - 单标签:
meta
link
base
img
input
br
hr
-
双标签:
html
head
body
div
a
p
span
..ul
li
ol
dl
…. -
常用可视化标签
-
div
- 一般用它来布局
-
a 超链接标签
-
href
*属性:设置跳转的网页地址 -
target
属性:设置跳转的目标 - 结论:凡事页面可以点击跳转或者表单提交的文字,都用
a
标签
-
-
img
-
src
*属性用来设置图片的url数据 -
alt
提供给搜索引擎搜索的 width
height
- 结论 :显示图片
-
-
ul li
- 列表
- 结论:只要将来设计页面中有固定样式的列表,就用ul和li
-
table
caption
tr
td (th)
- 慢慢已经被淘汰了 被ul li代替
- 如果是合并竖排的就是合并行(
rowspan
) - 如果是合并横排的就是合并列(
colspan
)
-
HTML部分导图总结
第二部分 CSS
第八章 css基础知识
-
css
基础知识:-
css
样式表的定义 -
css
:(Cascading Style Sheets)层叠样式表;
-
- 分类及位置:内部样式
-head
区域style
标签里面- 外部样式-
link
调用 - 内联样式-标签元素里面
- 外部样式-
-
css
内的注释:/*
注释内容*
/ -
css
样式表的语法-
CSS
规则由两个主要的部分构成:要添加样式的盒子名或者标签名、和要添加的样式。 -
盒子名或者标签名{属性:值;}
-
CSS中几种颜色的表示方法
-
用颜色名表示
- 有17个预先确定的颜色,它们是
-
aqua
,black
,blue
,fuchsia
,gray
,green
,lime
,maroon
,navy
,
olive
,orange,
purple
,red
,silver
,teal
,white
, andyellow
-
- 有17个预先确定的颜色,它们是
-
用十六进制的颜色值表示(红、绿、蓝)
-
#FF0000
或者#F00
-
-
用rgb(r,g,b)函数表示
- 如:
rgb(255,255,0)
- 如:
-
用hsl(Hue,Saturation,Lightness)函数表示(色调、饱和度、亮度)
- 如:
hsl(120,100%,100%)
,色调0代表红色,120
代表绿色,240
代表
蓝色
- 如:
-
用
rgba(r,g,b,a)
函数表示- 其中
a
表示的是改颜色的透明度,取值范围是0~1
,其中0
代表完全透明
- 其中
-
用hsla(Hue,Saturation,Lightness,alpha)函数表示
- 色调、饱和度、亮度、透明度
- 例子
-
用颜色名表示
-
|
|
- 内部样式表
- 当单个页面需要设置样式时,就应该使用内部样式表。
- 使用
<style></style>
标签在文档<head></head>
里面定义内部样式表
|
|
- 从外部引入到样式分为两种:(注意写在
head
标签里面) -
当样式需要应用于很多页面时,就需要用到外部样式表,首先需要创建一个
css
文件,然后引用到我们的页面中。 -
Link
样式表式:<link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径)>
-
Html
式:<style type="text/css">@import url("css.css");></style>
-
内联样式表(优先级高)
-
写在标签里面的样式
-
如:
<p style="color:red;"></p>
-
-
表示给
p
标签里面的文字颜色设置为红色 -
区别:外链样式与导入样式
-
link
标签是属于xhtml
范畴,而@import
则是css2.1
中特有的。link
标签除了可以加载CSS
外,还可以做很多其它的事情,比如定义RSS
,定义rel
连接属性等,@import
就只能加载CSS
了。 -
加载的顺序的区别,
link
加载的css
时,是一种并行(没有尝试是否是这样)加载CSS
方式,而@impor
则在整个页面加载完成后才加载。 -
兼容性的区别,因
@import``CSS2.1
才特有的,所以对于不兼容CSS2.1
的浏览器来说,无效。 -
在样式控制上(比如动态改变网页的布局时,使用
JavaScript
操作DOM
)的区别,此时@import
就无能为力了。
-
-
样式的优先级补充
- 相同权值情况下,
CSS
样式的优先级总结来说,就是——就近原则(离被设置元素越近优先级别越高):-
内联样式表(标签内部)
>嵌入样式表(当前文件中)
>外部样式表(外部文件中)
-
- 相同权值情况下,
-
权值不同时,浏览器是根据权值来判断使用哪种
css
样式的,哪种样式权值高就使用哪种样式 -
层叠优先级是:
-
浏览器缺省
<外部样式表
<内部样式表
<内联样式
-
- 其中样式表又有:
类选择器
<类派生选择器
<ID选择器
<ID派生选择器
-
派生选择器以前叫上下文选择器,所以完整的层叠优先级是:
-
浏览器缺省
<外部样式表
<外部样式表类选择器
<外部样式表类派生选择器
<外部样式表ID选择器
<外部样式表ID派生选择器
<内部样式表
<内部样式表类选择器
<内部样式表类派生选择器
<内部样式表ID选择器
<内部样式表ID派生选择器
<内联样式
…共12
个优先级
-
-
另外,如果同一个元素在没有其他样式的作用影响下,其
Class
定义了多个并以空格分开,其优先级顺序为:- 一个元素同时应用多个
class
,后定义的优先(即近者优先),加上!important
者最优先!
- 一个元素同时应用多个
第九章 css选择器(上)
-
css
选择器:-
class
类选择器可以重复利用 -
id
选择器唯一
-
- 标签选择器
- 什么是选择器:css选择器就是要改变样式的对象
-
选择器
{属性:值;属性:值;}
-
标签选择器:页面中所有的标签都是一个选择器
p{color:red;}
-
ID
选择器- 选择
id
命名的元素 以#
开头#p1{color:#0f0;}
- 选择
-
类选择器
-
class
选择器,选择clas
命名的元素 以.
开头.first{color:#00f;}
-
-
css
代码写完后上线前要经过压缩处理 - 本地和服务器分两个
css
版本(备份) -
压缩后注释都清除,空间体积减少
-
群组选择器
- 选择多个元素,以逗号隔开
#main,.first,span,a,h1{color:red;}
- 选择多个元素,以逗号隔开
- 包含选择器
- 选择某元素的后代元素,也称后代选择器,父类与子类间以空格隔开
p
span{color:red;}
- 选择某元素的后代元素,也称后代选择器,父类与子类间以空格隔开
-
属性选择器
- 选择包含某一属性的元素
-
a[title]{color:red;}
选择包含title
的a
标签 -
a[title][href]{color:red;}
选择包含title
和href
的a
标签
-
>
+
选择器子类选择器:只选择子元素(只选择儿子)(相当于包含元素)p > span{color:red;}
- 相邻兄弟选择器:只选择后面的相邻兄弟元素
p + span{color:red;}