web前端 html css

web前端学习报告

一、HTML划重点

1.定义

1.1 html

HTML全称超文本标记语言，通过设计一系列的标签，用于创建网页，是网页设计的基础。由于计算机不能识别网页的文本信息，HTML横空出世，我们可以利用HTML告诉计算机网页的基本内容。

文件的后缀是html html中的标签常用尖括号包裹

1.2 五大浏览器

IE（trident) 谷歌(blink) 火狐(gecko) Safari(webkit) 欧朋(blink)

2.基础构架

 

3.标签

3.1标题标签

h1 h2 h3 h4 h5 h6

将文字加大加粗，从1-6依次变小

3.2段落标签

p

设置一个段落

3.3换行标签

br 单标签

3.3水平线标签

hr 单标签

3.4文本效果标签

b strong 加粗

u ins 下划线

i em 斜体

s del 删除线

3.5图片标签

img

src 显示图像的路径

 

alt 如果图像无法加载，会显示引号中的文字

路径

1.绝对路径

从磁盘开始一级一级标识的路径

2.相对路径

（1）同级

在同一文件夹中，直接写目标图像的名字

（2）下级

图像所在文件夹，与文本在同一文件夹中，直接写文件夹名/目标文件名字

（3）建立一个css文件引用

代码示例如下

link标签要写在head标签内

 

rel表示关联的意思

href表示路径，规则与上述路径相同

3.6列表标签

无序列表 ul

有序列表 al

自定义列表 dl

li标签 表示列表中的每一项 被ul al 包裹

dt标签 表示自定义列表的主题 dd标签 表示自定义列表每一项的内容

3.7表格

table 表格的整体标签

caption 表格的大标题

thead 表格的头部，包裹th,会使th内容变粗 th表格的小标题

tbody 表格的主题，包裹td td表格的每个单元格

tfoot 表格的地步，包裹td

tr 表格的行，包裹th、td

代码如下

 

表格属性

border 边框

width 表格宽度

height 表格高度

align 表格水平位置 后接 left right center

cellpadding 内边距

cellspacing 外边距

background 背景

rowspan 合并行

colspan 合并列

3.8表单

input text 文本框

input password 密码框

input radio 单选框

input checkbox 多选框

input file 提交文件

input submit 提交按钮

input reset 重置按钮

input button 空按钮

代码如下

 

 

 

button submit 提交按钮

button reset 重置按钮

button button 普通按钮

代码如下

 

 select 选择标签

option 每一项

属性 selected 默认选择

代码1如下

 

textarea 文本域标签

属性 cols 表示文本域的宽度 rows表示文本域的高

3.9链接标签

a

属性 href 表示目标链接的路径

target 表示跳转目标链接的打开方式 self 从当前窗口打开 blank 在新窗口打开

3.10labal标签

<label for=""></label> 通过“for=“把label和其等于的id值的标签联系起来

3.11块标签

div 盒子标签 属性很多

span 段落标签

4.网页基本搭建

html：5 + 回车键

二、css划重点

1.引入

1.内嵌式 head 的 style 中

2.外联式 单独的css文件通过link标签引入

3.行内式 写在标签的style属性中

2.选择器

2.1ID选择器

#id属性值{属性名：属性值；}

通过id属性值找到页面中带有id属性值的标签，对它进行设置

id属性值在页面中是唯一的，不能重复，一个标签上只能有一个id属性值，所以一个选择器只能选中一个标签‘

2.2类选择器

.class属性值{属性名：属性值；}

通过类选择器找到页面中所有带class属性值类名的标签，对它们进行设置

类属性值不是唯一的，所有标签都有class属性，通过class属性值确定所要设置的标签；类名由数字、字母、下划线构成但不能以数字开头；当设计的样式相同时，可以写多个属性值，用空格隔开

2.3标签选择器

标签名{属性名：属性值；}

通过标签名，找到页面所有这类标签，对它们进行设置

2.4通配符选择器

*{属性名：属性值；}

找到页面中所有标签，对它们设置

2.5伪类选择器

1.:link 链接没有被访问前的样式

2.:visited 链接被访问后的样式

3.:hover 鼠标停在链接元素上产生的样式

4.:active 点击链接元素时产生的样式

5.:focus 用于链接元素成为焦点时产生的样式

3.组合选择器

3.1后代选择器

选择器用空格隔开 .父 .子

3.2子代选择器

选择器之间通过>隔开 .父>.子

3.3并集选择器

选择器之间通过,隔开 div1,div2

3.4交集选择器

选择器之间紧挨着 div.class1

4.字体

1.font-size 字体大小

2.font-weight 字体粗细

3.font-style 字体样式 italic倾斜

4.font-family 字体家族

5.font 顺序：style weight size family

5.文本

1.text-indent 文本缩进

2.text-align 对齐方式

3.text-decoration 文本修饰 underline 下划线 overline 上划线 none 无装饰线

4.line-height 文本行高

6.背景

1.background-color 背景颜色

2.background-image 背景图片

3.background-repeat 背景平铺 repeat-x水平平铺 repeat-y垂直平铺 no-repeat不平铺

4.background-position 背景位置

7.盒子模型

代码举例

 

 7.1宽高

width 宽

height 高

7.2边框

1.boder-width 边框粗细

2.boder-style 边框样式 solid实线 dashed虚线 dotted点线

3.boder-color 边框颜色

4.连写 粗细 样式 颜色

5.单方向 boder-方位名词

7.3边距

padding-方位名词 内边距

margin-方位名词 外边距

8.浮动

float

float:left 左浮动

float:right 右浮动

8.1必要性

让垂直分布的盒子实现水平排布

9.定位

position：

9.1必要性

1.解决盒子与盒子之间的层叠问题

定位后的盒子层级最高

2.可以让盒子固定在屏幕某一位置

9.2定位方式

static 静态定位 不能通过方位属性移动

relative 相对定位 相对与自己原来的位置

obsolute 绝对定位 相对与最近的且有定位的元素的位置移动

fixed 固定定位 相对于浏览器可视区域