JavaWeb-前端基础 (2)

现在我们再来看主体,我们可以在主体内部编写该页面要展示的所有内容,比如我们之前就用到了img标签来展示一个图片,其中每一个标签都称为一个元素:

<img src="http://www.likecs.com/image.xxx" alt="当图片加载失败时,显示的文本">

我们发现,这个标签只存在一个,并没有成对出现,HTML中有些标签是单标签,也就是说只有这一个,还有一些标签是双标签,必须成对出现,HTML中,也不允许交叉嵌套,但是出现交叉嵌套时,浏览器并不会提示错误,而是仍旧尝试去解析这些内容,甚至会帮助我们进行一定程度的修复,比如:

<body> <iframe src="http://player.bilibili.com/player.html?aid=333231998&bvid=BV1rA411g7q8&cid=346917516&page=1" scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true"> </body> </iframe>

很明显上面的代码已经出现交叉嵌套的情况了,但是依然能够在浏览器中正确地显示。

在主体中,我们一般使用div标签来分割页面:

<body> <div>我是第一块</div> <div>我是第二块</div> </body>

通过使用div标签,我们将整个页面按行划分,而高度就是内部元素的高度,那么如果只希望按元素划分,也就是说元素占多大就划分多大的空间,那么我们就可以使用span标签来划分:

<body> <div> <span>我是第一块第一个部分</span> <span>我是第一块第二个部分</span> </div> <div>我是第二块</div> </body>

我们也可以使用p段落标签,它一般用于文章分段:

<body> <p> 你看这个彬彬啊,才喝几罐就醉了,真的太逊了。 这个彬彬就是逊呀! 听你这么说,你很勇哦? 开玩笑,我超勇的,超会喝的啦。 超会喝,很勇嘛。身材不错哦,蛮结实的嘛。 </p> <p> 哎,杰哥,你干嘛啊。都几岁了,还那么害羞!我看你,完全是不懂哦! 懂,懂什么啊? 你想懂?我房里有一些好康的。 好康,是新游戏哦! 什么新游戏,比游戏还刺激! </p> <p> 杰哥,这是什么啊? 哎呦,你脸红啦!来,让我看看。 不要啦!! 让我看看嘛。 不要啦,杰哥,你干嘛啊! 让我看看你法语正不正常啊! </p> </body>

那么如果遇到特殊字符该怎么办呢?和XML一样,我们可以使用转义字符:

点击查看源网页

注意:多个连续的空格字符只能被识别为一个,如果需要连续多个必须使用转义字符,同时也不会识别换行,换行只会变成一个空格,需要换行必须使用br标签。

通过了解了HTML的一些基础语法,我们现在就知道一个页面大致是如何编写了。

HTML常用标签

前面我们已经了解了HTML的基本语法规范,那么现在我们就来看看,有哪些常用的标签吧,首先是换行和分割线:

br 换行

hr 分割线

<body> <div> 我是一段文字<br>我是第二段文字 </div> <hr> <div>我是底部文字</div> </body>

标题一般用h1到h6表示,我们来看看效果:

<body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <p>我是正文内容,真不错。</p> </body>

现在我们来看看超链接,我们可以添加一个链接用于指向其他网站:

<a href="http://www.bilibili.com">点击访问小破站</a>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzdjdx.html