基础语法

HTML Basic Document

<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>

Text Elements

<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule水平线)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>   <!--着重文字-->
<strong>This text is strong</strong>   <!--加重语气-->
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>     <!--加粗-->
<i>This text is italic</i>      <!--斜体-->

Links, Anchors, and Image Elements

<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL"
alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>

Unordered list

<ul>
<li>First item</li>
<li>Next item</li>
</ul>

Ordered list

<ol>
<li>First item</li>
<li>Next item</li>
</ol>

Definition list(定义)

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border="1">
<tr>
  <th>someheader</th>
  <th>someheader</th>
</tr>
<tr>
  <td>sometext</td>
  <td>sometext</td>
</tr>
</table>

Frames框架

<frameset cols="25%,75%">
  <frame src="page1.htm">
  <frame src="page2.htm">
</frameset>

Iframe:网页中显示网页

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

script：定义客户端脚本，如：JavaScript

<script type="text/javascript">
document.write("Hello World!")
</script>

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

Forms（表单）

<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname" value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60"
cols="20"></textarea>
</form>

Entities

&lt is the same as <
&gt is the same as >
© is the same as ©

显示结果	描述	实体名称	实体编号
空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

Other Elements

<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>

image

![](/i/eg_mouse.jpg)       <!--一般形式-->
![](/i/eg_mouse.jpg)   <!--控制长宽-->
 ![](boat.gif)     
<!--无法载入图像时，替换文本属性显示图像失去的信息-->
![](/i/eg_cute.gif)  
<!--控制图像位置-->

可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

补充：HTML样式

通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
本次只讲解style属性，具体形式：
<p style="attribute:value"></ p>
或者
<h1 style="attribute1:value1;attribute2:value2;"></ h1>

背景颜色：background-color

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

字体、颜色、尺寸：font-family、color 以及 font-size

<html>
<body>
<h1 style="font-family:verdana">A heading</h1>   
<!--中文字体可选：华文行楷/华文新魏/隶书/方正舒体>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

对齐方式：text-align

<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>
</html>

背景图片：background

<body background="./Pictures/background_paper_1.gif">
    <p style="text-align: center;">背景图片</p> 
</body>

如何使用样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部
分通过 <style> 标签定义内部样式表。

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

HTML学习笔记（一）--基础语法

HTML学习笔记（一）--基础语法

基础语法

补充：HTML样式

如何使用样式

推荐阅读更多精彩内容