HTML 标签·上(笔记)
in HTML笔记 with 0 comment

HTML 标签·上(笔记)

in HTML笔记 with 0 comment

HTML 语法规范

基本语法概述

  1. HTML 标签是由尖括号包围的关键词,例如:<html>
  2. HTML 标签通常是成对出现,例如<html>,</html>,我们称之为双标签。标签对中第一个标签是开始标签,后一个是结束标签。
  3. 有些特殊的标签是单个标签,例如<br/>,我们称之为单标签。

标签关系

双标签可以分为两类:包含关系、并列关系
包含关系:例如

<head>
    <title> </title>
</head>

并列关系:例如

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

HTML 基本结构标签

第一个 HTML 网页

每一个网页都会有一个骨架标签,称之为结构标签,是 HTML 文档必须包含的

<html>
    <head>
        <title>我的第一个页面</title>
    </head>
    <body>
        Hello World!
    </body>
</html>
标签名定义说明
<html></html>HTML 标签页面中最大的标签,我们称之为 根标签
<head></head>文档的头部必须包含<title></title>标签
<title></title>文档的标题让页面拥有一个属于自己的网页标题
<body></body>文档的主体元素包含文档的所有内容

网页开发基础标签

<!DOCTYPE>文档类型声明标签

<!DOCTYPE>文档类型声明标签,告诉浏览器用哪个版本的 HTML
注意:

  1. <!DOCTYPE>必须写在整个 HTML 文档的最前面,处于<html>标签之前。
  2. <!DOCTYPE>不是一个HTML 标签,只是一个文档类型声明标签。

lang 语言种类

用来定义当前文档显示的语言

charset 字符集标签

字符集是多个字符的集合。
举例:

<mate charset="UTF-8">

charset 的常用值有:GB2312、BIG5、 GBK、和 UTF-8,其中 UTF-8 也被称为万国码,基本包含了全世界所有国家要用到的字符。

HTML 常用标签

标签语义

根据语义来记标签是最好的。

标题标签 <h1>-<h6>

标签语义:作为标题使用,并且根据重要性逐级递减
特点:

  1. 加了标签的文字变粗变大。
  2. 一个标题独占一行。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>伍级标题</h5>
<h6>六级标题</h6>

段落和换行标签 <p>、<br />

标签语义:可以把 HTML 文档分成多段
特点:

  1. 文本在一个段落中会根据浏览器的窗口大小自动换行。
  2. 段落和段落之间留有空隙。

文本格式化标签

在网页中有时要将文字设置为 粗体斜体、<u>下划线</u> 等效果,使文本以特殊的方式显示。
标签语义:突出重要性,比普通文字更重要。

语义标签说明
加粗<strong></strong><b></b>推荐 <strong></strong>
倾斜<em></em><i></i>推荐 <em></em>
删除线<del></del><s></s>推荐 <del></del>
下划线<ins></ins><u></u>推荐 <ins></ins>

<div><span> 标签

这两个标签没有其他实际意义,就是一个盒子,用来装内容。
<div> 表示分割、分区
<span> 表示跨度、跨距
特点:

  1. <div>标签用来布局,一行只能放一个。
  2. <span> 标签用来布局,一行能放多个。

图像标签和路径

图像标签

在 HTML 中,<img>标签用于定义 HTML 页面中的图像
举例:

<img src="URL" />

图像标签的其他属性:

属性属性值说明
src图片路径必须属性,图片路径
alt文本替换文本,若图片无法显示,则替换为这个文本
title文本提示文本,鼠标放在图片上时显示
width像素设置图像宽度
height像素设置图像高度
border像素设置图像边框粗细

注意:

  1. src 是<img>标签的必须属性,它用于指定图像文件的路径和文件名。
  2. 属性一定要写在标签名后面。
  3. 属性可以拥有多个,不分先后顺序。
  4. 属性采取键值对的格式,即 key = "value" 的格式,属性 = "属性值"。

路径

路径分为:相对路径 和 绝对路径

相对路径

定义:以 引用文件所在位置 为参考基础,而建立的目录路径。

相对路径分类符号说明
同一级路径 同一级目录
下一级路径/下一级目录
上一级路径../上一级目录

绝对路径

定义:在计算机中的位置,通常从盘符开始,或完整的 URL 链接。

超链接标签

超链接的语法格式如下:

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

其中有两个属性:

属性作用
href指定跳转地址,必须包含
target_self 为默认值,在当前页打开;_blank 在新窗口打开

链接的分类:

  1. 外部链接,指链接到互联网上的某个网页。
  2. 内部链接,指链接到网站内部的某个网页。
  3. 空链接,指不指定网页的链接(相当于刷新当前页面)。
  4. 下载链接,指向某个压缩包或非网页格式的文件,用于下载该文件。
  5. 网页元素链接
  6. 锚点链接:
    (1)在链接标签的 href 属性中,设置属性值为 #名字 的形式,如:

    <a href = "#two">第二集</a>

(2)找到目标位置标签,在链接标签属性中添加一个 id 属性 = #名字,如:

<h3 id = "two">第二集</h3>

留言: