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

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>

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

 <!-- 我是本次分享的结束语!下次再见鸭~ -->
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页