HTML学习心得-CSDN博客

本文链接：https://blog.csdn.net/m0_45275847/article/details/115138959

HTML学习

简介
html的基本结构
html的相关元素
超链接
- 锚点
图片及其文件路径
结果

简介

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

HTML相当于网页的骨架结构，后面的css相当于网页的美化工具，js相当于网页的行为动作。

html的基本结构

<!DOCTYPE html>
<html>

<head> 
</head>

<body>

</body>
</html>

html：元素。这个元素包裹了整个完整的页面，是一个根元素，它元素都嵌套到其中
head：这个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用做书签和收藏清单

以下表格列出了 HTML head 元素：

<head>定义了文档的信息

<title>定义了文档的标题

<base>定义了页面链接标签的默认链接地址

<link>定义了一个文档和外部资源之间的关系

<meta>定义了HTML文档中的元数据

<script>定义了客户端的脚本文件

<style>定义了HTML文档的样式文件

body：含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等

html实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>nice job！</h1>
</body>
</html>

meta：这个元素设置文档使用utf-8字符集编码，
h1为一级标题，从一级到六级，包括了h1，h2…h6
p表示段落
title里面是网页头部的名字

html的相关元素

HTML
标记包含一些规定的"元素"如<head>，<title>，<body>，<header>，<footer>，<article>等
HTML里面的标签有些是单标签有些是双标签。（上述的是双标签）

例如<br>, <hr>, <input>, <img>, <a>等是单标签

元素是可以有相关属性的。这些信息不会在浏览器中显示出来

 <h1 title="这是该标签的属性">niaho </h1>

一个属性必须包含如下内容：

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
属性名称，后面跟着一个 = 号。
一个属性值，由一对引号 “” 引起来。

超链接

添加该标签可以跳转到其他的网站

 <a href="https://cn.bing.com/">
                <img src="image/biying.jpg" alt="">
 </a>

href即为要跳转去的地址 URL（Uniform Resorce Locator )
后面还可以有target属性，他如果是_blank则表示在新的页面打开超链接（默认是在当前页面打开即_self）
超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的，也可以是图片

锚点

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

<h1 id="123">锚点</h1>
<a href="#123"><br />返回</a>

图片及其文件路径

<img src="image/biying.jpg" alt="biying">

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
关于文件路径
文件路径有相对路径和绝对路径两种。
上面图片的例子即为相对路径。下面是绝对路径的例子：

<img src="https://www.baidu.com/">

结果

随便操作了一下，写了一份新闻报道。
在这里插入图片描述