HTML基础

最新推荐文章于 2024-09-05 21:31:46 发布

原创最新推荐文章于 2024-09-05 21:31:46 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #基础 #web #前端

web前端同时被 2 个专栏收录

15 篇文章

订阅专栏

HTML

3 篇文章

订阅专栏

一、HTML发展

HTML1.0-----1990年12月25日，蒂姆·伯纳斯·李，发明了HTML语言和HTTP协议。

HTML2.0-----1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时

HTML3.2-----1997年1月14日，W3C推荐标准

HTML4.0-----1997年12月18日，W3C推荐标准

HTML4.01-----1999年12月24日，W3C推荐标准

HTML5.0-----2014年10月28日，W3C推荐标准

二、HTML基础结构

<!DOCTYPE html>
<html>
<head>
    <title>基本HTML结构</title>
</head>
<body>
    <h1>我是一级标题</h1>
    <p>我是一段文本段落</p>
</body>
</html>

 <!DOCTYPE html>：文档声明，告诉浏览器使用哪个HTML版本进行解析，必写。

 <html></html>：顶级元素或者根元素

 <head></head>：放置页面的通用信息（元数据：文件名、创建时间、修改时间。。。），

 <body></body>：放置页面内容

三、HTML元素

1、元素结构

元素=开始标签+内容+结束标签。

部分元素没有结束标签，如:<img src="image.png" >

元素有属性，属性结构：属性名="属性值"，

上面的img元素的src="image.png"就是属性

2、常用元素（标签）

<html></html>：顶级元素或者根元素

<h1></h1>....<h6></h6>：标题heading

<p></p>：段落paragraph

<img></img>：图片image

<a></a>：链接anchor

<ol><li></li></ol>：有序列表 order list

<ul><li></li></ul>：无序列表 unorder list

<div></div>：分区，分部，division

<span></span>：范围 span

3、head元素

<head></head>:

描述网页基本信息。
指向渲染网页需要的其他文件链接
各大厂商根据自己的需要定制

4、元素注释

:注释标签，用来注释接下来的HTML代码

5、块级元素和行级元素

块级元素：默认占据整行宽度，有：p，div，h1~h6，ul，ol，li……

行级元素：同行显示，默认宽度由内容决定。有：a，span，img，em……

四、HTML嵌套

嵌套结构：

<父元素>

<子元素></子元素>

<子元素></子元素>……

</父元素>

<!DOCTYPE html>
<html>
<head>
    <title>基本HTML结构</title>
</head>
<body>
    <h1>我是一级标题</h1>
    <p>我是一段文本段落</p>
</body>
</html>

以上代码中，有3个嵌套：html元素嵌套，head元素嵌套，body元素嵌套。

五、HTML树

下图解释了HTML树的组成：