好东西不私藏,大家一起分享!爱站云 用心做
广告位 后台主题配置管理

网站首页 爱站云资源网 技术教程 正文

第6课:学习更多元素

梦哥 2019-03-14 技术教程 0 评论

你有没有独立完成过一些网页?如果还没有,请看下面的例子:


</html>

123

<head>

<title>我的网站</title>

</head>


<body>

<h1>标题</h1>

<p>一些文字。。。</p>

<h2>子标题</h2>

<p>一些文字。。。。</p>

</body>


</html>



看完了,然后呢?

现在要学习七个新元素。


前面学过,你可以通过用<b>和</b>把文本括起来,把文本设为粗体;类似地,你可以通过用<i>和</i>把文本括起来,把文本设为斜体。没错,这里的“i”是“斜体(italic)”的意思。


例1:


<i>这句话应显示为斜体</i>


该例在浏览器中将显示如下:


这句话应显示为斜体 

同样,你可以用small标签把文本设为小字体:


例2:


<small>这句话应显示为小字体</small>


该例在浏览器中将显示如下:


这句话应显示为小字体 

我可以同时应用多个标签吗?

你可以同时应用多个标签,只要你能避免标签交错起来。最好通过一个例子来说明:


例3:


如果你希望一段文本即是粗体又是斜体,你可以这样做:


<b><i>既是粗体又是斜体</i></b>


注意不能这样:


<b><i>既是粗体又是斜体</b></i>


二者区别在于:在前一个例子中,首先打开的标签最后关闭。这样可以避免混淆。


学习更多元素!

正如第3课中提到的,有些元素是没有尾标签(end tag)的。这种元素被称作空元素(emp

ty element),它们不与特定文本段落相关。一个例子是<br />,它的作用是插入一个换行符。


例4:


写一些文字<br />重起一行再写一些文字


该例在浏览器中将显示如下:


写一些文字

重起一行再写一些文字 

注意上面的空元素<br />:它没有尾标签,并且在首标签名称的后面加了空格和斜杠。 


另一个空元素是<hr />,它的作用是画一条水平线。这里的“hr”是“水平线(horizontal rule)”的意思。


例5:

<hr />


该例在浏览器中将显示如下:

----------------------


HTML中的空元素还包括ul、ol和li,这三个元素用于制作列表。


ul代表“无序列表(unordered list)”,它的作用是为每个列表项显示一个粗点。ol代表“有序列表(ordered list)”,它的作用是显示每个列表项的序号。用<li>元素把多个列表项组织为一个列表,其中的li代表“列表项(list item)。感觉有些迷糊?那么,请看下面的例子:


例7:



<ul>

<li>一个列表项</li>

<li>另一个列表项</li>

</ul>



该例在浏览器中将显示如下:


一个列表项 

另一个列表项 

例8:



<ol>

<li>第一个列表项</li>

<li>第二个列表项</li>

</ol>



该例在浏览器中将显示如下:


第一个列表项 

第二个列表项 

哟!就这些啊?

嗯,这一课就学这么多。再次重申,请反复实验本课所学的元素,并在制作自己的网页时使用它们。



<i>斜体</i>

<small>小字体</small>

<br /> 换行

<hr /> 水平线

<ul>无序列表<ul>

<ol>有序列表<ol>

<li>列表项</li>


< 爱站云SEO >
本站所有文章,未经允许一律不允许转载,违者后果自负
本站为SEO教学博客,学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站部分文章存在于网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

站长QQ:207385345  官方QQ群:333914614


猜你喜欢

本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:

温馨提示:(登陆后才可以评论哦!点我QQ登录哦,若已登录请忽略)。
搜索
标签列表
关于我们
本人提供网站SEO优化、SEM推广营销(百度/360/搜狗收录优化)、企业建站、搜索引擎教学等服务。
联系我们:给我发QQ消息  加入QQ群
爱站云安全认证