vlambda博客
学习文章列表

HTML的结构与基本标签

今天,依照目录,我打算学习HTML的结构和基本标记,并且尝试手工编写代码。



以下是HTML的基本结构:



```<!--我是注释--!>

<html><!--这里代表开头--!>

<head><!--这里代表文件头部开始--!><title>我的第一个 HTML 页面</title><!--这里代表文件标题--!></head><!--这里代表文件头部结束--!>

<body><!--这里代表文件主体开始--!><p>body 元素的内容会显示在浏览器中。</p><!--这里代表文件正文--!><p>title 元素的内容会显示在浏览器的标题栏中。</p></body><!--这里代表文件正文结束--!>

</html><!--这里代表结尾--!>```

了解之后编写看看效果,


HTML的结构与基本标签



把代码复制粘贴进去

HTML的结构与基本标签


保存为HTML文件

![编码要是UTF-8]

HTML的结构与基本标签


打开

HTML的结构与基本标签

懂了,title是标签页的名字

body是写在网页的内容




现在学习基本标记


换行符

<br />

为了看看换行是为什么,我写了这个代码:

<html>

<head><title>换行符测试</title></head>

<body><br /><p>This <br />is my<br /> first paragrap<br />h.</p><br /></body>

</html>

HTML的结构与基本标签


可以观察到,开头有空行,说明第一个换行符生效了


在代码中,我设置了多个回车分开,但是在网页中仅显示空格,说明回车键不能换行了。




好奇为什么这是空格,那我原来的空格又怎么了?于是修改了body的代码。

<body><p>This i s m y first paragraph.</p><br /></body>

HTML的结构与基本标签

可见,连续的空格仅仅读取为一个。


 其他标签


我借用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>

HTML的结构与基本标签

一目了然,先记下来。


评论区在这里!