HTML零基础入门

Posted 2021-04-04 一线青年的笔记

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML零基础入门相关的知识，希望对你有一定的参考价值。

戳蓝字“一线青年的笔记”关注我哦！

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

HTML零基础入门

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

在中所列了所有的构建，今天进入Html基础学习，一文掌握html的核心要义。

HTML零基础入门

—— 目录结构 ——

如何做好活动运营？

HTML简介
Head标签组
Body标签组

HTML简介

什么是HTML

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

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

以下就是一个简单的示例。由于是标记语言，不需要编译器，所以可以直接使用电脑的文本进行编辑学习。可以在电脑上新建文本文档，将上面的示例拷贝到文档中，并将“新建文本文档.txt”修改为“demo.html”，双击打开就可以看到网页效果。

<!DOCTYPE HTML>

<html>

<body>

<div>

<p>Hello HTML<p>

</div>

</body>

</html>

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

很简单对吧，以上代码就是一个典型的html文件的写法（html与html5有些区别，我会根据实际忽略掉一些避免给初学者带来困扰），其中“”为注释语句，为了程序员对程序进行说明标注，其包裹的内容不参与编辑。

我们也可以打开任何网页，右键->审查元素，可以看到网页的源码情况。是由大量的标签组成，学习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

document.write("Hello World!")

</script>

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

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

综合举例

综合以上内容，简单的写一个<head>，初学者可以在文本编辑器中编辑以下内容。

<!DOCTYPE html>

<head>

<title>这是一个例子</title>

document.write("Hello World!")

</script>

</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> 标签可以把文档分割为独立的、不同的部分。

<body>

<h1>NEWS WEBSITE</h1>

<div>

<h2>News headline 1</h2>

...

</div>

<div>

<h2>News headline 2</h2>

...

</div>

...

</body>

span

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

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

<body>

<h1>div与span的区别</h1>

</body>

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

br及hr

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

<body>

<p>欢迎关注<br/>微信公众号<br><hr>一线青年的笔记<br/><hr/></p>

</body>

iframe

<body>

<p>欢迎关注<br/>微信公众号<br><hr>一线青年的笔记<br/><hr/></p>

</body>

<body>

</body>

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

3.2、内容标签

段落

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

<body>

<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>

<i>这是斜体效果</i><br>

<strong>这是加粗效果</strong>

</body>

表格

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

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

3.3、媒体标签

图像

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

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

<body>

</body>

有时候网页需要点击图片的不同位置，跳转不同的内容，这时候就会用到<map>和 <area> 。

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

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

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

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

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

<body>

</map>

</body>

点击图片中不同的星系，显示的内容不同。

音频和视频

<body>

<audio color: rgb(123, 127, 131);font-size: 12px;">https://www.w3school.com.cn/i/horse.ogg" controls="controls"></audio><br>

<video color: rgb(123, 127, 131);font-size: 12px;">https://www.w3school.com.cn/i/movie.ogg" controls="controls" autoplay></video>

</body>

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>

</ body>

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>的名称。