HTML的入门及结构组成

大家在浏览网页的时候，是否思考过这样一个问题：怎样才能制作出一个网页呢？制作出一个网页是很简单的，只要知道什么是HTML并掌握HTML的基础知识就可以制作出一个简单的网页，今天我就为讲解HTML的入门及结构组成。

一、什么是HTML?

1、在我们开始学习HTML之前我们需要知道什么是HTML？

HTML的全称为Hyper Text Markup Language，中文名称为超文本标记语言，阅览方式为网页浏览器，同时HTML也被称为网页。

2、一个简单的HTML文档

二、HTML编辑器

我们在可以使用TXT文本文档或者专业的HTML编辑器来编辑HTML。

1、记事本

①　创建一个TXT文本

②　输入HTML代码

③　点击文件—另存为—输入名称+“html”的后缀名即可得到你的第一个HTML文件。

④　然后双击这个文件运行。

运行结果

2、专业编辑器

①　Sublime Text

②　HBuilder

③　Adobe Dreamweaver

④　CoffeeCup HTML Editor

这其中我比较推荐HBuilder这款编辑器，界面简单，编辑起来很快。

三、HTML的组成部分

在上面的案例中我们可以看到HTML是由头部（head）和身体（body）所组成的。

1、头部（head）

通常包含标题（title），也就是一个网页的名称

网页标题

2、身体（body）

body的部分是整个网页的重要内容部分，让人一眼就浏览到这个网页的内容，可以插入文本、图片、多媒体等内容。

四、HTML元素

l HTML元素是指以开始标签起始，以结束标签终止的元素：元素内容即为开始标签与结束标签之间的内容。

l <head></head>、<body></body>、<p></p>、<h1></h2>等这些都是HTML元素，在上面的案例中就有六个元素。

l 也有部分元素只有开始标签，例如<br>,以开始标签的结束而结束。

五、HTML的属性

l 一般来说HTML的属性就是HTML元素的属性，属性可以在元素中添加附加信息。

l 属性总是以名称/值对的形式出现，比如：name=”value”。

l 属性一般描述于开始标签。

l style中会有更多的属性。

六、HTML格式化

HTML可定义很多供格式化输出的元素，比如粗体字和斜体字。

HTML文本格式化标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

运行结果示意图

HTML“计算机输出”标签

标签	描述
<code>	定义计算机代码
<kdd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本

HTML引文、引用及标签定义

标签	描述
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目

七、HTML超链接

超链接可以是图片、文字、多媒体也可以是一个网址

示例：

结果：

点击带有下划线的两个字就可以进入某度的网站

八、HTML CSS

1、CSS是一种层叠样式表，可以修饰html元素的样式并可以精确地进行排版

2、CSS有三种方式：

l 内部样式，在HTML元素中使用“style”属性

l 内部样式表，在头部<head>区域使用<style>元素来包含CSS

l 外部引用，引用带有后缀css的文件，示例：

html文档

css文档

如果你看到了这里，就说明你已经打开了制作网页的大门啦~

多朋友在准备学习编程时总会发现，选择有前端后端，还有Java，Python等，看得人眼花缭乱，不知如何选择。

也有的朋友认为HTML就是前端，前端就是HTML，那么实际真的如此吗？这就要从前端和HTML的定义开始了。

前端是什么？这个其实不难理解，简单来说，就是浏览器上我们浏览所看到的网页。那么前端开发到底是做什么的呢？

通俗来讲，主要分为三个方面，一是网页的制作，二是移动端以及PC端软件的制作，最后是游戏。没错，就是游戏，可能许多人并不知道50%的游戏都是由前端去开发实现的，比如说一刀九九九的页游。

前端开发需要掌握的技术有HTML、CSS、Javascript等，所以HTML并不是前端，前端只是前端开发技术的一种。而我们一般进行前端开发时用到的软件有vsCode（专业级）

webstrom、hbuilder（企业级），Dreamweaver（小白入门级）。

很多人以为HTML是编程语言的一种，其实它是一种标记语言，而HTML的中文译名就是超文本标记语言，不过因为太长，大家还是叫它HTML。

编程语言大家会比较熟悉，至于标记语言，相信不少朋友都是第一次听到。标记语言是一套标记标签，而HTML是使用标记标签来描述网页，因为HTML文档包含了HTML标签及文本内容，所以HTML文档也叫做web 页面。

了解更多

、HTML基本信息

注释：

DOCTYPE：就是告诉浏览器，我们要使用什么规范

head：网页头部标签

title：网页标题
meta：描述性标签，描述网站的信息，用来做SEO

charset = "UTF-8"
name = "keyword" content = ""关键词
name = "descrisption" content = ""描述

body：代表网页主题

二、网页基本标签

标题标签

<h1>一级标签</h1>一直到6级标签

段落标签

<p>段落标签</p>

换行标签

<br/> /是闭合的意思，单标签，闭不闭合都行

水平线标签

<hr/>

字体样式标签

<strong>粗体</strong>
<em>斜体</em>

注释

特殊字符

