零基础 HTML 入门(详细)

目录

1.简介

1.1 HTML是什么?

1.2 HTML 版本

1.3 通用声明

2.HTML 编辑器

3.标签的语法

4.HTML属性

5.常用标签

5.1 head 元素

5.1.1 title 标签

5.1.2 base 标签

5.1.3 link 标签

5.1.4 style 标签

5.1.5 meta 标签

5.1.6 script

5.2 HTML 注释

5.3 段落标签

5.4 文本格式化标签

5.5 HTML 链接

5.6 CSS 样式

5.7 HTML 图像

5.7.1 img 标签

5.7.2 map 和 area 标签

5.7.3 HTML5 中的 picture 标签

5.8 table 标签

5.8.1  HTML 表格背景

5.8.2 表格的边框合并

5.8.3 单元格的合并

5.8.4 HTML 表格的嵌套

5.9  HTML列表

5.9.1 有序列表

5.9.2 无序列表

5.9.3 定义列表

5.10 区块

6.布局

6.1 HTML4 布局

6.2 HTML5 布局


1.简介

1.1 HTML是什么?

HTML (HyperText Markup Language) 是指用于创建网页超文本标记语言,通过它可以实现图片、链接、音乐等元素的展示,您可以将 HTML 运行在浏览器上,由浏览器来解析。它是通向Web技术的起点,是前端程序员必要的基本功

HTML 是一种标记语言(一套标记标签),它使用标记标签来描述网页。标签是由尖括号包围的关键词,例如  <html>; 标签通常是成对出现的,例如  <html> 和 </html>。

HTML文档结构
HTML文档结构

1.2 HTML 版本

自 HTML 诞生以来,已发展出了许多 HTML 版本,HTML 版本的介绍如下:

HTML 版本
版本 发布时间 版本说明
HTML 1.0 1991  HTML 的第一个版本
HTML 2.0 1995  增加了表单元素以及文件上传等功能
HTML 3.2 1997  加了创建表格以及表单的功能
HTML 4.01 1999  增加了对样式表(CSS)的支持(非常稳定的版本,是当前的官方标准)
XHTML 1.0 2000 目的是基于XML应用,在HTML 4.0基础上优化和改进的的新语言
HTML 5 2012 提升了 Web 在富媒体、富内容和富应用等方面的能力

1.3 通用声明

<!DOCTYPE> 是 HTML 的文档类型声明,正确声明 HTML 版本可以使浏览器能够显示网页:

HTML5

<!DOCTYPE html>

HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"      

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.HTML 编辑器

