HTML基础

TML的作用

HTML是用来开发网页的，它是开发网页的语言

HTML的定义

全称HyperText Mark-up Language，超文本标记语言

标记就是标签

<标签名称></标签名称> 比如 <html></html> <h1></h1>等，标签大多数都是成对出现的。

超文本两层含义：

因为网页中还可以有图片、视频、音频等内容（超越文本限制）
它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接（超链接文本）

HTML的基本结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
        网页显示内容
    </body>
</html>

第一行<!DOCTYPE html>是文档声明
用来指定页面所使用的html的版本, 这里声明的是一个html5的文档
<html>...</html>标签是开发人员在告诉浏览器
整个网页是从<html>这里开始的，到</html>结束
也就是html文档的开始和结束标签
<head>...</head>标签用于定义文档的头部
是负责对网页进行设置标题、编码格式以及引入css和js文件的
<body>...</body>标签是编写网页上显示的内容

网页文件的后缀是.html, 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页

VS Code 安装

VS Code全拼是 Visual Studio Code 是由微软研发的一款免费、开源的跨平台代码编辑器
目前是前端(网页)开发使用最多的一款软件开发工具

下载网址: https://code.visualstudio.com/Download

选择对应的安装包进行下载:

安装一切默认

VS Code 的插件安装

Chinese(Simplified) Language Pack for VS Code 中文汉化包
open in browser 右击在浏览器打开html

常用的HTML标签

1 标签不区分大小写，但是推荐使用小写
2 根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签) 2.1 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签 2.2 单标签是一个标签组成，没有标签内容，比如: img标签

标签的使用形式

成对出现的标签
标签的嵌套
单个出现的标签
带属性的标签

列表标签

无序列表标签(ul标签)
有序列表标签(ol标签)

网页效果

表格标签

<table>标签：表示一个表格
<tr>标签：表示表格中的一行
<td>标签：表示表格中的列
<th>标签：表示表格中的表头

属性设置
border: 1px solid black:设置边框和颜色
border-collapse: collapse:设置边框合并

网页效果

表单标签

表单用于搜集不同类型的用户输入的数据，然后可以把用户数据提交到web服务器

<form>标签表示表单标签，定义整体的表单区域

一个表单中有很多信息组成,比如姓名,爱好,地址等,这些内容有很多其他标签来承载

这些标签称为表单元素标签

网页效果

表单提交

表单用于搜集不同类型的用户输入的数据，然后可以把用户数据提交到web服务器

action属性设置表单数据提交地址
method属性设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写

两种方式的区别:

“GET”方式 : 没有请求体
“POST”方式 : 有请求体

表单元素属性设置

name: 表单元素的名称，用于作为提交表单数据时的参数名
value: 表单元素的值，用于作为提交表单数据时参数名所对应的值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密码:</label>
<input type="password" name="password">
<br>
<label>性别:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>爱好:</label>
<input type="checkbox" name="like" value="睡觉">睡觉
<input type="checkbox" name="like" value="吃饭">吃饭
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>个人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</form>
</body>
</html>

点击提交：

可以看到服务器收到了请求报文。

站开发入门指南：媒体资源格式。

我们带着大家来简单的了解一下在网页开发中常用的这些媒体资源的一些文件格式。

·首先是图片资源，图片的这个文件格式在讲图片标签的时候其实也给大家去展示过有哪几种常用的图片格式。这里我就把这些格式的一些优缺点都先列在这里了，大家可以暂停先看。在网页当中去使用图片是有两个核心的这样的使用场景。

→那首先是非常常见的就是具体去展示的这种图片，这些图片都是展示的图片，还有就是像这些功能型的图片，功能型的这种小图标的图片。

→像这两种场景理论上来讲用任何一种图片格式都是可以的。但是目前来讲最常用的就是这两种格式，这两种格式大家注意看。这个SVG的图片格式就是现在是经常会用在这种功能型的一种场景。因为现在很多在线的设计软件都可以快速的方便的去复制这个设计好的图标的一个 SVG的版本。

而且SVG它本身是一个矢量，它任意缩放都不会有这种模糊的问题，所以它其实非常适合来做图标的这样效果。而且它图标本身一般来说都是比较简单的图形，所以也不会说牵扯到这种复杂图片导致文件过大的这样的一个问题。

