HTML学习路程（一）HTML教程

最新推荐文章于 2024-12-16 16:52:23 发布

翻译最新推荐文章于 2024-12-16 16:52:23 发布 · 390 阅读

本文介绍了HTML的基础知识，包括HTML文档结构、常用标签如标题、段落、链接、图像等的使用方法，以及表格、列表和表单等内容。

HTML学习路程（一）HTML教程

超文本标记语言（Hyper Test Markup Language 简称：HTML）是一种用于创建网页的标准标记语言，可以使用HTML来建立自己的Web站点，HTML运行在浏览器上，有浏览器来解析。

HTML简介

<!DOCTYPE html> //声明为HTML5文档

<html> //元素是html的根元素

<head> //元素包含了文档的元（meta）数据，涉及字符集之类的

<title>学习之路</title> //元素描述了文档的标题

</head>

<body> //元素包含了可见的内容界面

<h1>第一个标题</h1> //元素定义了一个大标题

<p>第一个段落</p> //元素定义了一个段落

</body>

</html>

HTML是用来描述网页的语言

HTML指的是超文本标记语言：HyperText Markup Language

HTML不是一种编程语言，而是一种标记语言

标记语言是一套标记标签（markup tag)、

HTML使用标记标签来描述网页

HTML文档包含了HTML标签及文本内容

HTML文档也叫做web页面

HTML标记标签通常被称为HTML标签

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

HTML标签通常是成对出现的，比如<b>和</b>

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始标签和结束标签也被称为开放标签和闭合标签

<!DOCTYPE>声明有助于浏览器中正确显示网页

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确的显示网页内容，DOCTYPE声明是不区分大小写的。

中文编码

在大部分的浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为utf-8

HTML基础

HTML标题

HTML标题是通过<h1>-<h6>标签来定义的

HTML段落

HTML段落是通过标签<p>来定义的

HTML连接

HTML连接是通过标签<a>来定义的

HTML图像

HTML图像是通过<img>标签进行定义的。

HTML元素

html文档是由HTML元素定义的

HTML元素指的是从开始标签到结束标签的所有代码

HTML元素语法

HTML元素以开始标签起始

HTML元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

某些HTML元素具有空内容

空元素在开始标签中进行关闭

大多数的HTML元素拥有属性

大多数的HTML元素可以嵌套

HTML文档由嵌套的HTML元素构成

HTML属性

属性为HTML元素提供附加信息

HTM标签可以拥有属性，属性提供了有关HTML元素的更多的信息

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

属性总是在HTML元素的开始标签中规定。

HTML标题

HTML标题是由<h1>-<h6>等标签进行定义的。

<h1>定义最大的标题。<h6>定义最小的标题。浏览器会自动地在标题的前后添加空行。

HTML的标题很重要

要确保将HTML标题标签只用于标题。不要仅仅是为了生成粗体或者大号的文本而使用标题。

搜索引擎使用标题是为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览网页，所以用标题来呈现文档结构是很重要的

应该将h1用作主标题（最重要的），其次是h2（次要的），再其次是h3，以此类推。

HTML水平线

<hr>标签在HTML页面中创建水平线。

HTML标题大小与字体大小的关系

1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题

<font size="2">这是2号字体文本</font>

HTML段落

HTML可以将文档分割为若干段落。段落是通过<p>标签定义的，浏览器会自动地在段落的前后添加空行（</p>是块级元素）

HTML的换行

如果希望在段落中进行换行，请使用<br/>标签；

HTML文本格式化

HTML使用标签<b>与<i>对输出的文本进行格式，<b>是粗体 <i>是斜体文本。

<strong>与<em>可以替换上述标签，但他们更加注重的是你要呈现的文本是重要的，所以要突出显示。

HTML链接

HTML使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。

HTML超链接

HTML使用标签<a>来设置超文本链接。

超文本链接可以是一个字，一个词，或者一组词，也可以是一幅图像

默认的情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。

访问过的链接显示为紫色并带有下划线。

点击链接时，链接显示为红色并带有下划线。

HTML链接的语法

链接的HTML代码如下：

HTML链接的target属性

使用target属性，你可以定义被链接的文档在何处显示

这个链接会在新的窗口中打开

HTML链接-id属性

id属性可用于创建一个HTML文档书签标记

HTML头部

<title>定义了HTML文档的标题

<base>定义了所有链接的URL

HTML<head>元素

<head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）,样式文件(CSS），以及各种meta信息。

可以添加在头部区域的元素标签为：<title>,<style>，<meta>，<link>，<script>，<noscript>，<base>

HTML<title>元素

<title>标签定义了不同的文档的标题

<title>在HTML/XHTML文档中是必须有的

<title>元素：

定义了浏览器工具栏的标题

当网页添加到收藏夹时，显示在收藏夹中的标题

显示在搜索引擎结果页面的标题

HTML<base>元素

<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。

HTML<link>元素

HTML<style>元素

HTML<meta>元素

meta标签描述了一些基本的元数据。<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。<meta> 一般放置于 <head> 区域