是html初见

第一次的html之路

可以说在选择前端之前我对html没有了解,甚至对于前端这个词也仅仅停留在做网页上,但实际上说,学习html的一周以来,我觉得还是蛮快乐的。
本周主要就是学了一点点基础,还是很有意思的。

具体内容

1、html最基本的主体部分,<!doctype html>作为声明,非常重要
html 被称为根标签,是页面中最大的标签。
head是文档的头部,写在 html标签里面,并且在head标签中必须要设置title标签。
body是文档的主体,页面内容基本都是放到body里的。

<!doctype html>
<head>
	<title>测试</title>
</head>
<body>
	这是一句话。
</body>
</html>

2、html的字符集和页面语言,字符集在html中非常关键,必须要写,不写的话可能会乱码

<!--zh-cn是中文,en是英语-->
<html lang="zh-cn">
<meta charset="utf-8"/>

目前utf-8是最常用的字符集编码方式,常用的字符集编码方式还有gbk(全部中文字符)、gb2312(简中)、big5(繁中)。
3、常用标签
常用标签分为排版标签和文本格式化标签。
其中排版标签又分为标题标签、段落标签、换行标签和div与span标签。
①标题标签,标题标签有六种,分别对应标题文本的六个大小,语法格式为

<!--因为有六个大小所以就只写一个做为例子吧-->
<h1>标题文本</h1>

显示效果:

标题文本

②段落标签
<p>这里有一段话。</p>
<p>这里又有一段话。</p>

显示效果:

这里有一段话。

这里又有一段话。

③水平线标签
<hr />

显示效果:


④换行标签
这是这段话前面的部分,<br />这是这段话后面的部分。

显示效果:
这是这段话前面的部分,
这是这段话后面的部分。
⑤div标签与span标签
div和span本身是没有语义的,是网页布局主要的两个盒子。两个标签都是双标签这里就不赘述了。不过div标签一行只能放一个,span标签一行可以放多个。
⑥文本格式化标签用来改变网页中文字的显示效果。(学到的几个都是双标签)
strong标签使文字以粗体方式显现,em标签使文字以斜体方式显示,del标签使文字以加删除线方式显示,ins标签使文字以加下划线昂是显示。
4、标签属性和图像标签
标签属性可以使html标签提供更多信息。标签可以拥有多个属性,但必须写在开始标签中,位于标签名之后;且属性之间不分先后顺序,标签名与属性,属性与属性之间均用空格分开。
图像标签的语法格式如下:

<img src="图像url" />

图像标签有六个标记属性,分别是src(图像路径)、alt(图像不能显示时的替代文本)、title(鼠标悬停在图像上时显示的内容)、width和height(可只改其中一个,因为图像的缩放是成比例的)、border(设置图像边框的宽度)
链接标签
语法格式:

<!--_blank是在新窗口打开,self是在本窗口打开,如果不写target标签,则默认为self-->
<a href="链接" target="_blank">文本或图像</a>

5、颜色
语法格式:

<font color="blue">我很蓝</font>

显示效果:
我很蓝

6、路径
路径分为相对路径和绝对路径,主要是相对路径,绝对路径的泛用性太低辽
同一级路径直接在img src=’’ "中写文件名
上一级路径在文件名前加…/,上两级则加…/…/以此类推
下一级路径在文件名前加/
7、锚点定位和base标签
①锚点定位:不知道咋说总之就是可以在页面内跳转(真的不知道咋说总之是那么个意思)
示例:

<a href="#eg">这是一个例子</a>
<h6 id="eg">example<h6>

显示效果:
这是一个例子

example

②base表签:是单标签,写在head标签之间,可以设置整体链接的打开状态。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值