html文件用什么打开文件(零基础入门HTML)-昊阳知识网

HTML指的是超文本标记语言 (Hyper Text Markup Language) ,它不是一种编程语言，而是一种标记语言 (markup language)。

关于如何选品，你只需17分钟就可以掌握要义

在《全栈工程师：网站开发所需的Web构建》中所列了所有的构建，今天进入Html基础学习，一文掌握html的核心要义。

—— 目录结构 ——

Html零基础入门

HTML简介

Head标签组

Body标签组

HTML简介什么是HTML什么是HTML？HTML 指的是超文本标记语言 (Hyper Text Markup Language) ,它不是一种编程语言，而是一种标记语言 (markup language)。

标记语言是一套标记标签 (markup tag)， HTML就是使用标记标签来描述网页。HTML标签是由尖括号包围的关键词，比如<html>，HTML标签通常是成对出现的，比如<b>和</b>。

<!DOCTYPEHTML><html> <body> <div> <!–在此处写注释–> <h1>我是标题</h1> <p>HelloHTML<p> </div> </body></html>

注意：所有文章中的代码示例，建议都手动重新输入，一是方式因为格式的原因造成代码的错误，二是只有亲身实践才能发现自己是否真正掌握。

我们也可以打开任何网页，右键->审查元素，可以看到网页的源码情况。是由大量的标签组成，学习Html的关键是掌握常用标签的使用方法。

Head标签组主要有<base>, <link>, <meta>, <script>, <style>,<title>

2.1、html标签

其中<!DOCTYPE> 声明不是 HTML 标签，它必须是 HTML 文档的第一行，位于 <html> 标签之前。它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

<html> 定义 HTML 文档。<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。

<html> <head> 这里是文档的头部 … … … </head> <body> 这里是文档的主体 … … … </body></html>

这里我将常用的html标签分为Head标签组和Body标签组，其中Body标签组又可以分为视图容器、内容标签、媒体标签、画布及链接、表单内容五大类。

2.2、head标签组

<head> 标签用于定义文档的头部，它是所有头部元素的容器。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。<title> 定义文档的标题，它是 head 部分中唯一必需的元素。

title

<title>元素可定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

meta

举例<meta name=”keywords” content=”一线青年的笔记”>，搜索引擎，当前页面的关键字为“一线青年的笔记”。

link

举例<link rel=”stylesheet” type=”text/css” href=”theme.css” />

script与style

<!– 直接包含脚本语言–><script type=”text/javascript”> document.write(“Hello World!”)</script> <!– 引用外部脚本文件，JavaScript代码写在demo.js文件中–> <script type=”text/javascript” src=”/demo.js”></script>

style好比网页的外衣，<style>标签用于为 HTML 文档定义样式信息。可以规定在浏览器中如何呈现 HTML 文档。如定义网页中文字的大小、颜色、是否加粗等等相关信息。

在style 中，type属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css”。

综合举例

<!DOCTYPE html><html lang=”zh-cn”> <head> <meta name=”robots” content=”all” /> <meta name=”keywords” content=”一线青年的笔记”> <link rel=”icon” type=”image/png” sizes=”16×16″ href=”/ui2019/logo-16-red.png”> <title>这是一个例子</title> <!– 这是外部脚本文件 –> <script src=”/demo.js”></script> <!– 直接包含脚本语言–> <script type=”text/javascript”> document.write(“Hello World!”) </script> <style type=”text/css”> h1 {color:red} p {color:blue} </style> </head> <body> <h1>这是网页的内容<h2> <p>这是一段文字内容</p> </body></html>

修改文件后缀名”.txt”为”.html”，双击打开，可见如下图效果。

可以看到网页的标签栏显示了<title>的内容，<script>标签内的代码在网页中写入了“hello World!”，由于<style>标签内定义了<h1>和<p>的颜色，那么在网页中对应标签内的内容也发生了相应的改变。

Body标签组Body标签组可以分为视图容器、内容标签、媒体标签、画布及链接、表单内容五大类

Html文档的（网页）头部由<head>标签定义，一般不给用户直接展示。而<body> 与其对应，定义网页主体，也是我们常常看到的网页内容。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

3.1、视图容器

一个网页可能会存在很多的内容，为了用户阅读方便，往往会将网页进行分块设计。这就需要视图容器帮忙，这里介绍几个常用的视图容器标签。div

<div> 是一个块级元素，定义文档中的分区或者节。浏览器通常会在 div 元素前后放置一个换行符。<div> 标签可以把文档分割为独立的、不同的部分。

<body> <h1>NEWS WEBSITE</h1> <div> <h2>News headline 1</h2> <p>some text. some text. some text…</p> … </div> <div> <h2>News headline 2</h2> <p>some text. some text. some text…</p> … </div>…</body>

span

<span> 和<div>一样也是定义文档中的节。但区别是div占用的位置是一行，span占用的是内容的大小，<span>元素宽度是被包围的内容宽度决定，所以不能对<span>设置宽高，而<div>可以设置。

