HTML语言基础
advertisement
Lecture 1: HTML基础
什么是html语言
HTML是用来制作网页的标记语言
HTML是Hypertext Markup Language的英文缩写，
即超文本标记语言
HTML语言是一种标记语言，不需要编译，直接由
浏览器执行
HTML文件是一个文本文件，包含了一些HTML元素，
标签等。HTML文件必须使用html或htm为文件名后
缀
Html语言大小写不敏感
HTML是由W3C的维护的
HTML语言语法
HTML语言的语法非常简单
模块化：一般是以<tag property=‘value’>开始，以</tag>结束
或者是<tag />，比如<br />
基本例子
<html>
<head>
<title>My first html example</title>
</head>
<body>
<h1>Hello, world</h1>
<!--Welcome to our database basic lessons.-->
<p align=‘justify’>
This is our first journey to the HTML world. By typing in all these words into a whole file,
you can gain a first insight into the html syntaxes. This is important for our next <a
href=‘http://www.php.org’>PHP</a> lesson.</p>
</body>
</html>
html标签
xml:lang -- 国际化属性
xmlns -- 代表xml命名空间
dir -- 定义元素(文字)的对齐方式
<html xmlns="http://www.sjtu.edu.cn" xml:lang="zh-CN" dir="ltr">
head标签
包含了当前文档的一些信息
base标签
href 基础url
target 链接目标
<!-- main.htm-->
<frameset cols="20%, *">
<frame src="link.htm">
<frame src="http://www.sjtu.edu.cn/" name=“sjtu">
</frameset>
<!--link.htm-->
<head>
<base target=“sjtu">
</head>
<a href="http://life.sjtu.edu.cn/">Life Science</a>
<a href="http://biochem.sjtu.edu.cn/">Biochemistry</a>
<a href="http://ee.sjtu.edu.cn/">Electrical Engineering</a>
<a href="http://pharmacy.sjtu.edu.cn/">Pharmaceutics</a>
Object标签
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=7,0,19,0“> 您的浏览器不支持Flash，请点击
<a href="http://www.macromedia.com/go/getflashplayer">下载</a>
<param name="movie" value=“microarray.swf" />
<param name="quality" value="high" />
</object>
link标签
<head>
<link rel="stylesheet" type="text/css" title="blue" href=“style/style.css" />
</head>
<head>
<link rel="alternate stylesheet" type="text/css" title="red"
href=“style/style.css" />
</head>
style标签
<head>
<style type="text/css">
abbr { font-size: 12px; }
.text10pxwhite {
font-size: 10px;
color: #FFFFFF; }
</style>
</head>
一些有趣的东东
<body>
<br /> <-- 换行-->
<p align=‘left|right|center|justify’>第一段</p>
<p>第二段: &lt; 可以显示 小于号； &gt; 可以显示 大于号。 </p>
<h1><strong>标题1</strong></h1>
<h2><em>标题2</em></h2>
<h3><font color=‘red’>标题3</font></h3>
<h4><a href=‘#six’>标题4</a></h4>
<h5>&nbsp;&nbsp;&nbsp;&nbsp;标题5（我的前面有几个空格）</h5>
<h6><a name=‘#six’></a>标题6</h6>
<hr width=80% height=2pt />
<a href="http://www.google.com/" title="google">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" / alt=‘Google
Logo’ height=20 width=40>
</a><br />
<a href=“mailto: ricket.woo@gmail.com”>给我发邮件</a>
</body>
HTML列表
ul标签
ol标签
DT标签
<ul>
<li value=‘square’>Sequence alignment</li>
<li>Phylogenetic analysis</li>
<li>Gene prediction</li>
<li>Structure prediction</li>
</ul>
<ol>
<li value=‘square’>Sequence alignment</li>
<li>Phylogenetic analysis</li>
<li>Gene prediction</li>
<li>Structure prediction</li>
</ol>
<dl>
<dt>Sequence alignment<dt>
<dd>DNA pairwise alignment</dd>
<dd>multiple alignment</dd>
<dd>genomic alignment</dd>
</dl>
HTML表格
<table width="80%" border="1">
<colgroup>
<col align=‘center’ colspan=2/>
<col align=‘left’ colspan=2/>
</colgroup>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Gender</th>
<th>Age</th>
</tr>
<tr>
<td>Lin</td>
<td>Wang</td>
<td rowspan=2>Female</td>
<td>19</td>
</tr>
<tr>
<td>Shuo</td>
<td>Zhou</td>
<td>21</td>
</tr>
</table>
html表单
<form id="loginForm" method="post" action="login.php">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" value='admin'
readonly='readonly'/><br />
<label for="pass">密&nbsp;&nbsp;码:</label>
<input type="password" id="pass" name="pass" /><br />
<strong>兴趣爱好：</strong><br />
<label for="fav">计算机</label>
<input type="checkbox" value="1" id="fav" name="fav" />
<label for="fav">旅游</label>
<input type="checkbox" value="2" id="fav" name="fav"
disabled='disabled'/>
<label for="fav">购物</label>
<input type="checkbox" value="3" id="fav" name="fav"
checked="checked" /><br/>
<label for='comments'>留言:</label><br />
<textarea cols="50" rows="10" id="comments"
name="comments">not less than 30 words</textarea><br />
<label for="languageselect">你想学习的编程语言</label><br />
<select size="6" multiple="multiple" id="languageselect" name="languageselect">
<option>PYTHON</option>
<option>PHP</option>
<option>C</option>
<option>JAVA</option>
<option>C++</option>
<option>PERL</option>
</select><br />
<label for="research">你最感兴趣的研究内容</label><br />
<select size="1" id="research" name="research">
<option>生物序列分析</option>
<option>蛋白结构预测</option>
<option>芯片数据分析</option>
</select><br />
<input type=submit value='LOGIN'>
<input type=reset value='RESET'>
</form>
html段落
<p align=‘left|right|center|justify’>
中间可以插入
段落。
</p>
<pre>
可以保持原文中的
空格，
空行等等
</pre>
<blockcode>
中间可以插入各种代码
</blockcode>
Javascript
Javascript作为一种脚本解释语言，能够大大
的促进html网页开发，但不在我们本次课堂
的讨论范围之内，感兴趣的同学可自行去看
看这方面的参考资料。
<body>
<script type=“text/javascript”>
alert(“This is javascript!”)
</script>
</body>
