从零开始的HTML5之路（一）

最新推荐文章于 2023-09-02 22:42:10 发布
最新推荐文章于 2023-09-02 22:42:10 发布
阅读量198 收藏
点赞数
分类专栏： Web 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41867528/article/details/103542838
版权

从零开始的HTML5之路（一）

HTML5的优点

  1. 跨平台运行
  2. 硬件要求低
  3. flash之外的选择

HTML5的新特性

  1. 用于绘画的canvase标签

  2. 用于媒介回放的ivdeo和audio元素

  3. 对本地离线储存的更好支持

  4. 新的特殊内容元素

    如：article、footer、header、nav、section

  5. 新的表单控件

    如：calendar、data、time、email、url、search

Safari、Chrome、Firefox以及Opera包括IE9都支持HTML5。

学习HTML5需要掌握：HTML XHTML CSS CSS3 JavaScript JQuery HTML5

首先我们开始学习HTML。


HTML简介

  • HTML指的是超文本标记语言：HyperText Markup Language
  • HTML不是编程语言，而是标记语言
  • 标记语言是一套标记标签
  • HTML使用标记标签描述网页
  • HTML文档包含了HTML标签及文本内容
  • HTML文档也叫Web文档

HTML头文件

"<!DOCTYPE>"声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//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基础标签


HTML元素

​ HTML元素指的是从开始标签到结束标签的所有代码。

​ 例如

<a href="#">内容</a>

​ 其中“内容”就是< a>标签的元素。

HTML元素语法：

  • 元素的内容是开始标签与结束标签之间的内容

  • 空元素在开始标签中进行关闭

  • 大多数HTML元素可拥有属性

  • 大多数的HTML元素都是可以嵌套的。


    HTML属性

  1. 标签可以拥有属性为元素提供更多的信息

  2. 属性以键值对的形式出现。如：id=“id”。

  3. 常用标签属性：

    “< h1>”:align对齐方式

    “”:bgcolor背景颜色

    “< a>”:target规定在何处打开链接

  4. 通用属性

    class:规定元素的类名

    id:规定元素唯一的ID

    style:规定元素的样式

    title:规定元素的额外信息


HTML格式化
标签描述
< b>定义粗体文本
< big>定义大号字
< em>定义着重文字
< i>定义斜体字
< small>定义小号字
< strong>定义加重
< sub>定义下标字
< sup>定义上标字
< del>定义删除字
<p><b>段落</b>一</p>

在这里插入图片描述

​ 这里可以明显看到“段落”加粗了。


head标签

​ 元素包含了所有的头部标签元素。在元素中你可以插入脚本(scripts)、样式(css)、以及各种meta信息。

​ 可以添加在头部区域的元素标签为: ,

body标签

​ 标签定义文档的主题。其元素包含文档的所有内容。

HTML标题
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>

在这里插入图片描述
在这里插入图片描述

HTML段落

​ HTML段落是由

标签定义的。浏览器会自动在段落的前后添加空行。< p>标签是块级元素。

<p>段落一</p>
<p>段落二</p>

在这里插入图片描述