<span>常用于对段内的内容进行特殊处理时的选择器，见下面代码示例。（后续代码都只贴上了body部分，测试时请按照标准的HTML格式来写代码）

<body> <h1>div与span的区别</h1> <div style=”height:200px”>我是内容1：div</div> <div>我是内容2：div</div> <span>我是内容3：span</span> <span>我是内容4：</span> <span style=”color:red”>span</span> <span style=”height:200px”>我是内容5：span</span></body>

可以看到<span>并未有像<div>一样设置了高度，另外通过定义<span>的样式来达到修改部分内容样式的目的。

br及hr

<br>和<hr>也是起到分隔的作用，<br>插入换行符， <hr>定义水平线。两个标签是空标签，没有结束标签（<br></br>这是错误的写法，一般可以写<br>或者<br/>）。

iframe

通过上面的例子，可以学习到一种编程思维，如果某些内容可以复用，那么就可以考虑将其独立出来，提高写代码的效率。

3.2、内容标签

段落

<p> 定义段落。和<span>标签的区别在于<p>为块级元素，<span>为内联元素。<p></p>会另起一行。

<body> <p>这是段落</p><p>这是段落</p> <span>这是span</span><span>这是span</span></body>

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

块级元素主要有：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素(inline)特性：

和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

内联元素主要有：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

标题

<h1> to <h6> 定义 HTML 标题。<i> 定义斜体文本。<strong> 加粗，一般定义语气更为强烈的强调文本。

<body> <h1>这是标题1</h1> <h2>这是标题2</h2> <h3>这是标题3</h3> <h4>这是标题4</h4> <h5>这是标题5</h5> <h6>这是标题6</h6> <i>这是斜体效果</i><br> <strong>这是加粗效果</strong></body>

表格

除了文字之外，html还有一系列标签用于定义表格。<table> 定义表格，<th> 定义表格中的表头单元格，<tr> 定义表格中的行，<td> 定义表格中的单元。

3.3、媒体标签

图像

<img> 向网页中嵌入一幅图像，<img> 标签创建的是被引用图像的占位空间。从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。

<img>标签同样无结束标签。

<map>定义图像映射，<area> 定义图像地图内部的区域。<map>中id为必选属性，与<img>中的usemap属性一一对应，name为可选。

<area>中alt为必选属性，shape定义区域的形状，可以有以下值：

rect 定义一个矩形区域,coords属性设置值为矩形的左上角,右下角的坐标,各个坐标值之间用逗号分开;

poly 定义一个多边形区域, coords属性设置值为多边形各项顶点的坐标值;

circle 定义一格圆形区域, coords属性设置值为圆心坐标及半径,前两个参数分别为圆心的横,纵坐标,第三个参数为半径.

音频和视频

3.4、画布及超链接

超链接

<a> 定义锚，也就是网页中最常见的超链接。

<body><a href=”http://www.w3school.com.cn”>W3School</a><body>

<nav> 标签是 HTML 5 中的新标签，定义导航链接的部分。在后期的移动端项目开发中会有见得比较多。

<body>

<nav>

<a href=”https://www.baidu.com/”>百度</a> |

</nav>

</body>

画布Canvas

<canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，必须使用脚本来绘制图形。canvas可以形容为画板，你可以通过脚本来进行绘制，后期的很多地方都会用的这个标签。

下面的示例是在canvas中绘制一个红色矩形

<!DOCTYPE HTML> <html> <body> <canvas id=”myCanvas”></canvas> </body> <script type=”text/javascript”> var canvas=document.getElementById(‘myCanvas’); var ctx=canvas.getContext(‘2d’); ctx.fillStyle=’#FF0000′; ctx.fillRect(0,0,80,100); </script></html>

通过以上的例子，可以了解前端开发的工作方式。前端开发工程师，除了写html标签布局之外，更多的是写脚本来实现一些交互内容。不用着急，后续我们还会持续深入学习。

3.3、表单内容

一个网站除了上面看到的交互之外，还需要很多数据的交互，比如用户提交一些数据，服务器根据用户提交的数据进行相应的反馈，在这个过程中，我们会经常使用表单来提交数据。

form表单

输入

<input> 定义输入控件(单行)。<textarea> 定义多行的文本输入控件。<input>没有结束标签，为了兼容最新语法最好要有关闭<input />。

<input>常用的属性有type、value、placeholder、name等。type的值可以为button、checkbox、file、hidden、image、password、radio、reset、submit、text 等类型。value接受input输入的元素值。placeholder帮助用户填写输入字段的提示，name则定义<input>的名称。

按钮及下拉列表

<button> 定义按钮。<button>的常用属性有name、type、value等。name规定按钮的名称。type的值可以为button（默认）、reset（重置）、 submit（提交）类型。value接受按钮的值，可由脚本进行修改。

<select> 定义选择列表（下拉列表）。<optgroup> 定义选择列表中相关选项的组合。<option> 定义选择列表中的选项。如下图示例。