常用的编辑器:Notepad++Sublime TextHBuilderEditPlus (文本编辑器),VS CodeUltraEdit在线编辑器

  • Notepad++:是基于Windows操作系统的免费软件,支持众多计算机程序语言的文本编辑器。
  • Sublime Text: 是一个支持多种编程语言并且可以跨平台的文本编辑器,虽然该软件收费但是可以试用,拥有优秀的代码自动完成功能,还拥有代码片段。
  • HBuilder:是一款支持 HTML5 的Web开发IDE。通过语法提示和代码输入法、代码块等,大幅开发前端效率。
  • EditPlus:可以处理文本、HTML和程序语言的Windows编辑器,也支持C、Java、Php等编程语言。
  • Visual Studio Code :是 Microsoft 提供可以运行于 Mac OS X、Windows 和 Linux 编写 Web 和云应用的源代码编辑器。它支持 JavaScript,TypeScript和Node.js 和编程语言(例如C++,C#,Java,Python,PHP,Go)。
  • UltraEdit:支持多种编程语言(PHP、Perl、Java 和 JavaScript),是理想的文本、HTML 和十六进制编辑器。

3.标签的语法

HTML 标签的格式由开始标签、属性、内容和结束标签组成。开始标签可以包含 class、id、title等属性,HTML 标签名称不区分大小写。

 自闭合标签没有单独的结束标签,在开始标签中加斜杆“/”来进行闭合,自闭合标签没有内容。例如:<img/>,<br/>,<input/>。常用 HTML 标签汇总:

标签 描述
<a> 定义超文本链接
<abbr> 定义缩写
<acronym> 定义只取首字母的缩写,不支持HTML5
<address> 定义文档作者或拥有者的联系信息
<applet> HTML不建议使用。定义嵌入的 applet
<area> 定义图像映射内部的区域
<article> (html5) 定义一个文章区域
<aside>(html5) 定义页面的侧边栏内容
<audio>(html5) 定义音频内容
<b> 定义文本粗体
<base> 定义页面中所有链接的默认地址或默认目标
<basefont> HTML5不支持,不建议使用。定义页面中文本的默认字体、颜色或尺寸
<bdi>(html5) 允许您设置一段文本,使其脱离其父元素的文本方向设置
<bdo> 定义文字方向
<big> 定义大号文本,HTML5不支持
<blockquote> 定义长的引用
<body> 定义文档的主体
<br> 定义换行
<button> 定义一个点击按钮
<canvas>(html5) 定义图形,比如图表和其他图像,标签只是图形容器,您必须使用脚本来绘制图形
<caption> 定义表格标题
<center> HTML5不支持,不建议使用。定义居中文本
<cite> 定义引用(citation)
<code> 定义计算机代码文本
<col> 定义表格中一个或多个列的属性值
<colgroup> 定义表格中供格式化的列组
<command> 定义命令按钮,比如单选按钮、复选框或按钮
<datalist> 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值
<dd> 定义定义列表中项目的描述
<del> 定义被删除文本
<details>(html5) 用于描述文档或文档某个部分的细节
<dfn> 定义定义项目
<dialog>(html5) 定义对话框,比如提示框
<dir> HTML5不支持,不建议使用。定义目录列表
<div> 定义文档中的节
<dl> 定义列表详情
<dt> 定义列表中的项目
<em> 定义强调文本
<embed>(html5) 定义嵌入的内容,比如插件
<fieldset>  定义围绕表单中元素的边框
<figcaption>(html5) 定义<figure> 元素的标题
<figure>(html5) 规定独立的流内容(图像、图表、照片、代码等等)。
<font> HTML5不支持,不建议使用。定义文字的字体、尺寸和颜色
<footer>(html5) 定义 section 或 document 的页脚
<form> 义了HTML文档的表单
<frame> 定义框架集的窗口或框架
<frameset> 定义框架集
<h1> to <h6> 定义 HTML 标题
<head> 定义关于文档的信息
<header>(html5) 定义了文档的头部区域
<hr> 定义水平线
<html> 定义 HTML 文档
<i> 定义斜体字
<iframe> 定义内联框架
<img> 定义图像
<input> 定义输入控件
<ins> 定义被插入文本
<kbd> 定义键盘文本
<keygen>(html5) 规定用于表单的密钥对生成器字段
<label> 定义 input 元素的标注
<legend> 定义 fieldset 元素的标题
<li> 定义列表的项目
<link> 定义文档与外部资源的关系
<map> 定义图像映射
<mark>(html5) 定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签
<menu> 不建议使用。定义菜单列表
<meta> 定义关于 HTML 文档的元信息
<meter>(html5) 定义度量衡。仅用于已知最大和最小值的度量
<nav>(html5) 定义导航链接的部分
<noframes> 定义针对不支持框架的用户的替代内容。HTML5不支持
<noscript> 定义针对不支持客户端脚本的用户的替代内容
<object> 定义内嵌对象
<ol> 定义有序列表
<optgroup> 定义选择列表中相关选项的组合
<option> 定义选择列表中的选项
<output>(html5) 定义不同类型的输出,比如脚本的输出
<p> 定义段落
<param> 定义对象的参数
<pre> 定义预格式文本
<progress>(html5) 定义运行中的进度(进程)
<q> 定义短的引用
<rp>(html5) 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
<rt>(html5) 标签定义字符(中文注音或字符)的解释或发音。
<ruby>(html5) <ruby> 标签定义 ruby 注释(中文注音或字符)。
<s> 不建议使用。定义加删除线的文本
<samp> 定义计算机代码样本
<script> 定义客户端脚本
<section>(html5) 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<select> 定义选择列表(下拉列表)
<small> 定义小号文本
<source>(html5) <source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
<span> 定义文档中的节
<strike> HTML5不支持,不建议使用。定义加删除线文本
<strong> 定义强调文本
<style> 定义文档的样式信息
<sub><
  • 26
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜飞鼠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值