526互联

HTML学习笔记一：html简介和基本结构

发布时间 2023-12-05 17:43:47作者: yysocket

HTML学习笔记一

一、什么是HTML？

众所众知，我们打开的网页是一个一个的HTML，网页静态的结构是由html完成，而各式各样的表现样式是由css完成，至于网页与服务器之间的交互行为则都交给了javascript完成。

HTML和CSS本质都是结构化、标准化的语言，用于定义页面结构，样式渲染。不得不提的就是W3C标准，W3C标准即万维网联盟标准，是一系列的标准集合，目前主要有W3C在制定维护更新html和css的标准。

版本上html主要分为html4和html5，而目前使用的基本都是html5的标准。
HTML和CSS的标准，我们可以从两个官方的网站进行了解并学习。

1、W3school： https://www.w3school.com.cn/
2、MDN: https://developer.mozilla.org/zh-CN/

推荐MDN为优先。

二、HTML的定义和组成

按照MDN标准的官方解释：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。
HTML是一种用于定义web网页内容结构的标记语言，而非一种编程语言。它由一些列的元素组成的标记语言，比如头head，体body，标题h1，段落p，图片img，超链接a，表单form等等。

HTML元素

元素构成如下图（引自MDN）
Pasted image 20230325123815.png

元素的组成：

  1. 元素体
  2. 开始标签<>: 包括标签名
  3. 内容：可以是任意的文本
  4. 结束标签</>: 包括标签名

在标签内部还可以填写元素的属性。见下图（引自MDN）
Pasted image 20230325130329.png

元素属性的组成：

  1. 属性名
  2. 属性值
    元素的属性是一组key-value的名值对，不同的属性名和不同的属性值均表示不同的属性含义。
    常见的有：
    class：属性类名
    id：属性id名，html体中唯一
    name：属性名
    value：属性默认值

尤其要注意的是，并不是所有的标签都有一样的属性名，也不是所有的属性名都同样的属性值。

三、一个HTML网页的基本构成

我们在浏览器中，通过右键-检查都可以看到任何一个可以打开浏览的网页html的基本结构。
但是大部分的网页相对都是比较复杂的，上线的网页基本都经过了，html结构编写，css样式渲染，dom操作等。
那最基础的一个html结构是怎样的？

下面我们写一个最基础的html：
创建一个demo.html
然后写入：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Style-Type" content="text/css">
		<title>演示网页</title>
		<meta name="Generator" content="Cocoa HTML Writer">
		<meta name="CocoaVersion" content="2113.4">
		<style type="text/css">
			p.p1 {
				margin: 0.0px 0.0px 0.0px 0.0px; 
				font: 12.0px Helvetica
				}
		</style>
	</head>
	<body>
		<p class="p1">hello world</p>
	</body>
</html>

可以看到一个基础的html结构：

  • 声明文档类型：
    h5标准: <!DOCTYPE html>
  • html标签：
    根元素，所有的html内容都需要在一个html的标签内进行编写，跳出html将不被浏览器识别
    <html> </html>
  • head标签：
    html的头域元素容器，不在浏览器中展示，在头域中可以填充一下元素：
    • meta：元信息，网页基础信息，包括网页字符编码格式，SEO关键字，网页作者信息等
    • title：网页标题
    • link：外部css样式
    • style：css样式内联样式写法
    • script：JavaScript代码
  • body标签：
    html的body元素容器，包含了网页的主要内容，访问html时会显示body中的所有元素，包括文字，图片，视频等。
    body内的元素众多，是html真正内容的部分，后续继续学习。

四、html的语义化

语义化是html标签的重中之重，也是标签属性值定义的重中之重。
在编写html结构时候，一定要遵循标准，使用语义化标签来标识对应的结构。
比如：
* h1: 浏览器便知道是大标题
* p: 浏览器便知道是段落
* span：浏览器便知道是无意义的文本聚合标签
* strong：浏览器便知道此处要着重处理

同时在自定义属性值，比如class，name，id时也要遵循语义化。

五、html的注释方式

  • 单行注释：
  • 多行注释：

未完待续。。。