html开发工具有哪些(html零基础入门教程)

html开发工具有哪些(html零基础入门教程)

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

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

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

—— 目 录 结 构 ——

Html零基础入门

HTML简介

Head标签组

Body标签组

1

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的关键是掌握常用标签的使用方法。

2

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> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词等相关信息,不同的项目中使用的不同。

<meta>的必需属性为content,可选属性有name、http-equiv、scheme。其中name的值有author、description、keywords、generator、revised、others。

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

link

<link> 定义文档与外部资源的关系。href定义资源的目录,type说明连接资源的类型,rel是relationship的英文缩写,它描述了当前页面与href所指定文档的关系。rel=”stylesheet”告诉网页,准备写入css。

举例<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>的颜色,那么在网页中对应标签内的内容也发生了相应的改变。

3

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

<iframe> 元素会创建包含另外一个文档的内联框架,简单的来说,就是在一个页面中插入显示另外一个页面的内容。这里举个例子,新建两个html文件,将demo2包含demo1。

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

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> 定义表格中的单元。

<body> <!– border 定义了表格边框的宽度–> <table border=”1″> <tr> <th>月份</th> <th>收入</th> <th>支出</th> <th>结余</th> </tr> <tr> <td>一月</td> <td>¥2000</td> <td>¥500</td> <td>¥1500</td> </tr> </table></body>

3.3、媒体标签

图像

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

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

<body> <img src=”https://www.w3school.com.cn/i/eg_planets.jpg” alt=”星系”></body>

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

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

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

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

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

<body><img src=”https://www.w3school.com.cn/i/eg_planets.jpg” border=”0″ usemap=”#planetmap” alt=”Planets” /><map name=”planetmap” id=”planetmap”><area shape=”circle” coords=”180,139,14″ href =”https://www.w3school.com.cn/example/html/venus.html” alt=”Venus” /><area shape=”circle” coords=”129,161,10″ href =”https://www.w3school.com.cn/example/html/mercur.html” alt=”Mercury” /><area shape=”rect” coords=”0,0,110,260″ href =”https://www.w3school.com.cn/example/html/sun.html” alt=”Sun” /></map></body>

音频和视频

<body><audio src=”https://www.w3school.com.cn/i/horse.ogg” controls=”controls”></audio><br><video src=”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> |

<a href=”https://www.tmall.com/”>淘宝</a></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> 定义选择列表中的选项。如下图示例。

综合举例

可以看到,placeholder和value显示的不同,placeholder为灰色提示语,当输入时placeholder的内容消失,而value的内容不会消失,需要删除后输入或者直接在后面追加。

通过以上的篇幅,对HTML的工作有了基本的了解,在此基础上再深入学习也不会是难事,推荐一个网站用于查阅html标签。

[Alex|陈宥文]

90后一线青年

毕业时混迹在美国上市公司中国手游集团,三年里从程序猿进化成产品狗,裸辞后一股脑扎进创业疯人院。目前游荡在深圳、江西两地,捣鼓着自己的事业。创业不易,且活其珍惜!|个|人|公|众|号|“一线青年的笔记”

发表评论

登录后才能评论