HTML和CSS
HTML
html:超文本标记语言
注释：<!--内容-->
标签：分为单标签|自闭和标签
双标签|闭合标签
块标签：独占一行|多行
可设置宽高属性，可以嵌套其他块元素，行内元素，普通文本
行内标签：：可以与其他元素一行显示
只能嵌套其他行内元素|文本
属性：标签中添加属性，属性前添加空格隔开
属性名="属性值"，属性值使用"|'号标识
作用：完善标签
<!DOCTYPE HTML>:定义在html页面的首行，告知html的版本
<meta charset="">:告知浏览器使用什么字符编码格式进行解析
<title></title>:head中唯一一个能被用户看到的内容，意义为：html的标题
<body></body>:标签对中定义的内容是给用户看的
常用标签：
a标签：超链接标签
特点：1、自带下划线，2、未访问，字体为蓝色，3、以访问，字体为紫色
属性： href：定义链接地址 地址可以为绝对地址和相对地址；
target:打开方式，_blank新页面打开，_self本页面打开
title：鼠标悬停，显示提示字
锚点链接：a标签的href属性值为：#+定点id属性的值
p标签：段落标签
特点：上下有留白，是个块元 素
div标签：块标签
属性：align，对齐属性（left，center，right）
span标签：便于为元素提供样式
h1~h6标签：段落标签
br标签：换行
hl标签：水平线
img标签：图像标签
属性：src,图像地址
border：边框
title：鼠标悬停，显示的提示字
路径：
进入某个路径的内部/
返回上层路径../
列表：
无序列表：
<ul>
<li></li>
</ul>
属性：
type：更换列表项的标记
有序列表
<ol>
<li></li>
</ol>
表格：
table：定义表格
tr：定义行
th：定义表格头单元格
td：定义表格单元格
属性：
border：边框
bordercolor：边框颜色
bgcolor：背景颜色
align：对齐方式
width：宽
height：高
style="border-collapse:collapse":双线变单线
表单
form
作用：收集用户信息
表单元素：定义在form标签中的元素
大部分的表单元素使用input标签定义，type属性不同的值代表不同的表单标签
属性：
name定义表单的名字
action表单提交数据的位置
method：提交方式
get数据拼接在地址后面
post数据在请求头中
enctype 存在文件上传，表单的enctype属性值修改为multipart/form-data
textarea：多行文本域
type:属性值为：
text 普通文本框
password 密码
radio 单选框
一组内容，只能选其一，name属性要一致
checkbox 多选框
file 上传文件 修改enctype的值
value：默认值
fieldset：文本域
下拉菜单：
<select name="" id="">
<option value="" selected></option>：定义下拉选项 selected默认选中
</select>
placeholder：文框中提示字
hidden 隐藏框
submin 提交按钮
button：按钮，结合js使用
type属性：
submin，提交 button，按钮 reset，重置
常用属性：
checked：单选框 默认选中
selected：下拉菜默认选中
autofocus：自动聚焦
placeholder：文框中提示字
required：必填属性
readonly：只读，不能修改
disabled：禁用，不能修改不能提交
CSS
作用：美化网页
使用语法：
1、选择器：选中元素
基础选择器：
元素选择器：根据元素的标签名
属性选择器：
伪类选择器:
伪元素选择器：
2、css使用语法
选择器{
样式
}
3、使用方式
1）、行内样式表：
在行内部使用，定义一个style属性，属性中定义样式，作用只在当前行
2）、内部样式表
在html文档中head定义style标签对中，定义样式
3）、外部样式表
在html外部单独定义一个css文件，在文件中定义样式，那个html需使用，使用link调用
优先级：离元素近
基础选择器:
元素选择器: 根据元素的标签名选中一个或一组元素
.类选择器: 根据元素的class属性的值,选中一个或一组元素
一个html页面中class属性的值可重复,可以有多个
#id选择器: 页面中id属性值不能重复,定义唯一的一个
*通配符 : 选中页面中所有的元素
基础选择器优先级: id>class>元素选择器>通配符
后代选择器: 父级选择器 子集选择器{样式...}
某个元素的某些子元素
群组选择器: 通过,连接多个选择器,选中他们能够匹配到的所有元素
常用样式:
背景:
背景颜色 background-color
背景图片 background-image
背景是否重复 background-repeat
默认平铺
背景图片的大小background-size
背景图片的位置
background-position
复合属性: background:颜色 图片 重复 位置;
个数,顺序可以随意改变
尺寸:
width
height
单位都是像素值
颜色:
背景颜色
字体颜色
颜色的英文单词 :red..
颜色十六进制
颜色三原色 rgb
rgba a->透明度 0完全透明 1完全不透明
opacity :元素的透明度
元素还是占文档流中的位置
div
样式：
文本水平对其方式 text-align: center
字体加粗font-weight: bolder
字体倾斜font-style: italic;
p
样式：
首行缩进text-indent: 2em
a标签去除下划线text-decoration: none
ul标签：去除样式：list-style: none;
盒子模型
内容+内边距+ 变框外边距
能看到的元素的大小:内容+内边距+ 变框
内容:
宽高都是内容的大小
内边距:
背景的样式会默认延伸到内边距上
设置值(内边距+外边距的方式)
一个值: 四边都是
两个值: 上下 左右
三个值: 上 右 下 左边与右边一致
四个值: 上 右 下 左
padding-left|padding-right|padding-top|padding-bottom
变框:
变框三要素: 宽度 样式 颜色;
元素四边相同的样式: border: 10px solid firebrick;
元素四边不同的样式: border-left:10px solid firebrick;
外边距:
元素距离周围其他元素的之间的距离
设置值的方式与内边距一样
块元素上下的外边距会合并
盒子模型的使用:根据具体的需求分析:变框 宽高 变框和内容之间(内边距) 变框和其他元素之间的距离(外边距) 元素和元素之间的距离没有变框|背景的情况(内外边距都可以)
