HTML入门（详细教程），前端入门从这里开始

最新推荐文章于 2024-07-04 21:40:21 发布

wandertp

最新推荐文章于 2024-07-04 21:40:21 发布

阅读量547

点赞数 8

文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_49837118/article/details/139336758

版权

前言

对于前端开发来说，最核心的3个技术分别是HTML、CSS和JavaScript（简称JS），也叫“新三剑客”

HTML，全称是“Hyper Text Markup Language”（超文本标记语言），HTML是一门描述性语言。
CSS，即“Cascading Style Sheets”（层叠样式表），是用来控制网页外观的一种技术。
JavaScript是什么？JavaScript是一种嵌入到HTML页面中的脚本语言，由浏览器一边解释一边执行。

现在，我们知道了前端最核心的3个技术是HTML、CSS和JavaScript。它们三者有什么区别呢？

“HTML用于控制网页的结构，CSS用于控制网页的外观，而JavaScript控制着网页的行为。”给大家打个比方加以说明，制作网页就好像是盖房子，盖房子的时候，我们都是先把结构建好（HTML）。之后，再给房子装修（CSS），例如，给窗户装上窗帘、在地板上铺瓷砖。装修好之后，当夜幕降临之时，我们要开灯（JavaScript）才能把屋子照亮。

一、什么是HTML？

HTML全称是“Hyper Text Markup Language（超文本标记语言）”，是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。

语法

<标签符>内容</标签符>

说明

标签符一般都是成对出现的，包含一个“开始符号”和一个“结束符号”。结束符号只是在开始符号前面多加了一条斜杠“/”。当浏览器收到HTML文本后，就会解析里面的标签符，然后把标签符对应的功能表达出来。

那么学习HTML究竟要学些什么呢？用一句简单的话来说，就是学习各种标签，来搭建网页的“骨架”。在HTML中，标签有很多种，如文字标签、图片标签、表单标签等。

二、开发工具

使用HBuilder

不管使用哪款开发工具，在开发的时候，我们都需要新建一个HTML页面，然后再在这个页面中编写代码。

HBuilder是专为前端打造的开发工具，上手非常快，也是初学者的首选。我们来介绍一下怎么在HBuilder中新建一个HTML页面。

新建Web项目：在HBuilder的左上方，依次单击【文件】→【新建】→【Web项目】
选择文件路径及命名文件夹：在对话框中，给文件夹命名，并且选择文件夹路径（也就是文件存放的位置）。然后单击【完成】按钮
新建HTML文件：在HBuilder左侧的项目管理器中，选中test文件夹，然后单击右键，依次选择【新建】→【HTML文件】
选择文件路径及给HTML文件命名：在对话框中选择文件夹路径（也就是HTML文件存放的位置），并且给HTML文件填写一个名字（建议使用英文），然后单击【完成】按钮
预览页面：在HBuilder上方工具栏中找到【预览】按钮，单击就可以在浏览器中查看页面效果了

对于站点、文件、页面等的命名，不要使用中文，而应使用英文。因为，现在绝大多数操作系统都是英文的，如果使用中文，可能会导致无法识别。

对于HBuilder的使用，我们可以在HBuilder上方的工具栏中，依次选择【帮助】→【HBuilder入门】，里面有比较详细的使用教程。

三、基本标签

1.HTML结构

一个页面是由4个部分组成的。
wandertp

接下来，我们简单介绍一下这4个部分的作用。

<!DOCTYPE html>是一个文档声明，表示这是一个HTML页面。
HTML标签的作用，是告诉浏览器，这个页面是从<html>开始，然后到</html>结束的。
head标签<head></head>是网页的“头部”，用于定义一些特殊的内容，如页面标题、定时刷新、外部文件等。
<body></body>是网页的“身体”。对于一个网页来说，大部分代码都是在这个标签内部编写的。

此外，对于HTML结构，有以下2点要跟大家说明。

对于HTML结构，虽然大多数开发工具都会自动生成，但是作为初学者，大家一定要能够默写出来，这是需要记忆的（其实也很简单）。

记忆标签时，有一个小技巧：根据英文意思来记忆。比如head表示“页头”，body表示“页身”。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>这是网页的标题</title>
</head>
<body>
    <p>这是网页的内容</p>
</body>
</html>

2.head标签

在HTML中，一般来说，只有6个标签能放在head标签内。

title标签。
meta标签。
link标签。
style标签。
script标签。
base标签。

title标签

在HTML中，title标签唯一的作用就是定义网页的标题。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>博客网</title>
</head>
<body>
    <p>wandertp的博客，让你茅塞顿开</p>
</body>
</html>

meta标签

在HTML中，meta标签一般用于定义页面的特殊信息，如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎看的。简单地说，meta标签就是用来告诉搜索引擎这个页面是做什么的。

在HTML中，meta标签有两个重要的属性：name和http-equiv。

