HTML和CSS的一点入门

HTML学习笔记

第一天

1.HTML中不区分大小写

2.注释不能嵌套

3.标签必须结构完整

4.XML 更加严谨

5.浏览器尽最大努力正确加些页面，自动修正，但有些情况会错误修正

6.HTML标签可以嵌套，但是不能交叉嵌套

7.使用内联框架***iframe***可以引入一个外部的页面 使用iftrame来创建一个内联框架

现实开发中不推荐使用内联框架，内联框架中的内容不会被搜索引擎所检索

8.超链接：从一个页面跳转到另一个见面 用标签来创建一个超链接

属性： href：指向链接跳转的目标地址， 相对路径or完整地址

a标签中的target属性可以用来指定打开链接的位置

1. _self：默认值 在当前窗口打开
2. _blank:在一个新的窗口中打开链接

可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开

用#代表空链接 默认为页面的顶部

HTML中有一个属性作为标签的唯一标识：id

9.center标签中的内容会默认在页面中居显示

10.发送电子邮件的超链接，自动打开计算机中默认的邮件客户端

联系我们

<!-- 
SRC属性:
相对路径：
返回路径：../ 返回上一级目录  
-->
<!-- 
图片格式
JPEG：多颜色，可以压缩，但是不支持透明 一般用来保存照片
GIF： 支持的颜色较少，只支持简单透明，支持动态图
PNG：支持的颜色多，支持复杂透明
图片使用原则：
-->

css笔记

层叠样式表 cascading style sheets

1.内联样式：样式直接编写到style属性元素中 只对当前元素中的内容起作用

2.也可以将css样式编写到head中的style标签里，将样式表编写的style标签中，通过css选择器选中指定的元素，为这些元素一起设置样式。也可以将表现和结构进一步分离（推荐使用） （少用标签选择器）

3.外部的css文件 .css 将样式表写到外部的css文件中，通过link标签将外部的cs文件引入到当前的页面当中 这样外部文件css样式表将会应用到当前页面中

css样式统一写到尾部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面表中使用，虽大限度使演示表复用

link标签引入可以利用浏览器的缓存，加快用户访问的速度提高，开发中推荐只用外部css文件（最不推荐内联样式）

4.style标签里不能用HTML注释

/css的注释，必须写在tyle标签中或者css文件中/

css语法：选择器 声明块

选择器：选中页面中的指定元素，并且将声明块中的样式应用到选择器对应的元素上

声明块：紧跟在选择器后用{}，一组一组的名值对结构，一个声明块中有多个声明用；隔开

声明的样式名和样式值之间使用：来连接

5.块元素 div就是一个块元素，独占一行无论内容有多少 p h1 h2 h3…

div这个标签没有任何语义，纯粹的块元素，不会被里面的元素设置任何默认样式，主要用于给页面布局

6.span 是一个内联元素（行内元素），只占自身大小的

常见内联元素： a img iframe span

span 也没有任何语义，用来选中专门的文字，为文字来设置样式

一般情况下只使用块元素去包含内联元素，而不会用内联包含块

• a元素可以包含任意元素，除了它本身
• p元素不可以包含任何块元素

7.类选择器：通过元素的class属性选中一组元素 class在标签中

style中用 . +类名选中

选择器分组：通过选择器同时选中多个选择器对应的元素

语法： 选择器1，选择器2，…{}

通配选择器

复合选择器 选择器1选择器2…{}

·#· id选择器 .(点)：类选择器

后代元素选择器： 祖先元素（空格）后代元素{}

子元素选择为其：父元素> 子元素{}（IE6以下不支持子元素选择器）

8.伪类：专门用来表示元素的一种特殊的状态 比如：访问过的超链接，普通的超链接，获取焦点的文本框 ；当我们要为这些特殊状态元素设置样式时使用伪类

浏览器通过历史记录判定是否访问过，由于涉及用户隐私使用visited时只能设置字体颜色

正常链接 a：link

访问过的连接a：visited

鼠标滑过的连接 a:hover 表示鼠标

超链接被点击 a：active

获取焦点 -：focus

指定元素前 -：before

指定元素后 -：after

选中的元素 -::selection（两个冒号 注意）

hover和active也可以给其他元素设置

9.伪元素：first-letter first-line

通过css添加的字符无法选中

10.属性选择器：【属性名=属性值】

