【Web学习笔记DAY02】HTML(1)

【前端学习笔记-DAY02】HTML

今天打卡第二天,今天学习内容是HTML,以下是我整理出来的笔记,如有问题可以私聊我哦,同时也期待可以和大家相互学习沟通!一起加油吧!

HTML 初识

HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”。是一种标记性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

HTML 语法格式

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>
1 HTML标签:
作用所有HTML中标签的一个根节点。 最大的标签   根标签

2 head标签: 文档的头部
文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
注意在head标签中我们必须要设置的标签是title

3.title标签: 文档的标题
作用:让页面拥有一个属于自己的标题。

4.body标签:文档的主体  以后我们的页面内容 基本都是放到body里面的
body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

HTML标签分类

在HTML页面中,带有“< >”符号的元素被称为HTML标签,分为双标签和单标签。

双标签

 <标签名></标签名>
 //<标签名>”表示该标签的作用开始,一般称为“开始标签”
 //</标签名>” 表示该标签的作用结束,一般称为“结束标签”
 例:<div></div>

单标签

<标签名 />
//单标签也称空标签,是指用一个标签符号即可完整地描述某个功能的标签。
例:<hr />

HTML标签关系

标签的关系分为两种,嵌套(父子)关系和并列(兄弟)关系。

嵌套关系

<head>  
	<title> </title>  
</head>
//像这样一对标签包含另一对标签,此时他们的关系就是嵌套关系。
注意:两个标签为嵌套(父子)关系时,子标签建议缩进一个tab位。

并列关系

<head></head>
<body></body>
//此时两个标签就是并列关系
注意:标签为并列关系时,建议上下对齐。

HTML常用标签

HTML标签有很多,我们先把最常用标签整理出来,如果想了解更多的话可以查阅手册文档哦。
参考手册地址:https://www.w3school.com.cn/
这个参考手册不仅仅有HTML,有时间的话可以看下呦!

HTML常用标签------ 排版标签

标题标签
为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题。

<h1></h1>//定义最大的标题
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>//定义最小的标题
此标签作为标题使用,重要性依次递减。
注意:h1标签很重要,尽量少用。一个页面中只能使用一次h1,否则不利于SEO(搜索引擎优化)自然排名。

段落标签
是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

<p>内容</p>

换行标签
如果希望某段文本强制换行显示,就需要使用换行标签。

<br />//是单标签哦!

文本格式标签
为文字设置粗体、斜体或下划线效果,使文字以特殊的方式显示。
文本格式标签
注意:红色圈住的标签语义更强烈,更推荐使用哦!

图像标签
在网页中显示图像的标签。

<img src="图片的路径" alt="图片的替换文本"/>
语法中的src属性用于指定图像文件的路径和文件名。
alt属性用于指定图像的替换文本,两者都是img标签的必备属性。

img标签的属性
链接标签
链接标签定义超链接,用于从一张页面链接到另一张页面。最重要的属性是 href 属性,它指示链接的目标。

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。
target:用于指定链接页面的打开方式,其取值有__self和___blank两种,其中_self为默认值,_blank为在新窗口中打开方式。
target属性及属性值
注意:

1.外部链接 需要添加 http:// www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页

3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

base标签
为页面上的所有链接规定默认地址或默认目标。
注意: 标签必须位于 head 元素内部。
base标签的必备属性base标签的属性及属性值
注释标签
用于在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字。

  <!-- 注释语句 -->   ctrl + /       或者 ctrl +shift + / 

注意:注释的内容不会显示在浏览器视图中,但是会作为HTML的一部分在源代码中可以查看。

OK,今天的内容就这么多,明天继续吧!

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值