<笔记>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( 删除 ) |