jck28 - 小柒 - HTML5 学习

学习笔记
1

一，简介

1.1 定义说明

  • 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

1.2 完整的HTML页面

image
image1462×764 88.1 KB

  • <!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文件

    image
    image1004×547 26 KB

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

    image
    image945×709 27.8 KB

  • （5）浏览器运行效果如下：

    image
    image904×328 9.74 KB

三，HTML基础

3.1 HTML 标题

3.2 HTML 段落

3.3 HTML 链接

3.4 HTML 图像

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

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>