HTML 基础入门

最新推荐文章于 2024-07-30 17:23:09 发布

「已注销」

最新推荐文章于 2024-07-30 17:23:09 发布

阅读量67

点赞数

文章标签： html css js html5 python

本文链接：https://blog.csdn.net/weixin_45029643/article/details/119640461

版权

HTML 基础入门

1.1 基本语法概述

HTML 标签由尖括号包围的关键词，例如<html>。
HTML 标签通常是成对出现的，例如<html>和</html>，我们称之为双标签，双标签中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签(极少情况)，例如</br>，我们称之为单标签。

1.2 标签关系

双标签关系可以分为两类：包含关系和并列关系，在下面的代码块中标签 <html></html> 和标签 <head></head> 是包含关系，而标签 <head></head> 和标签 <body><doby> 是并列关系。

<html>
    <head></head>
    <body></body>
</html>

1.3 HTML 基本结构标签

每个网页都会有一个基本的结构标签(也被称为骨架标签)，页面内容也是在这些基本标签上书写。

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们称为根标签
<head></head>	HTML的头部	HTML的头部，在`<head></head>`标签中我们必须要设置的标签是`<title></title>`
<title></title>	HTML的标题	HTML属于自己的网页标题
<body></body>	HTML的主体	HTML的页面内容基本都是放在`<body></body>`里

1.4 HTML常用标签

1.4.1 标题标签

为了使网页更具有语义化，我们经常在页面中用到标题标签。HTML提供了6个等级
页标题，即 <h1></h1> - <h6></h6> 。
单词 head的缩写，意为头部、标题

标签语义：作为标题使用，并且依据重要性递减
特点：
1. 加了标题的文字会变的加粗，自豪也会依次变大
2. 一个标题独占一行

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.4.1-标题标签</title>
</head>

<body>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>

</body>

</html>

标题标签

1.4.2 段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p></p> 标签用来定义段落，它可以将整个网页氛围若干个段落。
单词 paragraph 的缩写，意为段落。

标签语义：可以把HTML文档分割为若干段落。
特点：
1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
2. 段落和段落之间保有空隙。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.4.2-段落标签</title>
</head>

<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>

<body>

</body>

</html>

段落标签

1.4.3 换行标签

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果需要某段文本强制换行显示，就需要使用换行标签<br>。
单词 break 的缩写，意为打断，换行。

标签语义：强制换行。
特点：
1. <br>是个单标签
2. <br>标签只是简单地开始一行，跟段落不一样，段落之间会插入一些垂直的间距。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.4.3-换行标签</title>
</head>

<body>
    窗前明月光，疑是地上霜。<br>举头望明月，低头思故乡。

</body>

</html>

换行标签

1.4.4 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体、或<u>下划线</u>、~~删除线~~ 等效果，这是就需要用到HTML中的文本格式化标签，使文字以特殊的形式显示。

语义	标签	说明
加粗	`<strong></strong>`或者`<b></b>`	推荐使用`<strong></strong>`语义更强烈
倾斜	`<em></em>`或者`<i></i>`	推荐使用`<em></em>`语义更强烈
删除	`<del></del>`或者`<s></s>`	推荐使用`<del></del>`语义更强烈
下划线	`<ins></ins>`或者`<u></u>`	推荐使用`<ins></ins>`语义更强烈

标签语义：突出重要性，比普通文字更重要

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.1.4-文本格式化标签</title>
</head>

<body>
    <strong>粗体</strong><br>
    <b>粗体</b><br>
    <em>斜体</em><br>
    <i>斜体</i><br>
    <del>下划线</del><br>
    <s>下划线</s><br>
    <ins>删除线</ins><br>
    <u>删除线</u><br>
</body>

</html>

文本格式化标签

1.4.5 `<div>` 和 `<span>` 标签

<div></div> 和 <span></span>是没有语义的，它们就是一个盒子，用来装内容的。
div 是fivision 的缩写，表示分割，分区。
span 意为跨度、跨距。
特点：
1.<div>标签用来布局，但是现在一行只能放一个<div>，是一个大盒子。
2.<span>标签用来布局，一行上可以多个<span>。是一个小盒子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.4.5-div和span标签</title>
</head>

<body>
    <div>我是一个Div，我自己独占一行</div>
    <div>我是一个Div，我自己独占一行</div>
    <span>我是一个span</span>
    <span>我也是一个span</span>
</body>

</html>

div和span标签

1.4.6 图像标签

在HTML中，<img> 标签用于定义HTML页面中的图像
img 是单词 image 的缩写，意为图像。
src 属性是 <img> 标签的必须属性，它用于指定图像文件的路径和文件名。
alt 属性可以在图片加载实现时显示对应的文字。
title 属性可以在鼠标放到图片上时显示对应的问题。
width 属性可以设置图像的宽度。
height 属性可以设置图像的高度。
border 属性可以设置图像的边框粗细。
特点：
1. 图像标签可以拥有多个属性，必须写在标签名的后面。
2. 属性之间部分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3. 属性采取简直对的格式，即 key="value"的格式，属性="属性值"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.4.6-图像标签</title>
</head>

<body>
    <img src="https://www.runoob.com/wp-content/uploads/2015/06/go128.png" title="HelloWorld" width="100px" height="150px" alt="图像加载失败">
    <img src="https://" title="HelloWorld" width="100px" height="150px" alt="图像加载失败">
</body>

</html>

图像标签

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 基础入门

HTML 基础入门1.1 基本语法概述HTML 标签由尖括号包围的关键词，例如<html>。HTML 标签通常是成对出现的，例如<html>和</html>，我们称之为双标签，双标签中的第一个标签是开始标签，第二个标签是结束标签。有些特殊的标签必须是单个标签(极少情况)，例如</br>，我们称之为单标签。1.2 标签关系双标签关系可以...
复制链接

扫一扫