HTML与CSS笔记
HTML与CSS笔记
一、HTML：
IDE快捷键：
- tab：补全标签
- ctrl+/：快速注释
常用标签：
-
-
-
-
-
：空格
-
-
-
- target：打开方式（_blank：以一个新窗口打开）
- herf
- 邮件：在herf中写mailto：XXXXXXXXXqq.com（功能性链接）
- title属性：鼠标悬停时显示文本描述
-
- alt：当图片加载失败时候显示（可以是对图片的文本描述）
- title：鼠标悬停显示
- #属性：定位到某一个id上面
-
-
-
ol：有序列表（li）
-
ul：无序列表
-
dl：自定义列表（dt列表名、dd描述）
-
table：表格
tr表示一行，td表示一行中的一个单元格，th是表格中的表头，caption标题
表格中有内边距但是没有外边距，有一个单元格间隔（border-spacing）类似与外边距
rowspan跨行，colspan跨列
-
textarea：文本域
-
file：文件域
-
q标签：能够对文本添加双引号（这是一种短引用）
-
boockquote：块引用，对引用的文本加上明显的标记，独立成行
-
div（容器）：划分逻辑区
-
span：划分逻辑区
特殊字符
<：<；
右尖括号：>；
&：&；
版权符号：©right；
三种a标签：
- 页面间的链接
- 锚链接
- 功能链接
块级元素和行内元素：
- 块级（block）元素：块级元素独占一行
- 行内（内联）（inline）元素：行内元素不单独占据一行
表格：
- table：表格标签
- tr：新建一行
- rowspan：跨行
- td：新建一列
- colspan：跨列
媒体元素：
- video：视频标签
- 控件：controls
- audio：音频标签
- 控件：controls
页面结构（命名规范）：
header：头部
footer：脚部
nav：导航辅助
section：独立区域
article：文章
aside：侧边栏
iframe内联框架：
iframe标签：嵌套的显示一个页面
- src：显示页面地址
- name：名称
配合使用a标签通过a标签来在内联框架中打开某个页面
表单form：
在form属性中action为表单提交的对象，可以是一个网站也可以是一个请求处理。method为表单提交的方式，post和get两种。
GET：get相对不安全，可以url中看到表单数据，但是相对高效
POST：post相对安全，在url中看不到表单数据，但可以在请求报文的头部的fontdate中看到表单数据，但可以传输大文件。
-
input：输入
value：初始值（默认值）
maxlength：输入最大长度
size：input这个框的长度
name：大多数input都会有一个name方便后台区处理这个元素
checked：默认选中
placeholder：提示语
required：必填
type：类型。
- radio：单选框标签，但需要name进行分组合成才可以做到单选，value可以是不同的值。
- checkbox：多选框，同样需要使用同一个name来分组。
- submit：提交按钮。
- image：图像按钮。
- number：限制输入数字，max和min限制最大和最小。
- reset：重置表单。
- select：下拉框，option选项 selected默认选中。multiple：单选菜单变多选菜单
- range：滑动条。可以设置max（最大）min（最小），step（步长）
- color：颜色控件
- date：日期控件
- email：邮箱输入框（text变种）
- tel：电话输入框（text变种）
- url：url输入框（text变种）
- file：发送文件（必须使用post）
-
disable：禁用元素
-
hidden：隐藏
-
readonly：只读
一般的，会使用fieldset来包裹一组input，并且使用legend来为这组input命名
lable：
能够增强鼠标的可用性
它有一个属性for，一般与input的id匹配
表单的初级验证：
- placeholder：提示信息
- required：必填
- pattern：用正则表达式进行验证
下拉框select：
选项option
一些补充：
ppi：像素/英寸
CSS:
需要为html添加一些css样式有两种方式
一、通过html文件的头部中的style标签来添加
二、写css文件，在html文件的头部中使用link标签
媒体查询：
link标签可以使用一个media属性指定在某种设备以及在设备的显示像素的条件下才使用这个link连接的样式表例如media：“screen and （max-device-width：XXpx）”
还可以在css中使用这个media属性。
继承：
在某一个元素中的元素，如果改变了这个元素的css样式，那么这个元素中的所有元素也都会继承这个改变
覆盖继承：
总是最具体最特定的样式覆盖掉更广泛的样式。
类选择器:
类选择器在css中表示为 .XXXX{}
点的前面是元素名,点的后面是类名
注意：在css中使用，隔开是并列关系，用逗号隔开的两个类或元素都会应用上这个规则。但如果用空格隔开表示递进关系，即父类中的子类。只用在该父类中的子类。
类选择器有两种使用方式:
一种是只针对某个类下特定的元素比如:p.green 此时只会对green类下的p元素起作用
还有一种是对类的所有元素,点前留空 .green这样就对green这个类的所有元素起作用
在html中元素也可以加入多个类,在类之间用空格隔开即可
样式应用的次序：
首先，某一个选择器选择了这个元素，那么这个元素就应用到的这个选择器的规则。
如果没有，查看它的继承情况。
还没有，可能是浏览器的默认样式。
当有多个样式应用时：
他会优先选择最特定的那个选择器。最特定可以看成使用范围最小的，比如 p.green 比 .grenn范围小那么它就比它特定。
当多个选择器特定性相同时，自顶而下的原则，应用最下方的选择器。
id选择器：
id选择器在css中表示为：#XXXX{}
id选择器与类选择器使用方法相同，只是把.换成了#
子孙选择器：
当我们需要选择某个元素的子元素时，可以使用子孙选择器。在父元素和子元素之间使用空格隔开
在css中表示为：父元素 子元素 {}
这样只会应用到父元素中的子元素
父元素和子元素可以是标签、类、id
常用属性：
-
font-family（字体族）：设置字体
font-family可以指定多种字体，浏览器解释font-family属性时从左向右使用，只有当左边字体不可用时才会使用右边的字体。所以我们一般在最右边加上一个浏览器的默认字体sans-serif。
-
font-size：字体大小
指定字体大小可以是px也可以是%（百分比）
1）使用像素时指的是字母的高度像素，当使用百分比时指的是对于父类字体大小的相对百分比，例如：父类指定 了15px，子类使用150%时，子类字体大小就是父类字体大小的1.5倍也就是22.5px。
2）同样也可以使用相对度量单位em，这是一个倍数关系，1.2em就是父类字体大小的1.2倍。
3）关键字（其实可以看作编程里的常量），每个浏览器都有自己对关键字定义的数值。通常small为12px。相邻的两个等级之间大小差距20%，同样的还有：xx-small，x-small，small，medium，large，x-large，xx-large。
-
color（前景色会控制字体和边框）：字体颜色
-
font-weight：字体粗细
bold设置为粗体，normal取消粗体
-
text-decoration：字体装饰（删除、下划线等）
line-through删除线，none取消装饰，underline下划线，overline上划线
-
font-style（斜体）：字体风格
italic设置为斜体
oblique设置为倾斜文本
字体属性也可以简写：
font：font-style font-variant font-weight（前三个可选属性必须出现在font-size前面） font-size/line-height font-family
-
line-height（各行的间距）：行高
可以使用相对变量
可以直接指定一个数字，即基于元素本身字体大小
-
background-image：背景图片
-
background-position：背景图片位置
-
像素
-
百分数
-
关键字
top left right bottom center
-
-
background-repeat：背景是否重复
no-repeat不重复
repeat-X水平方向重复
repeat-Y垂直方向重复
inherit按父元素设置
背景简写：
background：颜色 url 是否重复；（顺序可变）
-
margin：外边距
-
padding：内边距
对于内边距和外边距有一种简单的写法：
padding： Xpx Xpx；表示上下 左右
padding： Xpx Xpx Xpx Xpx；表示上 右 下 左（顺时针）
padding： Xpx；表示四边都相同
-
border-style：边框样式
solid实线，double双线，groove槽线，outset外凸线，dotted点虚线，dashed长虚线，inset内凹线，ridge脊线
-
border-width：边框宽度
-
关键字
thin约为1px，medium约为2px，thick约为4px
-
像素
-
-
border-color：边框颜色
与字体颜色设置相同，可以是颜色名，rgb，十六进制码
对于边框同样也有简写：
border： thin solid red （顺序可变）
-
border-top-color（上边框颜色）：指定某一边的边框属性
-
border-radius：边框圆角
可以是em（相对于父类字体大小）也可以是像素
可以用一个值指定四个角的圆角弧度，也可以单独的为每个角指定比如border-top-left-radius
-
width：内容区宽度
-
text-align（对齐方式）：只对块级元素适用，使用后块级元素内的所有内联元素都会按照这个对齐方式对齐
-
!important：覆盖样式声明
-
clear（取消重叠）：当有浮动元素与下方的块级元素重叠时，clear：right可以让元素检测到重叠时自动下移
-
position（定位）：让元素相对还是绝对定位
relative相对定位，absolute绝对定位
-
display：展示方式
这个属性可以调整元素以块级block展示还是内联inline展示还可以以表格展示table
-
vertical-align（表格单元对齐方式）：
top顶部对齐，middle中间对齐，bottom底部对齐
-
border-spacing：表格单元间距
要注意的是，这个属性创建的垂直间距是不会和其他元素的垂直外边距折叠的
-
list-style-type：设置列表项的项目符号
none：无，disc默认（实心圆），circle空心圆，square实心正方形。
-
list-style-image：设置图像为项目标记
-
list-style-position：项目标记在列表项内还是列表项外
-
border-collapse：边框折叠
collapse为边框折叠
内置规则：
-
@font-face：web字体（自定义字体）
导入一个字体族，并命名它。后续的css选择器可以使用这个名字，但是名字必须使用双引号。
css中的这个特性，允许浏览器使用web上的字体来显示页面。
@font-face带有两个参数，一个是字体名字，另一个是字体的位置。所以往往我们也在我们的web项目中创建一个font的文件夹来存放我们的web字体。
-
@import：导入其他css文件
-
@media：创建媒体类型的css规则
例如@media screen and （min-device-width：XXpx）{}
颜色：
在css中已经定义好了150种颜色，我们只需要在css中填入他们的颜色名即可使用，同样的也可以使用rgb填入参数来获取指定的颜色。同时也可以使用十六进制来指定颜色。
混合样式表：
在html中使用多个样式表时，在下方的样式会覆盖上方选择相同的样式。所以我们要考虑link样式表的顺序。
div与span：
虽然这是html的标签，但是它们不起任何标签表示作用，只是方便逻辑分组，所以把tm放到css部分。
div实现块级逻辑区的分组
span实现内联元素的逻辑区分组
伪类（非常重要）：
什么是伪类？？首先，a标签有三种状态，未点击，已点击，悬停。那么三种状态下有各自的默认样式。如何修改其他两种状态的样式呢？使用伪类：
a:link {} /*未点击*/
a:visited {} /*已点击*/
a:hover {} /*悬停*/
focus：焦点状态
active：活动状态
一般会遵从这个顺序来设置a标签的状态样式：link visited hover focus active
**nth-child：**相对于它兄弟之间的数字顺序
选择奇数行：odd
选择偶数行：even
层叠：
流（Flow）：
当浏览器并排的摆放两个内联元素时，会根据他们的外边距来计算他们之间的间隔，当浏览器上下摆放两个块级元素时，会折叠他们的外边距，按照他们之间最大的外边距来计算他们的间隔。
**如何确定折叠：**当两个元素碰到一起时，他们上下的外边距就会折叠，但如果嵌套的元素种，外边的元素有边框则不会折叠。
**浮动（float）：**当将一个块级元素设置为浮动时，这个元素将从正常流中删除，其他的块级元素将正常流入。设置为浮动的块级元素将会是浮动在页面上
绝对定位：当把定位设置为绝对定位时，这个块级元素浮动且被其他内联元素完全忽略。当position设置为absolute时，可以通过top right left bottom来设置位置，一般取右上或者左下。***分层：***在绝对定位中，元素完全与流脱离，每一个绝对定位的元素都有一层可以使用z-index来设置谁在上面一层。绝对定位是相对于它的父类元素而言的
流入浮动元素原来位置的其他块级元素的内联元素将会绕着浮动元素的边界布局
以上使用浮动来设置布局称为流式布局。 也可以固定容器的宽度，将左右外边距设置为auto让内容居中。称为凝胶布局。
CSS表格：
有区别与html里的表格，这是一种表现表格。一般在元素的css中设置display为table，再将下一级元素css设置为display：table-row，将内容的display设置为table-cell（行）即可让一组元素按表格的样式整齐展示。
固定定位（fixed）：
将css中的position设置为fixed即可将元素固定在浏览器在某一位置而不是页面，它不会睡着页面滚动而消失
HTML5标记：
当我们使用div将id标记为footer时浏览器只知道这是一个div，在新的HTML5里面有更为特殊的标记。
新标记有：nav header article time aside section video footer
-
nav：导航栏
-
header：页眉
-
article（文章）：一般把独立的内容放在这
-
section（单元）：把相关的内容组在一起（不相关时用div）
-
time：时间
time标签有一个datetime属性，如果没有按照官方的格式来写必须要有这个属性，可以指定时间和日期
-
aside：
-
video：视频
controls提供视频控件，autoplay自动播放，poster视频封面，preload预加载可以设置为none播放视频前不加载，metadata（下载视频元数据不下载视频内容），auto让浏览器自主决定，
source可以让video标签有一组视频，浏览器选择自己支持的视频格式播放
-
footer：页脚
三、其他
CSS选择器：
- 伪元素，例如p：first-letter（选中p段落的第一个字母）
- 属性选择器，例如img [width] {}（选中所有包含width属性的img标签），img [width=“300”] {}（选中所有包含width为300属性的img标签），img [alt~=“flowers”] {}（选中所有img标签中width属性包含flowers）
- 兄弟选择：h1+p选中h1后面紧跟着的第一个p段落
- 结合选择器：例如子孙选择器
开发商特定css：
例如-moz-transform，各种浏览器都会不同的特定css。
css变换和过渡：
transform：rotate（45deg）等等结合伪类使图形有一个变换的效果。增加transition属性来平缓过度，于是这就是css动画。
交互性：
利用js提高界面交互性和表单验证。
html5API和web应用：
通过js访问的一些AIP
web字体：
服务器端脚本：
PHP、Python、Node.js（JS）、Ruby on Rails、JSP