前端必备知识--HTML精讲-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端必备知识--HTML精讲。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

HTML

1.1 HTML & CSS & JavaScript的作用（前端三件套）

HTML 主要用于网页主体结构的搭建；
CSS 主要用于页面元素美化；
JavaScript 主要用于页面元素的动态处理。

1.2 什么是HTML

HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容。

HTML5是HyperText Markup Language5的缩写，HTML5技术结合了HTML4.01的相关标准并革新，符合现代网络发展要求，在2008年正式发布。HTML5由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5的语法特征更加明显，并且结合了SVG的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且HTML5中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5在2012年已形成了稳定的版本。2014年10月28日，W3C发布了HTML5的最终版。

1.3 什么是超文本

HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义一一本身是文本，但是呈现出来的最终效果超越了文本。

1.4 什么是标记语言

说HTML是一种『标记语言』是因为它不是像Java这样的『编程语言」，因为它是由一系列『标签』组成的，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。

双标签：标签是通过一组尖括号+标签名的方式来定义的：
<p>HTML is a very popular fore-end technology.</p>
这个例子中使用了一个标签来定义一个段落，<p>叫开始标签，</p>叫结束标签。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫文本标签体，也简称：标签体。

单标签
<input type="text" name="username" />
属性
<a href="http://www.xxx.com">show detail</a>
href="网址"就是属性，href是属性名，"网址"是属性值。

1.5 HTML基础结构

（1）文档声明

HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。这里我们只需要知道HTML有4和5这两个大的版本。

HTML4版本的文档类型声明是：
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML5版本的文档类型声明是：
<!DOCTYPE html>
现在主流的技术选型都是使用HTML5，之前的版本基本不用了。

（2）根标签

html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。

（3）头部元素

head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。

（4）主体元素

body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。

（5）注释

HTML注释的写法是：
<！--注释内容-->
图示：

注意事项

1. html文件的根标签<html></html>

2. html根标签下有两个一级子标签

            <head></head>   头标签
               定义那些不直接展示在页面主体上，但是又很重要的内容
                (1）字符集<meta charset="utf-8"/>告诉浏览器用什么字符集对文件解码
                (2）css引入
                (3）js引入
                (4）其他……
           <body></body>   体标签
                (1）定义要展示到页面主体的标签

3. 专业词汇

        标签 tag                页面的一对<>
        属性 attribute        对标签特征进行设置的一种方式属性一般在开始标签中定义
          文本 text               双标签中间的文字
          元素 element        开始标签+属性+文本+结束标签称之为一个元素

4. html更多的语法细节

        （1）根标签有且只能有一个
        （2）无论是双标签还是单标签都需要正确关闭
        （3）标签可以嵌套但不能交叉嵌套
          （4）属性必须有值，值必须加引号，H5中属性名和值相同时可以省略属性值
          （5）HTML中不严格区分字符串使用单双引号
          （6）HTML标签不严格区分大小写，但是不能大小写混用
        （7）HTML中不允许自定义标签名，强行自定义则无效文章来源地址https://www.toymoban.com/news/detail-831987.html

<!DOCTYPE html>
<html>
    <head>
        <title>lpx</title>
        <meta charset="UTF-8"/>
    </head>
    <body>
        <h1>2024.01.22</h1>
    <input type='text'/>        <!--input标签是输入框，属性值text是文本框，password是密码框-->
	<input type='password'/>
	<big><i>张三</i></big>       <!--big标签是大号字体，i标签是斜体-->
    </body>
</html>

到了这里，关于前端必备知识--HTML精讲的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！