简介

  • HTML(Hyper Text Markup Language)译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述
  • HTML之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”，通过超链接可以实现网页的跳转。从而构成了丰富多彩的Web页面

基本文档格式

<html>标记

  • <html>称为根标记，用于告知浏览器其自身是一个HTML文档,<html>标记标志着HTML文档的开始，</html >标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容
  • <html lang = "en">向搜索引擎表示该页面是html语言，并且语言为英文网站，其‘lang’的意思就是'language',‘en’表示english(这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站，对html页面本身不会有影响

    )

标记

  • 标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在标记之后，主要用来封装其他位于文档头部的标记。
  • 一个HTML文档只能含有一对标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

标记

  • 标记用于定义HTML页面的标题，即给网页取一个名字，必须位于标记之内。
  • 一个HTML文档只能含有一对标记，之间的内容将显示在浏览器窗口的标题栏中。
  • 其基本语法格式如下：
  <title>网页名称</title>

标记

  • 标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于标记内，标记中的信息才是最终展示给用户看的。
  • 一个HTML文档只能含有一对标记，且标记必须在标记内，位于头部标记之后.

标签关系

  • 嵌套关系（类似父亲和儿子之间的关系）
  <html>

     <head></head>

     <body></body>

</html>
  • 并列关系（类似兄弟之间的关系）
<head></head>

<body></body>

标签分类

双标记

双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：

<标记名></标记名>

该语法中“<标记名>”表示该标记的作用开始，一般称为“开始标记（start tag）”，“</标记名>” 表示该标记的作用结束，一般称为“结束标记（end tag）”。和开始标记相比，结束标记只是在前面加了一个关闭符“/”。

<p></p> 段落标记
  • 在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是<p>。
  • <p>是HTML文档中最常见的标记，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
<h></h>标题标记
  • 为了使网页更具有语义化，我们经常会在页面中用到标题标记，HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>重要性递减。其基本语法格式如下：
<hn>标题文本</hn>
<font></font>文本样式标记
  • 多种多样的文字效果可以使网页变得更加绚丽，为此HTML提供了文本样式标记<font>，用来控制网页中文本的字体、字号和颜色。其基本语法格式如下：
<font>文本内容</font>
文本格式化标记
  • 在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标记，使文字以特殊的方式显示。
  • 文本格式化常用标记
标记 1 显示效果
<b>和<strong> 文字以粗体方式显示（XHTML推荐使用strong）
<i>和<em> 文字以斜体方式显示（XHTML推荐使用em）
<s>和<del> 文字以加删除线方式显示（XHTML推荐使用del）
<u>和<ins> 文字以加下划线方式显示（XHTML不赞成使用u）

单标记

单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：

 <标记名/>

<hr />水平线标记

  • 在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标记来完成，<hr />就是创建横跨网页水平线的标记。
  • 其基本语法格式如下：

    <hr >是单标记，在网页中输入一个<hr />，就添加了一条默认样式的水平线。

<br /> 换行标记

  • 在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标记<br />，这时如果还像在word中直接敲回车键换行就不起作用了。
图像标记
  • HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记<img />以及和他相关的属性。其基本语法格式如下：
<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，他是img标记的必需属性。

<img />标记属性
属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素（XHTML不支持%页面百分比） 设置图像的宽度
height 像素（XHTML不支持%页面百分比） 设置图像的高度

注释标记

  • 在HTML中还有一种特殊的标记——注释标记。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式如下：
<!-- 注释语句 -->
  • 注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

路径

相对路径

  • 相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。

    例如 <img src="img/logo.gif" alt="HTML1" />
相对路径设置分为以下三种：
  • 图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。
  • 图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
  • 图像文件位于html文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。

绝对路径

超链接

  • 在HTML中创建超链接非常简单，只需用<a></a>标记环绕需要被链接的对象即可，其基本语法格式如下：
<a href="跳转目标" target="目标窗口的弹出方式"\>文本或图像\</a>

