网页学习第二天

今天,依照目录,我打算学习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>

在这里插入图片描述
一目了然,先记下来。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章