“kok电竞官网平台”我的Java Web之路11 - 初识HTML

本文摘要：本系列文章旨在记载和总结自己在Java Web开发之路上的知识点、履历、问题和思考，原来已经分享在我的CSDN博客，现在分享在头条，希望能资助更多码农和想成为码农的人。

本系列文章旨在记载和总结自己在Java Web开发之路上的知识点、履历、问题和思考，原来已经分享在我的CSDN博客，现在分享在头条，希望能资助更多码农和想成为码农的人。版权声明：本文为CSDN博主「普通的码农」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/liyongyan1202/article/details/89064944目录先容焦点思想基本结构文本信息链接表单总结先容前面的文章多次使用到了HTML（HyperText Markup Language，中文就是超文本标志语言）。这门语言可以使用任何的文本编辑器举行编写，写出的文档就是网页，只要将文件名以后缀 .html 末端，浏览器就可以解释该文档，并以一定的花样出现出来。

HTML是Web前端三剑客之一，主要是卖力数据的结构、框架或骨架，表现哪些数据是标题啊、主体啊、导航啊、链接啊、表格啊、段落啊、图片啊、音频、代码啊等。简而言之，就是表现数据是什么。焦点思想HTML的焦点思想很简朴，就是给你的信息打标志，举个例子：<这是一篇文章><这是标题>XX爆炸性新闻<这是段落>某年某月某日，某某发生某事。

<这是段落>其他事情。尖括号 < > 及其内里的词就是标志或者标签，只不外HTML尺度内里用的是英文单词，我这只是用中文的词来说明这个思想。标志有开始标志和竣事标志，竣事标志内里多一个正斜杠，就是 。真正的信息（就是要出现给用户看的）就写在开始标志和竣事标志之间，这就是标志的内容。

有时候没有内容，开始标志和竣事标志可以合二为一，酿成 < /> ，就是把正斜杠写到右尖括号前面，或者省略正斜杠。标志及其内容合起来叫做元素，好比例子中的开始标志<文章>和竣事标志及其之间的内容就是一个元素。可以看到元素可以嵌套，就是元素内里的内容可以再次包罗元素，不外开始标志和竣事标志要注意遥相呼应，事实上，编写的时候可以接纳缩进来增加条理感且不易堕落。

元素另有属性，属性可以有属性值，也可以没有，这些后面再讨论。这里要提到的是一个编写规范，不管是标志、属性还是值，习惯上都接纳英文小写单词用连字符（就是短横线、减号）相连。表单中的需要发往Web服务器的数据可以使用后端的开发规范。每一个元素都可以设置一个id属性，其值必须在该网页中是唯一的。

现在HTML的版本是HTML5，大多数浏览器版本都支持大部门常用的特性。再次强调，HTML的主要思想就是给你的信息打标志，这些标志表现数据的结构、框架或骨架，就是语义，至于数据如何出现（好比出现在哪个位置，什么颜色、字体、配景等等）和动态行为是由CSS（层叠样式表，Cascading Style Sheets）和JavaScript来卖力。它们都由浏览器来解释执行。

基本结构HTML5的网页基本都有如下结构： 可以看到，基本结构就是由种种标志组成的，只不外标志使用的是英文单词，而且这些标志都是尺度化（这样各家浏览器都能识别）了的，浏览器必须识别它们。这些标志也很语义化（这样人类能容易识别，便于开发和维护网页），基本上都是使用语义相对应的英文单词或缩写，这也是天经地义的，便于影象和使用嘛。基本结构内里包罗以下几点：第一行的DOCTYPE声明晰本网页是HTML5网页，凭据HTML网页的编写规范，基本上这个词是网页文档中唯一的大写单词；元素：所有信息都包罗在这个元素内里，没什么可说的，不外该元素有一个属性lang，在这个网页中，我把它的值设置为zh-cmn-hans，就是说本网页的语言是是简体中文，关于语言的编码，也是相当庞大，有专门的尺度，这里暂且不说；元素：它必须是元素内里的第一个元素。

它内里的信息除了下面的

这是一级标题

这是一级标题

这是一级标题

这是一级标题

这是一级标题

这是一级标题

我特地把这些信息两个一行来写，看看浏览器是怎么处置惩罚的：可以看到，浏览器会把各级标题的字体巨细显示的不太一样，一级标题最大，六级标题最小。大多数浏览器都市这么处置惩罚。

那么问题来了，不是说HTML只卖力信息的语义，不卖力信息是如何展示的吗？话虽如此，给差别语义的信息来个默认的展示效果，不就省的我们还要再写信息如何展示的代码了嘛。这又再一次体现了契约优先（本质就是由默认值）的思想。这就是说我们还是可以修改这些各级标题是如何展示的，好比字体、颜色等等，这就要用到CSS了。

注意，浏览器可以关闭CSS和JavaScript，就是让这两个技术不起作用，从这个角度看，给标志设置默认的展示效果也有这方面的原因。虽然标志有默认的展示效果，但我们一定不能为了获得这些类似的展示效果而强行给某些信息打上标志，而是应该使用CSS去获得这些展示效果。好比，不能为了加大字体就强行把不是标题的内容打上

标志，这应该交给CSS去做，是否打上标志（n代表1、2、3、4、5、6）应该思量该内容在语义上是否是标题！第二点很重要的是，明显代码内里两个标题一行，为何浏览器展示的效果确是每个标题占一行？这是因为HTML划定了某些标志有个作用，浏览器遇到它就必须另起一行来展示，有这个作用的标志就叫块级标志，没有这个作用的就是行级标志（不知道是否可以这么划分，通常的划分方式是块级标志是内里可以嵌套其他标志的，行级标志是内里不行以嵌套其他标志的）。

事实上，HTML划定文本内里的花样（缩进、换行、多个一连的空格等等）都没用，浏览器会把这些花样压缩成一个空格。好比下面的代码实际展示的是一行：这是第一段。这是第二段。

这是第三段。展示效果成了：这是第一段。这是第二段。这是第三段。

除了表现标题的标志以外，另有其他许多作用于文本，甚至是整个语义上的结构的标志，下面仅仅使用一段代码来展示比力常用的标志，不做过多解释说明。

这里是网页的页眉，内里可以有导航

这里是主体的页眉，可以有主体的导航/目录、先容等等

这里是先容

这里是第一篇文章

这里是段落一

这里是段落二

。

这里是第二篇文章

这里是第二篇文章的第一部门

与上面类似

这里是第二篇文章的第二部门

与上面类似

涉及到结构的标志有：

：页眉

：主体