name属性

<!DOCTYPE html>
<html>
<head>
    <!--网页关键字-->
    <meta name="key" content="前端开发"/>
</head>
<body>
</body>
</html>

http-equiv属性

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

格式

<meta http-equiv="content-type|default-style|refresh">

属性说明

content-type 规定文档的字符编码。
default-style 规定要使用的预定义的样式表。
refresh 定义文档自动刷新的时间间隔。

style标签

在 <style> 元素中，您可以指定 HTML 元素在浏览器中的呈现方式。

请注意，style 元素定义的是 HTML 文档内嵌的 CSS 样式，而 link 元素则是用来导入外部样式表中的样式。

style 元素可以出现在 HTML 文档中的各个部分。一个文档可以包含多 style 元素，因此不必把所有样式定义都塞进 head 部分。

script标签

在HTML中，script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件。在HTML中不做深入了解

link标签

在HTML中，link标签用于引入外部样式文件（CSS文件）。这属于CSS内容，在这里不做深入讲解

3.body标签

在HTML中，head标签表示页面的“头部”，而body标签表示页面的“身体”。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>body标签</title>
</head>
<body>
    <h3>定风波</h3>
    <p>莫听穿林打叶声，何妨吟啸且徐行</p>
    <p>竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生</p>
</body>
</html>

<meta charset="utf-8" />的作用是防止页面出现乱码，在每一个HTML页面中，我们都要加上这句代码。

4.HTML注释

又叫注释标签。

用“”注释的内容不会显示在浏览器中。在HTML中，浏览器遇到HTML标签就会进行解释，然后显示HTML标签中的内容。但是浏览器遇到“注释标签”就会自动跳过，因此不会显示注释标签中的内容。

四、文本

标题标签

在HTML中，共有6个级别的标题标签：h1、h2、h3、h4、h5、h6。其中h是header的缩写。

6个标题标签在页面中的重要性是有区别的，其中h1标签的重要性最高，h6标签的重要性最低。

title标签和h1标签是不一样的。title标签用于显示地址栏的标题，而h1标签用于显示文章的标题

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>标题标签</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

段落标签

<p>段落内容</p>

在HTML中，我们可以使用“p标签”来显示一段文字。段落标签会自动换行，并且段落与段落之间有一定的间距。

换行标签

<br/>

在HTML中，我们可以使用br标签来给文字换行。其中
是自闭合标签，br是break（换行）的缩写。

br标签是用来给文字换行的，而p标签是用来给文字分段的。

文本标签

在HTML中，我们可以使用“文本标签”来对文字进行修饰，如粗体、斜体、上标、下标等。

常用的文本标签有以下8种。
粗体标签：strong、b。
斜体标签：i、em、cite。
上标标签：sup。
下标标签：sub。
中划线标签：s。
下划线标签：u。
大字号标签：big。
小字号标签：small。

div标签

在HTML中，我们可以使用“div标签”来划分HTML结构，从而配合CSS来整体控制某一块的样式。

div，全称division（分区），用来划分一个区域。、div标签内部可以放入绝大多数其他的标签，如p标签、strong标签和hr标签等。

五、列表

在HTML中，列表共有3种：有序列表、无序列表和定义列表。
在有序列表中，列表项之间有先后顺序之分。

在无序列表中，列表项之间没有先后顺序之分。

而定义列表是一组带有特殊含义的列表，一个列表项中包含“条件”和“列表”两部分。

有序列表

在HTML中，有序列表中的各个列表项是有顺序的。有序列表从<ol>开始，到</ol>结束。在有序列表中，一般采用数字或字母作为顺序，默认采用数字顺序。

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

在该语法中，<ol>和</ol>标志着有序列表的开始和结束，而<li>和</li>标签表示这是一个列表项。

无序列表

无序列表，很好理解，有序列表的列表项是有一定顺序的，而无序列表的列表项是没有顺序的。

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

六、表单

web 表单是与用户交互的强大工具，它们经常用于收集用户的数据，或允许他们控制用户界面。

表单是我们接触动态页面的第一步。其中表单最重要的作用就是在浏览器端收集用户的信息，然后将数据提交给服务器来处理。

可能有些初学者就会问：“我用表单做了一个用户登录功能，怎么在服务器中判断账号和密码是否正确呢？”大家不要着急，我们在HTML学习中要做的仅仅是把表单的页面做出来就可以了。至于怎么在服务器处理这些信息，那就不是HTML的范畴了，而是属于神秘的后端技术。

如果读者对后端技术感兴趣的话，可关注博主关于Flask框架的教学；Python Flask框架是一款十分适合初学者学习后端的第三方库。

网址： Python Flask框架从零基础入门到精通，实现web后端开发

表单标签

在HTML中，表单标签有5种：form、input、textarea、select和option。

form标签

HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

