HTML5 基础第一节

最新推荐文章于 2024-05-17 06:17:09 发布

抹泪的知更鸟

最新推荐文章于 2024-05-17 06:17:09 发布

阅读量231

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： html5 html 前端

本文链接：https://blog.csdn.net/qq_51596354/article/details/121215855

版权

HTML5 基础学习

HTML5 基础

1982 年。英国人蒂姆.伯纳斯.李为了方便世界各地的物理学家能够进行合作研究以及信息共享，创造了 HTML 语言，之后 HTML 发展成互联网上应用最为广泛的标记语言。HTML 是 HyperText Markup Language 的缩写。中文翻译为超文本标识语言。使用 HTML 元素编写的文档称为 HTML 文档。目前最新版本是HTML 5.0。

文档结构

为了能够更好地理解和认识 HTML5 网页，下面给出一个简单的、符合标准的 HTML5 文档结构代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>hello</title>
</head>
<body>
</body>
</html>

<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据和标题
<title> 元素描述了文档的标题，页面在浏览器中打开时，顶部对该页面的标识
<body>文档的主体和所有内容，如文本、超链接、图像、表格和列表等都包含在该标签中。
head：一般用来存放 css 样式  js 代码。
utf-8：一种目前兼容性最好的字符编码。可以支持多国语言，不容易出现乱码。

案例：新建一个文本文档，命名为 index.txt，在里面输入如下所示的代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>这是我的第一个网页</h1>
<h2>程序猿最烦两件事</h2>
<p>第一件事是别人要他给自己的代码写文档，</p>
<p>第二件呢？是别人的程序没有留下文档。</p>
</body>
</html>

然后另存为修改字符编码为 UTF-8，并将文本文档的后缀名改为 html，使用浏览器打开，这就是第一个网页。

常用元素

HTML5 中按功能划分可分为：基础、格式、表单、框架、图像、音频/视频、链接、列表、表格、样式/节、元信息、编程，具体描述如下所示。由于常用的不多我们将其分为基础格式元素、表单元素、框架图形链接列表元素和表格块节元信息元素

HTML 的本质是文本文件，操作文本文件的的基本方式是记事本，在实际开发中我们不会使用记事本，而作为开发利器的 idea 或者HBuilderX 在开发 HTML 方面也是非常出众的。

使用 idea 创建一个企业级 web 应用，并配置浏览器。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XjOt0Xat-1636375486300)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20211108161004966.png)]$

web 应用的 HTML 页面一般存放在 web 文件夹下，在下面新建一个 index 的 HTML 文件，进入如下的测试阶段。

基础格式元素

包括基础与格式元素，常用的都已经标注出来了。

<h1>to<h6>	  定义HTML标题
<p>           定义段落
<br>          定义简单的换行
<hr>          定义水平线
<!--...-->    定义注释
<acronym>     定义只取首字母的缩写
<abbr>        定义缩写
<address>     定义文档作:者或拥有者的联系信息
<b>           定义粗体文本
<bdi>         定义文本的文本方向，使其脱离周围文本的方向设置
<bdo>         定义文字方向
<big>         定义大号文本
<blockquote>  定义长的引用
<cite>        定义引用(citation)
<code>        定义计算机代码文本
<del>         定义被删除文本
<dfn>         定义项目
<em>          定义强调文本
<font>        定义文本的字体、尺寸和颜色
<i>           定义斜体字
<ins>         定义被插入文本
<kbd>         定义键盘文本
<mark>        定义有记号的文本
<meter>       定义预定义范围内的度量
<pre>         定义预格式文本
<progress>    定义任何类型的任务的进度
<q>           定义短的引用
<rp>          定义若浏览器不支持ruby元素显示的内容
<rt>          定义ruby注释的解释
<ruby>        定义ruby注释
<samp>        定义计算机代码样本
<small>       定义小号文本
<strong>      定义强调文本
<sup>         定义上标文本
<sub>         定义下标文本
<time>        定义日期/时间
<tt>          定义打字机文本
<var>         定义文本的变量部分
<wbr>         定义换行

注意：

HTML 中 <, >，& 等有特殊含义，(前两个字符用于链接签，& 用于转义)，不能直接使用。使用这三个字符时，应使用它们的转义序列，如下所示：

&lt; 表示  <
&gt; 表示 >
&nbsp; 表示空格
&emsp;表示中文空格（宽一点）

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<!--<h5>H5</h5>-->
<h6>H6</h6>
<p>
    <small>web</small> 应用的 <strong>HTML</strong> 页面一般存放在 web 文件夹下，<br>在下面新建一个 index 的 <i>HTML</i> 文件，进入如下的<q>测试</q>阶段。
</p>
<hr>
<p>
    注意：    <HTML中<, >，&等有<b>特殊</b>含义，(前两个字符用于链接签，&用于转义)，
    <code>不能直接使用。</code>使用这三个字符时，<sup>应</sup>使用<sub>它们</sub>的
    <del>转义</del>
    序列，如下所示：
</p>
</body>
</html>

练习：

根据设计图完成编码

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hfyQ2HFQ-1636375430159)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20211108162021626.png)]$

参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基础格式元素</title>
</head>
<body>
<h1>大标题</h1>
<h6>小标题</h6>
<p><b>一段话</b>之间可以使用<br> <br> 换行</p>
<p>
    <del>删除线</del>
    也还<i>不错</i>
</p>
<p>

最低0.47元/天解锁文章

抹泪的知更鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5 基础第一节

HTML5 基础学习HTML5 基础1982 年。英国人蒂姆.伯纳斯.李为了方便世界各地的物理学家能够进行合作研究以及信息共享，创造了 HTML 语言，之后 HTML 发展成互联网上应用最为广泛的标记语言。HTML 是 HyperText Markup Language 的缩写。中文翻译为超文本标识语言。使用 HTML 元素编写的文档称为 HTML 文档。目前最新版本是HTML 5.0。文档结构为了能够更好地理解和认识 HTML5 网页，下面给出一个简单的、符合标准的 HTML5 文档结构代码。
复制链接

扫一扫