精华内容
下载资源
问答
  • html文档的基本结构和常用标签
    千次阅读
    2019-08-17 03:44:43

    一、HTML简介

    1.什么是HTML

    HTML是用来做网页的。
    HTML 指的是 超文本标记语言 (Hyper Text Makeup Language)
    标记语言
    标记:标签(tag)
    语言:制作网页的语言
    一个网页是由多个标签组成的。
    超文本:包含超链接的文本。超,指的是超链接。

    2.标签、元素

    HTML标签是由尖括号包围的关键词,比如<html>

    html标签写法分类
    双标签:<标签名></标签名>   /   <开始标签>内容</结束标签>
    单标签:<标签名 />   一般写成<标签名>

    html标签的属性
    一般是键值对  key=“value”
    属性的值必须用双引号引起来

    html不会报错,所以注意双标签不要忘了闭合
    html标签不区分大小写,规范要求都是用小写。

    3.html文档的基本结构

    html是由浏览器来解析,所以不需要安装任何编译环境
    html文档的结构说明
    <!DOCTYPE html>声明文档
    <html>是网页当中最大的标签,所有的内容都要写在此标签内
    <head>文档的头部,主要用于书写网页的设置,一般写不直接显示给用户的内容。例如:字符编码的设置,网页的标题,引入外部的CSS文件,引入外部的JavaScript文件
    <body>文档的主体部分,网页中只要是显示给用户的内容,都要写在此标签
    <head><body>都是<html>的子标签

    文档的基本结构如下:
    <!DOCTYPE html><!--文档类型声明-->
    <html><!--文档跟标记-->
    	<!--字符编码的设置和网页的标题都是写在<head>标签里-->
    	<head><!--文档头部-->
    		<meta charset="UTF-8"><!--字符集声明-->
    		<title>Title</title><!--文档标题-->
    	</head>
    	<body>
    		<!-- 文档内容 -->
    	</body>
    </html>
    

    二、HTML中常用标签

    1.标题标签<h1>–<h6>

    <h1><h6>标题标签,双标签
    有默认样式,字体变粗,变大,变黑
    会自动换行
    一般在一个页面中 <h1> 只使用一次,
    <h2><h6> 可以重复使用

    2.段落标签<p>

    <p></p> 段落标签
    双标签,有默认样式
    会自动换行
    

    3.常见的转义字符

    &nbsp;  空格
    &lt;  小于号
    &gt;  大于号
    &copy;  版权标志
    

    4.<i>和<em>

    <i> 斜体
    <em>斜体 具有强调意义
    <i><em>都是双标签
    

    5.<b>和<strong>

    <b>加粗
    <strong>加粗 具有强调意义
    <b><strong>都是双标签
    

    6.<u>

    <u>下划线,也是一个双标签
    

    7.<br> <hr>

    都是单标签
    <br> 强制换行
    <hr> 水平线
    

    8.<img>图片标签

    单标签

    属性:
    	src  图片的地址
    	title  鼠标移入图像时的提示文本
    	alt  图片加载失败时的替代内容
    可以使用网络图片也可以使用本地图片
    使用的是本地的图片资源
    	相对路径:目标文件相对于当前文件的位置。
    		./代表当前路径
    		../代表上一级路径
    		Windows下根目录 一般是 盘符:
    			注意加载图片时盘符前面加/
    		Linux下的根目录用/来表示
    	绝对路径:不考虑当前文件的位置,从根目录去查找指定的资源
    	推荐使用相对路径
    

    9.列表标签

    无序列表 ul

    ul:声明一个无序列表(unordered list)
    li:列表项(list items)
    type(了解):
    	disc  圆  默认就是disc
    	square 方块
    	circle 空心圆
    ==注意==:ul中的直接子元素必须是li
    

    有序列表 ol

    ol:声明一个有序列表(ordered list)
    li:列表项
    type:
    1 代表数字 默认就是数字
    a 代表小写字母
    A 代表大写字母
    i 小写的罗马数字
    I 大写的罗马数字
    start:指定以第几个开始,只能写数字。
    

    自定义列表 dl

    dl:声明一个自定义列表(definition list)
    dt:定义列表中的项目  相当于li
    dd:描述列表中的项目
    

    10.超链接标签 <a>

    超链接a  双标签
    	页面跳转
    	href:跳转的地址
    		如果不给值,跳转当前页面
    	target:_blank 新打开一个窗口加载跳转后的页面
    
    跳转到当前页面的指定位置 锚点
    	给指定标签添加id属性
    	a标签的href属性的值为#指定元素id属性的值
    跳转到本地html文件的指定位置
    	a标签的href属性的值为制定页面中标签的id的值
    

    11.div和span标签

    没有默认样式的块标签和行标签

    <div>块标签 
    可定义文档中的分区或节(division/section)
    会自动换行
    一般配合css做网页的布局
    <span>行内标签
    一般也是配合css去使用,常用于对段落中指定的文字添加特殊样式。
    

    三、标签的分类

    按照标签效果进行分类可以分为块标签、行内标签和行内块标签。

    1.块元素标签

    会自动换行,独占一行
    常见块标签:<h1>、<p>、<div>、<ul>、<ol>、<li>、<dl>、<hr>

    2.行内标签

    不会自动换行,标签和标签并排在一行显示,
    不能设置宽高属性
    常见的行内标签:<a>、<span>、<i>、<em>、<b>、<strong>、<u>

    3.行内块标签

    不会自动换行,标签和标签并排在一行显示
    可以设置宽高属性
    常见的行内块标签:<img>、<input>

    更多相关内容
  • HTML基本标签属性总结

    2011-10-30 19:51:18
    块标签:基本块级标签 标题:h1-h6 段落:p 水平线:hr 常用布局标签 有序:ol-li 无序:ul-li 定义描述:dl-dt-dd 分区:div 表格:table-tr-td 表格+表单:form-table-tr-td 行及标签: 换行...
  • 下面通过浏览器来查看这个页面的源代码,如图所示,这些源代码就是浏览器可以理解并展示的一种计算机标签语言—HTML HTML 是 Hyper Text Markup Language 的缩写,中文翻译为超文本标记语言,是制作网页最基本的...

    在这里插入图片描述

    请先阅读:VSCode安装与前端开发必备插件安装




    引言

    介绍

    当用户通过 Internet 浏览网页时,会看到各种文字信息、链接、图表、图片等内容,如图所示。
    在这里插入图片描述
    浏览器是如何显示这个页面内容的呢?
    下面通过浏览器来查看这个页面的源代码,如图所示,这些源代码就是浏览器可以理解并展示的一种计算机标签语言—HTML

    在这里插入图片描述
    HTML 是 Hyper Text Markup Language 的缩写,中文翻译为超文本标记语言,是制作网页最基本的语言,它的特点正如它的名称所表示的那样

    • Hyper(超)
      超(Hyper)是相对于线性(Linear)而言的,HTML 之前的计算机程序大多是线性的,即必须由上至下顺序执行,而用 HTML 制作的网页可以通过其中的超链接从一个网页跳转至另一个网页。
      Text(文本):不同于一些编译型的程序语言,例如 C、C++ 或 Java 等,HTML 是一种文本解释型的程序语言,即它的源代码不经过编译而直接在浏览器中被翻译运行。

    • Markup(标记)
      HTML 的基本规则就是用标记语言(成对尖括号组成的标签元素)来描述网页内容如何在浏览器中显示。

    • Language(语言)
      HTML 是一种语言,但它是解释型语言。它所有的标记都会被浏览器翻译成最终显示的效果。



    什么是浏览器

    浏览器是用来检索、展示以及传递 Web 信息资源的应用程序。Web 信息资源由统一资源标识符(Uniform Resource Identifier,URI)所标记,它是一张网页、一张图片、一段视频或者任何在 Web 上所呈现的内容。使用者可以借助超级链接( Hyperlinks),通过浏览器浏览互相关联的信息。

    当前的主流浏览器有很多,除了使用 Windows 系统自带的 IE 浏览器以外,还推荐使用 Chrome 浏览器。在 Chrome 上可以安装各种常用插件,这对于网页的美化、调试等方面有着非常大的作用。



    HTML 发展史

    HTML 1.0

    1991 年 WWW 在互联网上首次露面,也随之引起了巨大的轰动。1993 年 ITEF(因特网工作小组)发布了一个草案,那时没有 HTML 的官方文档,各种标签(Tag)也很混乱。

    这个草案 HTML tags 可以算是 HTML 的第一个版本 1.0。

    1994 年,Tim Berners-Lee 创建了非盈利性的 W3C(world wild web consortium 万维网联盟),并邀请了当时的 155 家互联网巨头(如 Microsoft、IBM、APPLE 等公司),致力使得 WWW 有一套更加标准化的协议,能够让资源按照这套标准的协议进行处理与共享。那个时候 W3C 的根本目的就是为了维护互联网的对等性,为了让它保持最起码的秩序。


    HTML 2.0

    1995 年,HTML 2.0 发布。


    HTML 3.2

    1996 年,由 Tim Berners-Lee 组织的 W3C 对 HTML 语言进行规范化,HTML 3.2 发布。


    HTML 4.0

    1997 年发布,W3C 推荐标准。


    HTML 4.01

    1999 年,HTML 4.01 发布,同一年,W3C 对 HTML 的未来做了展望。他们认为 HTML 存在一些缺陷,例如 HTML 的形式与内容无法分离、标记单一等等,前途不是很光明。于是 W3C 转向语言更加规范的 XML,以便于弥补 HTML 的不足(XML 全称 Extensible Markup Language 可拓展标记语言),但是从 1991 年 HTML 在互联网上出现到 1999 年这个时候已经过去 8 年了,全世界已经有成千上万的网页经由 HTML 编写,突然间更改一种语言是不现实的,故 W3C 只能放慢脚步,开始了 HTML 到 XML 的过渡。于是也就出现了 XHTML。


    XHTML 1.0

    2000 年发布,XHTML 1.0 与 HTML 4.01 内容是一样的,但是 XHTML 使用了新的语法规则:规定了所有元素、属性必须使用小写字母,属性值必须加引号,规定每个标签都必须有与之对应的结束标签。与这些规则相比起来 HTML 4.01 的语法就显得很松散。


    XHTML 1.1

    XHTML 1.1 于 2001 年发布,在最开始 W3C 最终的目的就是为了使得 HTML 完全标准化,该版本的 XHTML 强制性的规定了文档必须标注为 xml 而不是 html。

    然而很多浏览器并不能很好的解析 XML 格式的文档,W3C 这一步似乎走的太快了。


    XHTML 2.0

    紧随 XHTML 1.1 之后,XHTML 2.0 也随之发布,XHTML 1.1 那个时候浏览器不能解析 XML 文档的问题还没有得到很好的处理,这个版本又有意不再兼容已有的 HTML 各个版本。开发人员、浏览器厂商也便渐渐放弃了 xml,也许是 xml 太过于规范脱离了实际,又或许是因为 HTML 的生态圈真的太大了。

    2004 年,各大浏览器厂商也相继脱离了 W3C,成立了新的小组 WHATWG(超文本应用技术工作组 world hypertext application technique work group)开始对 HTML 进行修缮,开始了向 HTML5 之路的进军。XHTML 生态环境渐渐破碎,2006 年,XTML2 没有实质性进展。Tim Berners-Lee 反思,决定重组 HTML 工作组。


    HTML 5.0

    2007 年,W3C 工作组重建,在 WHATWG 的基础上继续研究,规范也交付给 WHATWG 来制定。因此,也就出现了现如今的"一种格式,两个版本(HTML/XHTML)"的局面,但随着 HTML5 的到来,一种更加简洁的 doctype()也逐渐运用到各大网站。2009 年,W3C 也宣布停止 XHTML2 的研究工作。HTML5 是目前最新的 HTML 规范,也已经被 W3C 接纳。截止目前为止,HTML5 标准也已经逐渐被各大网站广泛运用。



    HTML 开发工具

    如果要做专业的前端开发,使用 EditPlus 等文本编辑器作为开发工具其效率是比较低的,为了提高前端开发工作效率,还是建议使用专业、强大的网站开发工具 JetBrains WEBStrom、VS Code 等。

    这些专业工具除了能对 HTML 代码的关键字加亮显示以外,还可以同时显示代码及浏览器展示效果。

    这种所见即所得的工具,当页面内容复杂时,使用它可以大大降低代码编写和维护的难度,从而提高程序员或美工人员开发和维护的效率,降低项目用工成本,是编写 HTML 文档不可多得的优秀工具。




    标签和属性

    标签

    所有 HTML 标签都有一个标签名称,有些标签还有一个可选的属性列表。

    这些标签在使用时必须用尖括号“<”和“>”括起来,而且一般都是成对出现的,无斜杠的标签表示该标签的作用是开始,有斜杠的标签表示该标签的作用是结束。

    HTML 标签是大小写无关的, 与 表示的意思是一样的。

    但是 W3C(World Wide Web Consortium ,万维网联盟,制定 Web 规范的权威组织)标准推荐使用小写。

    HTML 标签有两种形式:

    • 双标签
      双标签指标签是成对出现的,也就是有一个开始标签和一个结束标签,开始标签用 <标签名> 表示,结束标签用 </标签名> 表示,只有一对标签一起使用才能表示一个具体的含义。

      例如 <html></html>表示一个 HTML 文档。

      <标签名>内容</标签名>
      
    • 单标签
      单标签指标签不是成对出现的,也就是只用一个标签就能表示一个具体的含义,例如<br> 表示换行、<hr> 表示创建一条水平线。为了符合 W3C 规范,单标签必须在标签后面加一个斜杠,即 <br/><hr/>,所以单标签通用格式为 <标签名/>。

      <标签名/>
      


    属性

    HTML 属性一般出现在 HTML 标签中,是 HTML 标签的一部分,属性能对标签进行补充说明。

    例如,如果在一行文本中采用标题标签 <h1>

    <h1>学习“使用前端技术展现Web系统”课程</h1>
    

    可以用属性进一步指定文本居中显示。

    <h1 align="center">学习“使用前端技术展现Web系统”课程</h1>
    

    所有属性都放在起始标签的尖括号内,并相互用空格分开,有些属性要求用引号,有些则不要求,大多数属性(只包括字母、数字、连字符和点号的)可以不需要引号。

    例如,可以写成 align=center 或 align = “center”,所有浏览器均能用相同方式显示,但是,包括空格、%、# 等其他字符的属性值则需要用引号。

    例如用 width 属性表示文档元素占文档窗口宽度的百分数,则必须写成 width=“100%”。同样也是为了符合 W3C 标准,要求所有的属性值都使用引号。

    在一个标签中可以设置多个属性,语法形式如下:

    <标签名 属性名1="属性值1" 属性名2="属性值2" ... 属性名N="属性值N">内容</标签名>
    

    有多个属性说明标签时,它们出现的先后顺序不影响页面显示的结果。



    W3C标准

    W3C 标准英文全程是:World Wide Web Consortium。万维网联盟标准不是某一个标准,而是一些列标准的集合。

    网页主要有三部分组成:结构(Structure)表现(Presentation)行为(Behavior)

    对应的标准也有三方面:结构化标准主要包括 XHTML 和 XML,表现标准语言主要包括 CSS、行为标准主要包括(如 W3C DOM)、ECMAScript 等。这些标准大部分是 W3C 起草发布,也有一是其他标准组织制定的标准。

    常用的标准规范:

    • 是由一对尖括号包裹的单词构成,例如:<html>

    • 标签不区分大小写 <html><HTML>,推荐使用小写。

    • 标签分为两部分:开始标签<html> 和结束标签</html>,两个标签之间的部分我们叫做标签体。

    • 有些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签,例如:<br/><hr/><img/> 等。

    • 标签可以嵌套,例如:<a><b></b></a>;但是不能交叉嵌套,例如:<a><b></a></b>



    快速上手

    创建项目

    了解了 HTML 文档的基本结构后,下面就来编写第一个最简单的 HTML 文档。

    对于 HTML 文档的编写可以使用记事本,也可以使用 VSCode、WEBStrom、Hbuilder 等工具。

    此处使用VSCode

    到你的文件资源管理器里随便一个位置,创建一个文件夹,该文件夹就是你的项目文件夹了
    在这里插入图片描述
    然后使用VSCode打开这个目录
    在这里插入图片描述

    找到刚刚创建的文件夹,然后选择即可

    在这里插入图片描述


    创建html文件

    在这里插入图片描述

    然后在窗口中输入文件名,点击确认,即可完成创建。

    在这里插入图片描述


    编写内容

    在 index.html 中写入以下内容

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8" />
        <title>我的第一个网页</title>
    </head>
    
    <body>
        Hello World !
    </body>
    
    </html>
    

    单机鼠标右键打开live服务,如果没有请安装插件,详情请看:VSCode安装与前端开发必备插件安装

    在这里插入图片描述
    这样就创建成功了~
    在这里插入图片描述



    注释和特殊符号

    为了解释说明 Java 编写的源代码,Java 语言有注释,HTML 也是一种语言,在代码中也需要加入解释说明文字,所以 HTML 也有注释。

    另外,在 HTML 中,“<”、“>”这些符号已经作为 HTML 的语法符号,那么如果要在页面中显示这些特殊的符号,该怎么办呢?


    注释

    在 HTML 文档中,通过注释标签可以插入注释,便于对代码的检查与维护。在 HTML 文档适当的位置添加注释是良好的习惯,因为一旦代码较长或结构复杂,经过一段时间之后,很可能连编写者都很难快速回忆当时的思路,所以适当的注释有助于对源代码的理解。注释部分不会被解析器解释执行,仅用来作为标记使用。

    基本语法

    <!-- 在此处写注释 -->
    

    作为程序员,在软件开发过程中,注释除了用于进行程序解释说明外,还经常用在调试程序过程中。通过注释标签可以注释掉一部分暂时不用的代码,进行调试和运行,直到达到预期的结果。


    特殊符号

    在 HTML 文档中,有些符号拥有特殊的含义,可直接写出这些符号,以便浏览器在解释执行的时候,按照其特殊含义进行解释。

    如果希望在页面上显示这些特殊符号,则需要在 HTML 文档中使用对应的代码标识,这些代码标识被称为字符实体。

    一个字符实体由三个部分组成,分别是“&”符号、实体名称和“;”符合,以下列出了一些常用的特殊符号对应的字符实体。

    HTML 原代码显示结果描述
    &lt;<小于号或显示标记
    &gt;>大于号或显示标记
    &amp;&可用于显示其它特殊字符
    &quot;引号
    &reg;®已注册
    &copy;©版权
    &trade;商标
    &ensp;半个空白位
    &emsp;一个空白位
    &nbsp;不断行的空白



    基本结构

    接下来介绍 HTML 文档中三个基本的骨架结构标签,以及对页面的一些基本描述。

    <html>标签

    <html> 标签标识该文档为 HTML 文档

    <html> 标签置于 HTML 文档最前边,用来标识 HTML 文档的开始,而 </html> 标签恰好相反,它放在 HTML 文档最后边,用来标识 HTML 文档的结束。

    两个标签必须成对使用,网页中所有其他的内容都应该放在 <html></html> 标签之间。

    基本语法:

    <html>
        包含<head><body>等其他标签
    </html>
    

    <head>标签

    <head>父标签

    <head> 标签是个容器,包含其他位于文档头部的标签元素。把该标签放在文档的开始处,紧跟在<html>标签后面。<head></head>定义了 HTML 文档的头部,其中包含的内容主要包括对页面的一些基本描述。

    如标题、关键字等。 CSS 和 JavaScript 可以定义在 HTML 头部。绝大多数文档头部包含的数据都不会真正作为内容显示给用户,但是其间的元素有各自特殊重要的意义,需要大家掌握。

    基本语法

    <head>
      头部标签元素
    </head>
    

    常用的头部标签

    标 签描 述
    <title>定义页面标题内容(唯一必须的头部标签)
    <base>当前文档的基准地址,其他相对地址都建立在此基准地址之上
    <meta>有关文档本身的元信息,例如文档的作者,用于查询的关键词,关于文档的描述等
    <style>定义 CSS 层叠样式表的内容
    <link>定义外部文件的链接,最常见的用途是链接外部样式表
    <script>定义页面中程序脚本的内容

    其他标签元素将在后续介绍



    <title>标签

    通过前面的例子,已经了解了如何使用 <title> 标签,以及 <title> 标签的使用效果,这里不再赘述。

    接下来简要描述通过 <title> 标签设置的页面标题,主要在以下几个方面发挥作用:

    • 可以在浏览者保存该页面时成为默认的保存文件名。

    • 可以在浏览者将该网址添加进收藏夹时成为收藏夹中该网址的名称。

    • 方便搜索引擎索引页面。

    • 搜索引擎显示的页面标题往往就是网页 <title> 标签的内容。

    例如,在CSDN中查看文章时,显示的页面标题如图所示在这里插入图片描述

    这篇文章的 <title> 标签内容正是“做了个代码神器,让你敲代码6到起飞, 代码开源给大家【人工智能/自然语言处理】”。

    在这里插入图片描述



    <meta>标签

    <meta> 标签的功能是提供关于页面的元信息,能够提供文档作者、关键字、描述等多种信息,在 HTML 的头部可以包括任意数量的 <meta> 标签

    下面列举几种最常用的 <meta> 标签。

    1、设定关键字

    关键字是为搜索引擎提供的,如一个音乐网站,为了提高在搜索引擎中被搜索到的概率,可以设定多个和音乐主题相关的关键字以便搜索,如音乐、流行音乐、港台音乐、欧美音乐、歌曲排行榜、 mp3 下载、在线音乐等。这些关键字虽然不出现在浏览器的显示页面中,但能被搜索引擎准确地获取。如何选择关键字、主页及各级页面设置什么样的关键字是搜索引擎优化(SEO)方面的技术,这里不展开讨论。

    需要注意的是,不是关键字越多越好,大多数搜索引擎进行页面抓取时都会限制关键字的数量,过多的关键字反而会影响搜索引擎对该页面质量的评价。

    基本语法:

    <meta name="Keywords" content="value" />
    

    其中,Keywords 表示关键字定义content 属性值表示关键字内容关键字之间要用逗号分隔

    下面列举了一篇文章的关键字,供大家参考。

    <meta
      data-n-head="ssr"
      data-hid="keywords"
      name="keywords"
      content="做了个代码神器,让你敲代码6到起飞, 代码开源给大家【人工智能/自然语言处理】"
    />
    

    2、设定描述

    对于一个网站的每个页面,都可以在源代码中添加说明,用来将页面的主题描述清楚,这就是页面描述的作用。

    但因为搜索引擎在评价页面与用户搜索关键字的相关度时,除了考虑关键字,也会分析描述的内容。所以,为了提高页面的搜索引擎排名,在编写描述时,应注意让搜索引擎更好地对本页面的质量进行评价。

    搜索引擎同样对描述文字的字数有一定的要求,所以内容应尽量简明扼要。

    基本语法:

    <meta name="Description" content="value" />
    

    其中,Description 表示描述定义,content 属性值表示描述内容。下面列举了蓝桥网站首页的描述,仅供大家参考。

    <meta
      data-n-head="ssr"
      data-hid="description"
      name="description"
      itemprop="description"
      content="把开发的好用工具推荐给大家, 并提供一些思路和灵感 ✨ 一、为什么要开发一个这样的工具❤️ 二、VARBook介绍 三、怎么使用? 1、快速访问  2、使用案例 四、VARBook有什么特点 1、为中文支持而生 2、命名规范,多种选择 3、急速响应? 4、智能复制 五、目前开发进度  TODO 期待2022年3月前完成❓ 六、VARBook是怎么实现的前端components"
    />
    

    3、设定字符集

    <meta> 标签中的 http-equiv 属性为“名称:值”对提供了名称,并指示服务器在发送实际的页面内容之前,先将这些“名称:值”对发送给用户浏览器。服务器向浏览器发送 HTML 文档时,至少需要发送一个content-type: text/html,告诉浏览器准备接收一个 HTML 文档。

    编写一个文档时,需要确定该文档使用的字符集。一个 HTML 文档,可以通过<meta>标签说明该 HTML 文档所使用的字符集。这样浏览器在显示这个 HTML 文档时,就可以根据该标签确定用什么样的字符集显示这个文档。

    在中国大陆地区,常用的编码是 GB 码,表示简体中文,字符集应设置为 gb2312 ;中国台湾地区常用的编码是 BIG5 码,表示繁体中文;欧洲地区常用 ISO8859-1 表示英文……对于不同字符集的页面,如果用户的浏览器不支持该字符集的显示,则浏览器中显示的将是乱码。

    基本语法:

    <meta http-equiv="content-type" content="text/html;charset=value" />
    

    其中,content-type 表示字符集定义,content 属性值表示文档类型和字符集,其中 charset 指定字符编码。下面分别列举了使用 UTF-8 国际化编码的 <meta> 标签内容,后期在开发过程中默认使用 UTF-8 编码。

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    

    HTML5 字符集设置简化写法:

    <meta charset="UTF-8" />
    

    在这里插入图片描述


    <body>标签

    <body> 标签界定了 HTML 文档的主体。在 <body> 标签和其结束标签 </body> 之间的所有部分都被称为主体内容,此标签对必须成对出现。在 <body></body> 之间放置的是实际要显示的所有内容和其他用来控制显示方式的标签,如 <p></p><h1></h1><br /><hr />等,它们中间所定义的文本、超链接、图像、表格和列表等将会在浏览器窗口中显示出来。

    基本语法

    <body>
      主体内容
    </body>
    

    完整案例

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8" />
        <title>案例1</title>
        <meta 
            data-n-head="ssr" 
            data-hid="keywords" 
            name="keywords" 
            content="做了个代码神器,让你敲代码6到起飞, 代码开源给大家【人工智能/自然语言处理】" />
        <meta 
            data-n-head="ssr" 
            data-hid="description" 
            name="description" 
            itemprop="description"
            content="把开发的好用工具推荐给大家, 并提供一些思路和灵感 ✨ 一、为什么要开发一个这样的工具❤️ 二、VARBook介绍 三、怎么使用? 1、快速访问  2、使用案例 四、VARBook有什么特点 1、为中文支持而生 2、命名规范,多种选择 3、急速响应? 4、智能复制 五、目前开发进度  TODO 期待2022年3月前完成❓ 六、VARBook是怎么实现的前端components" />
    </head>
    
    <body>
        完整案例 &nbsp;  
        2022 &copy; uiuing.com
    </body>
    
    </html>
    

    在这里插入图片描述




    块级标签

    div 标签

    HTML 的 <div> 标签是最重要的一个块级元素,它是可用于组合其他 HTML 元素的容器。<div> 标签没有特定的含义,它主要是用于实现页面布局操作。如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

    网络流行的“DIV+CSS”布局方式中的 div 指的就是 <div> 标签。

    这种新的文档布局方式取代了传统使用表格布局的旧布局方式。使用 <table> 元素进行文档布局不是表格的正确用法<table> 元素的作用是显示表格化的数据

    基本语法

    <div>其他标签或文档</div>
    

    示例代码

    <body>
      <div> uiuing.com </div>
    </body>
    

    显示效果
    在这里插入图片描述


    <p> 标签

    在 HTML 语言中,用标签 <p> 表示段落。

    基本语法

    <p>段落内容</p>
    

    对于段落标签,有一个可选的属性 align,用于表示段落相对浏览器窗口在水平位置上的对齐方式

    align 属性有四个可取值,每个可取值的含义如表所示:

    描 述
    left段落左对齐
    right段落右对齐
    center段落居中对齐
    justify对行进行伸展,每行都可以有相等的长度

    示例代码:

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8" />
        <title>&lt; p &gt;</title>
    </head>
    
    <body>
        <body>
            <p>1+1等于几</p>
            <p align="center">
                等于2
            </p>
        </body>
    </body>
    
    </html>
    

    显示效果
    在这里插入图片描述


    <hn> 标签

    标题标签 <hn>(非 <title> 标签)主要用来标识 HTML 文档中的各级标题

    在浏览器解析标题标签时,会将标题内容设为一个段落,字体设为黑体,字号大小根据 n 值的大小确定

    基本语法

    <hn>标题文字</hn>
    

    标题标签共有六种,每种的标题在字号上都有明显的区别。
    在 HTML 中,定义了六级标题,从一级到六级,每级标题的字体大小依次递减。

    示例代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>标题标签</title>
    </head>
    
    <body>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
    </body>
    
    </html>
    

    显示效果
    在这里插入图片描述


    <ul>/<ol>/<li> 标签

    介绍

    HTML 中的列表可分为两种类型

    • 一种是有序列表
    • 另一种是无序列表

    前者使用编号来记录,而后者则使用项目符号来标识无序的项目。


    有序列表

    在有序列表中,主要使用 <ol><li> 两个标签,其中 <ol> 标签定义有序列表,<li> 标签定义列表项目。

    基本语法:

    <ol>
      <li>项目一</li>
      <li>项目二</li>
      <li>项目三</li></ol>
    

    对于

    1. 标签有两个可选的属性,下表列出了每个属性、可取值和简单描述。

    属 性可 取 值描 述
    typeA、a、I、i、1规定列表的类型,默认为数字
    startstart_number规定列表中的起始点,默认为 1

    示例代码

    <ol type="A" start="2">
      <li>我是1</li>
      <li>我是2</li>
      <li>我是3</li>
      <li>我是4</li>
      <li>我是5</li>
    </ol>
    

    显示效果

    在这里插入图片描述


    无序列表

    在 HTML 文档中,所谓无序列表,是指以实心圆 ●(默认)、空心圆 ○、实心方块 ■ 开头的,没有顺序的列表项目。

    在无序列表中,各个列表项之间没有顺序之分。无序列表由 <ul></ul> 标签对实现,每个列表项也是由 <li> 标签定义的。

    基本语法

    <ul>
      <li>项目一</li>
      <li>项目二</li>
      <li>项目三</li></ul>
    

    无序列表与有序列表非常类似,不同点在于因为无序列表是无序的,所以不存在 start 这个规定列表起始点的属性。

    无序列表的 type 属性可以设置为 disc、circle、square,其中 disc 代表 实心圆 ●(默认),circle 代表 空心圆 ○、square 代表 实心方块 ■。

    示例代码

    <ul type="disc">
            <li>我是1</li>
            <li>我是2</li>
            <li>我是3</li>
            <li>我是4</li>
        </ul>
    

    显示效果
    在这里插入图片描述


    <dl>/<dt>/<dd> 标签

    在 HTML 中,<dl><dt><dd> 是一组合标签,如果使用 <dt><dd> 标签的话,那么最外层就必须使用 <dl> 包裹,这种组合标签也称作表格标签,与 <table> 表格类似故而也可以称之为 <dl> 表格。

    在开发的过程中,一般使用这个组合标签来实现图文混编的功能。例如既有图片又有描述的商品列表,就可以使用这个组合标签来实现。

    基本语法

    <dl>
      <dt>列表项</dt>
      <dd>列表描述</dd>
    </dl>
    

    示例代码

    <body>
        <dl>
            <dt>
                <img width="400"
                    src="https://user-images.githubusercontent.com/73827386/148187928-2db0116a-3a0e-486b-a427-2f5d959b37c3.jpg" />
            </dt>
            <dd>访问地址: https://varbook.uiuing.com</dd>
        </dl>
    </body>
    

    显示效果
    在这里插入图片描述



    综合案例

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    
    <body>
        <div>
            <h1>大数据</h1>
            <hr />
            <p>大数据的5V特点:</p>
            <ul>
                <li>Volume(大量)</li>
                <li>Variety(多样)</li>
                <li>Velocity(高速)</li>
                <li>Veracity(真实性)</li>
                <li>Value(低价值密度)</li>
            </ul>
        </div>
    </body>
    
    </html>
    

    在这里插入图片描述




    行内标签

    <a> 标签

    超链接,也可以称之为锚(anchor),使用 <a></a> 标签标记。超链接极为常用,是网站页面的重要组成部分。

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

    当用户把鼠标指针移动到网页中的某个链接上时,鼠标指针箭头会变为一只小手,这是超链接的重要特征。


    在开发的过程中有两种使用 <a> 标签的方式:

    • 通过使用 href 属性 - 创建指向另一个文档的链接

    • 通过使用 name 属性 - 创建文档内的书签


    超链接

    href 属性

    一个超链接包含以下两部分:

    • 链接地址:链接的目标,可以是某个网址或文件的路径等,对应为 标签的 href 属性
    • 链接文本或图像:单击该文本或图像,将跳转到 href 属性指定的目标,对应为 标签对中的文本或图像

    基本语法

    <a href="连接地址或文本">文本或者图片</a>
    

    示例代码

    <body>
        <a href="https://uiuing.com">我的博客</a><br />
        <a href="https://uiuing.com"><img
                src="https://pic.imgdb.cn/item/61dc512e2ab3f51d91f96bb9.png" /></a>
    </body>
    

    显示效果

    在这里插入图片描述


    target 属性

    <a> 标签的 target 属性规定在何处打开链接文档。如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。

    如果这个指定名称或 id 的框架或者窗口不存在,浏览器将打开一个新的窗口,给这个窗口一个指定的标记,然后将新的文档载入那个窗口。从此以后,超链接文档就可以指向这个新的窗口。

    首先我们到根目录创建三个HTML文件
    在这里插入图片描述

    index.html

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    
    <body>
        <ul>
            <li><a href="onePage.html" target="showHTML">第一页</a></li>
            <li><a href="twoPage.html" target="showHTML">第二页</a></li>
        </ul>
    </body>
    
    </html>
    

    第一次选择内容列表中的某个链接时,浏览器会打开一个新的窗口,将它标记为 “showHTML”并在其中显示文档内容。当用户选择另一个链接打开时,如果这个标记为 “showHTML” 的窗体仍处于打开状态,浏览器就会再次将选定的文档在该窗口中显示

    onePage.html

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    
    <body>
        <p>我是 onePage.html</p>
    </body>
    
    </html>
    

    twoPage.html

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    
    <body>
        <p>我是 twoPage.html</p>
    </body>
    
    </html>
    

    效果
    例如以下,我点击了第一个时,他将自动更改已点击的效果,并且将新建一个浏览器标签
    在这里插入图片描述


    <a> 标签的 target 属性有一个有 4 个保留的目标名称用作特殊的文档重定向操作:

    描述
    _blank浏览器总在一个新打开、未命名的窗口中载入目标文档
    _self浏览器在当前窗口载入目标文档
    _parent浏览器在父窗口载入目标文档。如果这个引用是在窗口或者在顶级框架中,那么它与 _self 等效
    _top浏览器在最顶端的框架窗体载入目标文档


    文档与id跳转

    当一个页面内容特别多时,可以通过给页面建立书签的方式,对同一页面里的内容进行链接。这样用户在浏览网页时,可以通过书签进行页面内的内容跳转,提高浏览者的用户体验效果。

    既然要通过超链接的方式访问同一页面的某一位置内容,那么首先要给该位置建立一个书签。

    基本语法

    <a name="书签名称">文字</a>
    

    定义了书签后,链接到该书签的超链接的基本语法为:

    <a href="#书签名称">链接点</a>
    

    下面通过一个案例,演示使用超链接跳转至本文档的另一个位置,即当用户单击“查看本文档第三部分”这个内部链接时,即可链接到本页面的第三部分位置。代码如下:

    <body>
        <p><a href="#d3">查看本文档第三部分</a></p>
    
        <h2>第一部分</h2>
        <p>这是第一部分的内容!</p>
    
        <h2>第二部分</h2>
        <p>这是第二部分的内容!</p>
        
        <h2><a name="d3">第三部分</a></h2>
        <p>这是第三部分的内容</p>
        
        <h2>第四部分</h2>
        <p>这是第四部分的内容!</p>
    
        <h2>第五部分</h2>
        <p>这是第五部分的内容!</p>
    
        <h2>第六部分</h2>
        <p>这是第六部分的内容!</p>
    
        <h2>第七部分</h2>
        <p>这是第七部分的内容!</p>
    
        <h2>第八部分</h2>
        <p>这是第八部分的内容!</p>
    
        <h2>第九部分</h2>
        <p>这是第九部分的内容!</p>
        
        <h2>第十部分</h2>
        <p>这是第十部分的内容!</p>
    </body>
    

    显示效果
    在这里插入图片描述
    同理,也可操作标签的id

     <p><a href="#d3">查看本文档第三部分</a></p>
    
        <h2>第一部分</h2>
        <p>这是第一部分的内容!</p>
    
        <h2>第二部分</h2>
        <p>这是第二部分的内容!</p>
        
        <h2><a id="d3">第三部分</a></h2>
        <p>这是第三部分的内容</p>
    


    <span> 标签

    <span> 标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 <span> 应用样式,那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。所以可以这样认为:<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

    基本语法

    文本

    示例代码

    <body>
      <span>您好</span>
    </body>
    


    短语标签

    举例如 <strong> 标签是一个短语标签,用来定义重要的文本。

    在 HTML 中,短语标签是专用标签,用于指示文本块具有结构意义执行与文本格式标签类似的特定操作。在开发的过程中并不反对使用这个标签,但如果只是为了达到某种视觉效果而使用这个标签的话,强烈建议使用 CSS ,这样可能会取得更丰富的效果。

    基本语法

    <strong>重要的文本</strong>
    

    所有短语标签

    标签描述
    <em>呈现为被强调的文本
    <strong>定义重要的文本
    <dfn>定义一个定义项目。
    <code>定义计算机代码文本。
    <samp>定义样本文本
    <kbd>定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
    <var>定义变量。您可以将此标签与 <pre><code> 标签配合使用。

    示例代码

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    
    <body>
        <p>
            <strong>strong</strong>
        </p>
    
        <p>
            <dfn>dfn</dfn>
        </p>
    
        <p>
            <code>code</code>
        </p>
    
        <p>
            <samp>samp</samp>
        </p>
    
        <p>
            <kdb>kdb</kdb>
        </p>
    
        <p>
            <var>var</var>
        </p>
    </body>
    
    </html>
    

    效果
    在这里插入图片描述



    <img> 标签

    当浏览网页时,如果一个页面内容都由文字组成,往往会让人觉得枯燥、呆板,提不起浏览的兴趣。如今丰富多彩的网页,很大程度上要归功于图像的作用。本节主要介绍如何在 HTML 文档中插入图像。

    在日常生活中,使用比较多的图像格式主要有五种,即 JPG、GIF、BMP、PNG、SWF。在网页中使用较多的是 PNG、JPG、GIF,大多数浏览器都可以显示这些图像。

    在页面中插入图像可以起到美化的作用,同时可以更形象地说明要表达的意思。在 HTML 文档中,插入图像的标签只有一个,即 <img> 标签,它负责向页面中嵌入一幅图像。准确来讲,<img> 标签并不会在页面中真正插入图像,而只是提供了一个链接地址,链接显示出图像。所以说,<img> 标签创建的是被引用图像的占位空间

    基本语法

    <img src="图像 URL" alt="图像描述" />
    

    基本语法中只列出了 <img> 标签的两个重要属性:src 属性和 alt 属性,其中 src 属性定义了图像的链接地址(通常会把图像文件存放在一个单独的目录中,并将这个目录命名为 pics 或者 images 之类的名称),而 alt 属性则当图像无法显示时,替代显示的文本

    <img
      src="图片地址"
      alt="描述"
    />
    

    对于 图像标签还有一些其他可选的属性,例如 width 属性和 height 属性。下表列出了属性名、可取值及简单描述。

    属性可取值描述
    aligntop、bottom、middle、left、right规定如何根据周围的文本来排列图像,bottom 是默认的对齐方式
    widthpixels、%定义图像的宽度,可用百分比
    heightpixels、%定义图像的高度,可用百分比
    borderpixels定义图像周围的边框



    综合练习

    目标

    请通过今天所学实现以下页面
    在这里插入图片描述


    素材

    图片素材
    在这里插入图片描述

    文字素材

    HTML版本
       HTML是用来标记Web信息如何展示以及其他特性的一种语法规则,它最初于1989年由CERN的 TimBerners-Lee 发明。HTML基于更古老一些的语言SGML定义,并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据,所以很早就得到各个Web浏览器厂商的支持。 [5] HTML历史上有如下版本: [5]
    
    HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 [5]
    HTML 2.0:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。 [5]
    HTML 3.2:1997年1月14日,W3C推荐标准。 [5]
    HTML 4.0:1997年12月18日,W3C推荐标准。 [5]
    HTML 4.01(微小改进):1999年12月24日,W3C推荐标准。 [5]
    HTML 5:HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。 [6]
       HTML在Web迅猛发展的过程中起着重要作用,有着重要的地位。但随着网络应用的深入,特别是电子商务的应用,HTML过于简单的缺陷很快凸现出来:HTML不可扩展。HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。HTML只能用于信息显示。HTML可以设置文本和图片显示方式,但没有语义结构,即HTML显示数据是按照布局而非语义的。随着网络应用的发展,各行业对信息有着不同的需求,这些不同类型的信息未必都是以网页的形式显示出来。例如。当通过搜索引擎进行数据搜索时,按照语义而非按照布局来显示数据会具有更多的优点。
    
       总而言之,HTML的缺点使其交互性差,语义模糊,这些缺陷难以适应Internet飞速发展的要求,因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。
    
    特点
       超文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下: [4]
    简易性:超文本标记语言版本升级采用超集方式,从而更加灵活方便。 [4]
    可扩展性:超文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超文本标记语言采取子类元素的方式,为系统扩展带来保证。 [4]
    平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。 [4]
    通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。 [4]
    
    展开全文
  • html中常见标签及其用法归纳大全

    千次阅读 2021-10-28 14:07:39
    第二章:html常见标签前言一、常见标签(一)1、body标签2、div盒子标签3、p文本段落标签4、h1~h6 标题标签5、b标签和strong标签(文字加粗标签)6、span文字包裹标签7、br换行标签和hr分隔符标签9、del删除标签10、...

    html零基础必看——htmlHTML常见标签大全

    前言

    在上一章中,了解了html页面结构,以及认识了标签。那么都有哪些标签呢?各种标签的作用又是什么呢?本篇文章将带你走进常见标签系列!

    一、常见标签(一)

    1、body标签

    网页身体标签,所有网页内容都在里面,存放各种标签

    2、div盒子标签

    一般划分一个个区域,构建骨架思路会用到。用于存放:文字、图片、内容等

    3、p文本段落标签

    为文本段落标签,可存放大段落文字

    4、h1~h6 标题标签

    • h1到h6级别逐渐减小
    • 书写规范,一个页面只允许出现一个h1(一级标题标签),若重复出现网页会分不清主次内容,就像一篇作文只能有一个作文题目一样。

    5、b标签和strong标签(文字加粗标签)

    都是用于加粗文字的。二者区别是:strong标签是为了突出重点

    6、span文字包裹标签

    • 包裹文字的标签。
    • p标签和span标签的区别是:p标签会自动换行,而span标签不会自动换行。一般短的语句可以用span标签包裹,长点的用p标签包裹。

    7、br换行标签和hr分隔符标签

    • br标签和hr标签都是但标签
    • br标签是换行标签
    • hr标签是分隔符标签

    8、i标签和em标签(文字斜体标签)

    • 二者都是斜体标签,使文字呈现倾斜效果
    • 二者区别:em标签更容易被浏览器识别到

    9、del删除标签

    一般用于价格删除线

    10、center居中标签

    使文本居中

    11、sup上标和sub下标

    标签的内容将会在当前字符高度的一半为基准线的下/上方,字体大小会小一点。

    12、pre预格式化标签

    被包围在pre标签中的文本通常会保留空格和换行符, 而文本也会呈现出等宽字体。

    上述标签使用方法及代码展示:

    <body>
        <!-- 这是身体标签 -->
    
        <div class="div1">
            <!--这是一个盒子标签-->
            <p>我是段落文本p标签</p>
            <h1>我是一级标题标签</h1>
            <h2>我是二级标题标签</h2>
            <h3>我是三级标题标签</h3>
            <h4>我是四级标题标签</h4>
            <h5>我是五级标题标签</h5>
            <h6>我是六级标题标签</h6>
        </div>
        <hr>
    
        <div class="div2">
            <!--这也是一个盒子标签-->
    
            <!-- 区别是p会自动换行,而span不会自动换行,共用一行 -->
            <p>你好</p>
            <p>我爱前端</p>
            <p>好好学习</p>
            <hr>
            <!--分隔符-->
            <span>你好</span>
            <span>我爱前端</span>
            <span>好好学习</span>
            <br>
            <span>我被br强制换行了</span>
        </div>
        <hr>
    
        <div class="div3">
            <!--这还是一个盒子标签-->
            <p>我是正常的p</p>
            <p><i>我是被斜体i定义后的p</i></p>
            <p><em>我是被斜体em定义后的p,我更容易被浏览器识别</em></p>
        </div>
        <hr>
    
        <div class="div4">
            <span>现价:¥99
                <del>原价:¥399</del>
                <!--这是删除符-->
                <center>我是居中对齐</center>
                H<sub>2</sub>O
                CO<sup>2</sup>
    
            </span>
        </div>
        <hr>
    
        <div class="5">
            <p>
                你好 我是前端小白
                我爱学前端
                我的空格和换行没有被p保留
            </p>
    
            <pre>
                你好   我是前端小白
                我爱学前端
                我是被pre保留了空格和换行
            </pre>
        </div>
    </body>
    

    呈现效果:
    在这里插入图片描述

    二、常用标签(二)

    2.1.a标签(链接、超链接、锚点标签)

    2.1.1.超链接标签

    <a href="https://www.baidu.com/" name="baidu" target="_blank" title="百度首页" accesskey="s">百度一下</a>

    • a:a标签(超链接标签)

    • href属性:超链接需要跳转的地址路径

    • name属性:链接名称(一般用于锚点链接捆绑跳转的链接)

    • title属性:链接的提示文字(鼠标悬停时的提示)

    • target属性:链接目标窗口,链接在什么地方打开,网页位置

      • _self属性值:连接在当前页面打开(这是默认值,在没有指定属性值的情况下,默认是_self在当前页面打开
      • _blank属性值:在新窗口打开(点几下打开几个新窗口)
      • _new属性值:在新窗口打开(无论点几下只打开一个,除特殊商品网站如某东页面强制要求,点几下会开几个页面,为了增加访问量)
    • accesskey属性:链接热键(accesskey属性的值设置为哪个字母,就用Alt+这个值的字母可以自动跳转链接)

    <!--百度网站和哔哩哔哩网站
           1.用_blank属性点几次,打开几个新的页面
           2.用_new属性无论点几次都只会打开一个页面
           3.用_self属性,就在当前页面中跳转。它是默认属性
           特殊:京东网站用_new属性,点几次都会打开几个页面,因为人家是内部强制设定了,为了增加访问量。其他两个属性一样-->
       
       <a href="https://www.baidu.com/" target="_blank" >用_blank属性,百度一下</a><br>
       <a href="https://www.baidu.com/" target="_new" >用_new属性,百度一下</a><br>
       <a href="https://www.baidu.com/" target="_self" >用_self属性,百度一下</a><br>
       <br><br><hr>
       <!-- _self是默认值,在没有指定target属性值的时候,默认在当前页面打开 -->
       <a href="https://www.jd.com/" target="_blank" >用_blank属性,京东一下</a><br>
       <a href="https://www.jd.com/" target="_new" >用_new属性,京东一下</a><br>
       <a href="https://www.jd.com/" target="_self" >用_self属性,京东一下</a><br>
       <br><br><hr>
       <a href="https://www.bilibili.com/" target="_blank" >用_blank属性,哔哩哔哩</a><br>
       <a href="https://www.bilibili.com/" target="_new" >用_new属性,哔哩哔哩</a><br>
       <a href="https://www.bilibili.com/" target="_self" >用_self属性,哔哩哔哩</a><br>
       <br><br><hr>
    

    2.1.2 锚点链接

    • 创建锚点链接,基本格式:
      <a name="锚点名称">链接对象名称</a>
    • 建立链接,基本格式:
      <a href="#跳转的锚点名称" name="锚点名称">链接对象名称</a>
    • 锚点链接不仅可以在同一个页面中互跳,也可跨页面互跳

    创建一个页面命名为index01.html

    <body>
         <!-- <a href="#跳转的锚点名称" name="锚点名称">链接对象名称</a> -->
         
        <a name="top" href="#bottom">我是顶部,点我可以跳到底部</a>
        <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
        <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
        <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
        <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
        <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
        <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
        <a name="bottom" href="#top">我是底部,点我可以跳到顶部</a>
       
        <!-- 锚点不但可以在同一个页面中互跳,也可在不同页面中互跳 -->
        <hr>
        <hr>
        <a href="index02.html#top">点我跳到index02.html页面中的top锚点链接</a>
    </body>
    

    再创建一个页面命名为index02.html

    <body>
        <!-- 空连接:href属性值就只写个#,空连接不跳转-->
        <a href="#">我是空连接</a>
        <hr>
        <a ></a>
        <a href="index01.html">点我回到index01.html网页,实现跨页面互跳</a>
        <hr>
        <a name="top" href="index01.html#bottom">点我回到index01.html的底部,实现跨页面互跳锚点链接</a>
    </body>
    

    2.1.3 空连接

    空连接就是目标链接为空,用“#”表示,点击空连接后,页面仍然会停留在当前页面。
    格式:<a href="#">我是空连接</a>

    2.2 图片标签

    格式:<img src="./img/1.jpg" alt="图片加载失败" title="这是漂亮的小姐姐" width="200px" height="200px">

    • img 图片标签
    • src图片地址属性:用于放图片地址
    • alt:当图片路径出错时,alt文字提示就会显现出来
    • title:图片的描述,鼠标放在图片上描述图片的文字就会显现出来
      width、height宽度和高度属性,属性值是数字,单位一般用px像素。(可在img图片标签中控制图片大小)

    关于路径问题补充:

    • ./相同文件夹下的目录文件(常用)
    • …/上一级文件夹里的目录文件

    引入图片方式:

    1.相对路径:【./在相同文件夹下找目录文件。】【…/上一级文件夹里找目录文件】。
    2.绝对路径:从电脑里C/D/F盘开始的路径。不怎么常用,因为图片在自己电脑里,这样不利于别人使用
    3.网络地址:直接找一个网上的图片链接地址。局限性是在有网,以及图片在网上未删除的时候查看

    演示:

     <!-- 相对路径引入图片 -->
    
        <img src="./img/1.jpg" alt="图片加载失败" title="这是漂亮的小姐姐" ><!-- 这个是图片实际大小 -->
        <hr>
        <!-- 这个是通过img标签行内设置宽高之后的 -->
        <img src="./img/1.jpg" alt="图片加载失败" title="这是漂亮的小姐姐" width="200px" height="200px">
        <!-- 故意放错图片,alt里的文字就会显现出来 -->
        <img src="1.jpg" alt="图片加载失败">
    
        <!-- 网路地址引入图片 -->
        <img src="http://www.jj20.com/tx/qita/213161.html" alt="">
    

    三、列表标签

    3.1 无序列表标签<ul>

    1.无序列表标签用<ul>标记,子元素是<li>标签列表项
    2.可用快捷方式生成多个<li>子元素列表标签。如:ul>li*3;li*6。等就会生成几个li子列表项。
    3.在<ul>标签里面,可用type属性修改子列表项<li>前面的黑点类型

    <ul type="disC">
    

    -默认值:disc(实心圆)

    • 空心点:circle
    • 实心方块 :square
    • 不显示符号none

    代码演示

     <body>
        <!-- 快捷生成多个子列表项:ul>li*3或li*5或ul.li{$}*5 -->
        <ul>
            <!-- 列表项的默认样式是实心圆 -->
            <li>我是列表项一</li>
            <li>我是列表项二</li>
            <li>我是列表项三</li>
        </ul>
    
        <ul type="circle">
            <!-- 指定列表项的样式是空心点 -->
            <li>我是列表项一</li>
            <li>我是列表项二</li>
            <li>我是列表项三</li>
        </ul>
        <ul type="square">
            <!-- 指定列表项的样式是实心方块 -->
            <li>我是列表项一</li>
            <li>我是列表项二</li>
            <li>我是列表项三</li>
        </ul>
        <ul type="none">
            <!-- 指定列表项不显示符号 -->
            <li>我是列表项一</li>
            <li>我是列表项二</li>
            <li>我是列表项三</li>
        </ul>
    
    </body>
    

    效果展示:
    在这里插入图片描述

    3.2 有序列表标签<ol>

    1.有序列表标签用<ol>标记,子元素是<li>标签列表项
    2.通过type属性修改排序类型:默认是阿拉伯数字1开始排序

    <ol type="a"><!--用小写字母a开始排序-->
    
    • type属性值可为:列举几种
    • a用小写字母开始排序
    • A用大写字母开始排序
    • i/I 用罗马字母开始排序

    代码演示:

    <!-- 默认是阿拉伯数字123排序 -->
        <ol>
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
        </ol>
        <ol type="a">
            <!-- 指定用小写字母a开始排序 -->
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
        </ol>
        <ol type="A">
            <!-- 指定用大写字母A开始排序 -->
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
        </ol>
        <ol type="i">
            <!-- 指定用小写罗马字母i开始排序 -->
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
        </ol>
        <ol type="I">
            <!-- 指定用大写罗马字母I开始排序 -->
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
        </ol>
    

    效果展示:
    在这里插入图片描述
    3.使有序列表前面无符号显示
    注意,有序列表顾名思义就是要有顺序,如果非要有序列表没有顺序的话,它是不支持type属性的值为none的。那么如果硬要让有序列表前面不显示符号,可以给它加一个list-style的样式,属性值为noe。加上样式就要涉及到下节所讲的css样式了的知识了。

    方法一:直接在内部样式添加list-style:none
    方法二:通过引入外部样式里,有默认清除
    这两种方法在下一章节里会有讲到的

    <!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>
        <!-- 方法二:通过引入外部样式里,有默认清除 -->
        <!-- <link rel="stylesheet" href="rest.css"> -->
    
        <!-- 方法一:直接给ol加一个样式就可以清除前面的符号 -->
        <style>
            /* 直接给ol加一个样式就可以清除前面的符号了,也可以通过引入外部样式里,有默认清除 */
            ol {
                list-style: none;
            }
        </style>
    </head>
    
    <body>
        <!-- 注意,有序列表顾名思义就是要有顺序,如果非要有序列表没有顺序的话,它是不支持type属性的值为none的。那么如果硬要有序列表前面不显示符号,方法是:给它加一个list-style:none的样式(可以直接添加在内部样式里或是引入外部样式默认清除样式)
     -->
        <ol type="I">
           <p>这是有序列表但是我可以通过设置list-style: none属性值去掉符号</p>
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
        </ol>
    </body>
    
    </html>
    

    效果图:
    在这里插入图片描述

    3.3 描述列表标签(也叫自定义列表标签)<dl>

    1.描述列表标签用<dl>标记,子元素有两个是<dt><dd>标签列表项
    2.描述列表一般用于一列项目及项目的组合,格式为:

    <dl>
            <dt>名词一</dt><dd>解释一</dd>
            <dt>名词二</dt><dd>解释二</dd>
            <dt>名词三</dt><dd>解释三</dd>
            
        </dl>
    

    效果展示:
    在这里插入图片描述

    总结

    上述是小编为大家整理的一些HTML中常见标签的用法及代码展示,当然还有很多标签还没有整理进来,后续小编会加一些进来的。参考多方资料加上自己的理解整理出来的,或有不确之处和疏漏的地方,还望各位大佬能够不吝赐教,加以斧正,小编在此先行谢过了。

    展开全文
  • HTML网页设计:二、网页的基本标签

    千次阅读 多人点赞 2021-03-19 17:59:58
    级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> 代码示例如下: <!doctype ...

    网页的基本标签


    HTML系列文章目录

    1. HTML网页设计:一、HTML的基本结构
    2. HTML网页设计:二、网页的基本标签
    3. HTML网页设计:三、图像标签之<img>标签
    4. HTML网页设计:四、超链接
    5. HTML网页设计:五、行内元素和块元素
    6. HTML网页设计:六、列表
    7. HTML网页设计:七、表格
    8. HTML网页设计:八、媒体元素
    9. HTML网页设计:九、网页的简单布局
    10. HTML网页设计:十、iframe内联框架
    11. HTML网页设计:十一、表单

    1.标题标签

    基本标题标签:一级标题最大,依次越来越小。

    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>

    代码示例如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>标题标签学习</title>
    </head>
    <body>
    	<h1>一级标签</h1>
    	<h2>二级标签</h2>
    	<h3>三级标签</h3>
    	<h4>四级标签</h4>
    	<h5>五级标签</h5>
    	<h6>六级标签</h6>
    </body>
    </html>
    

    网页显示如下:
    在这里插入图片描述

    2.段落标签

    <p>段落</p>

    代码示例如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>段落标签学习</title>
    </head>
    <body>
    	<!-- 未使用段落标签 !-->
    	我寻你千百度 又一岁荣枯
    	可你从不在 灯火阑珊处
    	
    	我寻你千百度 日出到迟暮	
    	一瓢江湖我沉浮
    	<!-- 使用段落标签 !-->
    	<p>我寻你千百度 又一岁荣枯</p>
    	<p>可你从不在 灯火阑珊处</p>
    	<p>     </p>
    	<p>我寻你千百度 日出到迟暮</p>
    	<p>一瓢江湖我沉浮</p>
    </body>
    </html>
    

    网页显示如下:
    在这里插入图片描述

    3.换行标签

    <br/>

            <br>标签是空标签,即没有结束标签,因此<br>…</br>是错误的在xml里面必须要求写出<br/>因为xml要求所有的标签都必须关闭,后面加上/表示关闭标签。二者具有相同作用,但前者是老的html规范,而在新的规范W3C//DTD HTML 4.0要求一切都应象xml那样有结束符,以便严格规范。

    代码示例如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>换行标签学习</title>
    </head>
    <body>
    	<!-- 未使用换行标签 !-->
    	我寻你千百度 又一岁荣枯
    	可你从不在 灯火阑珊处
    	
    	我寻你千百度 日出到迟暮	
    	一瓢江湖我沉浮
    	<!-- 使用换行标签 !-->
    	我寻你千百度 又一岁荣枯<br/>
    	可你从不在 灯火阑珊处<br/>
    	<br/>
    	我寻你千百度 日出到迟暮<br/>	
    	一瓢江湖我沉浮<br/>
    </body>
    </html>
    

    网页显示如下:
    在这里插入图片描述

    段落标签和换行标签的不同:在生成的网页中,段落段前段后具有间距,而换行每行之间没有间距。

    4.水平线标签

    <hr/>

            在 HTML 中,<hr> 标签没有结束标签,在 XHTML 中,<hr> 必须被正确地关闭,比如<hr/>,同<br/>标签,为规范标准使用,需要在后面加一个反斜杠。

    代码示例如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>水平线标签学习</title>
    </head>
    <body>
    	hello
    	<hr/>
    	world
    </body>
    </html>
    

    网页显示如下:
    在这里插入图片描述

    5.注释

    <!–这是一段注释。注释不会在浏览器中显示。–>

    dw中注释的快捷方式为选中要注释的内容按ctrl+shift+/

    代码示例如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>注释标签学习</title>
    </head>
    <body>
    	<!--这是一段注释,不会再网页上显示。-->
    	<p>这是一个普通的段落。</p>
    	这是一个普通的句子。<br/>
    	这是一个普通的句子。<br/>
    </body>
    </html>
    

    网页显示如下:
    在这里插入图片描述

    6.特殊符号

    空格:&nbsp;
    大于号>:&gt;
    小于号<:&lt;
    版权符号©:&copy;

    代码示例如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>特殊符号学习</title>
    </head>
    <body>
    	<!--空格-->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
    	<!--大于号-->
    	x&gt;y<br/>
    	<!--小于号-->
    	1&lt;2<br/>
    	<!--版权符号-->
    	这是一个版权符号:&copy;
    </body>
    </html>
    

    网页显示如下:
    在这里插入图片描述

    展开全文
  • 1.div标签:区域标签(容器标签),用来作为多种html标签组合的容器,对该区域进行操作和设置 div标签不能嵌套在p标签对中 2.span标签:用来做为片段文字图片等简短内容的容器标签 span标签不能嵌套在其他...
  • Html基本结构、语法规则、常用标记/标签 (h1-h6/p /i/em/b/hr/br/strong/b/sub/sup/del/)及空格符&nbsp; 注:自己总结的下面分开重点和不重点的地方 一、HTML的定义: HTML:是超文本标记语言(Hpyer text ...
  • HTML编程(网页的基本标签)

    千次阅读 2019-06-14 00:47:33
    HTML编程环境准备 在讲解前端之前我们要先将Java环境和浏览器建立连接 点击上图按钮进入设置,在设置界面搜索框中搜索web 点击Web Browers按钮,可以看到右边有多个浏览器选项 选中自己使用的浏览器,在后面Path...
  • 一,基本概念 HTML(Hypertext Markup Language) 超文本标记语言,是用于描述网页文档的一种标记语言,XHTML是一种遵循更严格的XML规则的HTML新版本,这种新的XML兼容版本的HTML被称为XHTML。  声明必须是...
  • HTML5入门基本标签

    千次阅读 多人点赞 2019-09-17 23:09:23
    一个小白第一次总结了部分简单的(刚接触html5的简单标签) 这篇博客 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客...
  • HTML基础之基础标签

    千次阅读 2019-08-15 19:48:13
    HTML的基础标签 HTML中有许多的标签,这一篇文章,就讲一下HTML的基础标签吧。 在做相关代码编写之前,我们要首先创建一个文件夹,该文件夹的符合正规的HTML页面开发的规格。 0815 //项目文件夹根目录 css //...
  • html 行级元素和块级元素标签列表

    万次阅读 多人点赞 2019-06-02 21:48:49
    一、显示元素 (一)块级元素 ...HTML5:header、section、article、footer等 块级元素独占一行,当没有设置宽高时,它默认设置为100%(其宽度自动填满其父元素宽度) 块级元素允许设置宽高,widt...
  • HTML和CSS常用标签基本使用

    千次阅读 2018-05-22 21:17:58
    1.HTML常用标签1.标签分类元素 (行元素)内联元素 (行内元素)元素的特点:单个元素在浏览器中默认独占一行两个元素不能够在一行显示, 他们会自动换成两行显示元素可以设置宽高等属性. 内联元素:多个内联元素...
  • 前端学习(初识HTML 上)——基础知识和基本标签

    千次阅读 多人点赞 2021-03-11 22:05:06
    html中的一些特殊字符HTML基本标签HTML表格HTML表单HTML元素HTML元素新的改变合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容...
  • HTML的块级元素(常用整理)

    千次阅读 2020-08-04 13:28:17
    emmm,最近想整理复习一下前端的基础,最开始的HTML想了好久也没想好怎么写,最后也是决定以行这样整理,再在后面补充吧。 说到HTML,什么是HTML呢? 什么是 HTMLHTML 是用来描述网页的一种语言。 HTML 指...
  • Html标签大全

    千次阅读 多人点赞 2018-07-31 15:51:06
    HTML标签不区分大小写,&...1.HTML基本结构 &lt;html&gt;  &lt;head&gt;...&lt;/head&gt;  &lt;body&gt;...&lt;/body&gt; &lt;/html&gt;
  • 标签,可以说是HTML文件中,最为重要的一内容。 主体标记 以&lt;body&gt;开始,以&lt;/body&gt;结尾 注意:在构建HTML文件时,请不要将标记交叉使用,否则将会出现一些莫名其妙的错误 能够...
  • 玩转HTML图像,链接,列表,表格等标签

    千次阅读 多人点赞 2019-07-18 14:44:54
    html的学习知道有哪些标签,怎么使用,其余就是如何将这些标签互相混合嵌套使用了。 1.html图像img标签的使用 <img>标签可以在网页上插入一张图片,它是独立使用的标签,通过“src”属性定义图片的地址,...
  • html与css常用标签大全

    万次阅读 多人点赞 2018-09-02 23:12:47
    一,html+css基础 1-1 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体。内容就是网页制作者放在页面上...
  • 一、HTML 基本骨架 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&...
  • 2.和行内元素: 3.布局标签: 4.列表标签: 5.超链接标签: a标签属性: 6.相对路径&绝对路径: 7.图片标签: img标签属性: 图片格式: 8.内联框架: iframe属性: 9.音频标签: audio标签属性:...
  • HTML标签的作用(一)

    千次阅读 2020-03-02 08:22:20
    (3.)div,一个最常用的东西,它是一个快元素,也是一个新的行。div可以把文档分割为独立的、不同的部分。div里面可以放入class或id等(注意,每个id都是独一无二的)。 (4.)可以创建各种不同类...
  • HTML排版标签

    千次阅读 2017-12-22 21:34:42
    排版标签 : p: 段落标签,把文本内容分段落显示。支持嵌套。 hr:水平线标签,没有主体内容,使用自闭合。水平线默认宽度是占满外层元素 属性有: align:水平线所处的位置(相对位置),相对外层元素而说的 ...
  • HTML5基础之常用标签以及标签选择器

    万次阅读 2016-11-14 20:23:02
    html中,标签非常多,比如说列表,按钮,图片... 在之前的HTML页面中,在布局方式中,大家基本上都是用Div+CSS。而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个div内的内容是文章内容容器,或者是导航模块的
  • HTML5常用标签-应用场景-图文详解(一)

    千次阅读 多人点赞 2018-09-17 19:26:57
    HTML全称为HyperText MackeUp Labguage,超文本标记语言,是一种描述性的标记语言。 一个HTML页面即网页就是由一个个标记组成,浏览器根据标记语言的规则去解释它。 HTML文件由&amp;amp;amp;amp;amp;amp;amp;...
  • html基本结构;html的表单标签html的表格标签html的超链接和图片标签等等。
  • HTML上_之标签

    千次阅读 2018-08-12 08:25:15
    1. HTML的简介 概述: Hyper Text Markup Language, 超文本标记语言. ... 标记语言: 由标签(由尖括号括起来的关键字)组成, 可以被浏览器识别. //记忆: HTML语言不是编程语言, 而是一种标记语言. 作用: ...
  • HTML标签+CSS样式(一)

    千次阅读 多人点赞 2020-04-13 10:11:48
    文章目录一.HTML常用标签类 一.HTML常用标签类 1. < meta > 告诉搜索引擎爬虫我们的网站关于什么内容 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 在 ...
  • 温馨提示:千峰网络安全视频到HTML学习的这一的顺序有点乱,我给大家整理了一下: 1、基础环境搭建 p177 p201 2、HTML标签基础 p198p222 3、HTML常用的标签 p200p224 4、HTML表格 p199p223 5、HTML表单 p179...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 57,743
精华内容 23,097
关键字:

html基本块级标签