前端学习之初识HTML以及块级元素和行内元素的区别(1)

目录

一、什么是HTML?

HTML是HyperType Markup Language(超文本标记语言)

HTML的特点:

Html标签注意规范:建议镜面嵌套,不建议交叉嵌套。

二、块级元素和行内元素

块级元素:

行内元素:


一、什么是HTML?

HTML是HyperType Markup Language(超文本标记语言)

      它不是一种编程语言,而是一种标记语言,用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。HTML也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。

      可以使用.htm与.html作为HTML文件的后缀名(扩展名),.htm与 .html没有本质意义的区别,以前操作系统支持文件字符长度不超过3位,如果后缀html网站服务器是解析不出来的,htm作为html文件的后缀。

HTML的特点:

      超文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网 (WWW)盛行的原因之一,其主要特点如下:

      1.简易性:超文本标记语言版本升级采用超集方式,从而更加灵活方便。

      2.可扩展性:超文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超文本标记语言采取子类 元素的方式,为系统扩展带来保证。

      3.平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超文本标记语言可以使用 在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。

     4.通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文 本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

 <!DOCTYPE html>是h5的声明,是网页必备组成成分,避免浏览器的怪异模式。

属性lang是单词language的缩写,意思是语言,”en”代表英语,”zh-CN”代表中文。

<meta>标签是用来设置网页的元数据。

<title>是选项卡标题,有利于seo(搜素引擎)优化

Html标签注意规范:建议镜面嵌套,不建议交叉嵌套。

即镜面嵌套:

<div>

        <div></div>

        <p></p>

        <span></span>

</div>

交叉嵌套:

<div><p></div></p>

如果HTML标记被交叉嵌套,浏览器会尝试修复这种错误。通常,浏览器会将交叉嵌套的标签放在正确的位置,并继续解析HTML。但是,这样做可能会导致页面出现意外的结果或者不一致的显示效果,甚至可能导致安全问题。

二、块级元素和行内元素

块级元素:

有div p section header footer nav article body html 列表标签等。

其中 header footer nav article是h5新增标签。

在vscode中敲入

打开浏览器开发者工具查看代码,发现:

 即块级元素的特点是:

1.独占一行

2.宽度默认是100%

3.可以通过css属性设置宽高

4.高度由内部内容决定

行内元素:

有a span i em cite b strong sub sup strike等。

敲入

打开网页查看效果:

得出行内元素的特点是:

1.与其他行内元素共享一行

2.高度由内部内容决定

3.无法通过css属性设置宽高

4.不建议行内元素嵌套块级元素

内容如有错误,欢迎大家在评论区指出,谢谢各位的浏览。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学前端的狗头苏丹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值