html学习01-优快云博客

本文链接：https://blog.youkuaiyun.com/lhxwished/article/details/134128481

本文介绍了HTML的基本概念，包括其起源、在Web中的角色，以及HTML5的结构。详细讲解了DOCTYPE声明、HTML、head、body等核心标签，区分了块级和行内标签，并展示了常用标签如p、b/strong、i/em、u/ins等的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是HTML？

HTML来源于 Hypertext Markup Language(通文本标记通言)的首字母缩写，是用于架构和呈现网页的一种标记语言，也是万维网（World Wide Web）上应用最广泛的核心语言。它使用标签的形式将网页内容划分出结构层次。HTML还使用超文本链接（简称“超链接”)将网络上不同的Web资源进行关联，任何页面上的文字或图片都可以被指定为超链接，点击后可以跳转到相关联的其他Web资源页面。目前HTML标准由W3C组织（注：其全称为World Wide WebConsortium，是万维网最具权威和影响力的国际技术标准机构）进行维护。

HTML5点基本结构：

<！DOCTYPE html>
<html>
  <head>
     <mate charset="utf-8">
     <title>网页标题</title>
  </head>
  <body>
   主体内容
  </body>
</html>

快捷键

Ctr + / ——>注释

<！--注释内容--> 作用是提醒自己还在帮助其他人了解该部分的作用和内容，不会显示在浏览器中

<!-- 这是注释-->

html：5 + Tab

！+Tab

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

HTML基础标签

html表示网页的开始
DOCTYPE文档的声明
mete提供了网页的信息，包括作者、关键字、网页编码、自动刷新等
head表示头部的开始
title表示网页的标题，标题内的文本内容显示在浏览器的标题栏
body表示正文部分的开始

块标签：占据一行，没什么内容也占一行标准块标签：div、p、hr、hn

行内标签：内容有多少就占多少（标准行内标签：span）br、b/strong、i/em、u/ins、del、sub、sup等

标签，段落标签，自带换行功能（段落对齐属性align "left，center，right"左对齐，居中对齐，右对齐）（修饰字体font "color+颜色值"）

<！DOCTYPE html>
<html>
  <head>
     <mate charset="utf-8">
     <title>网页标题</title>
  </head>
  <body>
   <p>严浩翔什么时候发EP</p>
   <p align="center">严浩翔马上要发EP了！</p>
   <p font color="#CCC">明天什么时候上课</p>
  </body>
</html>

标签，字体变粗


	<p>严浩翔</p>
	<p>三点半结束工作后往家里赶</p>
	<b>严浩翔</b>
	<strong>三点半结束工作后往家里赶</strong>

加斜文本

    <p>三点半结束工作后往家里赶</p>
	<hr />
	<i>三点半结束工作后往家里赶</i>
	<em>能不能够拒绝她邀约</em>

/<ins>文字加下划线

    <p>能不能够拒绝她邀约</p>
	<hr />
	<u>虽然我不觉得有威胁</u>

<del>删除线

<del>我肯定她没有我体贴</del>

换行

	<p>能不能够拒绝她邀约</p>
	<p>我经历过最幸运的事<br />一定是你的出现<br />城市茫茫人海恍然与你擦肩</p>

<hr>水平分割线

	<p>能不能够拒绝她邀约</p>
	<p>我经历过最幸运的事<br />一定是你的出现<hr />城市茫茫人海恍然与你擦肩</p>

<pre>预格式化段落，原样输出内容

    <pre>
	我经历过最幸运的事
	一定是你的出现
	城市茫茫人海恍然与你擦肩
	</pre>

标准行内标签，修饰文本，可以在css中写属性；
<div>标准块标签，布局页面，可将网页分割成不同的独立部分；

    <span>能不能够拒绝她邀约,虽然我不觉得有威胁</span>
	<div>我经历过最幸运的事</div>
	<div>一定是你的出现城市茫茫人海恍然与你擦肩</div>

上标
下标

	a <sup>2</sup>=9 <br />
	a <sub>1</sub>=1

<hn>标题标签，一共6级，h1、h2.....h6

	<h1>能不能够拒绝她邀约,虽然我不觉得有威胁</h1>
	<h2>能不能够拒绝她邀约,虽然我不觉得有威胁</h2>
	<h3>能不能够拒绝她邀约,虽然我不觉得有威胁</h3>
	<h4>能不能够拒绝她邀约,虽然我不觉得有威胁</h4>
	<h5>能不能够拒绝她邀约,虽然我不觉得有威胁</h5>
	<h6>能不能够拒绝她邀约,虽然我不觉得有威胁</h6>