HTML的标签

作者: 西洲何在 | 来源:发表于2017-09-27 14:27 被阅读0次

HTML是如此的简单,相信大部分学过HTML的人都是这样觉得的,不得不说HTML的确没什么难的,只要几小时甚至几十分钟就能掌握,所以这篇文章我会着重讲一点HTML的学前知识。

1.URL

url的中文翻译是统一资源定位器,通俗来讲,就是我们说的路径,路径又分为相对路径和绝对路径

相对路径

从文件当前所在位置出发查找目标位置
1、目标文件与当前文件在同一文件夹下,直接写文件名

   src="1.jpg"

2、目标文件在子文件夹下,子文件夹名/文件名

   src="images/1.jpg"

3、目标文件在当前文件的上一级目录,../文件名

   src="../1.jpg"

4、目标文件在当前文件的上一级目录的子目录里 ../子目录名/文件名

   src="../images/1.jpg"

当目标文件是当前站点下的文件时,可使用相对路径。

绝对路径

http://www.sohu.com/images/1.jpg
协议名   主机名     目录名 文件名
ftp://202.112.111.12/images/1.jpg
协议名  主机IP地址   目录名 文件名

从最根本的协议开始完整的表述路径
无论在哪个文件里都能找到目标路径
当目标文件是其他主机上的文件时,必须使用绝对路径。

常见的图片格式

GIF 最多只支持256色。支持动画
JPG 支持真彩色
PNG 支持透明和半透明,支持真彩色

HTML文件

HTML文件就是以.html、.htm、.xhtml等结尾的文件,用来编写HTML代码的

如何在HTML文件中编写代码和运行HTML文件

编写HTML代码没有那么多纷繁复杂的配置和安装软件,在windows系统中只需要用自带的文本编辑器即能完成HTML代码的编写,也不需要编译,可以直接在浏览器中运行

用文本编辑器打开HTML文件,右击 --> 打开方式 --> 选择记事本,即可在记事本开始编写HTML文件

编写完HTML代码并保存后在浏览器中运行,同样右击 --> 打开方式 --> 选择浏览器,即可在浏览器中查看到效果

附:当然,在实际工作中很少会直接使用系统自带的编辑器编写,初学者我推荐使用的编辑器可以是EditPlus,sublime text等编辑器

HTML的头部声明

头部声明我们也叫<!DOCTYPE> 声明,在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 是一套关于标记符的语法规则。它是XML1.0版规格得一部分,是html文件的验证机制,属于html文件组成的一部分。 DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML,所以不需要引用 DTD。

DTD:三种文档类型:S(Strict)、T(Transitional)、F(Frameset)。
Strict:如果您需要干净的标记,免于表现层的混乱,请使用此类型。请与层叠样式表(CSS)配合使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional:DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表(CSS)的浏览器以至于您不得不使用 HTML 的呈现特性时使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset: DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外,Frameset DTD 等同于 Transitional DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

html5作为现在的主流方向,他的头部声明简单明了

<!DOCTYPE HTML>

这就是HTML5的头部声明了

HTML的结构

在HTML的结构中除却头部声明,他由一个html标签包裹,里面分为头标签head和主体标签body

<!DOCTYPE HTML>
<html>
    <head>
        这是头部
    </head>
    <body>
        这是主体
    </body>
</html>

这些是每个HTML文件必须包含的元素

HTML标签的属性和属性值

HTML标签的属性是用来描述标签的一些特性的,前一篇文章我们介绍到,标签就像一个个盒子,那么这些盒子必定会有不同的作用和形态以及材料,比如装水的瓶,它可以是玻璃的材料,长圆柱形;装饼干的盒子,它可以是铁的,长四方体。HTML的标签也是如此,不过它是用属性来描述这些特性,用属性值表现这些特性,比如一个标签它有长高,那么就用width描述长,height描述高,接受属性值表现特性,也可以为其加入边框或者背景颜色,如下

<p width="100px" height="100px" background="red">
    这是文本标签
</p>

说明这个文本标签在页面中占有100px的长和100px的高

附:px是像素点单位,网页中常用的长度单位,除此之外还有cm,rem等

head标签

head标签里的内容不会直接显示在页面的内容之中的,他主要是用来包裹用于声明页面性质和引用外部资源标签的父标签

附:父标签与子标签

当标签里面包裹着标签,我们就叫被包裹的标签为子标签,外层包裹的叫父标签,如

<html>   // 父标签
    <head>   // 子标签
        这是head
    </head>
</html>

head里常见的声明和外部资源引用标签

1.meta标签

meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等!meta可以接受各种属性值,以确定网页在浏览器中的一些性质,这里我只说一个必不可少的,就是编码的声明,这个是确定页面能否在浏览器中解析正确,如果设置了不正确的编码格式,页面将会乱码(关于编码,可以百度HTML的编码格式,了解更多)

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        这是主体
    </body>
