爱站程序员基地HTML与CSS总结
HTML总结
HTML：超文本标记语言( Hyper Text Markup Language )。
1.HTML不是一种编程语言,而是一种标记语言，描述网页的语言。
2.HTML使用标签描述网页中图片、文本、音乐、视频、超链接等。
HTML基本结构标签
- HTML标签
<html> </html>
- 文档头部
<head> </head>
- 文档的标题
<title> </title>
- 文档的主体
<body> </body>
文档类型声明标签
<!DOCTYPE>
lang语言种类：zh-CN中文网页，en英文网页
<html lang = \"zn-CN\">
字符集：UTF-8万国码
<mata charset:\"UTF-8\"/>
HTML常用标签
1.标题标签
<h1>
——
<h6>
做标题作用，并依据重要性递减
2. 段落标签与换行
-
<p> </p>
分段
-
<br/>
换行，为单标签
3.
<div>
与
<span>
标签
<div>
表示分割、分区 （ 1行只能放一个，独占一行）
<span>
表示跨度、跨距
4.图像标签
- 图像标签
<img src = \"文件名\"/>
sec——图片路径
alt——图片不显示，替换文字
title——提示文本
width——图像宽度
height——图像高度
border——图像边框粗细 - 路径
相对路径：
同一级路径<img src = \"img.jpg\"/>
下一级路径
<img src = \"images/img.jpg\"/>
上一级路径
<img src = \"...\\img.jpg\"/>
绝对路径：
<img src = \"http://www.~/img.jpg\"/>
<img src = \"C:\\Users\\~\"/>
5.超链接标签
<a href = \"跳转目标\" targrt = \"目标窗口弹出方式\"> </a>
6.特殊字符
-  ；—— 空格
- <；—— 小于号
- >；—— 大于号
7.表格
<table><tr><td> ~ </td></tr></table>
表头单元格：
<th>
</th>
表格属性：
- align = “left/center/right”（位置）
- border = \”1/ \”（边框）
- cellpadding（文字与边框的距离）
- cellspacing（单元表格间的空隙）
- width、height
8.列表标签
无序列表：
<ul><li> ~ </li></ul>
有序列表：
<ol><li> ~ </li></ol>
自定义列表：
<dl><dt> ~ </dt><dd> ~ </dd></dl>
9.表单标签
<from>
- input输入表
text——输入文本
password——密码字段
radio——单选摁钮
checkbox——多选
submit——提交
reset——重置
button——按钮
file——文件上传 - lable用于绑定一个表单元素
- select下拉表
<select><option> ~ </option></select>
CSS总结
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
选择器
-
基础选择器
（1）标签选择器
（2）类选择器—— .类（class）
（3）id选择器—— #id
（4）通配选择器—— * -
复合选择器
（1）后代选择器
（2）子代选择器
（3）并集选择器
（4）伪类选择器——link(未被访问），visited(已访问），hover(鼠标位于方改变，active(鼠标按下未弹起）
字体属性
- 字体系列 font-family
- 字体大小 font-size
- 字体加粗 font-weight
- 文字样式 font-style
文本属性
- 文本颜色 color
- 对齐文本 text-align（center/reight/left/justify)
- 文本缩进 text-indent
- 装饰文本 text-decoration（none/underline/overline/line-through)
- 行间距 line-height
CSS元素
- 块元素——可设置高度、宽度、内外边距
- 行内元素——一行可显示多个，不可设置高度、宽度、内外边距
- 行内块元素——一行可显示多个，可设置高度、宽度、内外边距
转化为块元素：display:block;
转化为行内元素：display:inline;
转化为行内块元素：display:inline-block;
背景
- 背景颜色 backfround-color
- 背景图片 background-image
- 背景平铺 background-repeat
- 背景图片位置 background-position
- 背景图像固定 background-attachment
- 复合写法 background：（无固定顺序）
盒子模型
1.边框
- border-width —— 边框粗细
- border-style —— 边框样式 （solid实线/dash虚线/dotted电线）
- border-color —— 边框颜色
- 复合写法：border：（无固定顺序）
2.内边距
- padding：5px；（上下左右内边距5px）
- padding：5px 10px；（上下内边距5px，左右内边距10px）
- padding：5px 10px 20px；（上内边距5px，左右内边距10px，下内边距20px）
- padding：5px 10px 20px 30px；（上内边距5px，右内边距10px，下内边距20px，左内边距30px）
3.外边距（margin）4.盒子大小
- box-size：content-box——默认值（高与宽为内容区大小）
- box-size：border-box——(高与宽为可见框大小）
5.圆角边框（border-radius:length;)6.盒子阴影
- box-shadow：h-shadow——必写，水平阴影位置，允许负值
- box-shadow：v-shadow——必写，垂直阴影位置，允许负值
- box-shadow：blur——可选，模糊距离
- box-shadow：spread——可选，阴影尺寸
- box-shadow：color——可选，阴影颜色
- box-shadow：inset——可选，将外部阴影改为内部阴影
7.文字阴影（text-shadow）
