这里介绍web的一些基本知识。
我会每周不定期更新，敬请期待吧。
前言
案例测试:
marquee双标记
<marquee></marquee>
| 常用属性： |
|---|
| behavior="scroll "单方向循环滚动 "alternate"来回循环滚动 “slide” 单次滚动 width="宽度" height=”高度” direction=”方向” (left right up down) loop=“执行次数” infinite(无限的) loop=”1” |
标记的书写格式：
- 单标记和双标记，必须有结尾
<p>content</p>
<dr /> - 格式：标记 属性=“值” 属性=“值”…>
属性=“值” 以“键/值对”形式出现 - 全局书写格式:
<html>
<head>
<meta />
<title> 标题</title>
</head> <!--头标记-->
<body>
</body>
</html>
| meta用法： |
|---|
<meta name=“descript" content="xxxxxxxxxxxxxxxxx"><meta name="keywords" content="xxxx,xxxx,xxx,xxxxx,xxxx"><link href="style/style.css" rel="stylesheet" type="text/css"><script language="javascript" src="script/xxxxx.js"></script><title>xxxxxxxxxxxxx</title><meta http-equiv="content-type" content="text/html; charset=gb2312“><meta http-equiv="pragma" content="no-cache“><meta http-equiv="refresh" content="5;url=http://www.baidu.com"> |
第一章:基本标记
1.body标记
| 标记 | 意译 |
|---|---|
| text=“skyblue” | 文字颜色 |
| background=”路径”（相对路径、绝对路径、网络路径） | 背景图 |
| bgcolor=”red” | 背景色 |
| 配色 | red | green | blue | 结果 |
|---|---|---|---|---|
| # | ff | 00 | 00 | red |
| # | 00 | ff | 00 | green |
| # | 00 | 00 | ff | blue |
| # | ff | ff | ff | white |
| # | 00 | 00 | 00 | black |
html无法设置更多属性比如背景图是否平铺，那么求助样式表：
<body bgcolor="skyblue" style="background-image: url(images/img_title2.jpg); background-repeat: no-repeat;" >
| topmargin | bottommargin | leftmargin | rightmargin |
|---|
固定背景图：bgproperties="fixed"
| 代码 | 意译 |
|---|---|
link="black" | 访问前超链接颜色 |
vlink="black" | 访问过的超链接颜色 |
alink="black" | 访问时的超链接颜色 |
2.js简单应用
<body bgcolor="skyblue" topmargin="0" leftmargin="0" bgproperties="fixed" >
<h1>hello world!</h1>
<p><a href="#">this is a content!</a></p>
username:<input type="text" id="username" name="username" />
<input type="button" value="确认" onclick="sayhello()" />
<script type="text/javascript">
function sayhello(){
var username = document.getElementById("username").value;
if(username == "朴朴"){
alert(username+"真伟大！");
}
else{
alert("我不跟怪叔叔玩！"+username+"你走吧！");
}
}
</script>
</body>
<img />图片单标记
src=”路径”
width=”宽” 像素 百分比
height=”高”
border=”边框”
align=”left” center right
valign=”top” middle bottom
alt=”不加载图片时的警告信息”
title=”提示信息” 可以被爬虫获取 seo搜索引擎优化、
3.排版标记
（1）<p></p>段落标记
（2）<div></div>区块标记—布局
（3）<span></span>行级标记-----布局
示例：
<div>
<!--title-->
<span>this is a title</span>
<!--content-->
<div>this is a content</div>
</div>
<div>
<!--title-->
<h1>this is a title</h1>
<!--content-->
<p>this is a content</p>
</div>
（4）<pre></pre>格式预处理标记
HTML实体元素
| 符号 | 代码 |
|---|---|
| < | < |
| > | > |
| 空格 | |
| © | © |
（5）<br />回车
（6）<hr />水平线
width=”宽度”
size=”厚”
align=”left” center right
color=”水平线颜色”
示例：
<hr width="500" size="5" align="left" style="border:2px dashed #5151a2" />
4.文字标记
（1）<font></font>双标记
color=”文字颜色”
size=”字号” 1~7 -2~+4
face=”字体”
（2）文字格式化标记
title<b>title</b>加粗<br />
title<big>title</big>增大<br />
title<i>title</i>斜体<br />
title<em>title</em>强调-斜体<br />
title<small>title</small>略小<br />
title<strong>title</strong>略壮<br />
title<sub>title</sub>下标<br />
title<sup>title</sup>上标<br />
title<ins>title</ins>下划线<br />
title<del>title</del>删除线<br />
（3）<h1>~<h6>标题标记
<h1 align="center">this is a content</h1>
<h2>this is a content</h2>
<h3>this is a content</h3>
<h4>this is a content</h4>
<h5>this is a content</h5>
<h6>this is a content</h6>
（4）<center></center>
5.超链接<a></a>
（1）页面之间跳转
属性：href=”路径” href=”url”
（2）页面内部定位—锚标记
<a href=”#file_name”>a_link</a>
<a name=”file_name”>锚位置</a>
（3）target属性:浏览器页面打开方式
blank 和 _blank(新页面) 的区别
target=”blank”
（4）mailto:使用超链接实现邮件发送
<a href=”mailto:”>e-mail_link</a>
格式：
href=mailto:邮箱地址?相关参数(cc抄送&subject主题&body内容)
href=”mailto:fanfan@163.com?
cc=tom@163.com;jack@163.com&
subject=My First Email&
body=hello world!”
（5）资源下载
<a href=”路径” download=”下载后保存的文件名”></a>
6.列表 list
有序列表
无序列表
自定义列表
（1）有序列表
<ol>
<li>list1</li>
<li>list2</li>
</ol>
| 属性 |
|---|
type="1" "a" "A" "i" |
start="10" 起始位置从序号10开始 |
（2）无序列表
<ul>
<li>list1</li>
<li>list2</li>
</ul>
| 属性 |
|---|
| type="disc"黑点 "circle"空心圆 "square"方块 |
列表关于布局的应用—样式表
<style type="text/css">
/*将id=navigator的list变为导航栏*/
#head_list ol{
list-style: none;
}
#head_list ol li{
width: 200px;
float:left;
}
#head_list hr{
clear: left;
}
</style>
body中html的标记
<div id="head_list">
<h1>有序列表</h1>
<ol id="navigator">
<li>list_1</li>
<li>list_2</li>
<li>list_3</li>
<li>list_4</li>
<li>list_5</li>
</ol>
<hr />
</div>
第二章:表格与布局
<table >
<tr><td></td></tr>
</table
1.table
（1）table基本属性
border=”边框宽度”
bordercolor=”边框颜色”
bgcolor=”背景色”
background=“背景图路径”
width=”宽度” 像素 %
height=”高度” 一般不设置高度，内容自适应
align=”center” left right
(放在table标记里，表格针对页面居中----布局
放在tr td 标记里，表格中内容居中---排版)
valign=”top” middle bottom------对tr td中生效
cellpadding=”表内距” 表格线和内部文字的间距
cellspacing=“表格线间距离”
（2）标题标记——排版
| 意译 | 代码 |
|---|---|
| 表外标题标记 | <caption></caption> |
| 表内标题行标记 | <th></th> |
| 合并列 | colspan=" " |
| 合并行 | rowspan=" " |
（3）表格布局标记
<talbe>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table
map图片映射连接
例：
<img src="路径" usemap="#map_name"/>
<map name="map_name">
<area shape="rect" coords="180,50,20" href="html/new_file_1.html" target="_blank" title="六度空间" />
</map>
shape="circle" 圆形 coords="x,y,r"
="rect" 矩形 coords="x1,y1,x2,y2"
="poligon" 多边形 coords=”x1,y1,x2,y2,x3,y3,x4,y4…..”
第三章：框架布局
frameset
iframe
655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
