HTML学习笔记一

HTML学习笔记一

1、HTML简介:

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。

HTML的文档后缀名:.html .htm
HTML学习笔记一_第1张图片

  • 声明为 HTML5 文档
  • 元素是 HTML 页面的根元素
  • 元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8
  • 元素描述了文档的标题
  • 元素包含了可见的页面内容
  • 元素定义一个大标题

  • 元素定义一个段落

注意:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。

什么是HTML?

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签文本内容
  • HTML文档也叫做 web 页面

HTML标签:

  • HTML 标签是由尖括号包围的关键词,比如
  • HTML 标签通常是成对出现的,比如
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签

通常,“HTML 标签” 和 “HTML 元素” 都是描述同样的意思。也就是说标签就是元素。

通用声明:

目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

<meta charset="UTF-8">

2、HTML基础:

1)标题标签

HTML 标题 是通过h1-h6 标签来定义的。

<h1>
    我是标题一
h1>

2)段落标签

<p>
    这是一个段落
p>

3)链接标签:

<a href="http://www.baidu.com">这是一个链接a>

4)图像标签:

<img src="/images/logo.png" width="258" height="39" />

换行标签:

<br />

注意:HTML标签使用小写字母。

3、HTML元素:

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

大多数html元素可以嵌套。

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

在HTML中


标签在 HTML 页面中创建水平线。

4、HTML属性:

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name=“value”

5、HTML文本格式化:

标签 描述
b 定义粗体文本
em 定义着重文字
i 定义斜体字
small 定义小号字
strong 定义加重语气
sub 定义下标字
sup 定义上标字
ins 定义插入字
del 定义删除字

6、HTML链接:

HTML 使用超级链接与网络上的另一个文档相连。

HTML中的链接是一种用于在不同网页之间导航的元素。

链接通常用于将一个网页与另一个网页或资源(如文档、图像、音频文件等)相关联。

链接允许用户在浏览网页时单击文本或图像来跳转到其他位置,从而实现网页之间的互联。

<p><a href="http://www.baidu.com/">本文本a> 是一个指向万维网上的页面的链接。p>

HTML使用标签 来设置超文本链接。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时,链接显示为红色并带有下划线。\

元素具有以下属性:

  • href:指定链接目标的URL,这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
  • target(可选):指定链接如何在浏览器中打开。常见的值包括 _blank(在新标签或窗口中打开链接)和 _self(在当前标签或窗口中打开链接)。
  • title(可选):提供链接的额外信息,通常在鼠标悬停在链接上时显示为工具提示。
  • rel(可选):指定与链接目标的关系,如 nofollow、noopener 等。
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>超链接标签title>
head>

<body>
    
    
    <a href="http://www.baidu.com" target="_blank">百度一下,你就知道a>
    

    
    <h4>内部的超链接h4>
    <a href="体育新闻.html" target="_blank">体育新闻网站a>

    
    <a href="#">空链接a>

    
    <h4>下载链接,地址是 文件,.exe 或者是zip等压缩包形式h4>
    <a href="./images/cc.zip">下载文件a>
body>

html>

你可能感兴趣的:(前端,html,学习,笔记)