使用[] p[title]{} p[title=hello]{}

p[title^=“ab”]{} 属性名以ab开头

p[title$=“c”]{} 属性名以c为结尾

p[title*=“c”]{}属性名中包含c即可

title属性可以给任何标签指定

day3

1.子元素的伪类： p:first-child p为指定标签 若用*为所有标签

last-child nth-child(num):参数选择指定位置 even参数选择偶数 odd选择奇数

first-of-type last-of-type nth-of-type:type指的是当前类型的子元素的排列

2.兄弟元素选择器： 语法：前一个+后一个 选中一个元素后面紧挨着的指定的兄弟元素

前一个~后一个 选中后面所有的兄弟元素

3.否定伪类：从已选中的元素中剔除某些元素 not(.hello)

4.样式的继承 继承 透过 transparent

5.选择器的优先级：

• 内联（行列）样式 优先级1000
• id选择器：100
• 类和伪类：10
• 元素选择器：1
• 通配*，优先级0
• 继承的样式，没有优先级

*** 选择器中包含多种选择器的时候要将多种选择器的优先级相加然后再比较***

选择器优先级计算不会超过他的最大的数量级，如果优先级一样选择靠后的样式

样式的最后添加一个！important，该样式获得一个最高的优先级：
.p{
background-color: greenyellow！important;
}

6.伪类顺序 link visited hover active

文本标签

1.em和strong表示一个强调的内容

em主要表示语气上的强调，浏览器中默认为斜体

strong表示强调的内容，语义更强烈，默认用粗体

单纯改变样式，和语义无关：i标签 斜体； b标签 加粗；

small cite（表示参考的内容） q标签：表示引用； blockquote：长引用（块级引用）

sup标签：上标 ； sub标签：下标

del标签：删除的内容； ins标签：下划线 ；pre标签：预格式标签，保留格式，不会忽略多个空格（无语义） ； code标签：语义标签表示代码，与pre一起使用

列表标签

• 无序列表
• 有序列表
• 定义列表

无序列表：ul创建无序列表，li在ul中创建一个一个的列表项 一个li就是一个列表项

通过ul中的type属性修改项目符号 disc; square; circle ul，li都是块元素

修改默认样式，css的style标签中

有序列表；ol 使用有序的符号作为项目符号 type属性指定序号的类型

type可选：1，a/A, i/I 【可以有序列表无序列表互相嵌套】

定义列表：dl来创建，两个子标签

:定义的内容

对定义内容的描述

文本格式

1.1em=1font-size

2.rgb：0~255（，，） 或者使用16进制 #ffffff 两位重复的颜色，可以简写

3.字体：设置文字的大小，浏览器中默认16px，font-size并不是文字本身的大小，是格的高度，用font-family指定文字的字体，如果浏览器不支持仍使用默认，使用多个字体浏览器优先使用前面的字体，如果前面的没有再尝试下一个

serif：衬线字体

sans-serif：非衬线字体

monospace：等宽字体

cursive：草书字体

fantasy：虚幻字体

4.CSS中通过行高来设置行距： line-height:40px（80%或者是百分数；或者是一个数值，字体大小的相应倍数） 与font-size一起使用

font：A px/B px 字体大小/行高

5. • text-transform设置文本的大小写
   • text-decoration添加文本的修饰【超链接会默认添加下划线】
   • letter-spacing：字间距 ；word-spacing 单词之间的间距
   • text-align：文本对齐方式 left right center justufy(两端对齐)
   • text-indent：设置首行缩进 一般以em作为单位

盒子模型box

1.内容区 内边距(padding) 边框 (border) 外边距(margin)

2.垂直相邻外边距发生重叠，兄弟元素之间的相邻外边距取最大值而不是求和

如果父子元素垂直外边距相邻，子元素的外边距会设置给父元素

两种处理方法

3.通过display样式改变元素的类型

inline：将一个元素作为内联元素显示

block：将一个元素设置为块元素显示

inline-block：转换为行内块元素 可以设置宽高又独占一行

visibility： visible默认 hidden 元素不会显示但仍占据位置

4.overflow 属性：可选 visible hidden scroll auto

文档流

文档流在网页的最顶层，表示的页面中的位置，创建的元素默认在文档流中

文档在文档流中的特点

• 块元素：独占一行，自上向下【默认宽度 默认高度】
• 内联元素：只占自身大小，默认从左向右排列【宽度 高度】

