HTML学习笔记
*（html中的符号表示< < > >）
Web由3部分组成（可以缩写成：WWW万维网）
1，Web浏览器
浏览器可以与Web服务器利用HTTP协议进行通信，利用HTTP浏览器获得HTML，图片等数据，并且能够将这些数据展现为网页界面。
常见的：IE， MS Edge，Chrome，Firefox，Safari苹果浏览器
2，Web服务器
为浏览器提供服务：与浏览器进行HTTP通信，为浏览器传送HTML，图片等数据，
3，HTTP通信协议
Web浏览器与Web服务器直接通信协议（通信规则）
HTML通用属性
id 属性：定义元素的唯一标识；
在head中的style中用#定义
title 属性：定义提示标题信息；
在head中定义
class 属性：定义样式类；
style 属性：定义内联样式。
<!--注释的文本内容-->
HTML可以使用哪些标签
1，只能有一个根元素：html
2，html标记汇总只有两个子元素
head
body
3，head用于定义不显示到页面中的数据
4，body中定义的内容显示在页面上
html只有两个子元素 head body
1，<head>里面的元素
1，<title>第一个网页</title>
“第一个网页”将出现在页面的标题栏上
2，<meta>用于定义元素数据，描述页面数据
content-type=text/html;charset=utf-8
2，<body>里面的元素，建议：按照标签的语义使用他们
1，与文本有关的标签：
p h1~h6 br pre div span ul ol
2，与图片有关的 ：
img
3,连接：
a
4，表单：向服务器提交数据之用
from ：被from圈住的输入框，将一起向服务器发送
表单项目：input，textarea，select
input：文本，密码，单选，多选，按钮
HTML4目前有三种版本：过渡型、严格型和框架型。
1,严格型的特点是它禁止使用那些废弃的标记，即严格遵守XHTML1.0的标准，其版本声明为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2,过渡版声明为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3,框架版主要用于创建使用框架技术的Web页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
DOCTYPE文档类型定义：定义HTML文档中可以使用哪些标记的标准，最新的是如下HTML5标准
******************************************************************************
<!DOCTYPE html>
<!--HTML5标准的文档定义，定义了网页中可以使用哪些html标签的标准-->
******************************************************************************
标题元素 <hn>:HTML允许在网页中建立最多6级标题
段落元素 <p>//段与段之间有垂直空行。right：右。left：左。center：居中
<p align="right">右对齐</p>
换行元素 <br>
<span>用法
<p>span用于一个文本行内部，不破坏原有显示内容，用于对一块文本进行<span style="color:red">特殊</span>处理。</p>
<div>用法
<div style="color:blue"><h2>标题</h2><p>div用于对块元素进行分组，对一组块元素统一进行特殊处理</p></div>
图像元素
<img> 元素将图像添加到站点中，该元素必须附带src属性以指明图像的来源
<p>whdth heigth属性重新定义图片的高度<img width="80" src="bee.png"/></p>
链接元素 <a>
<a> 元素的语法如下：<a href="" target="">文本</a>
href属性的值代表目的地，用来指定访问者点击链接时会发生什么，比如显示图像、打开页面、发送电子邮件或者下载文件等。
target属性的值代表显示目标，它通常被省略，表示在哪里显示访问的资源，比如新窗口或者框架窗口
target属性：用于定义，打开连接的目标 safe当前浏览器中，_blank新的页面，标签或者窗口名称
a标签，超链接标签。有3种定位方式：绝对定位，相对定位，页内部定位（页面内部锚点）
1，<a href="#">点击返回顶部</a>
2，打开一个新页面<a href="hello-world.html" target="_blank">点击进入新页面</a>
3，先在目的地添加锚点：<a name="div">目的地</a> <!--div锚点-->
<a href="#div">点击返回目的地</a>
ol有序列表
<ol> <li> </li> </ol>
无序列表 <ul>
<ul><li> </li></ul>
表格
定义表格：<table></table>
创建表行：<tr></tr>
创建单元格<td></td>
表格的常用属性
border：1px；用边框围绕表格
align（不赞成使用）：可以取值left（表格位于页面左边，为默认值）、right（右边）center居中
width：宽度
cellpadding：定义单元格的边与其内容之间的间隔
cellspacing：定义单元格和单元格之间的间隔
<caption>：使用 <caption> 标题</caption>
<caption> 标签必须紧随 <table> 标签之后
表格可以划分为3个部分
<thead> 元素：创建独立的表头
<tbody> 元素：创建表主体
<tfoot> 元素：创建独立的表尾
不规则表格<td>
<tr>
<td colspan="2">1跨列</td>
<td rowspan="2">2跨行</td>
</tr>
表格的嵌套：表单元格 <td> 元素中再包含 <table> 元素
表单元素 <form>
action属性指定提交表单时将如何处理数据
method属性规定如何发送表单数据
表单控件有：<input> 元素（比如文本字段、复选框、单选框、提交按钮等等）、
<select> 元素
<textarea> 元素
<fieldset>元素
文本框与密码框
文本框，通过设置 <input> 元素的type属性值为text，则可以创建单行文本输入控件
<from method="pst">
<p>用户名:<input type="text" name="name" value="输入用户名" maxlength="10"/></p>
</from>
密码框：以掩码显示数据的文本框：设置 <input> 元素的type属性的值为password即可
<input type="password" />
value属性：为文本输入控件提供一个初始值，在表单初次加载时会显示该属性的值；
maxlength属性：用于规定输入字段的最大长度，以字符个数计；
disabled属性：禁用控件，该属性的值为“disabled”；
readonly属性：规定文本框为只读，该属性的值为“readonly”。
单选框：设置 <input> 元素的type属性的值为radio即可
<input type="radio" />
复选框：设置 <input> 元素的type属性的值为checkbox即可
<input type="checkbox" />
按钮
提交按钮：的作用是自动提交表单，以将用户录入的数据发送给服务器
设置 <input> 元素的type属性的值为submit即可
<input type="submit" />
重置按钮：设置 <input> 元素的type属性的值为button即可
<input type="button" />
隐藏域和文件选择框
隐藏域控件是一个在浏览器界面上不可见（被隐藏起来）的控件
<input type="hidden" />
文件选择框：如果界面上需要提供上传文件的功能，则需要在页面上添加文件域控件
<input type="file" />
内联方式使用 CSS
<body style="background-color:silver;color:blue;">
<font style="color:red;">font text</font>
<h2>h2 text</h2>
Some text here.
</body>
内部样式表，在head中
<style type="text/css">
/*这里添加样式规则*/
</style>
外部样式表
使用外部样式表时，首先需要创建一个单独的样式表文件用来保存样式规则。样式表文件其实就是一个纯文本文件，只是该文件中
只能包含样式规则，且文件后缀为.css。然后在需要使用该样式表文件的页面上，使用 <link> 元素链接需要的外部样式表文件即可
/*StyleCss.css文件*/
h1{color:red;background-color:#ddd;}
p{background-color:#000;/*黑色*/color:#fff;/*白色*/}
在html的head中<link href="StyleCss.css" rel="stylesheet" type="text/css">即可
元素选择器
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
类选择器用于将样式规则与附带class属性的元素匹配，其中该class属性的值为类选择器中指定的值。
.i{text-decoration:underline;}/*设置字体的装饰，有下划线*/
使用1，<p>使用类<span class="b">选择器</p>
id选择器：在head中定义id选择器时，选择器前面需要有一个 # 号
#title{color:blue}/*前景颜色是蓝色的，也就是字体颜色*/
使用：<h2 id="title">ID选择器</h2>
选择器分组
h2, p {color:gray;}
派生选择器
h2,p,label,div{
font-size:14px;
}
/*派生选择器只选p里面第一层的label元素 不写 > 所有有效*/
p>label{
color:#888;
}
伪类选择器
常用于链接元素的伪类有：
:link：用于向未访问的链接添加特殊的样式。未访问的链接是指，链接所指的 URI 尚未出现在用户浏览器的访问历史中。这种状态与 :visited 状态是互斥的。
:active：用于为处于激活状态（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式。最常见的例子就是在文档中点击一个超链接：在鼠标按钮按下期间，这个链接是激活的。激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接，它们会在支持 CSS 的浏览器中以不同的方式显示出来。
*:hover：用于在鼠标移到元素上时向此元素添加特殊的样式。这个伪类应用处于“悬停状态”的元素。
:visited：用于向已访问的链接添加特殊的样式。
:focus 伪类：在元素获得焦点时向元素添加特殊的样式，该伪类应用于有焦点的元素
CSS 中颜色的单位有：
rgb(x,x,x)：RGB 值，比如 rgb(255,0,0)；
rgb(x%,x%,x%)：RGB 百分比值 ，比如 rgb(100%,0%,0%)；
绝对单位有：
pt：1点，也称为 1 磅，1 pt 等于 1/72 英寸；
pc：1 pc 等于 12 pt；
in：英寸；
cm：厘米；
mm：毫米。
相对单位有：
px：像素，计算机屏幕上的一个点；
em：em单位相对于参考元素的字体尺寸，1em 等于当前的字体尺寸，
CSS 尺寸属性用来控制元素的高度和宽度：
p {border:1px solid red;}
.first {width:100px;height:100px;}
overflow 属性规定当内容溢出元素框时如何处理，可能的取值为：
visible：内容不会被修剪，会呈现在元素框之外，为默认值，
hidden：内容会被修剪，并且其余内容是不可见的，
scroll：内容会被修剪，但是始终会显示滚动条以便查看其余的内容，
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容，
边框。边框有 3 种属性：宽度、样式和颜色
1，边框样式（border-style），也可定义单边border-top-style上边框--right/bottom/lest
属性可能的值有：none（无边框）、solid（实线）、dotted（点状线）、dashed（虚线）、double（双线）等
2、边框宽度（border-width）。也可定义单边border-top-width
3、边框颜色（border-color）。也可定义单边border-top-color
4，组合设置（border）
P{border:1px solid red;}表示为段落设置1个像素宽度的实线红色边框（包括四个边框）
框模型
每个框都有如下三个属性：
border：元素的边框，可能不可见。边框用于将框的边缘与其他框分开；
margin：外边距，表示框的边缘与相邻框之间的距离，也称为页边空白；
auto：由浏览器计算外边距；
%：规定基于父元素的宽度的百分比的外边距；
inherit：规定应该从父元素继承外边距。
padding：内边距，表示框内容和边框之间的空间。单边设置：padding-top
背景色 background-color
背景图片 background-image
body {background-image: url("image/bg_01.gif");}
背景重复 background-repeat
取值如下所示：
repeat：背景图像将在垂直方向和水平方向重复，为默认值；
repeat-x：背景图像仅在水平方向重复；
repeat-y：背景图像仅在垂直方向重复；
no-repeat：背景图像将仅显示一次。
背景定位 background-position
background-position:x y;
right top：使图像放置在元素内边距区的右上角
left bottom：使图像放置在元素内边距区的左下角
背景图片的固定 background-attachment
scroll（默认值），也就是说，在默认的情况下，背景会随文档滚动；
fixed，则常用于实现称为水印的图像。这种设置意味着，当用户向上或者向下滚动页面时，背景图像固定，并不会随着页面的其余部分滚动。
文本格式化
1、指定字体（font-family）
h1 {font-family: Georgia, serif;}
2、字体大小（font-size ）
h1 {font-size:60px;}
3，字体加粗（font-weight）
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
控制文本格式
1、文本颜色（color）
p {color: rgb(255,255,0);}或者p {color: #FFFF00;}
2，文本排列（text-align）
td.leftAlign {text-align:left;}
td.rightAlign {text-align:right;}
td.centerAlign {text-align:center;}
td.justifyAlign {text-align:justify;}
3、文字修饰（text-decoration）
既有下划线，又有上划线：p{text-decoration:underline overline;}
去掉超链接的下划线：a{text-decoration: none;}
4、行高（line-height）
5、首行文本缩进（text-indent）
表格样式
vertical-align 属性在用于表格单元格中的内容垂直对齐方式时，可以设置为顶部top、中部middle和底部bottom三个值
.top {vertical-align:top;}
边框合并
border-collapse 属性的值如果设置为separate浏览器会独立显示每一个单元格的边框
border-collapse 属性的值如果设置为collapse 值则会对边框进行合并
边框边距
border-spacing 属性设置相邻单元格的边框间的距离
border-collapse 属性为separate 值的情况下，也称为边框分离模式
浮动定位
float 属性
div.float {float:right;}
clear 属性
clear 属性定义了元素的哪边上不允许出现浮动元素。
<div style="clear:both"></div> 可防止绕排效果，也可放在外层div外面*/
显示方式
<style type="text/css">
.b{border:1px solid #ooo}
.block{display:block;}/*设置一个元素为块*/
.inline{display:liline}/*设置为行内元素*/
.none{display:none}/*设置元素不显示*/
</style>
光标
可以使用 cursor 属性指定显示给用户的鼠标光标类型（形状）。
取值有：auto、default 、pointer 、crosshair 、move 、text 、wait、help 和 URL等
url 值是指可以为元素定义一个自定义的图标作为光标形状，只是使用url时，最好在列表的末端始终定义一种普通的光标，这样，当没有由 URL 定义的可用光标时还可以替代显示普通光标
div.definedCursor {cursor:url(image/s1.cur) default;}
列表项标志 list-style-typel
ist-style-type 属性可以用于列表元素<ul>和<ol>
列表项图像 list-style-image
list-style-image 属性使用图像来替换列表项的标记
定位属性：
position 属性指定元素的定位方式：可以取值static，relative，absolute，fixed，inherit
堆叠顺序：
z-index 属性来修改堆叠上下文来控制元素框出现的重叠顺序
设置z-index 属性的值为数值，数值越大表示堆叠顺序更高
固定位置
如果需要设置元素为固定位置，则首先需要设置position 属性的值为 fixed，可定位于相对于浏览器窗口的指定坐标。元素的位置可通过 left、top、right 以及bottom 这些偏移属性来规定。
一旦被设置为固定定位，不论窗口滚动与否，元素都会留在那个位置。
#advertise {
position:fixed;
top:30px;
left:80px;
width:30%;
height:80px;
border:1px solid gray;
background-color:#f0f0f0;
padding:30px;
font-size:24px;}
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
