前端学习之路 HTML CSS基础 笔记 1
HTML基础 笔记
Author : 朱盟 |吃火星的宝宝
TIME: 2019/5/28 学习的第二天
行业介绍 :杭州 ，北京 Rect 框架
HTML
HTML 基础介绍
html //超文本标记语言 （Hyper Text MarkUp Language）
// 文档类型
//编码格式 utf-8 /gb2312
body //显示给用户
语法规则 ：
常规标记/双标记
<标记 属性="属性值">
单标记
<标记 属性="属性值"/>
标签
H [1-6] 标题
H1 最大一级标题
H6 最小
1 自带加粗
2 每个标题独占一行
3 SEO ，搜索引擎可以搜索到，可以起到索引到[关键字]
4 ps: H1 不要太多
H1 最好 LOGO
5 存在间距
P 段落
在段落开头空格不识别
在段落中空格只识别一个
// 空格转义字符 标识空格
空格值（占位大小）不确定
PS：
根据字号的大小和浏览器的解析不同会有所改变；
不建议使用
br 强制换行
hr 分割线
自带效果
border-width:1px;
//边框
//带间距
strong 强调（效果加粗 _强壮）| B 加粗
strong : 有检索，关键字强调 ，加粗效果。
B ：效果加粗
EM | I 倾斜
EM :强调的作用 ，效果是倾斜。
I :效果是倾斜 。
U 下划线 !H5
DEL 删除线
S 删除线 !H5
SUB 下标
SUP 上标
列表 UL (无序) |OL（有序）|dl (自定义)
无序列表 ul
子项 li
自带圆点符号 ( iE 圆点更大)
不同的浏览器的 字体不同
各个浏览器的默认上 列表与文字间距不同
有序列表 ol
子项 li
属性 type=“类型” start=“起始值”
自带（1、2、…）
各个浏览器的默认上 列表与文字间距不同
###自定义列表 dl
名词、img
解释 //可多个
解释
自带间距
IMG 图片
属性：
src: 路径
width 宽度
height 高度
alt:图片的替换文本 [key 索引关键字]
title: 标题 [key 索引关键字]
ps：只设置宽或者高一个属性时 等比缩放。
不设置默认图片大小。
A 链接
属性 ：
href：路径[绝对|相对]
target: 打开新页面的方式[ _self (自己本页面打开)| _blank(新页面打开)]
title: 标题
DIV 容器 ￥
特点：
独占一行，没有默认属性
块状元素
span 容器（文本节点）
特点： 不独占一行，没有默认属性；
内联元素
Table 表格 显示数据的最佳标签
表格可以做布局（以前）
现在 用来显示数据
组成项：
行，列
//表格
//行
//主体
//行
// 尾部 只能有一个
table 属性
colspan 跨列合并
rowsoan 跨行合并
ps : 合并过后删除多的单元格
colspan 删除同行td
rowsoan 删除要合并行的td
width： 表格的宽
height：表格的高
border： 表格的边框
bordercolor： 边框颜色
bgcolor：背景的颜色
cellspacing:表格之间的间距
align :水平对齐方式
cellpadding:单元格和文字间距
ps: 表格会根据内容计算宽高
tbody 在浏览器生成时会单独加上
如果自己加上Tbody在进行分组时，合并行时可能会错的
tr/td 属性
align :水平对齐方式
valign： 垂直对齐[top ,middle,baselign(基线对齐 和内容相关),bottom ]
表单元素 ￥[important!]重要
用于收集用户信息
form 表单
属性 :
name : 表单名
method :[post| get]
action: 提交地址
[￥important]
GET ：
从指定的资源请求数据;
用户在地址栏可见
不能提交大量数据
GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据
post:GET - 向指定的资源提交要被处理的数据;
与get 相反
POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求
input
不会独占一行
属性
placeholder 预设值 IE8 及以前 不支持
使用Type 属性进行设置
type:[
hinde 隐藏的数据项 |
text 文本框 |
radio单选框 ps:长的是单选框，但是都可以选中 |
checkbox 复选框 |
submit 提交按钮 |
image {src=“按钮图片”} 图片提交按钮 |
file 文件上传 |
button 跳转按钮 不提交数据 |
reset 重置按钮 |
]
name 属行进行组的区分
enabled 是否禁用[“enabled”]
value: 值
fieldset 表单字段集
对表单进行分组
自带边框
fieldset 与 legend字段集标题 标签搭配使用
legend 标签
表单的字段集的标题
lable 标签
for 属相用于关联输入框的ID
select 选择框
button 按钮
textarea 文本域
属性
clos: 多少列
rows: 多少行
大小就和文字大小相关了
一般不用，应该用Width 和 height 来设置文本域的大小
子项: option
ps: 作业：
做合并表格
表单 并用表单字段集
作业总结：
应该分析大框架，然后从大概到具体
编写，而 从具体到大概把握不好。
Tip:
转义字符
>右尖括号
<左尖括号
Css
cascading Style sheets
作用:修饰HTML 的计算机语言
语法:
内部样式表
Tip: 分号 都加上不会忘记哦！
外部样式表
内联样式
作为标签的属性
style=" ";
1 内联作用域最小 其次内部，最大的就是外部。
2 优先级不同
内联样式表优先级高
内部和外部样式表
跟加载的先后（书写的位置）有关。后边的优先级较高。
样式表的导入 存在浏览器兼容性
> ps: 导入样式表先加载结构，再加载样式。最好Link 。
CSS选择器
id 的取名规则:
不能用关键字 如：head、body
元素选择器|类型现择器
标签{
样式…
}
clss选择器
.{
样式…
}
##### id选择器
#id的名字{
样式...
}
#####后代选择器｜包含选择器
选择器1 选择器2{
样式…
}
ps: 选择器1 下的 选择器2的样式；儿子 、孙子 等里面都包含。
层级选择器
选择器1>选择器2{
样式…
}
ps: 只应用选择器一 的选择器二的直接元素，即儿子
tip:
body,ul,li等 默认有间距哦！那怎么去间距了？
通配符选择器
*{
margin:0;
padding:0;
}
- 指 全部元素
伪类选择器
选择器:hover{
color:green;
}
当鼠标滑过时的样式
:link 链接初始状态
:visited 链接访问后的状态
:active 链接激活状态
tip: 有兼容性问题
chrome 会记录
群组选择器
选择器,选择器{
style…
}
学习记录
在需要共同的声明来说使用群组选择器 组合成一个群组样式，优化样式渲染。
选择器的权重
一个元素可以被多个选择器选中
那我们编辑出来的元素到底喜欢穿那个选择器给他的样式了？
权重 4 个数来表示
0000；
权重如下：
ID (0100)>Class=伪类 (0010)>类型选择器（0001）
包含选择器相加计算
包含和子选择器对比时 ： 是按照层次依次按照层次对比；
内联样式权重为 1000