基本框架
<!DOCTYPE html> /*文档类型声明标签*/html 5的版本显示网页,必须写到整个页面的第一行
<html lang="en"> lang代表语言种类，用来定义当前文档显示的语言（en,zh-CN）
<meta charset="UTF-8"> 字符集
-----------------------------------------------------------------------------------------
通用
<h1>-<h6> /*双标签*/1到6递减，字体会加粗，字号会变大，独占一行
<p></p> /*双标签*/段落标签,文本段落会根据浏览器的窗口大小自动换行，段落和段落之间保有空隙
<br/> 换行标签，不会有较大的缝隙
<strong></strong>&&<b></b> 加粗文字,推荐strong *
<em></em>&&<i></i> 倾斜文字，推荐em *
<del></del>&&<s></s> 删除线效果,推荐del
<ins></ins>&&<u></u> 下划线效果,推荐使用ins
<div></div> 没有语义，“大盒子”,分割；分区，一行一个
<span></span> 没有语义，“小盒子”，跨度；跨距，一行多个
<img scr="图像URL"/> 图像标签,图片要与html文件在同一目录
<img scr="图像" alt="我是bbxx"/> 图片显示不出来的时候用alt内的文字代替
<img scr="图像" title="我是bbxx"> 鼠标指着图片的时候出现title中的提示
alt title 标签没有顺序先后之分，但必须放在img后面
绝对路径//
相对路径\\
<a href="跳转目标" target="目标窗口的弹出方式(_slef为默认值,_blank在新窗口中打开)">文本或图像</a> 超链接
{锚点定位配套用法
<a href="#two">第二集</a>
<h3 id="two">第二集介绍</h3>
}
<!-- 李子大笨猪--> 注释标签 快捷键:ctrl+/
空格
< 小于号
> 大于号
-----------------------------------------------------------------------------------------
表格:用来展示数据
<table></table> 用于定义表格的标签
<tr></tr> 用于定义表格中的行，必须嵌套在<table></table>中
<td></td> 用于定义表格中的单元格，必须嵌套在<tr></tr>中
<th></th> 表头单元格,跟td的区别:th会加粗居中
align="left;center;right" 规定表格的对齐方式，必须写在<table></table>里面
border="1;"" " 给表格加边框
bgcolor="yellow" 背景颜色
cellpadding="20" 表示文字与单元格之间的距离
cellspacing="0" 单元格与单元格之间的距离
width="500" 表格宽度
height="250" 表格高度
rowspan="合并单元格的个数" 跨行合并,放在td中
colspan="合并单元格的个数" 跨列合并,放在td中
<thead></thead> 表格的头部,类似head,内部必须拥有tr,必须放到<table></table>中
<tbody></tbody> 表哥的身体,类似body,必须放到<table></table>中
-----------------------------------------------------------------------------------------
列表（整齐有序，用于布局）：
<ul></ul> 表示无序列表，一般会以项目符号呈现列表项，列表项使用<li>标签定义，且只能放<li>，无序列表的各个列表项之间没有顺序级别之分，是并列的，使用较多
<ol></ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项，且只能放<li>,有顺序，使用较少
<li></li> 里面可以放任何东西
<dl></dl> 表示自定义列表，与<dt>和<dd>一起使用,且只能使用<dt><dd>
<dt>名词1</dt> 一个dt对应多个dd
<dd>名词1解释</dd> 没有个数限制
-----------------------------------------------------------------------------------------
表单（常用于注册）：
<form action="url地址" method="提交方式(POST)" name="表单名字" ></form> 表单域，用于收集用户信息提交给服务器
<input type="属性值()"/> 输入表单元素
<select selected="selected"(把此项定位表单默认选项)> <option> </option> </select> 下拉表单元素
<textarea > </textarea> 当用户输入内容较多的情况下使用，用于定义多行文本输入(留言板，反馈)
name="" 用户自定义Input元素的名称
value="" 用户自定义规定的input元素的值
checked="checked" 针对单选按钮和复选按钮，默认勾上
maxiengh="" 规定输入字段中的字符的最大长度
{type 属性值
text 文本框
password 星号代替密码
checkbox 多选按钮
submit 提交按钮
radio 单选按钮
reset 重置
button 普通按钮,与JS配套使用
file 上传文件用的
}
<label> 绑定一个表单元素，点击文本转到对应的光标或者选择对应的表单元素上,用于增加用户体验
-----------------------------------------------------------------------------------------
CSS（美化网页，布局页面）：
<style></style> 标签中存放css内容
基础选择器:
1.标签选择器格式：
p {(选择所有的p)
color: pink;
font-size: 12px;
}
2.类选择器
.类名 {
width: 100px;
height: 100px;
background-color: green;
color: yellow;
text-align: center;
font-size: 75px;
}
3.通配符选择器
* {(给所有标签用)
color: pink;
}
4.id选择器
#bbxx {(只能用一次)
color: pink;
}
color: pink; 文本颜色
font-family: "微软雅黑"; 设置字体
font-size: 120px; 设置文字大小
font-align: right;center;left; 设置文字对齐方式
font-weight: bold(变粗=700);normal;(不变粗=400); 文字加粗
font-style: italic(倾斜);normal;(不倾斜); 文字效果
text-align: right;center;left ; 文本对齐
text-indent: 2em;12px; 文本缩进
text-decoration: underline(添加下划线);none(取消下划线) 文本修饰
line-height: 行高
内部样式表:一般放在<head>的<style>标签中
行内样式表:适用于修改样式比较少的情况，直接写在要改的标签内,例如：<p style="color: pink; font-size: 16px;">
外部样式表:使用最多的，适用于样式比较多的情况，核心是:单独写到css文件中，之后把css文件引入到html页面中使用
{
1.新建.css文件
<link rel="stylesheet" href="style.css">
}
块元素:h1~h6,p,div,ul,ol,li
块元素的特点
{
1.独占一行
2.高度、宽度、外边距、内边距都可以控制
3.宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子，里面可以放行内或者块级元素
}
行内元素:a,strong,b,em,i,del,s,ins,u,span
行内元素(内联元素)的特点
{
1.相邻行内元素在一行上，一行可以显示多个
2.宽度和高度设置是没有效果的
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素
}
行内块元素:img(图片),input(表单),td(单元格)
行内块元素特点
{
1.和相邻行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
2.默认宽度就是它本身内容的宽度（行内元素特点）
3.高度，行高，外边距及内边距都可以控制（块级元素特点）
}
转换为块元素:display:block
转换为行内元素:display:inline
转换为行内块:display:inline-block
css背景总结
background-color 背景颜色 预定义的颜色值、十六进制、rgb代码
background-image 背景图片 url（图片路径）
background-repeat 是否平铺 repeat\no-repeat\repeat-x\repeat-y
background-position 背景位置 length\position x,y
background-attachment 背景附着 scroll滚动，fixed固定
连写 顺序为：背景颜色，背景图片地址，背景平铺，背景滚动，背景位置
背景色半透明 background: rgba(0,0,0,0.3) 括号内必须是四个值
-----------------------------------------------------------------------------------------
盒子模型：
border边框（盒子的边框） {
border-width 定义边框粗细，单位是px
border-style 边框的样式
border-color 边框颜色
}
content内容（文字，内容，或者其他盒子） {
}
padding内边距（控制内容和边框的距离） {
}
margin内边距（盒子与盒子之间的距离） {
}会持续更新这个系列！不是完全版！
生命不息，学习不止，键盘敲烂，月薪过万！加油，代码人！
1683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
