首页 > 代码库 > html 笔记
html 笔记
html：超文本标记语言
---------------html基本标签--------------------
1、图片(单标签)
<img src="http://www.mamicode.com/图片的路径" style="width:宽度;height:高度" title="鼠标移到图片上时出现的说明性文字" alt="图片显示不出来的时候出现的文字" border="边框"/>
为了方便写相对路径，把图片和网页一定要放在同一个文件夹里面。
宽高的取值：百分比、具体像素(px)
2、背景
背景颜色
<body style="
颜色的表示法：
a.英文：red、yellow、green等
b.十六进制：#ff0000红色
背景图片
<body style="background-image:url(图片路径)">
如果颜色和图片共存，颜色将不再显示；如果图片是背景透明的，才能把背景颜色透出来
3、布局
换行:<br />
换段:<p style="text-align:left/center/right"></p>
标题:<h# style="text-align:left/center/right"></h#> #代表1-6
空格:
版权:©
4、超链接
a.页面间的链接（至少要有两个页面）
<a href="http://www.mamicode.com/网页的路径.html">点击的内容</a>
b.页面内的链接（在一个页面内跳转）
<a href="http://www.mamicode.com/#锚记">点击的内容（点哪里？）</a>
<a name="锚记">跳转的内容（跳哪里？）</a>
c.空链接(有链接的样子，但没有任何功能)
<a href="http://www.mamicode.com/#">点击的内容</a>
d.链接到邮箱
<a href="mailto:邮箱地址">点击的内容</a>
5、分隔线
<hr style="width:宽度;text-align:对齐方式"/>
6、列表(有序用ol，无序用ul)
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
7、定义描述
<dl>
<dt>描述的词条</dt>
<dd>描述1</dd>
<dd>描述2</dd>
<dd>描述3</dd>
<dd>描述4</dd>
</dl>
8、修改文字的颜色大小
<span style="color:颜色;font-size:?px">要修改的文字</span>
说明：用span的好处在于，不会对页面结构有影响
9、滚动（补充内容）
<marquee direction="left/right/up/down" onm ouseover="this.stop()" onm ouseout="this.start()">
内容
</marquee>
10、注释
<!-- 注释内容 -->
----------------------表格-------------------------
表格的基本结构：
<table border="边框">
<tr>
<td>表格内容</td>
</tr>
</table>
在表格里面，所有的内容必须写在<td></td>里面
做表格的时候，记得把border加上，可以看出很多表格问题
合并单元格的时候，在td里面加上如下属性：olspan:跨列 rowspan:跨行
表格高级标签：
<table>
<caption>表格标题，会居中</caption>
<thead>
<tr>
<th></th> <!-- 将td换成th，文字会居中加粗-->
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
------------------------表单----------------------
表单容器：
<form name="名字" method="提交方式" action="提交到哪儿去">
表单元素放在这里面
</form>
关于提交方式，有两个取值get和post，默认情况下是get
get:速度快 不安全 信息量少
post:速度慢 安全 信息量多
关于action属性，里面放一个网址
action和submit配合，可以产生页面跳转的效果，同时还能发送数据
表单元素：
1、文本框/密码框
<input type="text/password" value="http://www.mamicode.com/文本框或者密码框里面的默认值" name="名字"/>
2、提交按钮/重置按钮/普通按钮
<input type="submit/reset/button" value="http://www.mamicode.com/更改按钮上的文字"/>
3、单选按钮/复选框
<input type="radio/checkbox" name="相同的名字" value="http://www.mamicode.com/区分不同的值" checked="checked" />
单选按钮为了实现互斥选择的功能，记得把name设为一样的；多选按钮无所谓
4、下拉列表
<select name="名字">
<option value="http://www.mamicode.com/值1">内容1</option>
<option value="http://www.mamicode.com/值2" selected="selected">内容2</option>
<option value="http://www.mamicode.com/值3">内容3</option>
<option value="http://www.mamicode.com/值4">内容4</option>
<option value="http://www.mamicode.com/值5">内容5</option>
</select>
5、文本域(多行文本框)
<textarea cols="列(单位字符)" rows="行(单位字符)">
文本写在这里面
</textarea>
6、只读、禁用
readonly = "readonly"(文本域里面)
disabled = "disabled"(按钮里面)
7、文件浏览
<input type="file" />
----------------------框架--------------------
一、框架主页面的做法
1、把<body></body>去掉，用<frameset></frameset>来代替
2、进行框架划分，在frameset里面说明是上下划分还是左右划分，<frameset cols="左右分" rows="上下分"></frameset>
3、说明具体的划分比例,比如：
<frameset cols="30%,70%"> 框架三七分
<frameset cols="20%,60%,20%"> 框架2:6:2
<frameset cols="100,*"> 左边100像素
<frameset cols="*,*,*"> 三等分
<frameset cols="2*,*"> 框架2:1
4、frameset将页面分成几个小页面，就在<frameset></frameset>里面加上几个<frame />
二、框架小页面的做法
当做普通页面来做，做完后在相应的<frame>里面引入，如下所示：
<frameset rows="*,*">
<frame src="http://www.mamicode.com/网页1.html"/>
<frame src="http://www.mamicode.com/网页2.html"/>
</frameset>
为了实现在框架间进行跳转，在需要跳转的frame内设置一个名字，如<frame name="如花"/>;设置完成后回到有超链接的子页面，在超链接中添加target属性,如<a href="http://www.mamicode.com/***.html" target="如花">
三、关于target属性
<a href="http://www.mamicode.com/网页的路径.html" target="目标">点击的内容</a>
target的取值一共有以下几种：
框架名：实现在框架间跳转
_self:自身跳转(默认情况下)
_blank:新打开一个页面
_top:跳出整个框架
---------区分-----------
表格：colspan rowspan
文本域：rows cols
框架： rows cols
-------------------iframe内嵌框架-----------------
一般的网页，头部和尾部的效果往往是一样的，为了避免少写代码，会把头部和尾部的内容单独提取出来，做成两个独立的网页，然后分别引入到各个网页中。这种方式叫做页面复用
比如说：有两个页面head.html和foot.html
<body>
<iframe src="http://www.mamicode.com/head.html" style="width:宽度;height:高度" frameborder="0"></iframe>
正文
<iframe src="http://www.mamicode.com/foot.html" style="width:宽度;height:高度" frameborder="0"></iframe>
</body>
-----------------------css样式表------------------------
html ---- 打结构 css ---- 美化修饰js ---- 动态效果
一、样式表的引入方式(行内>内嵌>外部)
1、行内样式表
<标签 style="属性1:属性值1;属性2:属性值2;">
2、内嵌样式表
<head>
<style type="text/css"> --type属性不要忘记写
选择器 {属性1:属性值1;属性2:属性值2;}
</style>
</head>
3、外部样式表
新建一个文本文档，后缀名改为.css，在里面写上所有需要的样式规则（注意，不要出现任何带<>的html标签！！！）。
为了将外部样式表和网页联系在一起，在html网页中加入如下代码：
<head>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/样式表的路径.css"/>
</head>
二、常用的样式表属性
1、文本属性
*color:文本颜色
*font-size:文本大小
font-family:文本字体
font-weight:文本加粗 bold
*text-decoration:none(没有下划线)/underline(有下划线)
text-align:left/right/center 对齐方式
line-height:行高
letter-spacing:字符间距
2、背景属性
top/center/bottom
b.百分比：0% 0% --左上角 100% 100% --右下角
c.具体像素：注意支持负数
背景的缩写方式：
background:颜色 图片 重复 方向
3、方框属性(border/margin/padding)
border-width:边框宽度
border-style:边框样式(solid实线/dashed虚线)
border-color:边框颜色
缩写方式：border:宽度 样式 颜色
padding:border内的距离
margin:border外的距离
-------------------
padding:1px 四个方向一起更改
padding:1px 2px 上下各1像素，左右各2像素
padding:1px 2px 3px 上1像素，右2像素，下3像素，左2像素
padding:1px 2px 3px 4px 从上方开始，顺时针转动
方框属性的具体效果：
a.细框文本框：border-width:1px border-style:solid(宽度一定要是1像素，样式一定要是实线，颜色随意)
b.为按钮添加背景
为按钮添加背景图片；
查看图片的大小，将按钮的width和height改得和图片大小一样；
（上面两步修改完成后，有些电脑看不到任何变化，这时候需要把最后一步加上）
border改为0px
方框属性里面一共有四个具体的方向，分别是 left/right/top/bottom
4、列表属性
list-style:none/url(图片) 修改列表前面的图标。 float:left/right 浮动
5、层属性
修改层属性之前，先把这段代码加在网页的最上方，不然有些层属性没法正常显示
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
层的居中对齐：margin:0 auto
float:left/right 让本来要换行的层变得不换行，同时修改层的对齐方式
clear:left/right/both 让本来不换行的层变得换行
三、几种选择器(id>class>html)
1、html选择器(标签选择器)
直接把"选择器"换成一个html标签，所有被这个html标签框起来的内容都会一起改变
2、class选择器(类选择器) ！！同一个类名可以使用多次
声明阶段： .类名 {样式规则}
使用阶段： <标签 class="类名">
3、id选择器 ！！同一个id名只能使用一次
声明阶段： #名字 {样式规则}
使用阶段： <标签 id="名字">
4、伪类选择器 （四个伪类选择器一定要按顺序写,记忆方式"爱恨原则(love/hate)"）
a:link : 没有被点击的超链接
a:visited : 被点击过的超链接
a:hover : 鼠标悬浮在超链接上面时
a:active : 超链接被按下的时候