Web网页：
结构 表现 行为
html：标记 语义
  空格
< <小于号
> >大于号
& &号
" 双引号
文本标签
<body>
==============文本标签=============
<h> </h> 标题标签
<br> 换行
<p> </p> 段落
<span> </span> ？？
----可通过css实现----
<sup> </sup> 上注脚
<sub> </sub> 下注脚
<i> </i> 斜体
<b> </b> 加粗
<u> </u> 下划线
<del> </del> 删除线
=============图片==============
<img src="图片路径" alt="图片没显示时出现的内容"title="鼠标悬停时显示内容"> 图片
----样式属性----
width：宽度 px
height：高度 px
==============超链接==============
<a href="要跳转资源的"></a> 超链接
target：目标显示的窗口，默认当前窗口
_blank 在新窗口显示
---可以做锚点---
href=#top 跳转页面顶部
a有默认颜色和下划线
============列表==========
1.无序列表
<ul> 前面有黑点 list-style-trpe:square 把黑点改成方形
<li>嵌套文本或超链接</li>
</ul>
2.有序列表
<ol> 前面有序列号
<li></li>
</ol>
3.自定义列表
<dl>自定义列表
<dt>列表项</dt>
<dd>说明</dd>
</dl>
===========表格=========
<table>
<tr> 行
<th>表头单元格</th> 文本自动加粗居中
<td> 每行的单元格
</td>
</tr>
</table>
----------属性----------
1.width：宽 table td
height： 高 table tr td
2.border：加边框 可=1
-collapse 合并边框线
-top 上边框
-radius 做圆角
-bottom 下边框
3.align：水平方向
valign：垂直方向
=center 居中
=left
=right
4.rowspand: 跨行 =2 向下侵占两行
colspand：跨列 =2 向后侵占两列
5.bgcolor 背景色
6.cellpadding 内容到边框的距离
cellspacing 单元格之间间隙
caption 给表格起名字
=============表单===========
<form action="后台url地址">
method 提交请求方式
默认get：不安全，url直接拼接请求参数
post：相对安全
<input type="">
1.1=text 文本框
1.2=password 密码框
1.3=submit 提交按钮
1.4=checkbox 复选框
1.5=radio 单选按钮 name属性值相同，value不同实现2选1
1.4，1.5 checked 默认选中
1.6=reset 重置按钮
1.7button 普通按钮
属性：name 表示请求参数
value 表示对应参数值
<select name="" id=""> 下拉框
<option value="">下拉框内的值</option>
selected 默认选中
</select>
<button> 注册</button> 按钮
<textarea name="" id="" cols="列" rows="行">文本域</textarea>
</form>
</body>
CSS ：Cascading Style Sheet 层叠样式表
注释 /* */
样式格式
样式名:值
多个样式之间;分割
使用：
1.内联式 在标签内部 style="样式1;样式2;"
2.内部式 <style></style> 一般把style放在head中
使用选择器写样式表
3.外部式 链接使用css html head中通过<link/>引用外部样式文件 (.css) css文件写选择器样式
4.导入式 style 标签中 @import 引入外部样式
优先级：同一个元素同一个样式进行设定
行内样式>内嵌样式>链接样式>导入样式
开发中 主要通用样式css文件+style
选择器：筛选元素
基本选择器
标签选择器：按照标签名选择
标签名{样式表}
类选择器
定义
.类选择器名{样式表}
使用 标签使用class属性 class属性值可以相同
一个标记可以使用多个类选择器 class="selector1 selector2 "
id选择器
定义 #选择器名字{}
使用 id属性 id属性值唯一
其他选择器：
后代（掌握）
兄弟
+:相邻
~:向下兄弟
并集（掌握）
*（掌握）
a的选择器：
a:link{}
a:visited{}
a:hover{鼠标悬停是的样式
}
a:active{}
样式：
基础样式
文字：
1.font-
family :字体 常用字体是微软雅黑 宋体
style：风格 斜体显示
weight：加粗效果 取值 bold bolder
size:字号 px 默认16px
连写 font：
font-style font-weight font-size font-family
2.颜色 ：color 取值：16进制颜色值
文本
3.文本样式
text-
indent：首行缩进 单位em
shadow： 水平方向 垂直方向 [模糊值] [颜色]
text-decoration:装饰线
text-align: center; 文本水平居中
line-height:行高
4.背景：
背景色：background-color
/*背景图片*/
background-image:url("images/bgimg.jpg");/*路径*/
background-size: cover;/*背景大小*/
background-position: center;/*位置 水平方向 垂直方向*/
background-attachment: fixed;/*背景图固定*/
background-repeat:no-repeat;/*背景图不重复显示*/
连写：
background: greenyellow url("images/bgimg.jpg") no-repeat center fixed;
background-size: 50%;
5.常用样式：
a默认有颜色 、下划线
列表：list-style：列表项的符号 none
width:宽度 px
height:高度 px
不是所有的标签都可以设置宽高
border:边框
display：标签的显示模式（行块变化）inline-block
按钮：
标签分类：
1.行标签 a span
共享一行
width height 不起作用
2.块标签 ul li p div
独占一行 width height 有效
3.行内块 input img
共享一行 width height 有效
原文：https://www.cnblogs.com/Guang09/p/13604316.html