jck28 - 小柒 - HTML5 学习

一,简介

1.1 定义说明

  • 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

1.2 完整的HTML页面

  • <!DOCTYPE html> 声明为 HTML5 文档,该声明不区分大小写
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

1.3 最基本的HTML页面代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>hello 菜鸟!!</h1>
<p>百度一下</p>

</body>
</html>

二,HTML 编辑器

2.1 编辑器推荐下载

2.2 VS Code安装

  • (1)VS Code安装教程:VScode 教程 | 菜鸟教程

  • (2)安装完成后,推荐下载对应的插件

    • Chinese:汉化包,支持中文
    • “open in browser” :在vscode中支持浏览器打开HTML
    • Live Preview :实时预览编写的代码
  • (3)新建文件,然后输入代码,并将文件另存为HTML文件

  • (4)在资源管理器选择对应的文件夹,找到新建的HTML文件,在文件处点击右键,选择“open In Default Browser ” 默认浏览器打开:

  • (5)浏览器运行效果如下:

三,HTML基础

3.1 HTML 标题

3.2 HTML 段落

3.3 HTML 链接

3.4 HTML 图像

  • HTML 图像是通过标签<img>来定义的.
  • src 为图片的路径,当图片与HTML文件不在同一个目录下,需要填写对应的完整路径

3.5 代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<img src="341c8ca1d13d04f64caa87aca1bbc551.jpeg" width="200" height="200" />
 
<h1>天宫一号</h1>
<h2>天宫二号</h2>
<h3>天宫三号</h3>
<h4>天宫四号</h4>
<h5>天宫五号</h5>
<h6>天宫六号</h6>
 
<p>百度一下</p>
<!-- <p>神来之笔</p> -->

<a href="https://www.runoob.com"> 菜鸟Runoob</a>

</body>
</html>

四,HTML属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:链接由 <a> 标签定义。链接的地址在 href 属性中指定
<a href="http://www.runoob.com">这是一个链接</a>