关于HTML基础,一个小白的大致理解

可能你和我一样,是一个小白,白的不能再白了,这是我这些天学习HTML的一些经历,笔记本上也只记了大概,但这些只是基础!!!开头写的有些草率,后面会找时间修改!!
由于才入门,暂时把定义为HTML属于一种关于网页制作的语言吧
在HTML中
你需要大概了解HTML的大概框架
然后你需要掌握一些标签
如br,hr, p以及h这些基本的标签(当然是要加上< >符号的)在这里插入图片描述
使用空的段落标记 p /p 去插入一个空行是个坏习惯。用
标签代替它!(但是不要用 br / 标签去创建列表。
下面是有关样式(style)的使用来调试背景
style=“background-color:yellow”
style=“background-color:red”
style=“background-color:green”
关于怎么更深入的往下学,我现在需要做一些实例来巩固了

经过几天的学习,我觉得作为一个网页制作的小白应该大致了解一些关于文本格式化标签,举一些常用的例子,如
strong (字体加粗)
em(斜体)
sub(下标)
sup(上标)…(当然是要加上< >符号的)等等
你应该知道在标签里的叫做属性(属性名+属性值)
然后一开始学习了大概框架,现在应该来小部分的细说了
什么叫页头(title)呢?页头就是你现在电脑打开浏览器最上方的那个东西在这里插入图片描述

就是“孤独的天涯的空间”它就是title构造的,我暂时只学习了基础的title,因为是在head里写,所以我顺便看了一下,如何解决中文乱码问题,可以在head中加入meta,然后在后面写上http-equiv=“Content-Type” content=“text/html; charset=UTF-8” /。然后在HTML中head应该放入什么元素,请看这位作者大大的文章HTML的head中应该放入什么元素

然后关于head中的内容我就大概学到这,接下来就开始了难以言喻的旅程。
按照我学习的顺序开始记录吧。(以下img,a 等等都需加<>

1.首先学习了在网页中插入图像img src=“图片路径”,如果是本地文件先找到对应的位置,然后加上file://+盘中位置。可在img中加入width,height来改变图片的大小,但可能图片会失真 。

2.怎么设置图片的位置呢 只需要在div块中加入align:left/right/center(居左/居右/居中),**tips:**如果图片不存在,默认会显示一个缺失图片,这是不友好的,所以可以加上alt属性。
当图片存在的时候,alt是不会显示的
当图片不存在的时候,alt就会出现。
关于图片的一个小细节:把src = “” 双引号去掉,直接等于绝对路径或者相对路径就可以的,把图片拖到浏览器地址栏可以获取绝对路径,直接拷贝即可

3.对于链接,用到是a href=“网址” >网址名称/a
(1)这是最基本的链接制作,如果想要在新的网页中打开链接,可在网址后增加target=“_blink”。而且如果你想要知道去到哪个网址,可在网址后,增加title=“所提示的信息(跳转到哪个网址)”。
(2)如果想要用图片来制作链接,你可以试试这个:
a href=“网址”
img src=“图片的路径”/ /a,即可使用图片作为链接,就像这样<a href="http://www.12306.com"> <img src="https://how2j.cn/example.gif"/> </a>

4.终于到表格了!!!
表格是什么????表格就是一个痛苦的开始!
(1)你先要记住table标签,然后tr(table row)表示的是表中的行,td(table data)表示的是表中的数据。我一开始就是个表,后面发现它也可以有边框,它的边框有宽度,有颜色。什么?你想设置表格的宽度?只需在table标签中加入一个width=“数值(记得带上px)”就行。什么??你想试试调整边框的宽度,也没问题,也是在table标签中加入一个border=“纯数值”,边框的宽度就能够设置了。

以下情况都是在td标签中进行增加
(2)单元格宽度的相对值和绝对值只需要大概了解就行,前者是在整个设置过的table width的相对宽度(x%),而后者则是自己对单元格的宽度进行设置,与第一个单元格同列的单元格宽度继承第一个单元格所设置的宽度,而其他单元格宽度则是根据第一个单元格的宽度和table所设置的宽度共同决定的。
(3)单元格对齐分为水平对齐与垂直对齐,水平对齐是在你想要对齐的td标签中增加align=”left/right/center“(居左/居右/居中);而垂直对齐呢,也有异曲同工之妙,只是说从align变为了valign,然后后面的值也变为了top/middle/bottom(居上/居中/居右)。
(4)是时候说说单元格合并了,单元格合并也分为两种,一种是跨列合并(水平合并),在td标签中加入colspan=“合并的列数”即可,注意:合并的列数中需带有数据,否则就会出现空的单元格,使得表格非常丑陋;另一种是跨行合并(垂直合并),与水平合并的同理,只是需将colspan换成rowspan。
tips:一个小技巧:可在tr或td的标签中通过加入bgcolor=“颜色/颜色代码”来设置背景色,tr设置背景色后影响的是整行,而td设置后影响的是单个单元格。

5.小小列表,可笑可笑!!
列表分为三种:有序列表(ordered list),无序列表(unorder),自定义列表(definition list)。
(1)先说说有序吧,emmmm,先介绍介绍格式

<ol>
<li>有序1</li>
<li>有序2</li>
</ol>

可在ol标签中增加type=“数字/大写英文字母/小写英文字母/小写罗马数字/大写罗马数字”来改变有序的表现方式。

注意事项:
ol 标签需要配合 li 标签一起使用,不能单独使用。
ol 标签的子标签只能是 li 标签,不能是其它标签。
ol 标签的内部文本,只能在 li 标签内部添加,不能在 li 标签外部添加。
(2)然后是无序列表,因为无序列表的type属性有三个值 disc:表示实心小圆点 circle:表示空心小圆点 square:表示实心小方块。所以可在ul标签内增加这些值

<ul>
<li>DOTA</li>
<li>LOL</li>
</ul>

注意事项:因某些浏览器和其他浏览器对无序列表前面的项目符号显示的样式不同
所以我们可以设置不要项目符号或者直接在ul标签里面用内联样式 style=“list-style: none”
如果需要设置项目符号,则可以采用为li设置背景图片的方式设置。(这里我们提到了后面的css哦)

(3)最后是自定义列表
同样上格式

<dl>
<dt>定义名词</dt>
<dd>定义描述</dd>

dt用来表示被说明的对象,dd表示,对象的定义。

6.内联框架gogogo
iframe 即内联框架
通过内联框架 可以实现在网页中“插入”网页
格式如下:

<iframe src="https://4399.com/" width="600px" height="400px">
</iframe>

你不会想着学习的时候玩4399吧?(手动滑稽)

作者留言:虽然有些繁琐,但确实能感受到一个网页小白迫切学习的心情,如果各位看了以后有什么见解,请在评论留言,由于很少写博客,最近可能多更,希望有问题各位能及时提出,无论是知识点有欠缺还是博客的创作上有不足,我都会采纳大家的建议,积极改正

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值