首页 > 代码库 > HTML 笔记
HTML 笔记
静态网页:是否与服务器有交互
Hyper Text Markup Language (超文本标记语言)
HTML5 -- 2014-10-28
W3C : 万维网联盟,成立于94年 http://www.w3.org/ http://www.chinaw3c.org/
包括:
结构化标准语言(XHTML , XML)
表现标准语言(CSS)
行为标准(DOM , ECMAScript)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> //最主要设置编码
<meta name="keywords" content="java,北大青鸟" /> //设置关键字
<meta http-equiv="refresh" content="3; url=http://www.baidu.com"> //自动刷新,如设置3秒后自动跳转到百度页面
===>网页标题添加头像
<link rel="icon" href="http://www.mamicode.com/img/title_icon.gif" type="img/gif" />
<link rel="shortcut icon" href="http://www.mamicode.com/images/p1.ico" />
1. 制作ico文件，你可以先制作出gif、jpg、png的都可以，大小在16px*16px最佳
2. 在百度搜“在线jpg转ico”，会有这样的网站，你按照步骤操作，得到ico文件
3. 将ico文件放置在网站根目录下
4. 在你的<head>...</head>添加
<link rel="icon" href="http://www.mamicode.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.mamicode.com/favicon.ico" type="image/x-icon" />
标签 说明
<h1>~<h6> 标题标签(head)
<p> 段落标签(paragraph)
<br/> 换行标签<break row>
<hr/> 水平线标签(horizontal row)
<em> 斜体标签
<strong> 加粗标签
<u> 下划线
<s> 中划线(删除线)
文本格式化
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）
特殊符号 字符实体
空格
大于号(>) >
小于号(<) <
引号(") "
版权符号? ©
标签规范
1,标签名应小写
2,HTML标签应闭合
3,标签应正确嵌套
4,应添加文档类型声明<!DOCTYPE>
图像类型 优点 缺点
*.jpg 体积小,较清晰,适合色彩丰富的图像 有损压缩
*.gif 体积小,支持动画图片,较为常用的网页 支持有限的透明度,效果不如其他图片类型 PNG图片
*.bmp 支持24位颜色深度,兼容性好 不支持压缩,容量大
*.png 最新的图片格式,兼有GIF和JPG的优势 部分浏览器(IE.6)不支持透明
图像标签
<img src="http://www.mamicode.com/path 图像路径" alt="text 图像替代文字" title="text 鼠标悬停提示文字" width="x 图像宽度" height="y 图像高度" />
==>图像宽度,高度 习惯写上,便于浏览器解析,预留位置
++ hspace="0" vspace="0" align="absmiddle
超链接标签
<a href="http://www.mamicode.com/path" target="目标窗口位置" _self 或 _blank></a>
锚链接
1,创建跳转标记
<a name="marker">目标位置</a>
2,创建跳转链接
<a href="http://www.mamicode.com/#marker">起始位置</a>
===>跨页面跳转需加(路径)文件名
<a>标签的href属性（即超链接的URL）有3种可能值，
绝对URL - 指向另一个站点（比如 href="http://www.example.com/index.htm"），
相对 URL - 指向站点内的某个文件（href="http://www.mamicode.com/index.htm"），
锚 URL - 指向页面中的锚（href="http://www.mamicode.com/#top"）
无序列表
<ul type="circle">
<li>列表一</li>
<li>列表一</li>
<li>列表一</li>
</ul>
//circle 小圆点 disc 小黑点 square 小方块
有序列表
<ol type="1" start="7">
<li>列表一</li>
<li>列表一</li>
<li>列表一</li>
</ol>
===>start="7" 代表从 7 开始,无论是 a, A, i, I 都只能用数字表示从第几位开始
定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
表格
<table width="50%" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
cellspacing 单元格之间的距离
cellpadding 单元格与内容之间的距离
align 对齐方式
rowspan 跨行
colspan 跨列
table tr:nth-child(odd){ background-color:lightgray;} //奇数行变色
table tr:nth-child(even){ background-color:lightgray;} //偶数行变色
其索引是奇数或偶数（该索引的第一个子节点是1）
table tr:nth-child(1) ===>第一行
table td:nth-child(1) ====>第一列
也可以是公式
表单:
<form action="表单提交地址" method="提交方法">
</form>
==>action:处理表单数据的目标地址,如不填,默认为当前页面
method:提交方式,get 提交参数在地址栏可见; post 不可见
表单元素
<input name="元素名称" type="类型" value="http://www.mamicode.com/值" size="显示宽度" maxlength="字符长度" checked="是否选中" />
type: text(默认) 文本框
password 密码框
radio 单选按钮 传递value值
checkbox 复选框 传递value值
submit 提交按钮
reset 重置按钮
button 普通按钮
hidden 隐藏域
image 图片类型提交按钮,带坐标位置
file 文件选中框
email 邮件
Month <input type="month" id="myMonth" value="http://www.mamicode.com/2014-05">
Number <input type="number" id="myNumber" value="http://www.mamicode.com/2">
time <input type="time" id="myTime" value="http://www.mamicode.com/22:15:00">
Week <input type="week" id="myWeek" value="http://www.mamicode.com/2014-W15">
range 滑块控件 <input type="range" id="myRange">
search 搜索框
url <input type="url" id="myURL" value="http://www.w3cschool.cc">
>>>>获取值: function myFunction() {
var x = document.getElementById("myRange").value;
document.getElementById("demo").innerHTML = x;
}
value: 初始值
size: 指定输入的宽度
maxlength: 指定可在text或password元素中输入的最大字符数
checked: 指定表单元素在加载时是否选中
name: 与服务器交互必须有name属性
disabled: 是否可修改
1,文本框 <input name="userName" type="text" value="http://www.mamicode.com/请输入用户名"/>
2,密码框 <input name="passWord" type="password" maxlength="16"/>
3,单选按钮 性别<input name="gender" type="radio" value="http://www.mamicode.com/男" checked="checked"/>男
<input name="gender" type="radio" value="http://www.mamicode.com/女" />女
4,复选框 爱好:<input name="hobbys" type="checkbox" value="http://www.mamicode.com/sports"/>运动
<input name="hobbys" type="checkbox" value="http://www.mamicode.com/play"/>游戏
<input name="hobbys" type="checkbox" value="http://www.mamicode.com/movie"/>电影
<input name="hobbys" type="checkbox" value="http://www.mamicode.com/talk"/>聊天
<input name="hobbys" type="checkbox" value="http://www.mamicode.com/read" checked="checked"/>阅读
5,按钮 <input type="submit" value="http://www.mamicode.com/提交" name="submit" />
<input type="reset" value="http://www.mamicode.com/重置" name="reset" />
<input type="button" value="http://www.mamicode.com/普通" name="button" />
-->推荐使用button : <button type="submit" name="option" value="http://www.mamicode.com/login">登录</button>
6,文件选择框 <input type="file" name="myFile"/>
7,下拉列表框
<select name="站内跳转菜单" size="1">
<option value="http://www.mamicode.com/free">免费邮箱</option>
<option value="http://www.mamicode.com/vip">VIP邮箱</option>
<option value="http://www.mamicode.com/163" selected="selected">163邮箱</option>
<option value="http://www.mamicode.com/QQ">QQ邮箱</option>
</select>
-->size属性:确定列表中可同时看到的行数
value:表单提交的是value值
8,多行文本域 <textarea name="news" cols="40" rows="6">文本内容</textarea>
--> cols:指定列数
rows:指定行数
不能使用value属性赋初始值
9,表单结构
<fieldset >
用户:<input name="user" type="text" /><br />
密码:<input name="password" type="password" />
</fieldset>
10,表单结构标题
<legend align="center">用户信息</legend>
11,关联表单元素
<label for="name">用户:</label><input name="user" type="text" />
HTML框架
1,内嵌框架
iframe语法:
<iframe src="http://www.mamicode.com/URL"></iframe>
该URL指向不同的网页。
例: <iframe src="http://www.mamicode.com/demo_iframe.htm" name="iframe_a" width="200" height="200"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
-->frameborder="0" 移除边框
src : 默认显示的网页
href : 将显示的网页
frameborder:
scrolling : auto yes no
noresize:
width :
height :
--->另一种方法:<object width="600px" height="600px" data="http://www.mamicode.com/index.html"></object>
2,frameset
<frameset cols="25%,*" border="2">
<frame src="http://www.mamicode.com/left.html" name="left"/>
<frame name="right"/>
</frameset>
=====>>>>> 注意,frameset不可放在 <body>标签内,直接放 <html> 标签内
如:
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<frameset rows="100,*" border="2">
<frame src="http://www.mamicode.com/top.html" noresize name="top"/>
<frameset cols="200,*">
<frame src="http://www.mamicode.com/left.html" noresize name="left" />
<frame src="http://www.mamicode.com/right.html" name="right" />
</frameset>
</frameset>
</html>
颜色
HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）
17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。
HTML 笔记