<form>
    各种表单标签
</form>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <form>
        <input type="text" value="单行文本框"/><br/>
        <textarea>多行文本框</textarea><br/>
        <select>
            <option>HTML</option>
            <option>CSS</option>
            <option>JavaScript</option>
        </select>
    </form>
</body>
</html>

input、textarea、select、option都是表单标签，必须要放在form标签内部。

form标签属性

1．name属性
在一个页面中，表单可能不止一个，每一个form标签就是一个表单。为了区分这些表单，我们可以使用name属性来给表单命名。

<form name="Form"></form>

2．method属性
在form标签中，method属性用于指定表单数据使用哪一种http提交方法。
method属性取值有两个：一个是“get”，另外一个是“post”。get的安全性较差，而post的安全性较好。

<form method="post"></form>

3．action属性
在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理。

<form action="index.php"></form>

4．target属性
form标签的target属性与a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下，我们只会用到“_blank”这一个属性值。

<form target="_blank"></form>

单行文本框

在HTML中，单行文本框是使用input标签来实现的，其中type属性取值为“text”。单行文本框常见于网站的注册登录功能中。

<input type="text" />

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        姓名：<input type="text" />
    </form>
</body>
</html>

单行文本框属性

value属性
设置文本框的默认值，也就是默认情况下文本框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        姓名：<input type="text" /><br />
        姓名：<input type="text" value="helicopter"/>
    </form>
</body>
</html>

size属性
设置文本框的长度

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        姓名：<input type="text" size="20"/><br />
        姓名：<input type="text" size="10"/>
    </form>
</body>
</html>

maxlength属性
设置文本框中最多可以输入的字符数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post"><form method="post">
        姓名：<input type="text" />
        姓名：<input type="text" maxlength="5"/>
    </form>
</body>
</html>

密码文本框

密码文本框在外观上与单行文本框相似，两者拥有相同的属性（如value、size、maxlength等）。不过它们有着本质上的区别：在单行文本框中输入的字符是可见的，而在密码文本框中输入的字符不可见。

密码文本框属性
密码文本框可以看成是一种特殊的单行文本框，它拥有和单行文本框一样的属性，

<input type="password" />

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        账号：<input type="text" /><br />
        密码：<input type="password" />
    </form>
</body>
</html>

单选框

在HTML中，单选框也是使用input标签来实现的，其中type属性取值为“radio”。
name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置。

<input type="radio" name="组名" value="取值" />

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        性别:
        <input type="radio" name="gender" value="男" />男
        <input type="radio" name="gender" value="女" />女
    </form>
</body>
</html>

复选框

在HTML中，复选框也是使用input标签来实现的，其中type属性取值为“checkbox”。单选框只能选择一项，而复选框可以选择多项。

name属性表示复选框所在的组名，而value表示复选框的取值。与单选框一样，这两个属性也必须要设置。

复选框中的name与单选框中的name都是用来设置“组名”的，表示该选项位于哪一组中。

<input type="checkbox" name="组名" value="取值" />

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        你喜欢的水果：<br/>
        <input type="checkbox" name="fruit" value="苹果"/>苹果
        <input type="checkbox" name="fruit" value="香蕉"/>香蕉
        <input type="checkbox" name="fruit" value="西瓜"/>西瓜
        <input type="checkbox" name="fruit" value="李子"/>李子
    </form>
</body>
</html>

按钮

在HTML中，常见的按钮有3种：普通按钮（button），提交按钮（submit），重置按钮（reset）。

普通按钮button

在HTML中，普通按钮一般情况下都是配合JavaScript来进行各种操作的。

<input type="button" value="取值" />

提交按钮submit

在HTML中，提交按钮一般都是用来给服务器提交数据的。我们可以把提交按钮看成是一种特殊功能的普通按钮。

提交按钮与普通按钮在外观上没有什么不同，两者的区别在于功能上。对于初学者来说，暂时了解一下就行。

<input type="submit" value="取值" />

多行文本框

单行文本框只能输入一行文本，而多行文本框却可以输入多行文本。在HTML中，多行文本框使用的是textarea标签，而不是input标签。

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

多行文本框的默认显示文本是在标签对的内部设置，而不是在value属性中设置的。一般情况下，不需要设置默认显示文本。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        简介：<br/>
        <textarea rows="5" cols="20">介绍一下你自己</textarea>
    </form>
</body>
</html>

下拉列表

在HTML中，下拉列表是由select和option这两个标签配合使用来表示的。这一点与无序列表很像，无序列表是由ul和li这两个标签配合使用来表示。

<select>
    <option>选项内容</option>
    ……
    <option>选项内容</option>
</select>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        <select>
            <option>HTML</option>
            <option>CSS</option>
            <option>jQuery</option>
            <option>JavaScript</option>
            <option>Vue.js</option>
        </select>
    </form>
</body>
</html>