HTML5基础

牢大1号

已于 2023-02-08 09:44:49 修改

阅读量60

点赞数 3

分类专栏： html5 基础新手文章标签： dreamweaver 开发语言 html5 前端

于 2023-02-08 09:41:56 首次发布

本文链接：https://blog.csdn.net/m0_73524627/article/details/128921224

版权

html5 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

基础

8 篇文章 0 订阅

订阅专栏

新手

7 篇文章 0 订阅

订阅专栏

认识HTMl5

网页开发工具

可以开发的工具有很多：记事本，Dreamweaver，UltaEdit，Sublime，WebStorm，VS Code（这里推荐用 VS Code，谁用谁知道）

HTML5基本结构

<html>//声明
<head>//网页头部
<title>我的第一个网页</title>//头部部分
</head>
<boby>
我的第一个网页 //主题部分
</body>
</html>

HTML5的优势

跨浏览器，跨平台，新增特性，音频视频等

网页的基本标签

标题标签

标题标签用于定义标题分为6个不同的等级即

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

一级标签的字号最大<h1>六级标签的字号最小<h6>如图所示

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

段落标签

在网页制作中常常需要进行分段换行这时我们就可以用到<p> </p>段落标签
来进行段落的分段(段落标签属于双标签，需要成对出现)

换行标签

在网页制作中我们如果需要手动换行，则需要换行标签<br/>
(单标签)

水平线标签

网页制作中我们若需要进行分隔我们可以用到</hr>

<h1>《静夜思》-不换行</h1>
床前明月光，疑是地上霜。
举头望明月，低头思故乡。
<hr/>
<h1>《静夜思》-换行</h1>
床前明月光，疑是地上霜。<br/>
举头望明月，低头思故乡。<br/>

效果如图所示

《静夜思》-不换行

床前明月光，疑是地上霜。举头望明月，低头思故乡。

《静夜思》-换行

床前明月光，疑是地上霜。
举头望明月，低头思故乡。

字体样式标签

网页中有些字体是加粗和倾斜显示的<strong>和<em>(字体加粗标签和字体倾斜标签)

<strong>《静夜思》</strong><br/>
<hr>
<em>床前明月光，疑是地上霜。</em><br/>
<em>举头望明月，低头思故乡。</em><br/>

效果如图所示

《静夜思》

床前明月光，疑是地上霜。

举头望明月，低头思故乡。

注释标签

格式


<strong>《静夜思》</strong><br/>
<hr>
<em>床前明月光，疑是地上霜。</em><br/>
<em>举头望明月，低头思故乡。</em><br/>

效果如图所示

《静夜思》

床前明月光，疑是地上霜。

举头望明月，低头思故乡。

（注释内容无法在网页中显示出来）

字符实体

在HTML5中同一个编号代替一个实体字符 HTML5常用的实体符号

 空格
>大于号
<小于号
"引号
©版权符号

常见的图片格式

常见的图片格式有四种分别是JPG格式，PNG格式 GIF格式，BMP格式

JPG格式：
可以用最少的磁盘空间得到更好的图像质量
PNG格式：
支持透明效果，使图像更贴切的融合
GIF格式：
可实现动态效果
BMP格式：
他可以不作任何变换的保存图像像素域的数据，既不支持文件压缩，所以不适合用于页面开发。

图像的显示方法

<img src="https://img1.baidu.com/it/u=3217543765,3223180824&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=750" alt="上海鲜花港-郁金香" title="上海鲜花港-郁金香" width="300" height="200" />
<img src="./images/flower.jpg" alt="上海鲜花港-郁金香" title="上海鲜花港-郁金香" width="300" height="200">
如图所示
<>

（注意区分相对路径与绝对路径的区别）

四种href路径

相对路径：
相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。
绝对路径：
绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
服务器路径：
服务器发布服务使用的URI/URL，服务器上存储某个文件的文件路径比如F:/aaa/bbb/c.jsp；第二种: url网址访问, 比如：http:localhost:8080/虚拟项目路径/项目资源路径；第三种: 以/开头的路径。
锚点路径：
锚点是网页制作中超级链接的一种，又叫命名锚记，像一个迅速定位器一样，是一种页面内的超级链接，运用相当普遍。
（#号在href中代表是默认当前页面，可以把#换成想跳转的页面。）

锚点的链接使用方法

怎么设置锚点的ID属性？怎么链接锚点？

在要跳转到的位置所在的标签中添加了 id 属性，并为其赋值；
使用 <a> 标签设置锚点，href 属性值为 # + id 属性值

超链接的使用

在HTML5中穿件超链接的方法非常简单只需用<a>和</a>标签并加上要链接的对象即可

<a href="demo.html" target="_blank">超链接的使用</a><br/>
<a href="https://www.baidu.com" target="_self">百度</a>

效果如下：

超链接的使用

 百度

行内元素和块级元素的定义

块级元素块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。常见的块级元素如下表： 2. 行内元素行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。常见的行内元素如下表：通过运行结果可以发现，<div> 标签和 <p> 标签分别独占一行，因为它们是块级元素；而 <span> 标签和 <a> 标签在同一行中显示，因为它们是行内元素。注意，这里我们说的独占一行是指元素在浏览器中的运行效果，并不是在编辑器中独占一行。在编辑器中，不论怎么书写代码，都不会影响它在浏览器中的运行效果。 3. 元素的嵌套