</html>

charset就是设置编码的格式的属性,UTF-8是通用的编码格式,中文编码格式为GBK

2.title标签

title标签是用来设置页面在浏览器标签栏中的标题的

<html>
    <head>
        <meta charset="UTF-8">
        <title>这是标题</title>
    </head>
    <body>
        这是主体
    </body>
</html>
title
3.引用外部资源的标签

1.link标签
引用样式标签,这里我不会讲解样式标签的作用,这将会在css时着重讲解

<link rel="stylesheet" href="样式文件所在目录的路径">

2.script标签
引用脚本文件,这将会在JavaScript中着重讲解

<script src="脚本文件所在目录的路径"></script>

主体body标签中的内容

body标签里的内容将是呈现在页面中用户看到的实际内容

图像img标签

必备属性:
src 定义图像的url

可选属性:
width 宽
height 高
alt 替代文字(多数情况下用title可替代alt,如果图片加载失败,显示在网页上的文字)

![](路径)

链接a标签

必备属性:
href 链接的目标路径

可选属性:
name 命名。命名后的a称之为锚点,可以作为链接目标
target 指定链接在什么样的窗口中打开
_self 默认。当前窗口
_blank 在新建的窗口中打开链接
(title、id、class)

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

锚点链接:这是一个特殊的链接方式,可跳到本页面中一个特定位置,这个指向是一个标签属性中的命名锚记或是id。

<a href="#name">点击跳转</a>

<p id="name">这是要跳转到地方</p>

邮件链接:可以创建一个点击后发送邮件的链接

    <a href="mailto:senica@126.com?subject=邮件标题&cc=xxx@126.com&mcc=yyy@126.com">发邮件</a>

Table标签

table是 HTML里的布局工具,前期可用于简单布局

  <table>
    <tr>
      <td>编号</td>
      <td>姓名</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Tom</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Lucy</td>
    </tr>
  </table>
table

table的组成由外层的table和横行tr,纵行td组成,
table的属性 width、height、border、bordercolor、bgcolor
background、cellspacing、cellpadding、align

tr的属性 height align vlign
td的属性 width height align vlign colspan rowspan

table的可选标签:
caption 表格标题

  <table>
      <caption>这是表格标题</caption>
  </table>

thead 表格头部

  <table>
      <thead>
          <tr>
              <td>这是表头</td>
          </tr>
      </thead>
  </table>

tbody 表格主体

  <table>
      <thead>
          <tr>
              <td>这是表头</td>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>这是表的主体</td>
          </tr>
      </tbody>
  </table>

tfoot 表格尾部

  <table>
      <thead>
          <tr>
              <td>这是表头</td>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>这是表的主体</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td>这是表尾</td>
          </tr>
      </tfoot>
  </table>

文本标签

文本标签除了p标签外,还有span、i、b等标签

行内元素与块级元素

在这里,我将着重讲解一下行内元素与块级元素,这将有助于我们更好的理解HTML元素
什么是行内元素和块级元素?
行内元素,顾名思义,就是多个元素能排在一行,当大于一行的长度,才会挤向下一行,就像一个大盒子,里面可以放小盒子,这个小盒子就是行内元素
块级元素,自然就是那个大盒子,它是独占一行的元素,块级元素可以包裹行内元素,也可以包裹块级元素,但是行内元素不可以包裹块级元素

常见的块级元素:p、div、h1等
常见的行内元素:span、i、b等

一篇文章对于HTML标签的分享是有限的,更多的标签使用可以查看w3cSchool的html在线文档,在线文档地址

相关文章

  • Html 学习笔记

    HTML基础 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag) HTML 标签通...

  • HTML常用标签

    HTML标签:标记标签通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML标签是HTML最重...

  • HTML 常用的标签

    什么是 HTML 标签 HTML 文档和 HTML 元素是通过 HTML 标签进行标记的 HTML 标签由开始标签...

  • 2018-06-04——HTML简介

    HTML 简介 HTML 标签 ·HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 ·HTML...

  • HTML

    HTML简介 HTML的基本结构 HTML标签 基本标签 布局标签

  • 02.html

    Html结构标准 Html标签分类 单标签 双标签 Html标签关系分类 包...

  • HTML笔记

    html标签与html元素 html标签: 由开始标签和结束标签组成的一对标签。 html元素: 从开始标签到结束...

  • HTML常用标签介绍

    HTML标签:通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML标签是HTML最重要的组成...

  • HTML笔记-文字标签和注释标签

    HTML笔记-文字标签和注释标签 标签(空格分隔): HTML HTML中常用的标签 文字标签: 修改文字的样式 ...

  • HTML标签类型

    /*HTML标签类型 html /*HTML标签类型 1.块级标签:*1....

网友评论

    本文标题:HTML的标签

    本文链接:https://www.haomeiwen.com/subject/whjuextx.html