HTML的结构与基本标签
今天,依照目录,我打算学习HTML的结构和基本标记,并且尝试手工编写代码。
以下是HTML的基本结构:
```
<!--我是注释--!>
<html><!--这里代表开头--!>
<head><!--这里代表文件头部开始--!>
<title>我的第一个 HTML 页面</title><!--这里代表文件标题--!>
</head><!--这里代表文件头部结束--!>
<body><!--这里代表文件主体开始--!>
<p>body 元素的内容会显示在浏览器中。</p><!--这里代表文件正文--!>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body><!--这里代表文件正文结束--!>
</html><!--这里代表结尾--!>
```
了解之后编写看看效果,
把代码复制粘贴进去
保存为HTML文件
![编码要是UTF-8]
打开
懂了,title是标签页的名字
body是写在网页的内容
现在学习基本标记
换行符
<br />
为了看看换行是为什么,我写了这个代码:
<html>
<head>
<title>换行符测试</title>
</head>
<body><br />
<p>This <br />is my<br /> first
par
ag
rap<br />h.</p>
<br />
</body>
</html>
可以观察到,开头有空行,说明第一个换行符生效了
在代码中,我设置了多个回车分开,但是在网页中仅显示空格,说明回车键不能换行了。
好奇为什么这是空格,那我原来的空格又怎么了?于是修改了body的代码。
<body>
<p>This i s m y first paragraph.</p>
<br />
</body>
可见,连续的空格仅仅读取为一个。
其他标签
我借用w3school的代码:
<html>
<body>
<a href="http://www.w3school.com.cn">
This is a link</a>
<img src="/i/eg_w3school.gif" width="300" height="120" />
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>
</body>
</html>
一目了然,先记下来。