HTML基础

HTML初识

HTML 基本概念
HTML是一种标准化的标记语⾔，由一套标记标签(markup tag)组成。Web前端开发人员的一项主要工作就是利用HTML标签来编写⽹页，将文本、超链接、图片、语音、视频等各种内容整合起来，实现绚丽多姿的网页。

下面是大家需要记住的关于HTML的一些基本描述：

  • HTML标记标签，通常简称HTML标签；

  • HTML文档，通常简称HTML页面、网页等；

  • HTML5能够较好的兼容HTML之前版本，但也废弃了一些旧的HTML特性。

基本的HTML结构

这是一个最基本HTML页面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <body bgcolor="yellow">
        <h1 align="center">这是一个一级标题</h1>
        <p>这是第1个段落。</p>
        <p>这是第2个段落。</p>
    </body>
</html>

其中：

<html>、</html>，<body>，</body>，<h1>，<p>等都是HTML标签；

<h1>这是一个一级标题</h1>，<p>这是第1个段落。</p>等都是HTML元素；

bgcolor="yellow"、align="center"都是HTML元素的属性。

那么HTML标记和HTML元素，到底有何区别呢？HTML元素的属性又是什么呢？

HTML标签
HTML标签由一对尖括号、标签名，以及反斜杠组成，包括开始标签和结束标签两类：

  • 开始标签的格式：<标签名>。

  • 结束标签的格式：</标签名>。

因此，

<html>，<head>，<p>等都是开始标签；

</html>，</head>，</p>等都是结束标签。

HTML元素
HTML元素是由HTML开始标签、元素内容、HTML结束标签，以及各种HTML属性组成的嵌套式HTML内容单元。

典型的HTML元素的格式：

<标签名> 元素内容 </标签名>

因此，

一个HTML文档，即<html>...</html>就是一个最大的HTML元素；

<head>...</head>，<p>...</p>也都是HTML元素（其中...表示两个标记之间的所有内容）。

HTML 属性
属性提供了有关HTML元素的更多的信息。

HTML属性位于开始标签，其基本的结构如下：

<标签名 属性名="属性值"> 元素内容 </标签名>

下面是关于属性的一些要点：

  • 属性在开始标签中规定；

  • 属性是以名称/值对的形式出现，比如：name="value"；

  • 一个标签可以包含多个属性；

  • HTML属性不会展现到网页上。

本例中，bgcolor属性代表主体(body)部分的颜色；align属性代表对齐方向，其值有：

  • align属性值
  • center
  • right
    提示：

**属性使用小写英文字母更加符合规范； **

** 属性值可以用双引号或单引号包含，**例如：
title=' 他说"你好" '
这种情况，属性值如果包含双引号，那么最外层就用单引号。

我们还会用到一些常用的属性，如下表所示：

属性值含义

  • class 自定义的元素类名元素的类名
  • id 自定义的元素id名元素的唯一的id
  • tyle 元素内联样式元素的样式
  • title 额外信息内容元素的额外信息

HTML标签

注释

什么是注释？ 为什么要添加注释呢？

注释是解释性文本，在运行程序时，会被程序跳过，不做处理。

注释有两个作用：

  1. 可以给代码添加文字说明，便于代码阅读和日后维护；
  2. 对于暂时不用但又不能删除的代码，可以添加注释保存下来；
    如何添加注释呢？

<!--表示注释的开始， -->表示注释的结束，这样就可以添加提示说明和注释元素了。

你可以这样注释p标签和添加文字说明。

<!-- 这里p标签 -->
<!--<p>这是一个段落</p>-->

h标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>创建不同字体大小的标题</h1>
    <!-- ********* Begin ********* -->
    <h2>创建不同字体大小的标题</h2>
    <h3>创建不同字体大小的标题</h3>
    <h4>创建不同字体大小的标题</h4>
    <h5>创建不同字体大小的标题</h5>
    <h6>创建不同字体大小的标题</h6>
    <!-- ********* End ********* -->
</body>
</html>

p标签

p元素通常用来表示一个段落。
你可以这样创建一个p标签，<p> p标签表示一个段落。</p>

a标签

a标签通常用来定义一个链接。href属性的值就是链接的地址。
你可以这样创建一个a标签，<a href="http://www.baidu.com">百度</a>。当你点击这个链接时，它就会跳转到百度首页。

img标签

img标签通常用来表示一个图片。src属性的值就是图片的地址，alt属性的值是当图片没有展现出来时提示的文字 。
你可以这样创建一个img标签，
<img src="https://www.educoder.net/attachments/download/207791" alt="风景画"/>
这样图片就显示出来了。

div标签

<div>这是一个div标签</div>
div标签可以把文档分割为独立的、不同的部分。它没有实际的意义，仅仅表示创建了一个块级元素。
`你可以这样创建一个div标签，<div>创建div标签</div>。
可以发现：它和<h1>-<h6>，<p>标签的创建是一样的，只不过它没有实际的意义。

HTML基础

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>自我简介</title>
    <meta name="description" content="XXX的自我简介网站">
    <meta name="keywords" content="自我简介,关键词一,关键词二,关键词三">
  </head>
  <body>
    <h1 align="center">自我简介</h1>

    <h2>简介</h2>
    <p>在这里简单的描述一下你自己吧。</p>

    <h2>三个与你最有关的词</h2>
    <p>这三个词可以是一种形容，也可以是一种运动或者是一种独特的爱好，等等。</p>
    <ul>
        <li>蛇</li>
        <p>我的生肖</p>
        <li>健</li>
        <p>我的名字的名</p>
        <li>白羊</li>
        <p我的星座</p>
    </ul>
</body>
</html>

下面，我们将结合代码为大家讲解该网页完整结构和为什么更容易被搜索引擎发现。

声明文档格式：DOCTYPE
首先，第一行：

<!DOCTYPE HTML>
声明了该文档是HTML 5的文档。
因为在Web世界里，有很多各式各样的文档类型，所以我们首先需要做的便是声明该文档是HTML，以便浏览器正确显示网页。

如果你想声明为HTML 4.01的文档可以这样写：

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

因为本实训以HTML 5作为标准，所以统一使用第一种方式。

提示：

为什么与HTML4.01相比HTML 5声明中没有数字”5”呢？
因为W3C认为之前的文档声明太过复杂，正好借此机会移除版本号，这样声明就更加简化；

根元素：HTML 元素
然后，元素告知浏览器其本身是一个HTML文档。

除去第一行外，其余的页面内容都应该包含在元素中，所以它也被称为根元素。

头元素：head 元素
与属性会给元素增添附加信息一样，head元素能为整个网页增添更多信息。可以用在head中的标签有, , ,

posted @ 2021-09-08 08:03  卿源  阅读(219)  评论(0)    收藏  举报