在上面的语法中，<a>标记是一个行内标记，用于定义超链接，href和target为其常用属性，下面对它们进行具体地解释。

  • href：用于指定链接目标的url地址，当为<a>标记应用href属性时，它就具有了超链接的功能。
  • target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。
  • <base /> 可以设置整体链接的打开状态

注意

  • 暂时没有确定链接目标时，通常将<a>标记的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
  • 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点链接

  • 通过创建锚点链接，用户能够快速定位到目标内容。
  • 创建锚点链接分为两步：
  1. 使用“链接文本”创建链接文本。
  2. 使用相应的id名标注跳转目标的位置。

列表

无序列表

    • 无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：
    <ul>

    
      <li>列表项1</li>

    
      <li>列表项2</li>

    
      <li>列表项3</li>
......
    

</ul>
    • 在上面的语法中，<ul></ul>标记用于定义无序列表，<li></li>标记嵌套在<ul></ul>标记中，用于描述具体的列表项，每对<ul></ul>中至少应包含一对<li></li>。
    • 无序列表中type属性的常用值有三个，它们呈现的效果不同.
    1. 默认值:disc
    2. 方块:square
    3. 空心圆:circle

    有序列表<ol>

    • 有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
    <ol >
    
      <li >项一</li>
    
      <li >项二</li>
    
</ol>

    • 在上面的语法中，<ol></ol>标记用于定义有序列表，<li></li>为具体的列表项，和无序列表类似，每对<ol></ol>中也至少应包含一对<li></li>。

    • 有序列表其他属性 type start

    <ol  type=value1    start=value2>
    
    <li></li>
    
</ol>

    value1表示有序列表项目符号的类型, value2表示项目开始的数值. start是编号开始的数字，如start=2则编号从2开始，如果从1开始可以省略，或是在

  • 标签中设定value＝"n"改变列表行项目的特定编号，例如
  • 。type=用于编号的数字,字母等的类型，如type=a，则编号用英文字母。使用这些属性，把它们放在
      或
    1. 的的初始标签中。

      type类型 描述
      Type=1 表示列表项目用数字表示（1,2,3…..）
      Type=a 表示列表项目用小写字母表示(a,b,c..)
      Type=A 表示列表项目用大写字母表示(A,B,C..)
      Type=i 表示列表项目用小写罗马数字表示(i,ii,iii….)
      Type=I 表示列表项目用大写罗马数字表示(I,II,III…)

      自定义列表

      • 定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
      <dl>
      
    <dt>名词1</dt>
      
    <dd>名词1解释1</dd>
      
    <dd>名词1解释2</dd>
      
    ...
      
    <dt>名词2</dt>
      
    <dd>名词2解释1</dd>
      
    <dd>名词2解释2</dd>
      
    ...
      
