这篇博客详细介绍了HTML的基础，包括注释、基本标签、链接、图像等，还涵盖了CSS的基本概念，如选择器、背景、文本样式、字体、链接样式、列表、表格和定位。同时提到了CSS3的新特性，如边框、圆角、阴影以及动画效果。
HTML基础
Ctrl+/直接注释 px为像素单位
HTML是用来描述网页的一种语言
HTML指超文本标记语言；不是编程语言，是一种标记语言。
1.HTML基础标签
head、body
2.HTML标题
< h1 >...< h6 >等标签进行定义等
3.HTML段落
< p >标签定义段落
4.HTML链接
< a >标签定义链接
5.HTML图像
< img >标签定义图像
< br/ >空标签 空元素 可以进行换行的效果
HTML属性:
1.标签可以拥有属性为元素提供更多的信息，空元素没有
2.属性以键/值对的形式出现
如：href="www.zsy.com"
3.常用标签属性有：
<h1>:align对其方式，有居中center、右对齐right 默认是左对齐
<body>:bgcolor背景颜色
<a>:target规定在何处打开链接，_self默认的 _blank打开新的标签
4.通用属性:
class:规定元素的类名
id:规定元素唯一ID
style:规定元素的样式
title:元素的额外信息
HTML格式化：
<b> 定义粗体文字
<big> 定义大号字
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
HTML样式：
1.标签：
<style>：样式定义
<link>：资源引用
2.属性：
rel="stylesheet":外部样式
type="text/css":引入文档类型
margin-left:边距
3.三种样式插入方法：
外部样式表：
<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表：
<style type="text.css">
body{background-color:red}
p{margin-left:20px}
</style>
内联样式表:
<p style="color:red">
HTML链接：
1.连接数据：
文本链接
图片链接
2.属性：
href属性：指向另一个文档链接
name属性：创建文档内的链接
3.img标签属性：
alt：替换文本属性
width：宽
height：高
HTML表格：
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格的单元
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<col> 定义表格的列属性
HTML列表：
<ol> 有序列表
<ul> 无序列表
<li> 列表项
<dl> 列表
<dt> 列表项
<dd> 描述
1.无序列表
使用标签：<ul>、<li>
属性：disc实体圆点、circle空心圆点、square实体方块
2.有序列表
使用标签：<ol>、<li>
属性：A、a、I、i、start 默认情况下是数字
3.嵌套列表
使用标签：<ul>、<ol>、<il>
4.自定义标签
使用标签：<dl>、<dt>、<dd>
HTML块:
1.HTML块元素
块元素在显示时，通常会以新行开始
如：<h1>、<p>、<ul>
2.HTML内联元素
内联元素通常不会以新行开始
如：<b>、<a>、<img>
3.HTML<div>元素
<div>元素也被称为块元素，其主要是组合HTML元素的容器
4.HTML<span>元素
<span>元素是内联元素，可作为文本的容器
HTML布局：
div布局和table布局
基本注意要点：
div布局float浮动
table布局中colspan合并单元格
HTML表单：
1.表单用于获取不同类型的用户输入input type
2.常用表单标签：
<form> 表单
<input> 输入域
<textarea> 文本域
<label> 控制标签
<fieldset> 定义域
<legend> 域的标题
<select> 选择列表
<optgroup> 选项组
<option> 下拉列表中的选项
<button> 按钮
<form>表单
<input>：1.复选框 checkbox 2.单选按钮 radio
<select> <option>3.下拉列表
文本域可以在表单之外创建<textarea> 4.文本域
5.创建按钮 button
HTML背景：
1.背景标签：Background
2.背景颜色：Bgcolor
3.颜色：颜色是有一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）
颜色值最小值：0（#00）
颜色值最大值：255（#FF）
红色：#FF0000
绿色：#00FF00
蓝色：#0000FF
HTML实体：
1.实体：
HTML中预留字符串必须被替换成字符实体
如：<、>、&
XHTML元素：
1.XHTML元素语法：
XHTML元素必须正确嵌套，始终关闭，小写，必须有一个根元素
HTML5的新特性:
用于绘画的canvas标签
用于媒介回放的video和audio元素
对本地离线存储的更好支持
新的特殊内容元素，article、footer、header、nav、section
新的表单控件，calendar、date、time、email、url、search
浏览器的支持，Safari、Firefox以及Opera包括IE9基本支持了HTML5
Css基础
Css派生选择器：
通过依据元素在其位置上下关系来定义样式
Cssid选择器：
1.id选择器：
id选择器可以为标有id的HTML元素指定特定的样式
id选择器以“#”来定义
2.id选择器和派生选择器用法
Css类选择器：
1.类选择器：类选择器以一个点显示
2.class也可以用作派生选择器
Css属性选择器：
1.属性选择器：对带有指定属性的HTML元素设置样式
2.属性和值选择器
Css样式背景：
Css允许应用纯色作为背景，也允许使用背景图像创作相当复杂的效果
background-attachment 背景图像是否固定或者随页面的其余部分滚动
background-color 设置元素的背景颜色
background-image 把图片设置背景
background-position 设置背景图片的起始位置
background-repeat 设置背景图片是否可以重复
Css3背景：
background-size：规定背景图片的尺寸
background-origin：规定背景图片的定位区域
background-clip：规定背景的绘制区域
Css文本：
Css文本属性可定义文本外观
通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进
属性：
color 文本颜色
direction 文本方向
line-spacing 行高
letter-spacing 字符间距
text-align 对元素中的文本对齐
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-transform 元素中的字母
unicode-bidi 设置文本方向
white-space 元素中空白的处理方式
word-spacing 字间距
Css3文本效果：
text-shadow：向文本添加阴影
word-wrap: 规定文本的换行规制
Css字体：
Css字体属性定义文本的字体系列、大小、加粗、风格和变形
font-family 设置字体系列
font-size 设置字体的尺寸
font-style 设置字体风格
font-variant 以小型大写字体或者正常字体显示文本
font-weight 设置字体粗细
Css链接：
1.Css链接的四种状态：
a:link 普通的、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方
a：active 链接被点击的时刻
2.常见的链接样式：
text-decoration属性大多用于去掉下划线
3.设置背景颜色：
background-color
Css列表：
Css列表属性允许你放置、改变图表标志、或者将图像作为列表项标志
list-style 简写列表项
list-style-image 列表项图像
list-style-position 列表标志位置
list-style-type 列表类型
class和id的区别：
1.class一般是可以重复的，id是唯一的不可重复。
2.从资源的加载上：id是先找到结构内容再去给他加载一个样式，class相反。
3.一般id都会用在一个框架体设计上，而class用于具体内部数据的构造
Css表格：
1.表格边框 2.折叠边框 3.表格宽高
4.表格文本对齐 5.表格内边距 6.表格颜色
Css轮廓:
元素主要用来突出元素的作用
outline 设置轮廓属性
outline-color 设置轮廓的颜色
outline-style 设置轮廓的样式
outline-width 设置轮廓的宽度
Css盒子模型概述：
盒子模型的内容范围包括：
margin外边距、border边框、padding内边距、content内容
Css内边距:
1.内边距在content外，外框内
2.内边距属性：
padding 设置所有边距
padding-bottom 设置底边距
padding-left 设置左边距
padding-right 设置右边距
padding-top 设置上边距
Css边框：
1.Css边框：
可以创建出效果出色的边框，而且可以应用于任何元素
2.边框样式：
border-style：定义了10个不同的非继承样式，包括none
3.边框的单边样式：
border-top-style border-left-style
border-right-style border-bottom-style
4.边框宽度：
border-width
5.边框单边的宽度：
border-top-width border-left-width
border-right-width border-bottom-width
6.边框的颜色:
border-color
7.边框单边的颜色：
border-top-color border-left-color
border-right-color border-bottom-color
Css3边框：
border-radius:圆角边框 boc-shadow:边框阴影
border-image:边框图片
Css外边距:
1.外边距：
围绕在内容边框的区域就是外边距，外边距默认为透明区域，
外边距接受任何长度单位、百分数值
2.外边距常用属性：
margin 设置所有边距
margin-bottom 设置底边距
margin-left 设置左边距
margin-right 设置右边距
margin-top 设置上边距
Css外边距合并：
外边距合并就是一个叠加的概念
Css定位：
1.改变元素在页面上的位置
2.Css定位机制：
普通流：元素按照其在HTML中的位置顺序决定排布的过程
浮动
绝对布局
3.Css定位属性：
position 把元素放在一个静态的相对的绝对的或固定的位置中
top 元素向上的偏移量
left 元素向左的偏移量
right 元素向右的偏移量
bottom 元素向下的偏移量
overflow 设置元素溢出其区域发生的事情
clip 设置元素显示的形状
vertical-align 设置元素垂直对齐方式
z-index 设置元素的堆叠顺序（谁的大谁呈现在前面）
4.Css position属性：
static静态的、 relative相对的、 absolute绝对的、 fixed固定的
Css浮动：
1.浮动：
float属性可用的值：
left：元素向左浮动
right：元素向右浮动
none：元素不浮动
inherit：从父级继承浮动属性
2.clear属性：
去掉浮动属性（包括继承来的属性）
clear属性值：
left、right：去掉元素向左、向右浮动
both：左右两侧均去掉浮动
inherit：从父级继承来clear的值
Css选择器：
元素选择器：
最常见的选择器，文档的元素就是最基本的选择器
例如：h1{}、a{}
选择器分组：
例子：h1，h2{}
通配符：*{}
类选择器详解：
1.允许以一种独立于文档元素的方式来指定样式
例如：.class{}
2.结合元素选择器
例如：a.class{}
3.多类选择器
例如：.class.class{}
ID选择器详解：
1.类似于类选择器，不过也有些重要差别
例如：#id{}
2.类选择器和ID选择器区别：
ID只能在文档中使用一次，而类选择器可以多次使用
ID选择器不能结合使用
当使用js时候，需要用到ID
属性选择器：
1.简单属性选择：
例如：[title]{}
2.根据具体属性只选择：
除了选择拥有某些的元素，还可以进一步缩小选择范围，
只选择有特定属性值的元素.
例如：a[href="http://www.jikexueyuan.com"]{};
3.属性和属性值必须完全匹配
4.根据部分属性只选择
后代选择器：
可以选择作为某元素后代的元素
子元素选择器：
与后代选择器想比，子元素选择器只能选择作为某元素子元素的元素
例如：h1>strong{};
相邻兄弟选择器：
可选择紧接在另一个元素后的元素，且二者有相同父元素
例如：h1+p{}；
Css对齐操作
1.使用margin属性进行水平对齐
2.使用position属性进行左右对齐
3.使用float属性进行左右对齐
Css尺寸操作：
1.属性：
height 设置元素高度
line-height 设置行高
max-height 设置元素最大高度
max-width 设置元素最大宽度
min-width 设置元素最小宽度
min-height 设置元素最小高度
width 设置元素宽度
Css分类操作：
1.属性：
clear 设置一个元素的侧面是否允许其他的浮动元素
cursor 规定当指向某元素之上时显示的指针类型
display 设置是否及如何显示元素
float 定义元素在那个方向浮动
position 把元素放置到一个静态的、相对的、绝对的、固定的位置
visibility 设置元素是否可见或不可见
Css导航栏：
1.垂直导航栏
2.水平导航栏
3.导航栏效果
Css常用操作-图片操作：
透明度：opacity 当为0时全部透明 为1时不透明
Css动画-2D、3D转换:
1.通过CSS3转换，能够对元素进行移动、缩放、转动、拉长或拉伸
转换是使元素改变形状、尺寸和位置的一种效果
2.2D转换方法：
translate（） 移动位置
rotate（） 旋转度数 deg度
scale（） 缩放 第一个是宽度第二个是高度
skew（） 倾斜,围绕x轴和y轴度
matrix（）
3.3D转换方法：
rotateX（）
rotateY（）
Css动画-过渡：
1.通过使用css给元素添加效果
2.css过渡是元素从一种样式转换成另一种样式
动画效果的css 动画执行的时间
3.属性：
transition 设置四个过渡属性
transition-property 过渡的名称
transition-duration 过渡效果花费的时间
transition-timing-function 过渡效果的时间曲线
transition-delay 过渡的开始时间（延时的开始时间）
Css动画-动画：
1.通过CSS3，也可以进行创建动画了
2.CSS3的动画需要遵循@keyframes规则
规定动画的时长和名称
Css动画-多列：
1.在CSS3中，可以创建多列来对文本或者区域进行布局
2.属性：
column-count 分列的数量
column-gap 每一列中间所间隔的距离
column-rule 每一列之间所间隔的一条线以及线的颜色
Css3 filter滤镜属性:
实例:修改所有图片的颜色为黑白 (100% 灰度):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。
filter函数：
none 默认值，没有效果
blur(px) 给图像设置高斯模糊
brightness(%) 给图片应用一种线性乘法，使其看起来更亮或更暗
contrast(%) 调整图像的对比度
drop-shadow((h-shadow v-shadow blur spread color)) 给图像设置一个阴影效果|
grayscale(%) 将图像转换为灰度图像
hue-rotate(deg) 给图像应用色相旋转
invert(%) 反转输入图像。值定义转换的比例
opacity(%) 转化图像的透明程度
saturate(%) 转换图像饱和度。值定义转换的比例
sepia(%) 将图像转换为深褐色
url() URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
