简单HTML认识

Summ
184 阅读4分钟

1.HTML语言概述

HTML：Hyper Text Markup Language，超级文本标签（标记）语言，是一种建立网页文件的语言。
使用HTML语言，可将所需表达的信息（如文字、图片、动画、影像、声音等内容）按某种规则编写成HTML文档（.html或.htm作为结尾的文件），该文档独立于各种操作系统平台（如Unix、Windows等），通过专用的浏览器来识别，并将HTML文档“翻译”（解释运行）成可以识别的信息，即现在所见到的网页。

（1）HTML标记（标签）：

在HTML中，用于表述功能的符号，书写时，必须用尖括号“<>”括起来。 标记分为：

  • 封闭型标记：<标记></标记>
  • 非封闭型标记：<标记> 或<标记 />，又称单标记或空标记
    HTML标签分类方式二：声明性标签与实体标签。
    HTML标签分类方式三：块级元素和行内元素。
    说明：
    ① 标记通常是成对出现
    ② 单标记 <br /><hr />

（2）HTML元素：

开始标签（start tag）到结束标签（end tag）的所有代码
语法：

  • HTML元素以开始标签起始
  • HTML元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些HTML元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数HTML元素可拥有属性
    元素的嵌套：即在一个元素中出现另一个元素
    语法：<标记1><标记2></标记2><标记1>

1.png
注意：必须完整嵌套，被嵌套的内容要通过缩进Tab表示层级关系

（3）HTML属性：为HTML元素提供附加信息

基本语法：
<标记名称 属性名1=“属性值” 属性名2=“属性值” ></标记名称>
<标记名称 属性名1=“属性值” 属性名2=“属性值” />
<标记名称 属性名1=“属性值” 属性名2=“属性值” >
注意事项：
属性应写在首标记内，并且和标记名之间有一个空格分隔。
属性值与属性之间用“=”来连接，属性值要用双引号””或单引号’’引起来。
一个元素允许有多个属性，多属性之间排名不分先后，中间用空格隔开。
如：

 <hr size="5px" align="center" color="blue" width="80%"  />

（4）标记的属性：

通用属性：
id：定义元素在页面中唯一的名称
title：鼠标移入到元素上时所提示的信息
class：指定元素所引用的类选择器（CSS中使用）
style：定义元素的内联样式（CSS中使用）

（5）注释标记：

作用：在HTML源码中插入注释，注释会被浏览器忽略。
基本语法：

    <!-- 注释内容 -->

2. HTML文档结构

  • HTML 文档 = 网页
    HTML 文档描述网页
    HTML 文档包含 HTML 标签和纯文本
    HTML 文档也被称为网页
  • Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。
  • Web中所有文件的名称必须用英文，创建文本文档时，注意扩展名不能被隐藏，然后修改文件名和扩展名为.html。

（1）文档类型声明：

作用：在帮助浏览器正确地显示网页。

不是HTML标签，它为浏览器提供一项信息声明，即HMTL是用什么版本编写的。
版本年份
HTML1993
HTML2.01995
HTML3.21997
HTML4.01997
HTML4.011999
XHTML1.02000
XHTML1.12001
HTML52014

2.png

（2）HTML页面：

网页要表示的信息的开始和结束
语法：<html>< /html>
属性：
lang：指定当前页面的编写语言，取值zh-cn表示简体中文

①网页头部信息：

作用：定义网页的全局信息
语法：<head>< /head>
子级元素： 网页标题：<title>标题内容< /title>
定义或引入css文件：<style>< /style>
引入JavaScript文件：<script>< /script>
网页元数据：<meta>

<meta>应用之一：
为网页指定编码格式
语法：<meta charset=”utf-8”>
注意：为使得浏览器能够正常显示中文，必须保证网页的编码格式为utf-8,且网页文件保存时的编码格式也是utf-8。

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="HTML,ASP,PHP,JSP">

注：meta是元数据，charset编码格式，utf-8支持中文数量最多，且支持多种语言。告诉浏览器如何解析其中的内容。

②网页主体信息：

作用：主体信息
语法：<body>< /body>
属性：

  • bgcolor指背景颜色
  • background指背景图片

（2）HTML页面：

3.png

avatar
文章
阅读
粉丝