html基础
1 HTML简介
HTML：超文本标记语言（hypertext markup language）；
由浏览器直接解析执行（没有编译过程）；
超文本：音频、视频、图片都成为超文本；
标记：<英文单词或者字母>称为标记。html页面都由标记组成；
2 HTML网络术语
网页：由各个标记组成的页面；
主页：一个网站的其实页面或者导航界面；
标记：也称标签。
<h1>开始标签，</h1>结束标签；每个标签都有规定好的含义；
元素：<h1>内容</h1>，称为元素；
属性：给每一个标签做的辅助信息；
XHTML：符合XML语法标准的HTML；
DHTML ：dynamic动态的。html+css+js合起来的页面就是DHTML;
HTTP : 协议标准。用来规定客户端浏览器和服务器交互时及数据的一个格式。
SMTP:邮件传输协议；
FTP:文件传输协议；
3 HTML编辑工具
notepad： 记事本 editplus : 语法高亮显示；技巧：根据颜色判断单词是否出错（不是100%）；
ultraedit : 根据颜色判断单词是否出错，可以显示二进制数据；
dreamweaver : 专业工具，代码提示；
Visual Studio Code：微软跨平台源码编辑器；
4 HTML规范
HTML : 弱势语言；不区分大小写；后缀名是html或htm（一些系统不知后缀名超过3个字符，比如dos系统）；
HTML结构：
1) 声明部分：用来告诉浏览器整个页面使用的是哪个标准; <!doctype html>是HTML5标准；
2) head部分 ： 不会显示在页面上；是告诉浏览器一些页面的额外信息；
3) body部分 : 所写的代码必须放在此标签内；
5 HTML的各个标签
每个标签都有私有属性，也有公共属性；
html中表示长度的单位都是像素；html只有一种单位就是像素；
body: bgcolor:背景颜色； background : 背景颜色； text： 文本颜色；
a、排版标签
所有的浏览器默认情况下都会忽略空格和空行；
<p>：代表一个段落 属性：align:对齐方式；值：left\right\center;
<br> : 换行；
<hr> : 分割线 color:线的颜色；size:线的粗细；width:线的长短（两种写法：值和百分比）；
noshade ：不要阴影； align:对齐方式；值：left\right\center; center:内容居中；
(不赞成使用。请使用样式取代它。)
<pre>:预定义格式标签，告诉浏览器不要忽略空格和空行；
<div>：块级标签，必须单独占据一行，属性：align; <span>: 行内标签，不换行字体标记；
b、字体标签
<h1~h6>:定义字体的大小，属性：align:居中；
font : color:字体颜色；三种写法：1 英文单词：red;2 十六进制：#00ffcc; 3 RGB(三原色)：new RGB(124,156,23); size:字体大小； face:字体类型；
特殊字符：<小于 >大于 &&符号 "双引号 ' 单引号 ©版权 ™商标 空格
<b>:加粗；
<strong>:加粗；
<i> : 斜体；
<em>:斜体；
<u>:下划线；
<s>:中划线(删除线)/<del>(删除线)；
<sup>: 上标；
<sub>:下标；
c 图像标记
img:代表一副图片
属性：src：图片的路径；
相对路径：相对于页面所在的路径，标记是： . /和 ../ ,分别代表当前目录和父目录；
绝对路径：1):从盘符开始：C:\Documents Settings\Administrator\桌面\images\1.jpg
2):网络路径：https://www.baidu.com
width：宽度
height：高度
alt：当图片显示不出来代替图片的内容
title : 提示性文本
border : 边框
热点：特定的位置添加超链接
<img src="images/1.png" width="300" height="300" useMap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="circle" coords="122,81,38" href="www.baidu.com" />
</map>
解析：<img> 标签中的 usemap 属性与 map 元素中的 name 相关联，以创建图像与映射之间的关系；
<area> 标签定义图像映射内部的区域；shape：规定区域的形状、circle(圆圈)、coords: 规定区域的坐标 href:规定的目标URL；
d、清单标记
列表标签：3种
无序列表：ul
属性:type 值：disc(默认，实心圆点)、square(实心方点)、circle(空心圆)；
有序列表：ol
属性:type 取值：1(默认阿拉伯数字)； start:从即开始
定义列表 : dl
dt：列表项标题
dd: 列表项
e、超链接(3种)
1、链接到其他页面
2、锚：给超链接起的一个名字，作用：连接到本页面或其他页面的特定位置；使用name属性给超链接起名字；
3、链接到博客<a href="http://www.cnblogs.com">进入博客</a>
属性：target:告诉浏览器怎么显示目标页面
html中定义4个值：
_self : 在同一个浏览器中显示；
_blank : 打开新的浏览器显示；
_parent : 在父窗口中显示；
_top ： 在顶级窗口中显示；
f、表格标记
table:表格
属性：border:边框
width: 绝对值或者相对值（ % ）
height: 单元格的高度
align: 表格的对齐方式
cellpadding: 单元格内容到边的距离
cellspacing: 单元格和单元格之间的距离
bgcolor: 背景颜色
background: 背景图片
bordercolorlight: 表格的上，左边边框，以及单元格的右，下边框的颜色 bordercolordark: 表格的右，下边框，以及单元格上，左的边框的颜色
dir: 单元格内容的排列方式取值：ltr从左到右，rtl: 从右到左
caption: 表格标题
tr: 行属性：dir取值：ltr从左到右，rtl: 从右到左
td: 单元格属性：align: 内容的横向对齐方式
valign: 内容的纵向对齐方式top / middle / botton
单元格的合并：
属性： colspan:横向合并
rowspan:纵向合并
th:相当于<td> + <b>，属性同<td>；
属性：align:取值：left/center/right/top/bottom
thead tbody tfoot
写与不写的区别：
1 当表格大的时候，不写，则必须等表格内容下载完才显示；如果是tbody标签，则边下载边显示；
2 tbody、tfoot那么浏览器解析内容时是从上到下解析；写了，则顺序任意，浏览器的解析还是按照 thead、tbody、tfoot顺序显示内容；
g、框架标记及<iframe>
框架页面上不允许有body标签
frameset：框架的集合(html5不支持)
rows:纵向分部框架
cols:横向分部框架 写法：1 绝对值 "200,*" *表示剩余的； 2 相对值 "30%,*"
frame ： 框架.一个框架显示一个页面(html5不支持)
scrolling：是否需要滚动条。默认为true;
noresize:固定框架大小
bordercolor : 给框架边框起一个颜色
frameborder:边窗边框
name : 给框架起一个名字
src ：窗口中的目标URL
内嵌框架：嵌入在一个页面上的框架（仅仅IE支持）
iframe:属性：width/height/scrolling：是否需要滚动条。默认为true;
h、多媒体标记
bgsound : 背景音乐
embed:播放多媒体文件
属性：src 目标文件路径
autostart 自动播放 值：true/false
volume :0 ~100,规定音量的大小，不写则有系统默认音量；
marquee:移动
属性：direction 移动目标方向 left/right/up/down/, down移动距离是固定的200px;
behavior : 行为方式 取值：slide 只滚动一次,alternate 来回滚动,scroll 单方向循环滚动
scrollamount:移动速度
loop : 循环多少圈；负值为无线循环
scrolldelay : 移动一次休息多长时间；单位为毫秒；
i、头标记
head ：定义文档的信息
title : 定义浏览器工具栏的标题
base: 定义页面上所有链接的默认地址或默认目标
link :定义文档与外部资源之间的关系;常用于连接样式表
meta:定义关于HTML文档的元数据;用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据;
script:定义客户端脚本,比如JavaScript；
style:定义文档的样式信息
例：<head>
<title>html页面</title>
<meta charset="UTF-8"><!--设置当前页码的编码用UTF-8-->
<meta name="keywords" content="HTML, CSS, XML" />
<base href="http://www.w3school.com.cn/images/" target="_blank" />
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<style tyep="text/css>
body{ background-color:yellow }
p{color : blue}
</style>
</head>
link ：链接颜色
alink : 鼠标按下时的颜色
vlink : 访问过链接后的颜色
leftmargin : 左外边距
topmargin:上外边距
<body link = "red" alink = "blue" vlink = "yellow" leftmargin = "0" topmargin = "0">
j、表单标签(所有的表单标签必须被包裹在<form action="#">标签中) action属性：指定后台的一个地址；
input : 输入框
属性：type 值： text 文本框
password 密码框
redio 单选框
checkbox 多选框
submit 提交
reset 重置
button 普通按钮
readonly 只读
disabled
select:创建单选或多选菜单
属性：multiple 规定可同时选择多个选项 值：multiple
option:作为 <select> 标签的菜单或是滚动列表中的一个元素显示;
属性值：selected="true" 默认显示；
textarea : 文本域； 属性：cols 列数、rows:行数；
label : 为input远的定义标注；在label元素内点击文本，就会触发此控件；
属性：for ,for 属性值应当与相关元素的 id 属性值相同。
eg:
<input type="radio" name="gender" id="gender-man" >
<label for="gender-man">男 </label>
frameset ：定义一个框架集；
属性：cols 定义框架集中列的数目和尺寸
rows 定义框架集中行的数目和尺寸
legend : 为 fieldset 元素定义标题; frameset子元素；
eg:
<fieldset>
<legend>用户组1</legend>
用户名：<input type="text"><br>
密码：<input type="text">
</fieldset>
