HTML5学习笔记

最新推荐文章于 2023-01-12 15:14:08 发布

Arlisol

最新推荐文章于 2023-01-12 15:14:08 发布

阅读量488

点赞数 4

分类专栏： Web前端文章标签： HTML HTML5 Web前端学习笔记

本文链接：https://blog.csdn.net/Dg_Zing/article/details/85246356

版权

Web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本学习笔记是博主根据视频内容的总结提炼以及自己的见解所写，视频地址: https://www.bilibili.com/video/av10298843

HTML5学习笔记

第一章 HTML5简介
第二章 HTML基础详解

第一章 HTML5简介

一.了解HTML

1. 什么是HTML？

HTML是用来描述网页的一种语言
HTML指超文本标记语言(Hyper Text Markup Language)
HTML不是编程语言，是一种标记语言

2. HTML版本

版本	年份
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML 5	2012
XHTML 5	2013

二.HTML5相关知识

1. 学好HTML5要学好以下知识

HTML
XHTML
CSS
CSS3
JavaScript
JQuery
HTML5

三.HTML5的新特性

用于绘画的canvas标签
用于媒介回放的video和audio元素
对本地离线存储的更好支持
新的特殊内容元素
如:article、footer、header、nav、section
新的表单控件
如:calendar、date、time、email、url、search
浏览器的支持
Safari、Chrome、Firefox以及Opera包括IE9基本支持了HTML5

第二章 HTML基础详解

一.HTML声明

HTML使用<!DOCTYPE>声明，不同版本的HTML声明方式也不同。如下所示:

HTML 5:
<!DOCTYPE html>
HTML 4.01:
<!DOCTYPE HTMLPUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
XHTML 1.0:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

二.HTML基础标签

1. <head>
<head> 标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

<head> 标签可包含下列标签:

<base> 为页面上的所有链接规定默认地址或默认目标
<link> 定义文档与外部资源的关系，最常见的用途是链接样式表
<meta> 可提供有关页面的元信息，永远位于文档的头部，不包含任何内容，它的属性定义了与文档相关联的名称/值对
<script> 用于定义客户端脚本
<style> 用于为 HTML 文档定义样式信息
<title> 可定义文档的标题(是<head>标签中唯一要求包含的东西)

2. <body>
<body>标签用于定义文档的主体，可包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

下面是一个html5文件的基本结构:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

其中，
<html>标签告知浏览器其自身是一个 HTML 文档，lang属性规定了元素内容的语言。例:en表示英文，zh表示中文
<head>标签中的<meta>标签规定了 HTML 文档的字符编码格式，本例中为UTF-8。<title>标签定了文档的标题，显示在网页中的这个位置:
title

三.HTML标题

HTML提供了<h1> <h2> <h3> <h4> <h5> <h6>共6种标签用来定义标题，每种标签的使用效果各不相同，我们可以根据自己的需求使用不同的标签来定义自己的标题。

<body>
    <h1>这是一个h1标题</h1>
    <h2>这是一个h2标题</h2>
    <h3>这是一个h3标题</h3>
    <h4>这是一个h4标题</h4>
    <h5>这是一个h5标题</h5>
    <h6>这是一个h6标题</h6>
</body>

四.HTML段落

<p>标签用于定义段落

<body>
    hello
    <p>这是一个段落</p>
    world
</body>

注:<p>标签会定义一段文字，无论在<p>之前还是之后添加其他内容都会另起一段。

五.HTML链接

<a>标签用于定义链接，必须提供 href 属性或 name 属性

<body>
    <a href="https://www.baidu.com/">百度</a>
</body>

其中，
href属性用于指定超链接目标的 URL，可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。
两个<a>标签之间的部分是显示在网页上的内容。

六.HTML图像

<img>标签用于定义图像，它有两个必需的属性:src属性和alt属性。
src规定显示图像的 URL,alt规定图像的替代文本。

<body>
    <img src="images/touxiang.jpg" alt="头像">
</body>

正常显示图像:
image正常

如果无法显示图像，浏览器将显示替代文本:
image不正常

未完待续~

Arlisol

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习笔记

HTML5学习笔记HTML5简介了解HTMLHTML5相关知识HTML5的新特性HTML基础详解HTML5简介了解HTML1. 什么是HTML？HTML是用来描述网页的一种语言HTML指超文本标记语言(Hyper Text Markup Language)HTML不是编程语言，是一种标记语言2. HTML版本版本年份HTML1991HTML+199...
复制链接

扫一扫