<笔记>Web01(HTML+CSS)

div和span

特点

理解成一个盒子，用来装内容，span的前后不换行，而div前后会自动换行

图像标签

属性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本
title	文本	提示文本
wigth/height/border	像素	只修改宽度和高度其一，使其等比例缩放

相对路径和绝对路径

相对路径

以此文件所在位置开始

绝对路径

通常是从盘符开始的文件

超链接

属性

属性	作用
href	url地址（必须属性）
target	用于指定链接打开的方式,其中_self为默认值,_blank新窗口

链接分类

1.外部链接
2.内部链接
3.空连接
4.下载链接
5.网页元素链接:文本，图像，表格，音频，都可以添加超链接。
6.锚点链接:出发点（超链接属性）——href=“#地点” 目的地（属性）——id="地点"

注释和特殊字符

注释标签

特殊字符

特殊字符	描述	字符的代码
<	小于号	<
>	大于号	>
	空格符
其他不常用的字符平时需要的时候进行查阅即可

表格

表格的基本使用

三组标签组合里面互相嵌套

表头单元格标签

表示html的表格表头的部分,里面的内容会加粗居并且中显示。
通常代替

html里table常用的属性（不提倡，后面用css代替）

属性名	属性值	描述
align	left、center、right	对齐方式
border	px 默认1	边界
cellpadding	px 默认2	内容和边之间的空白
cellspacing	px 默认1	单元格之间线距离的空白
width/height	px or %	规定表格的宽度
margin	auto	css属性值可以用来居中

合并单元格

合并单元格的方式

1.跨行合并：rowspan="合并单元格的个数"
2.跨列合并 colspan="合并单元格的个数"
实际上并不是合并，而是将这个单元格的row/col变为K单元格的长度，从而实现了合并单元格,所以在合并的时候，要记得删除对应的单元格。

使用方法

跨行:上面的单元格是目标单元格
跨列:左侧的单元格是目标单元格

找到开始的单元格
删除多余的单元格

table的代码习惯

1.用thead 和 tbody 对结构进行划分会更有层次

列表

标签名	定义	说明
	无序标签	里面只能有li 使用较多 li 里面可以放任何的标签
	有序列表	里面只能有li 使用相对较少 li的性质同上
	自定义列表	里面只能包含dt和dd dt和dd里面可以放任何的标签

表单

组成

由表单域，表单控件，提示信息组成。

表单域

定义，实现用户的信息收集和传递
会把它范围内的表单元素提交给服务器

表单域属性

属性	属性值	作用
action	url地址	用于接收并且处理表单数据的服务器程序的url地址
method	get（get不安全）/post	表单数据的提交方式
name	名称	用于指定表单名称，以区分同一页面中的多个表单域

表单元素/控件

属性	属性值	描述
type	见下表	输入的形式
name	自定义	input元素的名称
value	自定义	元素值
checked	checked	首次加载时被选中
maxlength	正整数	规定输入字段中的字符最大长度

type的属性值

注意事项

1、name和value 是属性值，主要给后端人员使用
2、name是表单元素的名字，单选按钮和复选框要有相同的name值(重点

表单元素

功能

常常和表单元素一起使用，指定表单元素，当点击标签的时候，会将光标自动转到表单元素里。

语法

for属性对应相关表单属性的id值，

属性

selected

当selected="selected" 这为默认选中项

表单元素</h2> <h3 id="语法规范">语法规范</h3> <pre><code><textarea rows="3" cols=4">文本内容 rows cols 用来控制大小，但是实际开发之中一般用css来设置
接下来是CSS的学习

CSS最大价值

由HTML是专注做结构的呈现，样式交给CSS,实现结构和样式的分离。

CSS代码风格

样式格式风格

展开式的风格更直观更美观

样式大小写风格

用小写字母书写样式

空格规范

1.在冒号后面保留一个空格
2.在选择器之后也保留一个空格

CSS基础选择器

标签选择器

类选择器

非常常用

类选择器的特殊使用（重点）

语法

实际开发之中，可以使用多类名进行开发。
1、节省css代码，统一修改很方便
2、封装性比较强，每个样式都有对应的功能

id选择器

id选择器特点

1、优先级更强
2、样式通过#来定义，结构是用id调用的
3、只能调用一次，针对性比较强

通配符选择器

语法

*{
   color: red;
}

这个*号，把所有的标签都改为了红色

只有特殊情况使用

*{
   margin: 0;
   padding: 0;
}

基础选择器	作用	特点	使用情况
标签选择器	选所有相同的标签	不能差异化选择	较多
类选择	可选出1个或者多个标签	可以根据需求	非常多
id选择器	一次选择一个	只能出现一次	一般和js搭配使用
通配符

CSS文本基础

字体的复合属性

字体的属性可以把文字样式一句话写完，代码如下

font: font-style font-weight font-size/line-height font-family;
font: italic 700 16px "微软雅黑"

总结

属性	说明	属性值
font-family	字体
font-size	字号	通常用px 要记得跟上单位
font-weight	字体粗细	normal/bold(粗体)/bolder/lighter/100~900
font-style	文字样式	normal(可以让斜体的标签不倾斜 )/ italic (斜体)
font	复合属性	每个属性不能随意调换位置
color	颜色	rgb 或者英文
font-align	对齐方式	center/left/right
text-decotation		none（可以用来取消a的下划线）/underline/overline/line-through（删除）

前端笔记