HTML基础-关于语法结构的学习笔记

最新推荐文章于 2024-07-15 07:00:00 发布
最新推荐文章于 2024-07-15 07:00:00 发布
阅读量291 收藏 1
点赞数
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LAN2X/article/details/108785361
版权
本文介绍了HTML的基础知识，包括HTML5的基本格式、文件扩展名、文本结构、标签构成、标签语法以及注释和头部设置。通过示例展示了如何创建一个简单的HTML页面，强调了HTML标签的规范使用。
摘要由CSDN通过智能技术生成

HTML

初识HTML

  • HTML（HyperText Mark-up Language），是超文本标记语言，不是编程语言。
  • 超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成。
  • 用该语言制作的文件保存的是一个文本文件，扩展名为.html或.htm
  • html文档也叫Web页面，即一个网页。
  • html文件用编辑器打开显示的是文本，可以用文本方式进行编辑
  • 用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，网页中的链接可以跳转到另外一个网页

让我们直接从HTML5.0开始这段学习之旅吧~

HTML5基本格式：

<!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--网页标题-->
    <title>TestPage</title>
</head>
<body>
    <!--正文内容-->
    Hello！Welcome to My TestPage！
</body>
</html>

网页展示：
在这里插入图片描述

HTML基本语法

  • HTML⽂件的扩展名为 .html 或者 .htm
  • HTML⽂本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部分提供关于网页的信息， “主体”部分提供网页的具体内容
  • HTML是由： 标签 和 内容 构成, 每个HTML页面都有两部分构成(head头和body体)，最外层是由 <html>...</html>标签包裹起来
  • HTML标签（标记）的语法是由 < 和 > 括起来。
  • HTML标签有两种： 双标签 ： <标签名>…</标签名> 和 单标签 ： <标签名 />
  • HTML标签中还可以添加属性： <标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>....</标签名>
  • HTML标签规范：标签名小写、属性使用双引号、标签要闭合。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>⽹⻚标题</title>
<!-- 此处可以写各种⻚页头属性设置、 CSS样式和JavaScript脚本等... -->
</head>
<body>
	⽹⻚显示内容
</body>
</html>

HTML注释：

 <!-- 我是HTML唯一的注释 -->

HTML中head头部设置：

  • head标签作用于网页的头部，它的内容不会在正文中显示出来，主要用于完成对当前页面的设置
  • 在head中常包含如下 子标签：
标签描述示例
<title>定义文档标题网页标题：<title>网页标题</title>
<base>定义页面链接标签的默认链接地址<base href="http://www.****.com/" target="_blank">
<link>定义一个文档和外部资源之间的关系导入css文件：<link type="text/css" rel="stylesheet" href="**.css"/>
<meta>定义HTML文档中的元数据设置网页编码、关键字、描述 ：<meta charset="utf-8"/> <meta name="Keywords" content="关键字" /> <meta name="Description" content="简介、 描述" />
<script>定义客户端的脚本文件<script > JavaScript脚本程序 </script>
<style>定义HTML文档的样式文件<style type="text/css"> 嵌入css样式代码 </style>

具体示例如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>网页标题</title>
		<meta name="Keywords" content="关键字" />
		<meta name="Description" content="简介、描述" />
		<link type="text/css" rel="stylesheet" href="**.css"/>
	<style type="text/css">
		嵌入css样式代码
	</style>
	<script >
		JavaScript脚本程序
	</script>
	</head>
	<body>
		<h3>网页显示内容</h3>
	</body>
</html>

——————————————————————————————————————

 <!-- 我是本次分享的结束语！下次再见鸭~ -->
