<html>
<head>
<title>网页标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />元数据标签（编码格式，关键字和内容描述）
</head>
<body>
<h1></h1>文章标题
<p></p>段落
<hr/>水平线
<br/>换行
<strong>内容加粗</strong>
<em>内容倾斜</em>
<img src="图片地址" title="鼠标悬停显示内容" alt="地址错误显示内容" width="宽" height="高"/>
</body>
</html>
标签分类：<标签名>内容</标签名>
<标签名 属性名="属性值" 属性名="属性值"/>
规范要求：标签名小写，属性名小写，属性值加引号，（属性和属性，标签名之间有空格）
必须有闭合标签，正确嵌套，子标签注意缩进
注意 ：所有符号必须是英文环境下的符号
特殊符号： &文字；
空格 ：
> ： >
< ： <
版权符号 ：©
引号 ："
-----------------------------------------------------
相对路径：
相对于当前html页面所在地址
例如：
c:/demo/first.html中<img src="pic.jpg"/>
则图片必须放在c:/demo/pic.jpg
c:/demo/first.html中<img src="../pic.jpg"/>
则图片必须放在c:/pic.jpg
超链接：
<a href="跳转地址" target="跳转打开位置" name="设置锚点位置">超链接显示内容</a>
href属性：点击跳转作用，若无不能点击
target：空白页打开:_blank或当前页面打开 :_self 默认当前页面打开
name：设置锚点位置名字
超链接功能：
A超链接跳转：<a href="跳转地址">点击文字</a>
B锚点设置和使用：
1位置设定： <a name="位置名"></a>
2点击跳转锚点位置：
<a href="跳转页面地址#锚名字">点击文字</a>
列表
无序列表
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
适合:1列或1行数据， 导航，新闻列表，菜单，列表标题
有序列表
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
定义列表
<dl>
<dt>定义标题</dt>
<dd>定义描述</dd>
<dd>定义描述</dd>
</dl>
适合：图文介绍，名词解释
----------------------------------------
表格
表格标签<table border="边框粗度" align="水平对齐方式" width="表格宽度" height="表格高度">
行标签<tr>
单元格标签<td align="水平对齐方式" width="单元格宽度" height="单元格高度" colspan="跨列数" rowspan="跨行数">
格式：
<table border="1">
<caption>表格标题</caption>
<th>列名1</th><th>列名2</th>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
优点：整齐，布局方便
缺点：层次深，所有数据加载完毕才能展示
适合：结构整齐，展示较少的数据
框架：
优点：组合方便，复用页面
缺点：结构复杂，不易于搜索引擎抓取
适合：网站后台，使用较少
<frameset cols="左边大小,右边大小" rows="上边大小,下边大小" border="边框">
<frame src="左或上的页面地址"></frame>
<!-- 右边或下边页面 可继续使用frameset-->
<frameset cols="," rows="," border="">
<frame src=""></frame>
<frame src=""></frame>
</frameset>
</frameset>
frameset常用属性（cols和rows不建议同时出现）
cols：代表左右分框架页面
rows：代表上下分框架页面
逗号：代表分几个框
数字代表框架页面占比或宽度，高度像素
border：框架框多粗
frame（框架页）常用属性
src：引入页面的地址
name="框架页面的名字"
超链接跳转框架页的方法：
1 对应的框架页面添加name属性值（给框架起名）
2 在超链接上添加target=“框架名”
可以实现：点击超链接在对应的框架页中显示跳转结果
iframe（行级标签）
优点：灵活，简单，复用页面，在有内容的界面附加代码
缺点：不易于搜索引擎抓取
适合：公共页面，头，尾，分类导航等
<iframe src="复用页面地址" name="框架名" width="框的宽度" height="框的高度"
frameborder="边框粗细" scrolling="是否有滚动条"></iframe>
--------------------------------------------------
超链接跳转框架页的方法：（超链接在框内）
1 对应的框架页面添加name属性值（给框架起名）
2 在超链接上添加target=“parent”
可以实现：点击超链接在对应的框架页中显示跳转结果
超链接跳转框架页的方法：（超链接在框外）
1 对应的框架页面添加name属性值（给框架起名）
2 在超链接上添加target=“框架名”
可以实现：点击超链接在对应的框架页中显示跳转结果
---------------------------------------------10.14
表单：
<form methed="get/post如何发送表单数据" ation="向何处发送表单数据">
<input type="元素类型" name="元素名称" value="元素的值" size="初始宽度" maxlength="最大字符数" checked="checked"默认被选中></input>
多行文本域： <textarea name="" cols="显示列数" rows="显示行数">文本内容</textarea>
列表框： <select name="" size="行数（不写为下拉列表）">
<option value="选项的值" selected="selected"默认选中项>显示项</option>
</select>
文件域： <input type="file" name=""></input>（需要在form中加属性enctype="multipart/form-data"）
隐藏域： <input type="hidden" name="" value=""></input>
只读： <input type="text" readonly="readonly"></input>
禁用： <input type="text" disabled="disabled"></input>
</form>
type: text文本,password密码,button普通按钮,submit提交按钮,image图片提交,reset重置按钮,radio单选,checkbox多选,file文件域,hidden隐藏域
域：
<form method="get/post" action="">
<fieldset>
<lengend>域标题</lengend>
<input>...</input>
...
</fieldset>
</form>
标注：<label for="id">标注的文本</label>
<input type="radio" name="" id="id"></input>
列表框：
注意：1.标签只要传值的都必须加属性name
2.点击按钮提交本form中的所有数据 可以不用加name
3.只读和隐藏可以传参 禁用不可以
---------------------------------------------10.17
CSS
内部样式：
<head>
<style type="text/css">
标签选择器： 选择器：p{
字体大小：font-size：12px;
颜色： color:red;(可以写英语 也可以写RGB颜色代码)
背景颜色：background:red;
}
类选择器： .class{
字体大小：font-size：12px;
颜色： color:red;
}
ID选择器： #id{
字体大小：font-size：12px;
颜色： color:red;
}
</style>
</head>
<body>
<p></p>
<p class="class"></p>
<p id="id"></p>
</body>
优先级：id选择器>类选择器>标签选择器
行内样式：<标签名 style="color=red;font-size=12px">
内部样式表：只能用于本页面
外部样式表：1.在页面外文件夹内新建一个CSS文件 把内部样式style标签里面的选择器写到CSS文件里
2.在本页head标签里加上
<link rel="stylesheet" type="text/css" href="CSS文件名">
或者（一般不用）<head>
<style>
@import url("CSS文件名");
</style>
</head>
优先级：行内样式>内部样式表>外部样式表（但是遵循就近原则）
后代选择器：
父选择器 子选择器{
样式名：样式值；
}
如：h3 strong{} 是定位到h3标签下的strong标签
1.两个标签之间用空格隔开
2.上面的h3 可以换成.class和#id
3.样式是子标签的样式，而且该选择器所选中的标签必须是父选择器选中的标签之内
交集选择器：
选择器1选择器2{
样式名：样式值;
}
如：h3.class{} 是定位到有class属性的h3标签
1.中间不能有空格
2.上面的.class可以换成#id
3.标签名是标签选择器定义的标签名同时添加class=类选择器定义的类名才能拥有该样式
并集选择器：
选择器1，选择器2{
样式名：样式值;
}
如：h3，.class,#id 是定位到有所有h3标签和class和id
1.中间用逗号隔开
2.选择器1和选择器2二者都享有该样式
注意：选择器标签属性小写，属性后面加“:”(不加等号！不加等号！不加等号！)，“；”分割两个属性
不能用中文符号
类名id名用英语，不能数字开头，取名有意义
外部样式表.css文件中不用写style标签。
p标签不能放在div标签里面
超链接自带颜色属性 h1自带字体属性会阻断继承性
注释：html里面<!-- -->
CSS 里面/* */
---------------------------------------------10.18
为什么使用CSS？
有效的传递页面信息
使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户
可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
具有良好的用户体验
<span></span>标签
字体样式
字体类型：font-family:Times,"Times New Roman", "楷体" 先英文后中文 中间加逗号 英文有空格和中文加引号
字体大小：font-size:12px;
字体风格：font-style:italic; normal默认标准 italic oblique
字体粗细：font-weight:bold; narmal默认标准 bold粗体 bolder更粗 lighter更细 100-900越大越粗
在一个声明中设置所有属性：font:风格 粗细 大小 类型(按顺序)
文本属性
文本颜色：color:颜色英文或代码;
对齐方式：left reght center justify（两边对齐）;
文本缩进：text-indent:行高px（像素）/em(字节);
行高：line-height: ;
装饰：none underline下划线 overline上划线 line-through删除线 blink闪烁;
超链接伪类
a:link{未单击访问时超链接样式}
a:visited{单击访问后超链接样式}
a:hover{鼠标悬浮其上的超链接样式}
a:active{鼠标单击未释放的超链接样式}
鼠标形状
default默认光标
pointer手
wait沙漏
help箭头问号
text I
crossshair 十
网页背景：
background-color:颜色；
background-image：url(图片路径);
background-repeat:repeat no-repeat repeat-x repeat-y;
background-position:x y; x方向关键词left center right y方向关键词top center bottom
列表样式
list-style-type:none无标记符号 disc实心圆 circle空心圆 square实心正方形 decimal数字;
list-style-image：url(图片路径);
list-style-position：inside/outside;
---------------------------------------------10.20
盒子模型
边框
四个分着设：
border-top:上边框；
border-right:右边框；
border-bottom:下边框；
border-left:左边框；
border:上边框 右边框 下边框 左边框；（中间空格隔开）
border:上边框 左右边框 下边框； （中间空格隔开）
border:上下边框 右右边框；（中间空格隔开）
border:边框；
边框颜色
border-color:颜色；
边框粗细
border-width:thin medium thick;
边框样式
border-style:none hidden dotted点虚线 dashed杠虚线 solid实线 double双线
每条边都可以同时设border的各个属性
外边距（四个方向）
margin:5px;
margin:0px auto;左右对齐自动 auto是居于父窗体中间
内边距（四个方向）
padding:5px;
盒子模型总尺寸=border-width+padding+margin+内容宽度
所以内边框 外边框 边框宽度 内容宽度 都会影响整体宽度
块级元素 h1-h6 p div 列表
行级元素 span a img strong
行级元素可以包含在块级元素中间 反之不行
display
diaplay：none；:超链接隐藏之后 会被后面的内容占位置
diaplay:block; ：会让行级标签变成块级标签
display：inline；：会让块级标签变成行级元素
行级元素没法设宽高 块级元素可以
body有默认填充
---------------------------------------------10.21盒子 背景
width=100%:父类百分之百
top向上是负的 left向左是负的...
绝对定位用一次就得都用
Hover等并不一定都用在超链接上
---------------------------------------------10.22
浮动
float:left right none;
清除浮动
clear:left right both none;
溢出处理
overflow：visible呈现在盒子外 hidden被修剪不可见 scroll被修剪滚动条 auto如果被修剪滚动条；
定位
position：static默认无定位 relative相对定位 absolute据对定位 fixed固定定位不常用；
相对定位（相对于原来的位置）
position：relativet:top left right bottom;
left:...;
...
据对定位（相对于一个已定位的祖先元素 若没有 以窗口为基准）
position：relativet:top left right bottom;
left:...;
...
z-index:调整元素定位重叠时的上下位置
z-index:整数默认0 大在上；
透明度
opacity：x; 0-1越小越透
filter：alpha(opacity=x);1-100
来源：CSDN
作者：多_喝_水
链接：https://blog.csdn.net/deideidei13/article/details/88084928