博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Web前端——HTML中的标签
阅读量:3956 次
发布时间:2019-05-24

本文共 4341 字,大约阅读时间需要 14 分钟。

文章目录

一. HTML中的标签

HTML 文档由 HTML 元素定义。

1. HTML 元素格式

开始标签 元素内容 结束标签
<p> 这是一个段落 </p>
<a href=“default.htm”> 这是一个链接 </a>
<br> 换行

开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)


  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 标签名大小写不敏感

  • 大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)
  • HTML 文档由相互嵌套的 HTML 元素构成。

2. 标签拥有自己的属性

大多数 HTML 元素可拥有属性

  • 分为基本属性:bgcolor=“red”

    可以修改简单的样式效果
  • 事件属性:οnclick=“alert(‘你好’)”

    可以直接设置事件响应后的代码

3. 标签分为:单标签和双标签

单标签根式:<标签名/>

....

双标签格式:<标签名>…封装的数据…</标签名>

  • 即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:

    <p>这是一个段落

  • 以上实例在浏览器中也能正常显示,因为关闭标签是可选的。但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

二. HTML头部标签

1. <head>标签

<head>元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

2. <title>标签

<title>标签定义了不同文档的标题。

<title>在 HTML/XHTML 文档中是必须的。

<title>元素:

定义了浏览器工具栏的标题当网页添加到收藏夹时,显示在收藏夹中的标题显示在搜索引擎结果页面的标题
    
这是一个title标签

在这里插入图片描述

3. <base>标签

<base>标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:

如果一个文档中<a>、<img>、<link>、<form>等标签中的绝大部分的链接URL的前面部分都是一样时,我们可以将URL这个公共的部分提取出来放到<base>中进行设置。

我们等标签的链接目标窗口大部分相同时,我们也可以将这个公共的目标放到<base>标签进行设置,不必分别在每个标签一一设置

语法:

注:在一个文档中,只能最多出现一次,而且必须放到标签对内

4. <link>标签

<link>标签定义了文档与外部资源之间的关系。

<link>标签通常用于链接到样式表:

5. <style>标签

<style>标签定义了HTML文档的样式文件引用地址.

在<style>元素中你也可以直接添加样式来渲染 HTML 文档:

6. <meta>标签

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。

元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

还可以设定网页自动刷新和网页自动跳转

<meta> 一般放置于<head>区域

    
//页面每隔3秒自动刷新一次
//在当前页面停留3s后,自动跳转到百度首页 meta功能

7. <script>标签

<script>标签用于加载脚本文件,如: JavaScript。

8. <head>标签和<header>标签区别

head 标签用于定义文档头部,它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

如:       文档标题  header 标签用于定义文档的页眉(介绍信息)。如:      

段落

一级标题

三. HTML主体标签

<body>标签封装了页面的主体内容,此外,使用<body>标签,还可以设置页面的背景、页面的文字颜色、页边距等页面属性

1. 设置网页的正文颜色和背景颜色

 

2. 添加网页背景图片

在页面中添加背景图像,并设置背景属性为固定

 

3. 设置网页链接文字颜色

link属性设置未访问状态下的链接文字颜色,vlink属性设置访问过后的链接文字颜色

alink属性设置正在访问中的链接文字颜色

 

4. 设置网页边距

设置网页与浏览器的上、下、左、右边框间距的属性

 

四. 语义化标签

1. 标题标签

(1). 标题属性

请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。

    
Document

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

在这里插入图片描述

(2). 标题大小和字体大小的关系

    
Document

这是1号标题

这是6号字体文本

这是2号标题

这是5号字体文本

这是3号标题

这是4号字体文本

这是4号标题

这是3号字体文本
这是5号标题
这是2号字体文本
这是6号标题
这是1号字体文本

在这里插入图片描述

2. 分组标签

    
Document

回乡偶书(二首)

其一

在这里插入图片描述

3. 段落标签

    
Document

在p标签中的内容就表示一个段落

在p标签中的内容就表示一个段落

在这里插入图片描述

4. 强调标签

    
Document

今天天气不错

你今天必须要完成作业

5. 引用标签

    
Document
鲁迅说:
这句话我是从来没说过的!
子曰: 学而时习之,乐呵乐呵!

6. 换行标签

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

<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

在开始标签中添加斜杠,

比如 
,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
    
Document
今天天气不咋样

7. 水平线标签

    
Document

这是一个段落。


这是一个段落。


这是一个段落。

在这里插入图片描述

8. 注释标签

<!-- 注释内容 -->

9. 格式化标签

HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式,

如:粗体 or 斜体

这些HTML标签被称为格式化标签


通常标签 <strong> 替换加粗标签 <b> 来使用,<em> 替换<i>标签使用。

然而,这些标签的含义是不同的:

 定义粗体或斜体文本。 或者 意味着你要呈现的文本是重要的,所以要突出显示。
    
Document 加粗文本
斜体文本
电脑自动输出
这是 下标上标

在这里插入图片描述

10. 上下标字体标签

    
上下标标签

引用文献【5】是上标字体

CO 2是代表二氧化碳分子符号

在这里插入图片描述

四. 块元素和行内元素

大多数 HTML 元素被定义为块级元素或内联元素。

HTML 区块元素

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

实例: 

,

,

    ,


HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: , , , 
    
Document

哈哈哈

我写在了html标签的外面!

五. 布局标签

    
Document

六. HTML属性

1. 定义

属性为 HTML 元素提供附加信息。

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现,比如:name=“value”。

属性总是在 HTML 元素的开始标签中规定。


2. 实例

  1. 属性例子1

    HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:

     This is a link 
  2. 属性例子2

    <h1> 定义标题的开始。

    拥有关于对齐方式的附加信息。-->居中排列标题

  3. 属性例子3

    <body> 定义 HTML 文档的主体。

     拥有关于背景颜色的附加信息。
  4. 属性例子4

    <table> 定义 HTML 表格。

    拥有关于表格边框的附加信息。

3. 属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。

在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号

例如:name='Bill "HelloWorld" Gates'

具体详细请见:

具体详细请见:

你可能感兴趣的文章
二叉树基础知识大全(核心理解遍历)
查看>>
03-树1 树的同构(25 分) 2017秋 数据结构 陈越、何钦铭
查看>>
04-树4 是否同一棵二叉搜索树(25 分)---陈越、何钦铭-数据结构-2017秋
查看>>
表达式求值(C实现,实现多括号,浮点数)---栈的实现以及运用。
查看>>
有序链表的合并(数据结构---单链表)
查看>>
栈实现(数据结构---数组,链表 C实现)
查看>>
POJ3903(dp,最长上升子序列,最基础题)
查看>>
POJ1836-Alignment(最长上升子序列)
查看>>
POJ 1251 Jungle Roads(最小生成树简单题)
查看>>
HDU 1690---Bus System(Floyd模板题+合理定义INF)
查看>>
POJ 2240---Arbitrage(Floyd的dp思想)
查看>>
Dijkstra算法---模板
查看>>
POJ 3680(费用流)
查看>>
校oj10532: 生成字符串(dp,最优状态转移)
查看>>
平衡二叉树(AVL树)
查看>>
POJ1521---哈夫曼编码,求最优WPL
查看>>
POJ---2010(Moo University - Financial Aid,优先队列)
查看>>
POJ---3662(Telephone Lines,最短路+二分*好题)
查看>>
L2-007. 家庭房产(并查集)
查看>>
L2-016. 愿天下有情人都是失散多年的兄妹(搜索)
查看>>