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)