空格 ---->一个空格
大于号 >
小于号<
版权符号©

特殊符号就是 & xxx ;

三、图像标签

src 图像地址必填
alt 图像的代替文字(找不到图片的时候显示) 必填
title 鼠标悬停提示文字
width 图像的宽度
height 图像的高度

注意：../ 代表上一级目录

四、链接标签

文本链接

<a href="path" target="目标窗口位置">链接文本或图像</a>

href 链接路径，要跳转带那个位置必填
target链接在哪个窗口打开：常用值_self 当前窗口（默认的）、_blank 新窗口

图像链接：就是嵌套图片标签

页面间链接

从一个页面链接到另一个页面

锚链接

第一步需要一个标记使用name做标记
第二步跳转到标记使用#标记
<a name="top" ></a>
<a href="#top"></a>
上面是页面内的跳转

<a name="down"></a>
<a href="第一个页面的path#down"></a>
页面间的跳转

功能性链接

邮件链接：mailto： <a href="mailto:邮箱"></a>点击后会打开邮箱
qq链接：在qq推广工具里面的

五、行内元素和块元素

块元素

无论内容多少，该元素独占一行
p、h1-h6

行内元素

内容撑开宽度、左右都是行内元素的可以排在一起
a、strong、em...

六、列表

什么是列表：就是一种展示方式

有序列表

<ol> <li></li> </ol>

无序列表

<ul> <li></li> </ul>

自定义列表

<dl>
    <dt></dt> 标题
    <dd></dd> 选项
    <dd></dd>
    <dd></dd>
</dl>

七、表格

为什么使用表格

简单通用
结构稳定

基本结构

单元格
行
列
跨行
跨列

<table border="1px" 边框>表格标签
    <tr>
        <td></td>列标签
        <td></td>
        <td></td>
    </tr>行标签 这代表一行
</table>

跨列：使用colspan="夸的列数" <td colspan="4">

跨行：使用rowspan="夸的行数" <td rowspan="4">

八、视频和音频

视频元素

video
<video src="path" controls autoplay></video>
src:资源路径
controls控制条
autoplay自动播放

音频元素

audio
<audio src="" controls autoplay></audio>

九、页面结构分析

元素名	描述
header	标题头部区域的内容(用于页面或页面中的一块区域)
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	web页面中的一块独立区域
atricle	独立的文章内容
aside	相关内容或应用(常用于侧边栏)
nav	导航类辅助内容

十、iframe内联框架

src必填
width
heigth
name标记
name的使用
<iframe src="" name="hello" frameborder="0" width="1000px" heigth="800px"></iframe>

<a href="path" target="hello"></a>
点击超连接后，会在内联框架里显示这个页面

十一、表单

表单：form

<form method="post|get" action="result.hetml">
    <input />
</form>

method 规定如何发送表单数据常用psot、get
action 表示向何处发送表单数据，把表单的数据发送给那个地方

get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效

post方式提交：比较安全，可以传输大文件

表单元素格式

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默认为text
name	指定表单元素的名称必填，用来后台读取
value	元素的初试值。type为radio时必须指定一个值
size	指定元素的初始宽度。当type为text时或者password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为txet或password时，输入的最大字符数
cheaked	type为radio或cheackbox时，指定按钮是否被选中

单选框

input type="radio"
value 单选框的值
name ：表示组，name一样一次只能选一个，name不一样可以选多个
checked默认选中的

多选框

input type="checkbox"
value = "sleep"
name = "hooby"
checked默认选中的
<input type="checkbox" name="sleep" value="slppe" checked/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
多选框的结果是以数组的形式返回的

按钮

<input type="button" name="btn1" value="点击" />普通按钮
<input type="image" src ="点击跳转的path"/>图片按钮
<input type="submit"/>提交按钮
<input type="reset"/>重置按钮

下拉框

<select name="列表名称">
    <option value="选项的值" select>中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
</select>
提交的格式就是列表名称和value

selected 默认选择

文本域

<textarea name="name" cols="列数" rows="行数">文本内容</textarea>

文件域

<input type="file" name="files"/>
<input type="button" value="提交"/>

邮件验证

<input type="email" name="youjian">

URL

<input type="url" name="url">

数字验证

<input type="number" name="num" max="100" min="0" step="10">

滑块

<input type="range" max="100" min="0">

搜索

<input type="search" name="search">

十二、表单的应用

隐藏域 hidden

<input type="text" id="mark" hidden>

只读 readonly

<input type="text" id="mark" readonly>

禁用 disabled

<input type="text" id="mark" disabled>

增强鼠标可用性

<label for="mark">点击</label>
<input type="text" id="mark">

十三、表单初级验证

为什么要进行表单验证：缓解服务器压力、保证数据安全

提示信息

placeholder="提示信息" 在输入框上

非空判断

required

正则表达式验证

pattern
<input type="text" name="mail" pattern="正则表达式">

高级验证使用js

在线咨询

上一篇：前端入门-html 如何在网页中使用视频音频
下一篇：HTML <abbr> 标签

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商