不会自己百度啊
关注
专栏目录
html从零开始，跟着博爱开始学习HTML5！.zip
01-01
html从零开始，跟着博爱开始学习HTML5！html从零开始，跟着博爱开始学习HTML5！ html从零开始，跟着博爱开始学习HTML5！html从零开始，跟着博爱开始学习HTML5！ html从零开始，跟着博爱开始学习HTML5！html从零开始...
《从零开始学HTML5+CSS3》中文PDF及配套代码.rar
05-31
《从零开始学HTML5+CSS3》是一本旨在帮助初学者掌握现代网页开发核心技术的教程。这本书包含HTML5和CSS3的详细讲解，以及配套的实战代码示例，覆盖了从基础知识到高级特性的全面内容。以下是针对这两个重要技术的...
HTML5简介
aizhen8632的博客
06-11 155
HTML5 是下一代的 HTML。 什么是 HTML5？ HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 HTML5 是如何起步的？ HTML5 是 W3C ...
从零开始学HTML 5
小小码农
02-19 709
1、所有的HTML文档必须使用类型声明开始：<！DOCTYPE HTML> 2、HTML文档本身以<html>开头和</ HTML>结束 ； 3、HTML标题用<H1>到<H6>标签；<h1>This is the first heading</h1> <h2>This is the second heading</h2> <h3>This is the third heading</h3>4、H
HTML 段落
Gino的专栏
09-15 483
可以把 HTML 文档分割为若干段落。 HTML 段落 段落是通过 标签定义的。 实例 This is a paragraph This is another paragraph浏览器会自动地在段落的前后添加空行。（ 是块级元素） HTML 折行 如果希望在不产生一个新段落的情况下进行换行（新行），请使用 标签： This isa paragraph with l
html5——前端笔记
最新发布
qq_48721706的博客
09-02 2395
html笔记
Java学习指南(5) 网页基础篇 HTML
08-21
一、课程简介『Java学习指南系列』的第5篇教程 ，是Java网站开发的前置课程，介绍网页制作基础知识 。(HTML / CSS / JavaScript )二、主要内容 * HTML 的基本用法* CSS 的基础用法* JavaScript 的基础用法，调试方法* jQuery 的用法三、课程体系〖Java学习指南系列〗：包含入门与进阶语法，Swing桌面开发，安卓开发，JavaFX开发，网络通信Socket，数据结构与算法等课程。〖网站开发系列〗：包含网页基础、网站入门、数据库、网站中级、FreeMarker、网站高级、项目应用、MyBatis、Redis等课程。
从零开始学HTML5+CSS3
05-28
从零开始学HTML5+CSS3.pdf
从零开始学习CANoe（一）—— 新建工程_蚂蚁小兵-CSDN博客_canoe新建工程.html
01-11
从零开始学习CANoe（一）—— 新建工程_蚂蚁小兵-CSDN博客_canoe新建工程.html
prototypePacman:从零开始HTML5游戏。 基于经典《吃豆人》的基本迷宫游戏
05-26
从零开始HTML5游戏。 原型吃豆人是一款基本的迷宫游戏，类似于经典吃豆人中的游戏。 我们的目标是通过步行改变整个步行路径的颜色（黑色方式）。 使用箭头键避免出现鬼影，并在迷宫中移动玩家。
html5鼠标双击段落文字高亮显示遮罩层效果代码
11-23
html5鼠标双击段落文字高亮显示遮罩层效果代码
Web前端与HTML5移动开发系列一：HTML篇
03-09
掌握HTML4.01常见基本标签;熟练HTML结构和语法规范;使用列表系列标签完成常见网页中的列表结构;熟练掌握表格，表单都系列标签，在项目中熟练使用;了解哪些标签在项目中经常使用，哪些标签已被废除;迈出HTML5开发的第一步,为后续课程打下基础;
web前端学习（二）——HTML5的标题、段落、链接、注释、换行、插入水平线及对齐与缩进相关设置
热门推荐
★★光亭★★
12-16 1万+
web前端学习（二）——HTML5的标题、段落、链接、注释、换行、插入水平线及对齐与缩进相关设置
html5简单游戏编程从零开始
柯瓦特罗
03-22 3819
本文基于lufylegend游戏引擎，所以以下内容全部和此有关，       lufylegend引擎的下载地址： http://www.lufylegend.com/lufylegend      既然是使用引擎，首先就要配置引擎的开发环境，lufylegend的使用极其方便，只需将lufylegend-x.x.x.min.js文件引入即可，默认将legend文件夹放入当前文件路径中,如下方
web前端之HTML5 入门（4）：HTML标题、链接、段落和文本格式化
薛定谔的猫-前端领域
05-05 2026
在 HTML 文档中，标题很重要。 HTML 标题标签最好只用于标题。不要为了生成粗体或大号的文本而使用标题。 搜索引擎会使用标题为您的网页的结构和内容编制索引。 用户可以通过标题来快速浏览您的网页
HTML5网页文本内容
FOR.GET
09-16 2220
1 标题文字的建立 1.1 标题文字的建立   HTML文档中的标题由<h1>到<h6>元素来定义，其中<h1>代表一级标题，级别最高，文字也最大，其它标题元素依次递减，<h6>级别最低。标题位于<body>与</body>之间。 <!DOCTYPE html> <html> <head> <title>标题文字</title> </hea
Web前端-HTML基础-超详细
JamesX666的博客
05-17 1079
1.基本结构标签总结 2.网页开发工具 2.1 文档类型声明标签 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。 <!DOCTYPE html> 这句代码的意思是：当前页面采取的是HTML5版本来显示网页 注意： 1.<!DOCTYPE>声明位于文档中的最前面的位置，处于标签之前 2.<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签 2.2lang语言种类 用来定义当前文档显示的语言 1.en定义语言为英语 2.zh-CN定义语言为中
HTML之颗粒归仓
遇见更好的自己
05-30 1161
HTML全称为HypertextMarkupLanguage，超文本链接标记语言，是一种简单通用的用来描述网站页面的标记式语言，用来描述网页中的各种图片、表格、文本等各种元素。用户在浏览网站时，浏览器解释和编译这种语言，生成用户可以看得懂的网页。     HTML本身是一个纯文本文件，可以用任何一个文本编辑器来进行编辑，只要最终存储文件时把扩展名存为．html或者．htm就可以了。 一、基
html中段落标签
qq_40180411的博客
08-07 9285
html中常用的段落标签： 1.b加粗 2.s删除线 3.u下划线 4.i斜体 5.sub下标 6.sup上标 7.pre原格式输出 8.div自动换行 9.span不会自动换行 10p段落标签，比div多换一行 11hr分割线 &lt;html&gt; &lt;head&gt; &lt;META http-equiv="Content-Type" content="text/html; c...
HTML5移动应用开发指南：从零开始
"本资源是关于如何一步步开发HTML5 Mobile Apps的教程，主要关注HTML5...总结来说，本教程详尽介绍了从决策到实施的整个HTML5移动应用开发流程，对于初学者和希望深入理解HTML5移动开发的开发者来说是一份宝贵的资源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值