html 笔记
this is the first heading
..this is heading 5
this is a paragraph
this is another
链接< ......<html>
</html>
<body>
</body>
<h1> this is the first heading </h1>
.
.
<h5> this is heading 5</h5>
<p> this is a paragraph </p>
<p> this is
another </p>
链接
<a href="http://www.w3school.com.cn"> this is a link </a>
imag只包含属性，没有闭合标签
<img src=" "/>
<img src=" picture name .图像格式" width="number " height=" number" />
图像背景
<body background="picture.格式"/>
</body>
在文字中的位置
<img src="picture" align="bottom/middle/top"/>
在段落的左右位置
align="right/left"
属性
<h1 align="center">this is heading 1 </h1> 居中
<h1 style="text-align:center"> this is heading 1 </h1>
<body bgcolor="yellow">
</body> background color
level line水平线
<hr/>
注释notes
<!-- content 内容 -->
折行<br/>
<p>
break<br/>lines<br/>use br tag
<p/>
样式 style<!--内联样式，个别元素 -->
<h1 style="background-color:green">thie is a heading</h1>
<p style="font -family:arial;color:red;font-size:20px;"> a pargraph</p>
内部样式
添加到<head> </head>间对文件格式化
<head>
<style type="text/css">
body { background-color : red}
p { color : blue}
</style>
</head>
外部样式
文本格式
<b>this text is bold</b> 粗体文本
<i>this text is italic</i> 斜体文本
保留空格和换行
<pre>
content
</pre>
缩写 abbreviation
<abbr title="原内容"> 缩写内容</abbr>
首字母缩写
<acronym title=" World Wide Web">WWW</acronym>
鼠标移至缩略词显示原内容
quote引用
长引用
<blockquote>
</blockquote> <!-- 自动插入换行，外边距 -->
短引用
<q>
</q>
delete 删除
<del> content </del>
下划线效果
<ins> content </ins>
著作标题<cite>
<p> <cite> The Scream </cite> by Munch ,Painted in 1893 </p>
没有下划线的链接
<a href="address" style="text-decoration:none">
content
</a>
本页跳转，the different position of the same page
<p>
<a href="# any name "> content such as 'jump to...'</a>
</p>
...
<h2> <a name=" the name same as above "> chapter six </a></h2>
<!--click jump to,than to chapter six-->
表格table
边宽 、格边距、格间距、背景颜色/图片 <table border="num 1/2/3/..." cellpadding=" number"
cellspacing="number" bdcolor="color red/blue "
background="picture ">
<tr> <!--行-->
<td>content/number</td>
<td> </td>
</tr>
<tr> <!--第二行-->
<td> content </td>
<td bgcolor="color" background="picture"> content </td>
内容左/右对齐
<td align="right/left"> content </td>
<td> </td>
</tr>
表头 header
<tr>
<th> content </th>
</tr>
横跨行列表头
<th colspan=" num 跨几列"> name </th>
<th rowspan=" num跨几行 "> name </th>
无序列表<ul> </ul>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
符号 <ul type="circle/square">
有序列表<ol> </ol>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
符号 字母<ol type="A"> 罗马字母 <ol type="I">
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
定义列表
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
块
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
类
行：
<!DOCTYPE html>
<html>
<head>
<style>
span.red {
color:red;
}
</style>
</head>
<body>
<h1>我的<span class="red">重要的</span>标题</h1>
</body>
</html>
块<div>
类
<html>
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
</body>
</html>
输入
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
文本字段的默认宽度是 20 个字符
按钮
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Hello World!')">点击我！</button>
</body>
</html>