HTML入门宝典(基础标签)

HTML语言(定义)

HTML(超文本标记语言)是一种用于创建网络页面和应用程序的标记语言。它是一种基于标签的语言,其中标签用于标识文本、图像和其他媒体文件的各种元素。使用HTML,可以创建网页,添加文本,图像,音频和视频,以及为网页添加交互性和动态效果。

HTML的语法相对简单,它由一系列标签和属性组成。标签用于定义文本的结构和意义,而属性用于控制标签的外观和行为。HTML还支持各种嵌套标签的组合,以及使用样式表和脚本语言(如CSS和JavaScript)来为网页添加更复杂的效果。

总的来说,HTML是一种为网页和应用程序提供内容和结构的基本标记语言,同时也是现代Web开发中不可或缺的一部分。

HTML语法结构

HTML(超文本标记语言)是一种用于创建网页的标记语言,它是一种结构化语言,它的语法结构具有以下几个组成部分:

  1. 标签(Tag):HTML文档中的基本元素,用于将文档分为不同的部分和定义网页中的各种元素,例如标题、段落、链接等。标签一般以“<”和“>”括起来,如:<html>、<body>、<p>等。

  2. 属性(Attribute):标签的属性用于设置标签的特征和行为,如链接标签<a>的href属性用于指定链接的URL地址。属性一般出现在标签的起始标记中,如:<a href="https://www.google.com">Google</a>。

  3. 元素(Elements):指标签与标签之间的内容和标签所包含的其他标签,例如<p>标签中包含的文字和其他标签。

  4. 注释(Comment):用于在HTML文档中添加注释,注释不会在浏览器中显示,但可以提供给其他开发人员阅读和理解代码。

  5. DOCTYPE声明(DOCTYPE Declaration):用于告诉浏览器使用哪个HTML版本来解析网页,例如HTML5的声明方式:<!DOCTYPE html>。

  6. 文本(Text):在HTML文档中,文本是指标签之外的所有内容,它可以是普通的文本、超链接、图片等。

重点分析

一、代码的层级间隔跟大部分语言一样,使用tab来表示层级,可是HTML语言以缩进结构为主。

二、标签分为单标签和双标签

三、HTML结构分为两部分:头部设置、代码

四、HTML内有一个叫static的大文件夹,其中有三个默认文件夹,:js,css、imsge,所有图片文件一律存在image文件夹中,css文件存在css文件夹中,js文件存在js文件夹中

五、注释这样写:

<!--注释-->

任何标签不能独立于框架,必须在框架之内进行,以下的大部分教程中的独立标签事例代码也必须填入标签中才能使用

<内容><!--  单标签样式: -->



<内容>
    ...
    </n内容><!--  双标签样式: -->

那现在,我们就开始吧。


HTML头部设置

1、语言类型声明

<!DOCTYPE html> <!-- HTML文档类型声明 -->

这里说明,这段代码使用HTML语言写的。

<!DOCTYCE html>
<html>

<html>是开头标签

正式开始:<head>

<head>
        ...
</head>

head是一个双标签,标志着HTML头部设置的开始和结束。

2、文本类型声明

<meta charset="UTF-8"> <!-- 编码方式声明 -->

这行代码选择语言编码形式,以防出现乱码。

3、标题设置

双标签,这行代码可以让这个网页变得有头有脸,让网页拥有标题。

<title>标题</title>

4、链接其他格式的脚本

<link rel="stylesheet" href="style.css">

其中,rel 属性指定链接的类型,href 属性指定引入文件的路径,可以是相对路径或绝对路径。

常用的 rel 属性值包括:

  • stylesheet:用于链接 CSS 样式表。
  • icon:用于链接图标文件,可以是 ICO、PNG、GIF、SVG 等格式。
  • alternate stylesheet:用于链接备用 CSS 文件,当浏览器不支持主样式表时自动加载备用样式表。
  • prefetch:用于指定页面加载完成后需要预先加载的资源。
  • preconnect:用于指定需要预先建立连接的域名,以加快资源的加载速度。

整个头部设置到这里就完成了,一下内容供直接复制粘贴

<!DOCTYCE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>My Python</title>
    </head>

 整个头部设置完成了!


HTML身体标签部分

正式开始:<body>标签

<body>
    ...
</body>

这代表着整个网页body部分的正式开始:跟<head>层级一样,是一个代表标签编辑部分的总标签。

段落标题:<h> ... ... </h>标签

 这个双标签可以设定一个网页中的文字的标题目录,规则十分简单

<h +(所需目录层级)>(目录文字)</h +(所需目录层级)>

比如我们需要一个一级标题,就

<h1>CSDN</h1>

如果想设定二级标题,就

<h2>CSDN</h2>

 

 文字标签:<p> ... ... </p>标签

这跟段落标签一样,是一个双标签/,操作方式如下

<p> (输出的文字) </p>

可以打印文字

<p>CSDN</p>

会输出CSDN

换行标签:<br>标签

夹在<p>标签中,用于换行,哪里要换行就写在哪里,但必须写在文本标签之内

事例:

<p>hello<br>world</p>

图片显示:<img> 标签

顾名思义,这是一个可以通过输入根目录调取图片的标签,具体编写公式如下

<img src = "/(图片文件所在根目录)">

实例:我存了一张叫x格式为jpg的图片在image文件夹中,我要把它显示出来

<img src = "/static/image/x.jpg">

注:如果根目录前不加/,图片不显示

这样就可以显示出一张图片了。

超链接:<a>标签

这是HTML极为核心的标签,可以达成几个网页间跳转的效果,既可以通过文字,也可以通过图片跳转。也就达成了各大网站中必不可少的一个功能,网页跳转

 包括我们再熟悉不过的这个按键也是靠href标签运行的

具体操作流程如下:

 <a href = "网页">

        触发连接的东西(可图片、可文本)

</a>

 <a>标签的使用是一个嵌套结构,其中可以直接插入图片或文本进行连接,图片和文本就是嵌套在<a>标签中

比如这样,我们嵌套一张叫x格式为jpg的图片

<a href = "https://you.ctrip.com/sight/beijing1/2045497.htm">
    <img src = /static/images/x.jpg>
</a>

这样,如果点击x图片,就可以跳转到携程的网站。

比如这样,我们嵌套文字

<a href = "https://you.ctrip.com/sight/beijing1/2045497.htm">
    <img src = "/static/images/x.jpg">
    <p>xxx</p>
</a>

点击文字,可以跳转携程官网。

或者一起来,完全可以实现跳转网页。

元素标签:<div>标签

<div>标签是HTML语言中常用的块级元素标签,用于定义文档中的一个区域或一个容器,可以用来组合其他HTML元素。以下是<div>标签的详细使用方法:

语法: <div>要放置在此处的文本、图像、表格、表单等</div>

属性:

  • class:定义元素的类名
  • id:定义元素的唯一ID
  • style:定义元素的CSS样式属性

示例:

<div class="container">这个容器中包含了图片、段落、标题等HTML元素</div>

在上面的示例中,<div>标签定义了一个名为“container”的类,它将HTML元素组合在一起并定义了这些元素的样式。可以给一个<div>标签指定一个唯一的ID,以便在JavaScript中使用该标签。

<div>标签可以嵌套使用,这使得我们可以创建不同的容器和不同的层次结构。另外,<div>标签通常用于创建网站的布局,使得网站可以按照预期的方式展示。

以下就是关于HTML语言的基础内容,谢谢大家对此文章的支持。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值