HTML 入门指南-平芜编程栈

一、什么是HTML

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页结构和内容的标准标记语言。它通过一系列标签（如<p>、<h1>、<a>等）来定义网页中的标题、段落、链接、图片等元素，是构成万维网的基础技术之一。

二、HTML标签

1.标签又称“元素”，是HTML的基本组成单位

2.标签分为双标签和单标签（小写规范）

3.标签之间可以嵌套、并列

双标签：<标签名>标签体</标签名>

单标签：<标签名/> (/可以省略)

<marquee>学好技术</marquee>

<input>

三、HTML标签属性

1.用于给标签提供附加信息

2.写在起始标签和单标签中

双标签：<标签名属性名="属性值" 属性名="属性值">标签体</标签名>

单标签：<标签名属性名="属性值" 属性名="属性值">

注意：存在特殊标签，只有属性值，没有属性名

标签中不要出现同名属性，后面的会失效

四、HTML标准结构

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text"> </body> </html>

<!DOCTYPE html>声明文档，告诉浏览器当前网页版本

<html lang="zh-CN">设置语言为简体中文

<title>Document</title>中document部分写标题

五、HTML注释

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- <input type="text"> --> </html>

就是HTML的注释，快捷键为Ctrl+/

六、HTML排版标签

h1~h6为标题标签

p为段落标签

div没有含义，用于整体布局

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML排版标签</title> </head> <body> <h1>我是一级标题</h1> <h2>我是二级标题</h2> <h3>我是三级标题</h3> <h4>我是四级标题</h4> <h5>我是五级标题</h5> <h6>我是六级标题</h6> <div> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> </div> </body> </html>

注意：h1最好写一个，h1~h6可以写多个

h1~h6不可以嵌套

p标签中不可以h1~h6、p、div标签

七、语义化标签

强调标签所包含文字的特定含义，默认效果不重要，后期可以通过CSS调整

八、常用文本标签

em：用于强调文本，默认显示为斜体效果。

strong：用于表示重要内容，默认显示为加粗效果。

span：无语义的行内标签，常用于对文本进行局部样式控制。

<body> <p> 预防电信诈骗，请安装：<em>国家反诈app</em> </p> <p> 当我们出门时，一定<strong>要关好窗</strong>。 </p> <p> 前端三个框架为：<span>angular、react、vue</span>。 </p> </body>

效果：

九、图片标签

img：用于在网页中插入图片，是单标签，常用属性如下：

src：图片路径（必填）
alt：图片加载失败时的替代文字
width / height：设置图片宽高

<img width="200" height="150" src="图片地址" alt="图片说明" >

十、块级元素与行内元素

HTML 中的元素按显示方式可分为块级元素和行内元素两大类，理解二者的区别有助于合理布局页面。

块级元素：独占一行，默认宽度占满父容器，可设置宽高，常用于搭建页面结构。常见块级元素有<h1>~<h6>、<p>、<div>、<ul>、<li>等。

行内元素：与其他行内元素在同一行显示，宽度由内容决定，不可设置宽高，常用于修饰文字。常见行内元素有<em>、<strong>、<span>、<a>等。

<body> <div>我是块级元素，独占一行</div> <p>我也是块级元素</p> <span>我是行内元素</span> <strong>我也是行内元素</strong> </body>

注意：块级元素可以包含行内元素，但行内元素不能包含块级元素。

开发者文档

以下为 HTML 学习相关的官方文档与参考资源：

MDN Web Docs：Mozilla 提供的权威 HTML 参考文档，涵盖标签、属性与示例。
W3C：万维网联盟，负责制定 HTML 等 Web 标准规范。
W3Schools：提供交互式在线教程与实例，适合快速上手练习。

常用快捷键

Ctrl+shift+k 删除行

Ctrl+enter 换行

Alt+shift+箭头当前行向下/上复制

作业

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>10.1_作业</title> <style> h2{ color:darkblue } h3{ color:grey } </style> </head> <body> <div align="center"> <h2>梅花</h2> <h3>2~4</h3> <img width="100" height="150" src="C2.png"> <img width="100" height="150" src="C3.png"> <img width="100" height="150" src="C4.png"> </div> <div align="center"> <h2>方片</h2> <h3>5~7</h3> <img width="100" height="150" src="D5.png"> <img width="100" height="150" src="D6.png"> <img width="100" height="150" src="D7.png"> </div>s <div align="center"> <h2>红桃</h2> <h3>8~10</h3> <img width="100" height="150" src="H8.png"> <img width="100" height="150" src="H9.png"> <img width="100" height="150" src="H10.png"> </div> <div align="center"> <h2>黑桃</h2> <h3>j~a</h3> <img width="100" height="150" src="SJ.png"> <img width="100" height="150" src="SQ.png"> <img width="100" height="150" src="SK.png"> <img width="100" height="150" src="SA.png"> </div> </body> </html>

效果

持续更新中ing~~