HMTL基础学习之基础篇

文章目录

HMTL基础学习之基础篇

1. HTML 的结构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页结构介绍</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

解释：

<!DOCTYPE html> 在网页的开头第一句，必须声明；现在常用的声明方式为：<!DOCTYPE html>（声明为：HTML5 文档）
<html> 元素是 HTML 页面的根元素，所有的网页内容都包含在<html>标签内；
<head> 网页的头部，包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>和<base>。后面详细介绍；
<title> 定义网页的标题
<body> 定义网页的内容
<h1> 网页中的元素，标识标题；
<p> 网页中的元素，标识段落；

上面例子的图示（图中白色部分为网页的内容）：
在这里插入图片描述

2. HTML 基础

标签：在网页中用一对尖括号来声明标签（如：<h1> </h1>），通常情况下，标签需要成对出现；当然也有一部分标签只需要一个就可以，我们称之为自闭合标签，例如：<meta charset="utf-8">
大小写：在网页语言中，对大小写是不敏感的，但是推荐使用小写；因为未来的网页，强制使用小写；
查看网页源码：只要我们可以看到的网页，我们就可以在网页中查找源码；方法为：在网页单击鼠标右键，然后选择：“查看网页源代码”（IE & Chrome）；
浏览器：推荐使用Chrome浏览器，因为Chrome浏览器对于网页的解析规则更为通用，是编程者的首选；
开发工具：推荐使用Hbuilder & VScode & Pycharm，以上三款软件编写网页代码都很不错，除此之外还有：Sublime Text，Notepad++；

3. HTML 结构标签

以下三个标签用于声明网页类型 & 表明网页结构；

标题标签	说明
`<!DOCTYPE html>`	声明网页类型，网页的第一句
`<head></head>`	网页的头部，详细参考head标签内容
`<body></body>`	网页的可视部分，详细参考body 标签内容

3.1 head 标签

<head> 标签包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

扫描二维码关注公众号，回复： 11940116 查看本文章

标题标签	举例	说明
`<title>`	`<title>网页名称</title>`	定义了不同网页的标题，在浏览器的标签中显示；收藏夹中的标题；搜索引擎搜索的网页名；
`<base>`	`<base href="http://123.com" target="_blank">`	定义了基本的链接地址/链接地址，该标签作为HTML网页中所有的链接标签的默认链接地址；左例中，所有链接标签的默认地址为：http://123.com
`<link>`	`<link rel="stylesheet" type="text/css" href="cssstyle.css">`	定义了网页与外部资源的关系，常用于连接到CSS样式文件；
`<style>`	`<style type="text/css">` `body {background-color:yellow}` `p {color:blue}</style>`	定义了HTML文档的样式文件引用地址；也可以直接添加样式来渲染 HTML 文档;
`<meta>`	参考下方	META 标签用于指定字符集，网页的描述，关键词，文件的最后修改时间，作者和网页刷新时间。
`<script>`	一般会添加到网页末尾	用于添加脚本文件，最常见为： JavaScript脚本语言

<meta>标签的使用，分别定义了：关键词，描述，作者，刷新时间：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="微博 教学 免费">
<meta name="author" content="张凯">
<meta http-equiv="refresh" content="30">    <!--每三十秒刷新一次-->
<meta charset="utf-8">     <!--指定字符集，使用utf-8编码-->

4. 四大基本标签介绍

4.1 h 标签——标题标签

标题标签一共有6级，分别为 <h1> - <h6> ，其中：<h1> 定义最大的标题。 <h6> 定义最小的标题。
用户可以通过标题标签快速浏览网页，所以需要用标题来体现网页的结构；当只是需要黑体或者大字号时，使用css进行修饰，必要使用标题标签；演示如下：

标题标签	效果演示
`<h1>我是h1</h1>`	我是h1
`<h2>我是h2</h2>`	我是h2
`<h3>我是h3</h3>`	我是h3
`<h4>我是h4</h4>`	我是h4
`<h5>我是h5</h5>`	我是h5
`<h6>我是h6</h6>`	我是h6

4.2 p 标签——段落标签

p标签用于定义段落；例如：

<p>钟鼓馔玉不足贵，但愿长醉不愿醒。古来圣贤皆寂寞，惟有饮者留其名。 </p>
<p>钟鼓馔玉不足贵，<br>但愿长醉不愿醒。<br>古来圣贤皆寂寞，<br>惟有饮者留其名。 </p>

输出（其中 <br> 用于换行）：

钟鼓馔玉不足贵，但愿长醉不愿醒。古来圣贤皆寂寞，惟有饮者留其名。

钟鼓馔玉不足贵，
但愿长醉不愿醒。
古来圣贤皆寂寞，
惟有饮者留其名。

4.3 a 标签——链接标签

HTML中，用a标签来定义链接，基本语法如下：

<a href="https://www.baidu.com/" target="_blank">我是链接!</a>

上述代码的效果：我是链接!

说明：

href: 链接的地址；
target: 如何打开链接；常用：_self（默认）在当前标签打开链接；_blank 在新标签打开链接；

备注：以上是a标签的基本用法；除了可以在文本上添加链接，我们还可以在图片上添加链接，可以通过链接跳转到页面制定位置，可以添加发送邮件的链接，这些会在 < a 标签的使用> 中详细讲解；

4.4 img标签——图像标签

HTML中，用 img 标签来定义链接，基本语法如下：

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度网址" width="200" height="100">

上述代码的效果：百度网址

说明：

src：图片的地址；
alt：图片没有找到时，显示的问题；
width：图片的宽度
height：图片的高度

5. 其他常用标签

标签	说明	效果演示
`<hr>`	在 HTML 页面中创建水平线
`<br>`	类似于网页中的回车键，用于段落中的换行
`<!-- 这是一个注释 -->`	注释	注释内容不会在网页中显示
` `	表示空格，虽然不是标签，但是很常用；	这里有两个空格