第二周学习周记——进一步学习HTML

本文介绍了HTML的基础知识,包括标题、段落、链接和属性的使用,并详细讲解了div和span元素在HTML布局中的应用,通过实例展示了如何利用div进行页面布局,包括头部、菜单和内容区域的创建。学习过程中,逐步熟悉了HTML文档结构和样式设置。


前言

在第一周初步了解了HTML后,简单的制作了个人介绍的网站,在这一周,将进一步了解HTML并开始熟悉使用HTML。
注:为了更直接表现出更有效的内容,代码块展示部分只展示HTML文档的主体部分。


一、HTML基础

1. HTML标题

<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>

2. HTML段落

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

3. HTML链接

<a href="https://blog.csdn.net/jix_Hu?spm=1000.2115.3001.5343">个人主页</a>

4. HTML属性

由上HTML链接的代码,HTML链接由a标签定义,其链接的地址在href属性中指定。
不只在链接中,在接下来的HTML布局展示中,设置了包含框背景的颜色以及大小等信息,也是给其赋予属性。


二、HTML布局

1. div元素和span元素

div表示在文档中定义一块区域,相当于一个容器。
span表示在文本行中定义一个区域,相当于一个包含框,与div类似。
二者不同的是:
如果与 CSS 一同使用,div元素可用于对大的内容块设置样式属性,而span元素可用于为部分文本设置样式属性。

2. HTML布局(使用div元素)

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">HTML布局展示</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>学习内容</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
好好学习!</div>

</div>

运行后结果如图所示:
在这里插入图片描述


总结

在HTML的学习中,以上展示的是我在学习中认为比较基础的知识,由于本人学习能力有限,而且学习时间比较少,学得比较仓促,不能一一列举出详细的知识摘要,望大家谅解!!我也会通过写周记来不断加强我的写作能力,向大家展示更丰富的学习体验!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值