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 /> firstparagrap<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>
一目了然,先记下来。