</dl>

      HTML基础之标签简单认识的更多相关文章

      1. [转] Git 基础 - 打标签

        2.6 Git 基础 - 打标签 打标签 同大多数 VCS 一样,Git 也可以对某一时间点上的版本打上标签.人们在发布某个软件版本(比如 v1.0 等等)的时候,经常这么做.本节我们一起来学习如何列 ...

      2. ArcGIS Pro 简明教程（2）基础操作和简单制图

        ArcGIS Pro 简明教程(2)基础操作和简单制图 By 李远祥 本章主要介绍ArcGIS Pro如何加载数据并进行简单的地图制作,以基本的操作为主. 上一章节介绍过,ArcGIS Pro是可以直 ...

      3. HTML&CSS基础-meta标签

        HTML&CSS基础-meta标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常见字符集 1>ASCII 我们知道计算机是由外国人发明的,他们当时也没有考虑到 ...

      4. C#基础---Attribute(标签） 和 reflect（反射) 应用二

        以前我有写过一篇有关,打标签和反射的应用,主要用于类中字段的验证.下面是连接 C#基础---Attribute(标签) 和 reflect(反射) 应用. 这个项目迭代发现公司项目里面发现老代码对业务 ...

      5. JS基础（超级简单）

        1     JS基础(超级简单) 1.1 数据类型 1.1.1   基本类型: 1)        Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2)       ...

      6. JMeter基础之一 一个简单的性能测试

        JMeter基础之一 一个简单的性能测试 上一节中,我们了解了jmeter的一此主要元件,那么这些元件如何使用到性能测试中呢.这一节创建一个简单的测试计划来使用这些元件.该计划对应的测试需求. 1)测 ...

      7. h5标签基础 meta标签

        <meta>标签位于<head>标签里面,具体作用有如下: 1.设置网页编码 eg: <meta charset="utf-8"/>  ,//u ...

      8. Android BLE与终端通信（一）——Android Bluetooth基础API以及简单使用获取本地蓝牙名称地址

        Android BLE与终端通信(一)--Android Bluetooth基础API以及简单使用获取本地蓝牙名称地址 Hello,工作需要,也必须开始向BLE方向学习了,公司的核心技术就是BLE终端 ...

      9. js基础--浏览器标签页隐藏或显示状态 visibility详解

        欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...

      随机推荐

      1. 循环结构 while

        while 循环语句可以根据某些条件重复执行一条t-sql 语句或一个语句块 语法: while (条件) begin 语句或语句块 end 程序调试 alt+f5 启动调试 f9 切换断点  f10 ...

      2. springBoot 中redis 注解缓存的使用

        1,首先在启动类上加上 @EnableCaching 这个注解 在查询类的controller,或service ,dao 中方法上加 @Cacheable 更新或修改方法上加 @CachePut 注 ...

      3. java selector

        java selector使用select轮询注册到selector中的channel,如果有channel准备好注册的事件,select()返回,返回值为可以操作的channel的个数.通过sele ...

      4. Nginx集群（负载均衡）

        一.集群介绍 1.传统web访问模型 (1)传统web访问模型完成一次请求的步骤 1)用户发起请求 2)服务器接受请求 3)服务器处理请求(压力最大) 4)服务器响应请求 (2)传统模型缺点 单点故障 ...

      5. 关于easyui 圆角按钮在ie9不能隐藏

        (一)在easyui框架里 在a标签里添加class='easyui-linkbutton' 如: (二)问题:在ie9里圆角背景overflow:hidden 不起作用 (a)框架内 html 部分 ...

      6. Flink -- Java Generics Programming

        Flink uses a lot of generics programming, which is an executor Framework with cluster of executor ha ...

      7. Java环境路径配置--转载

        windows环境中JDK环境变量配置   一.环境准备 Windows10 jdk-9.0.1 二.下载并安装JDK 到Java的官网下载JDK安装包,地址:http://www.oracle.co ...

      8. IP：192.168.21.173 子网掩码：255.255.255.0 网关：192.168.21.2 DNS：8.8.8.8 8.8.4.4 1、设置IP地址、网关 ee /etc/rc.conf #编辑 ifconfig_em0="inet 192.168.21.173 netmask 255

        IP:192.168.21.173子网掩码:255.255.255.0网关:192.168.21.2DNS:8.8.8.88.8.4.41.设置IP地址.网关ee /etc/rc.conf #编辑if ...

      9. jQuery Event.stopImmediatePropagation() 函数详解

        stopImmediatePropagation()函数用于阻止剩余的事件处理函数的执行,并防止当前事件在DOM树上冒泡. 根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈 ...

      10. 最新一道面試題目，input: int[1,1,2,2,2,3,3,3]，output [3,2,1]，要求按照數字出現的次數從多到少排列元素。

        面試當時沒有及時答出來,感覺當時在面試官的提示下跑偏了.想用兩個數組來mapping key和value然後對等排序,但是因為面試官讓用Array.sort而沒想好有什麼好辦法,結果可想而知.但是題目 ...