Web中HTML基础是怎样的，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
HTML文档的基本结构
标记(标签)类型、标记(标签)语法
body标记的属性的设置方法
给网页添加注释
meta元信息的作用
HTML文档类型。<!doctype html>
html文件由头部head和主体body两部分组成：
在头部<head>标记中，可以定义标题、样式等，头部里放的是网页元信息，不显示在网页内，元信息是关于网页的基本描述。
CSS代码和JavaScript代码可以放在头部，另外JavaScript代码也可以放在body部分。
在主体<body>标记中，可定义段落、标题字、超链接、脚本、表格、表单等元素，主体内容是网页要显示的信息。
<!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> <p>欢迎大家学习web前端技术</p> </body> </html>
HTML文档的头部标记主要包含页面标题标记、元信息标记、样式(CSS)标记、脚本(JavaScript)标记、链接标记等。头部标记所包含的信息是说明性信息或引入性信息，一般不会显示在网页上。
页面标题<title> </title>
基本语法
<title>标题信息显示在浏览器的标题栏上</title>
语法说明：title标记是双标记，<title>是开始标记，</title>是结束标记，两者之间的内容为显示在浏览器的标题栏上的信息。
元信息<meta>
http-equiv属性用于提供HTTP协议的响应头报文，以键值对的形式，http-equiv属性的值所描述的内容(值)通过content属性表示，通常为网页加载前提供给浏览器等设备使用。
其中最重要的是content-type charset提供编码信息，refresh刷新与跳转页面，no-cache页面缓存，expires网页缓存过期时间。
name属性用于描述网页，以键值对的形式，便于搜索引擎查找、分类。
其中最重要的是description、keywords和robots
<meta name="keywords" content="信息参数"/>
<meta name="description" content="信息参数"/>
<meta name="robots" content="信息参数"/>
<meta name="generator" content="信息参数"/>
<meta name="author" content="信息参数"/>
<meta http-equiv="content-type" content="text/html;charset=信息参数"/>
<meta http-equiv="refresh" content="时间;url=网址参数">
META标记用来描述一个HTML网页文档的属性，也称为元信息(meta-information)，这些信息并不会显示在浏览器的页面中。例如：作者、日期和时间、网页描述、关键词、页面刷新等。该标记位于文档的头部(其属性形式是键值对)。
基本语法
<meta name=" " content=" ">
<meta http-equiv=" " content=" ">
属性说明：meta属性主要分为两组。
meta标记是使用方法
meta标记键值对对应表
| 属性 | 值 | 描述 |
|---|---|---|
| content | some_text | 定义与http-equiv或name属性相关的元信息 |
| http-equiv | content-type | 内容类型 |
| expires | 网页缓存过期时间 | |
| refresh | 刷新与跳转(重定向)时间 | |
| set-cookie | 如果网页过期，那么存盘的cookie将被删除 | |
| name | author | 定义网页作者 |
| description | 定义网页简短描述 | |
| keywords | 定义网页关键字 | |
| generator | 定义用什么编辑器编写的 | |
| scheme | some_text | 定义用于翻译content属性值的格式 |
name属性与content属性
http-equiv属性与content属性
主体body是一个Web页面的主要部分，其设置内容是读者实际看到的信息，所有WWW文档的主体部分都是由body标记定义的。在主体body标记中可以放置的是页面中所有的内容，如图片、图像、表格、文字、超链接等元素。
基本语法
<body> … </body>
语法说明
<body>是开始标记，</body>是结束标记。
两者之间所有的内容为网页上显示的信息。
案例
<!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>简易网页设计</title> </head> <body text="green"> <h4 align="center">Web前端开发技术课程简介</h4> <hr color="red"> <p> 《Web前端开发技术》课程是计算机科学与技术、信息管理与信息系统、软件工程 等专业的一门基础课程，也是其他计算机相关专业的公共基础课程，通过对Web前端开 发三大主流技术学习和研究，让学生理解和掌握HTML、JavaScript、CSS等相关知识， 通过实验培养学生设计与开发Web站点的基本操作技能。 </p> </body> </html>
标记属性
设置body标记属性可以改变Web页面显示效果。body标记主要属性有text、bgcolor、background、link(未点击未激活)、alink(正在激活)、vlink(已经点击过)、topmargin、leftmargin。
基本语法
<body leftmargin="50px" topmargin="50px" text="#000000" bgcolor="#339999" link="blue" alink="white" vlink="red" background="body_image.jpg">
属性说明
| 属性 | 值 | 描述 |
|---|---|---|
| text | .rgb(R,G,B)，.grb(R%,G%,B%)，.#RRGGBB|#RGB，.Colorname | 规定文档中所有文本的颜色。不赞成使用。请使用样式取代它。 |
| bgcolor | 同上 | 规定文档的背景颜色 |
| alink | 同上 | 规定文档中活动链接的颜色 |
| link | 同上 | 规定文档中未访问链接的默认颜色 |
| vlink | 同上 | 规定文档中已被访问链接的颜色 |
| background | URL | 规定文档的背景图像 |
| topmargin | .Pixel | 规定文档中上边距的大小 |
| leftmargin | .Pixel | 规定文档中左边距的大小 |
body标记属性-颜色表示方法，在网页设计中，HTML提供了4种颜色设置方法：
使用RGB(R,G,B)，其中R、G、B是0-255的整数；
使用RGB(R%,G%,B%)，其中R、G、B是0-100的整数；
使用3位或6位十六进制数#RGB或#RRGGBB，R、G、B为十六进制数，取值范围：0-F，每种颜色使用2位十六进制数表示，RR：红色部分、GG：绿色部分、BB：蓝色部分。红色为#FF0000；#RGB可以转换为#RRGGBB，例如红色分别表示为#F00、#FF0000.
使用颜色英文名称，如red表示红色、green表示绿色，blue表示蓝色等。
body标记属性-案例(edu_2_3_2.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>body属性应用</title> <meta name="Generator" content="VS Code"> <meta name="Author" content="Windf17"> </head> <body text="rgb(00,00,00)" bgcolor="#f0f0f0" background="" link="rgb(0%,100%,0%)" leftmargin="60px" alink="white" vlink="red" topmargin="60px"> <div id="" class=""> <p>欢迎访问我们的站点，我们为您提供网站地图。</p> 网站导航： <a href="https://www.baidu.com">百度</a> <a href="https://www.163.com">网易</a> <a href="https://www.sohu.com">搜狐</a> </div> </body> </html>
标记通常分为单标记和双标记两种类型，大部分是双标记。
<a> <b> <br> <button> <dl> <dt> <dd> <h2>~<h7> <head> <hr> <html> <i> <iframe> <img> <input> <label> <link> <ol> <li> <p> <s> <script> <select> <option> <span> <style> <table> <thead> <th> <tr> <tbody> <td> <textarea> <title> <u> <ul> <li>
单标记
<br>：<br>、<br/>表示换行。
<hr>：<hr>、<hr/>表示水平分隔线，还可以定义颜色、宽度(单位是像素)。
<hr color="black" size="2" />
单标记仅单独使用就可以表达完整的意思。
基本语法：<标记名称>或<标记名称/>
最常用的单标记有：
双标记
<h4><i>这是错误的交叉嵌套的代码</h4></i> ×
<h4><i>这是正确的交叉嵌套的代码</i></h4> √
双标记由开始标记和结束标记两部分组成，必须成对使用。
基本语法：<标记名称>内容</标记名称>
属性语法
属性应该在开始标记(首标记)内定义，并且与标记名之间有一个空格分隔。如上述案例中hr标记名字和size属性之间有一个空格。
属性值一般用英文双引号" "括起来。如上述案例中size属性值"3"和color属性值"red"。
<标记名称 属性1="属性值" 属性2="属性值" … 属性n="属性值n">
<hr size="3" color="red" align="center">
基本语法
语法约束
属性语法-案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标记语法及属性语法应用</title>
<style type="text/css">
h3 {
text-align: center;
background: #6699ff;
padding: 20px;
}
</style>
</head>
<body background="" text="red">
<h3 align="center">新 年 寄 语</h3>
<hr size="2" color="#6600ff" width="100%" />
<p align="left"> 轻轻送上我忠诚的祈求和祝愿，祈求分别的时光象流水瞬间逝去，祝愿再会时，紧握的手中满溢友情和青春的力量。</p>
<p align="right"> 有一种跌倒叫站起，有一种失落叫收获，有一种失败叫成功——坚强些，朋友，明天将属于你！</p>
</body>
</html>注释
<!-- 注释信息 -->
<comment>注释信息</comment>
基本语法
<comment>显示一个段落</comment>
语法说明：comment标记是成对标记，以<comment>开始，以</comment>结束。标记包围的信息为注释内容，但在高版本的浏览器中均显示在页面内，建议不使用此注释标记。
HTML代码中添加注释的方法有2种：
所有标记均以“<”开始，以“>”结束。
根据标记类型，正确输入标记，单标记最好在右尖括号前加一个斜杠“/”，如换行标记是单标记<br/>，成对标记最好同时输入起始标记和结束标记，以免忘记。
标记可以嵌套使用，但不能交叉使用。
在HTML代码中不区分大小写，但为了代码规范建议统一使用小写。
标记中可以设置各种属性，属性值建议使用英文双引号括起来。
书写开始与结束标记时，在左尖括号和标记名或斜杠“/”之间不能有空格，否则浏览器不能识别，导致错误标记直接显示在页面上，影响页面效果。
文档的扩展名为html或htm，建议统一使用html作为文件名的后缀。
文档名只可由英文字母、数字或下划线组成，建议以字母或下划线开始。
文档名中不能含有特殊符号，如空格、$、&等。
文档名区分大小写，一般建议英文小写。
Web服务器主页一般是index.html或default.html。
HTML4.01规定了三种DTD类型：
严格Strict、过渡Transitional以及框架Frameset。
<!DOCTYPE HTML PUBLIC "-//w3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//w3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//w3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML5的DTD定义：<!doctype html>
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标记语法及属性语法应用</title> </head> <body bgcolor="#cdebe6"> <h4 align="center">欢度新年元旦</h4> <hr size="2" color="red" width="100%" /> <p align="left"> 元旦(New Year's Day,New Year)，指一年开始的第一天， 也被称为“新历年”、“阳历年”，在古代指阴历的正月初一，1949年9月27日，中国人民政治协商会议第 一届全体会议正式确立公历1月1日为元旦。元旦是世界上很多国家或地区的法定假日。</p> <div id="" class="=" align="center"> <img src="timg.jfif" width="300" height="165"> <img src="timg2.jfif" width="300" height="165"> </div> <hr size="2" color="red" width="100%" /> <p align="center">Web前端开发技术工作室 Copyright ©2017-2020</p> </body> </html>
网页效果：
<html> </html>分别表示一个HTML文件的开始和结束。
<head> </head>分别表示一个文件头部的开始和结束。
<body> </body>分别表示一个文件主体的开始和结束。
body标记常用属性有：
text、bgcolor、background、link、vlink、alink、topmargin、leftmargin等。
看完上述内容，你们掌握Web中HTML基础是怎样的的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