inline-block

1.float属性使元素浮动，脱离文档流：可选 none left right

day5

1.高度塌陷（没有深入了解）

2.导航条设计

3.PS的简单认识

4.div.box$*3 建立三个div元素 box123

5.相对定位 绝对定位 固定定位 元素的position属性

6.开启定位的元素使用z-index修改元素的层级

7.opacity可以用来设置元素背景的透明 需要一个0-1之间的值 0表示完全看不见 1完全不透明 opacity在IE8及以下不支持 需要使用filter属性 alpha（opacity=50）

8.设置背景图片 background-img=url（相对路径）

background-repeat属性 repeat no-repeat repeat-x repeat-y 设置背景图片是否重复

背景图片默认贴着页面左上角显示 background-position属性调整:top left right bottom center 或者直接指定偏移量 -px -px 第一个是水平偏移第二个是垂直

background-attachment属性设置背景是否固定 fixed scroll

background简写属性 不写表示默认属性

9.图片整合技术：多个图片整合成一个图片同时加载，解决闪烁问题

day6

表格

1.table 标签 使用tr表示表格的一行 td创建一个单元格

table是一个块元素

2.colspan横向的合并单元格 D3

rowspan纵向合并单元格

3.table的属性 width margin border border-spacing border-collapse

设置的合并后border-spacing自动失效

4,th

5.长表格 ： 表头 表格的主体 表格底部 都是table的子标签

​ 需要直接写到table中，tr写在这些标签中

如果没有tbody，浏览器自动添加tbody并把tr放在其中

6.完善clearfix

表单

1.网页中个人信息通过表单提交给服务器 比如搜索框

2.使用form 标签创建一个表单 必须指定一个action属性，指向一个服务器

提交表单时会提交到action属性对应的地址

3.使用input创建一文本框，type属性是text，如果希望表单中的数据提交到服务器中，还必须给表单提供一个那么属性，name表示提交内容的名字

用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器

url地址？查询字符串

格式： 属性名=属性值

4.密码框 不能用type的text属性，明文 修改为type=“password”

5.单选按钮 type属性：radio name属性相同的是同一组按钮 使用label标签可以选中文字

value属性必须设置

6.多选框 type属性CheckBox

7.下拉列表 使用select标签 option作为子标签

如果希望在单选按钮或者是多选框中指定默认选中的选项，可以在希望选中的选项中添加checked=“checked”属性 selected=“selected”

select添加一个multiple=“multiple”，下拉列表变为一个多选的下拉列表

创建optgroup分组 添加label标签进行分组

8.type=“reset” 创建重置按钮 ，点击后表单内容恢复为默认值

9.除了使用input 也可以使用button标签来创建按钮（成对出现，可以插入图片）

10.在表单中使用fieldset为表单项进行分组，将表单项中的同一组放到一个fieldset中，在fieldset中使用legend子标签，来指定组名

框架集

框架集与内联框架的作用相似，都是用在一个页面中引入其他的外部页面，框架集可以引用多个页面，内联框架只能引入一个，h5标准中，推荐使用框架集

使用frameset来创建一个框架集，注意frameset和body不能出现在同一个页面中

frameset中使用frame子标签来指定要引入的页面

属性：rows cols 指定框架集中的页面的排列，这两个属性frameset必须指定一个

frameset中也能嵌套frameset

frameset和iframe一样，里面的内容都不会被搜索引擎检索。

使用框架集意味着网页中不能有自己的内容，只能引入其他的页面，每单独加载一个界面，浏览器都需要重新发送一次请求，引入几个界面就要发送几次请求

Hack 解决兼容性

CSS参考手册

CSS Hack不到万不得已的情况尽量不要使用

Hack有风险，使用需谨慎

1.条件Hack

<IE6中png的修复>

使用JavaScript来解决该问题，向页面中引入一个外部的JavaScript文件

CSS Hack实际上指一个特殊代码，这段代码只在特殊的浏览器中执行，而其他浏览器不能识别

<!--[if IE 6]
 <p>为了您和家人的健康，请远离IE6！！>
</p>
<![endif]-->

2.属性Hack

页面练习

PS：MarkDown的精髓还没有仔细体会，仍在学习中。当前水平大体是将他作为普通文本格式的替代品，敬请谅解。

联系方式：[email protected]