iHLAn
关注
专栏目录
一、Html常用标签(标题、段落、文本格式化、图像、列表、表单)
weixin_51736742的博客
12-02 505
标题标签（共六级） 在这里插入代码片 ```<h1>标题标签</h1> <h1>标题一共六级选</h1> <h2>文字加粗一行显</h2> <h3>从大到小依次减</h3> <h4>从重到轻随之变</h4> <h5>语法规范书写后</h5> <h6>具体效果刷新见</h6> 段落标签
HTML 标题 h1~n 标签与段落 p 标签
qq_34028001的博客
01-17 2118
HTML 标题h1~n标签 html 标题可直接类似于一篇文章中的大标题小标题之类的存在，用于搜索引擎使用标题为您的网页结构和内容编制索引，通过序号来改变标题大小，当然标题也是一个元素，可以通过修改标签属性值来改变元素。 ...
标题标签与段落标签
seekwhale13的博客
06-20 209
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
一. 标题标签，段落标签，换行标签
qq_38914344的博客
03-23 477
默认代码解释 <!DOCTYPE html> 文档类型声明 <html lang="en"> 英文网站，可以使得浏览器调用翻译功能 <head> <meta charset="UTF-8"> 编码格式 <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i
08-常用标签（标题、段落、换行、加粗、斜体、下划线）
qq_36352716的博客
01-19 1368
1、标题标签<h1>~<h6> 特点：加了标题的标签自动加粗，h1-h6由大到小依次减，并且一个标题独占一样,如下图 2、段落标签<p></p> <p></p>标签用于定义段落，段落标签中的文本会根据浏览器窗口的大小进行自动换行 3、强制换行标签</br> 属于单标签，一般在段落内使用 4、文字加粗、倾斜、删除线、下划线 <strong>我是加粗文字</strong...
HTML总结1(标题标签、段落标签、换行标签）
lzwlm53的博客
01-21 385
HTML中我认为学的东西并没有很多，主要记住每个标签的用法以及含义。 首先是字符集、标题标签、段落标签、换行标签、文本格式化标签。 <!DOCTYPE html> <!-- <!DOCTYPE>文档类型声明，作用是高速浏览器使用哪种HTML版本显示，第一行 --> <html lang="en"> <head> <meta charset="UTF-8"> <!-- UTF-8万国码 --> &lt
javascript基础语法学习笔记
11-23
2. **DOM（Document Object Model）**：这是一个树状结构，用于表示HTML或XML文档，提供了一套接口，使得程序可以操作网页内容，如添加、删除或修改元素。 3. **BOM（Browser Object Model）**：浏览器对象模型，...
HTML学习笔记--HTML的语法详解(必看)
09-28
HTML是超文本标记语言（HyperText Markup Language）的缩写，它是一种用于创建网页的标准标记语言...在学习HTML的过程中，除了了解基础的标签和属性，还应该掌握如何通过这些基础元素构建出更加丰富和复杂的网页结构。
《html学习笔记》基础结构
issa的博客
12-26 163
1. 举个例子 !DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ISSA(ISSA.com)</title><!--注释--> </head> <body> <h>标题</h> <p>段落</p> </body> </html> 2.html以开始标签 为起始
前端学习笔记-微信小程序学习笔记
01-09
前端学习笔记-微信小程序学习笔记 微信小程序是一种基于微信平台的轻量级应用程序，提供了前端开发的解决方案。本笔记总结了微信小程序的基本组成部分、JSON 配置文件的作用、WXML 模板语法、WXSS 样式语言、JS ...
HTML学习笔记——02：HTML的基本结构
qq_31532983的博客
12-01 1180
html骨架的标签与解释
HTML <div> 标签
weixin_37185584的博客
02-24 515
所有主流浏览器都支持 标签。 定义和用法 可定义文档中的分区或节（division/section）。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。 用法 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 固
html 时间
最新发布
m0_74358570的博客
07-15 829
html时间显示
[HTML]常用的文本标签(标题、段落、加粗、下划线等标签)
叶疏鸿的博客
07-03 1327
类型 写法 说明 标题 <h1></h1>.....<h6></h6> 加粗、独占一行(块级元素) 段落 <p></p> 开始新的段落(有换行功能) 换行 <br> 换新的一行 粗体1 <b></b> 普通加粗(使用优先级低) 粗体2 <strong></strong>
网页设计2-1标题和段落标签
qq_45130472的博客
06-24 607
<!doctype html> <html> <head> <meta charset="utf-8"> <title>标题、段落标签</title> </head> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <p>（1）软件系统能够与问题域进行交互
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2523
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
Html 语法学习笔记一
勿忘初心
07-06 1235
一、HTML文档的基本结构             HTML部分：每个HTML文档必须以打开HTML标记开始，以关闭HTML标记结束 说明其间内容为HTML格式文档。      HEAD头部分：此部分包含文档的标题、文档使用的脚本、样式表定义等信息，还可以包含搜索工具和索引所要的其他信息。头部分必须包含在 标记对中           其间包含的文字是该HTML的主题，会显示在窗口的TITLE栏
html常用标签之标题、段落和换行标签
卉卉灰灰的博客
06-29 2183
一、标题标签 为了使网页更具有语义化，在页面中经常会用到标题标签。HTML提供了6个等级的网页标题，即<h1> - <h6> 。 例如： <h1>我是一级标题</h1> 单词head的缩写，意为头部、标题。 标签语义：作为标题使用，并且依据重要性递减。 特点∶ 1.加了标题的文字会变的加粗，字号也会依次变大。 2.一个标题独占一行。 例如： <h1>标题一共六级选</h1> <h2>文字加粗一行显</h2> &l
html时间代码
02-27
html动态时间代码，可以获取系统时间在页面进行动态显示
时间插件html 时间插件html
04-16
一款好用的时间插件源代码
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值