·然后像展示型的文件现在很多的网站都用这种web.p的格式，VIP它是谷歌开发的一种图片的格式，它支持透明度和动画，还有就是它的这种图像质量会比这种PNG的更好，它的文件还比这个PNG的小很多，所以就是在现在很多的网站上都会大量的采用这个webp的格式来作为这种展示型图片的这样的一种格式。

然后像这种不同的图片格式，其实很多的设计软件都是可以导出的。

目前来说webp的格式可能就是很多软件并不支持直接的去导出这个格式。但是网上有很多可以转换的格式、转换的工具或者在线的工具都可以很方便的。比如说可以把JPG的格式、GIF的格式转换成webp的格式。然后是这个视频文件格式，主流的常用的就是这几种。

最常用的就是MP4格式和Web.m格式。Webm格式也是谷歌开发的这样一种视频格式。目前来说主流的浏览器对这两种视频格式支持度都已经非常不错。这两种视频文件格式都能在保证比较小的文件大小的前提下提供比较高的视频质量。

一个视频文件的文件大小是受很多因素去影响的，比如说像视频本身的帧率、分辨率还有码率等一些因素。如果你想更加深入的去研究，这块东西可以自行的查找一些资料去了解一下。

这里给大家补充一个很小的知识点，就是平常说的这些视频文件格式，其实它是一种容器格式就是我们的视频文件。内部其实包裹着两种重要的数据，一种就是我们所谓的这种视频的数据，另外一种就是音频的数据，它们两者其实是分开的。

有的同学可能听说过这样的一种视频格式叫做H.264。像这种其实是一种视频数据的编码标准。这个视频文件容器内的视频文件，这个视频数据才是真正的按照这些编码，视频的编码标准编码出来的这样一些视频数据。

像这个视频数据就是纯视频，也就是纯图像，它是没有任何声音的，只有跟音频的资源。音频的数据结合到一块之后才是看到的这种整体的打包好的、有声音、有图像的一种视频文件。所以我们要明白这些视频文件是一种容器的格式。

最后就是音频资源，音频资源其实核心常用的也就是这四种，最常用的肯定就是MP3。

像一般场景来说MP3的格式完全就够用了，像WAV它是一种无损的，所以文件一般来说会比较大。如果某一些特别的需要一些高保真的这样一种高质量音频的场景可能会用到这种格式。一般来说绝大部分的时候一般用MP3的格式就够了。

TML的英语意思是：HypertextMarkupLanguage，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。接下来将带领读者从语言、超文本、标记三部分进行理解HTML。下面和千锋广州小编一起来看看吧！

1.语言

HTML一种编程语言，有指定的语法规则。超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作WWW(是WorldWideWeb的缩写，也可简写WEB、中文叫做万维网)的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器HTTP显示出效果。

2.超文本

所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。

HTML的普遍应用就是通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接。直接获取相关的主题。如下所示：

通过HTML可以通过图片格式和文字格式的设计实现出丰富多彩的风格：

文字

通过HTML可以实现页面之间的跳转：

通过HTML可以展现多媒体的效果：

从上面我们可以看到HTML超文本文件时需要用到的一些标签。

3.标记

对于刚刚接触超文本的读者，可能不能理解一些用“<”和“>”括起来的句子，它们称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档某个部件。

在HTML中每个用来作标签的符号都是一条命令、它告诉浏览器如何显示文本。这些标签均由"<"和">"符号以及一个字符串组成。如、等。而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画、播放声音。这些标签符号用“<标签名字属性>”来表示。标签分为单标签和双标签两大类，具体介绍如下：

单标签指的是只存在一个标签的写法，如、等。

双标签指的是存在一对标签的写法，如、等。注意在双标签中第一个标签叫做起始标签，第二个标签叫做结束标签，结束标签需要在左尖括号后添加一个关闭符“/”。

HTML只是一个纯文本文件。创建一个HTML文档，需要HTML编辑器和WEB浏览器两个工具。HTML编辑器是用于生成和保存HTML文档的应用程序。WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。

在线咨询

上一篇：网页前端基础教程06-HTML中body属性和表格详解，收藏
下一篇：HTML5简史：距离成熟还有多久？

您的项目需求

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

整合营销服务商

HTML基础

TML的作用

HTML的定义

HTML的基本结构

VS Code 安装

VS Code 的插件安装

常用的HTML标签

表单提交

您的项目需求