<笔记>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="地点"
注释和特殊字符
注释标签
特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| < | 小于号 | < |
| > | 大于号 | > |
| 空格符 | | |
| 其他不常用的字符平时需要的时候进行查阅即可 |
表格
表格的基本使用
三组标签组合里面互相嵌套
<talble> <tr> <td>
表头单元格标签
表示html的表格表头的部分,里面的内容会加粗居并且中显示。
<th>通常代替<td>
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 对结构进行划分会更有层次
列表
| 标签名 | 定义 | 说明 |
|---|---|---|
| <ul> | 无序标签 | 里面只能有li 使用较多 li 里面可以放任何的标签 |
| <ol> | 有序列表 | 里面只能有li 使用相对较少 li的性质同上 |
| <dl> | 自定义列表 | 里面只能包含dt和dd dt和dd里面可以放任何的标签 |
表单
组成
由表单域，表单控件，提示信息 组成。
<form>表单域
<form>定义，实现用户的信息收集和传递
<form> 会把它范围内的表单元素提交给服务器
表单域属性
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于接收并且处理表单数据的服务器程序的url地址 |
| method | get（get不安全）/post | 表单数据的提交方式 |
| name | 名称 | 用于指定表单名称，以区分同一页面中的多个表单域 |
<input>表单元素/控件
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | 见下表 | 输入的形式 |
| name | 自定义 | input元素的名称 |
| value | 自定义 | 元素值 |
| checked | checked | 首次加载时被选中 |
| maxlength | 正整数 | 规定输入字段中的字符最大长度 |
type的属性值
注意事项
1、name和value 是属性值，主要给后端人员使用
2、name是表单元素的名字，单选按钮和复选框要有相同的name值(重点
<lable>表单元素
功能
常常和表单元素一起使用，指定表单元素，当点击<lable>标签的时候，会将光标自动转到表单元素里。
语法
<lable for=""></lable>
for属性对应相关表单属性的id值，
<select>表单元素
语法规范（如下面代码）
1、双标签
2、selete之中至少包含一对option
<select>
<option>option</option>
<option>火星</option>
<option selected="selected">月球</option>
</select>
属性
selected
当selected="selected" 这为默认选中项
<textarea>表单元素
语法规范
<textarea rows="3" cols=4">文本内容</textarea>
rows cols 用来控制大小，但是实际开发之中一般用css来设置
接下来是CSS的学习
CSS最大价值
由HTML是专注做结构的呈现，样式交给CSS,实现结构和样式的分离。
CSS代码风格
样式格式风格
展开式的风格更直观更美观
样式大小写风格
用小写字母书写样式
空格规范
1.在冒号后面保留一个空格
2.在选择器之后也保留一个空格
CSS基础选择器
标签选择器
类选择器
非常常用
类选择器的特殊使用（重点）
语法
<p class ="div1 div2">
实际开发之中，可以使用多类名进行开发。
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(可以让斜体的标签不倾斜<i> <em>)/ italic (斜体) |
| font | 复合属性 | 每个属性不能随意调换位置 |
| color | 颜色 | rgb 或者 英文 |
| font-align | 对齐方式 | center/left/right |
| text-decotation | none（可以用来取消a的下划线）/underline/overline/line-through（ 删除 ） |
浙公网安备 33010602011771号