HTML基础（一）

最新推荐文章于 2022-07-27 18:33:48 发布

Stars-Nine

最新推荐文章于 2022-07-27 18:33:48 发布

阅读量198

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_55782195/article/details/118344506

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

一、初识HTML
- - 1.1 什么是HTML
  - 1.2 HTML基本结构
二、网页基本信息
三、网页基本标签
四、媒体元素
五、页面结构分析
六、iframe内联框架

一、初识HTML

1.1 什么是HTML

HTML： Hyper Text Markup Language (超文本标记语言)
超文本包括:文字、图片、音频、视频、动画等

1.2 HTML基本结构

在这里插入图片描述
<body>、 </body>等成对的标签，分别叫开放标签和闭合标签单独呈现的标签（空元素)，如<hr/>;意为用/来关闭空元素

二、网页基本信息

<!--DOCTYPE:告诉浏览器，我们要使用什么规范-->

<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签，它用来描述我们网站的一些信息    -->
    <meta charset="UTF-8">
<!--title标签代表网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主体·-->
<body>

</body>
</html>

三、网页基本标签

3.1 标题标签段落标签、换行标签、水平线标签、字体样式标签、注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>


<!--段落标签-->

<p>段落1</p>
<p>段落2</p>



<!--水平线标签-->
<hr>



<!--换行标签-->
24354565<br/>
sfdbhnjhdfg<br/>
vfhmjjghkjh<br/>



<!--粗体、斜体-->
<h1>字体样式</h1>
粗体： <strong>I love you</strong><br>
斜体：<em>I love you</em>
<br>




<!--注释符号-->
空    格
空&nbsp;格
<br/>
大于号：&gt;
小于号：&lt;
版权所有：&copy;

</body>
</html>

在这里插入图片描述

3.2 图像标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本图像标签</title>
</head>
<body>
<!--img学习
src:图片地址
相对地址、绝对地址
../代表上一级目录
-->

<img src="../resource/image/01.jpg" alt="图片" title="悬停文字" width="300"/>

</body>
</html>

运行界面：
在这里插入图片描述

3.3 链接标签

在这里插入图片描述

<!--a标签
href:必填，表示要跳转到那个页面
target:表示窗口在那里打开
_blank:在新标签中打开
_self:在自己的网页中打开
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a>
<br>


</body>
</html>

在这里插入图片描述

在这里插入图片描述
锚链接：

<!--锚链接
1、需要一个锚标记
2、跳转到标记
-->
<a href="#top">回到顶部</a>

功能性链接：

<!--功能性链接
邮件链接：mailto
-->
<a href="mailto:2142429282@qq.com">点击联系我</a>

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a>
<br>
<p>
  <img src="../resource/image/01.jpg" alt="图片" title="悬停文字" width="300"/>
</p>
<p>
  <img src="../resource/image/01.jpg" alt="图片" title="悬停文字" width="300"/>
</p>
<p>
  <img src="../resource/image/01.jpg" alt="图片" title="悬停文字" width="300"/>
</p>
<p>
  <img src="../resource/image/01.jpg" alt="图片" title="悬停文字" width="300"/>
</p>
<p>
  <img src="../resource/image/01.jpg" alt="图片" title="悬停文字" width="300"/>
</p>

<!--锚链接-->
<a href="#top">回到顶部</a>

<!--功能性链接
邮件链接：mailto
-->
<a href="mailto:邮箱号">点击联系我</a>
</body>
</html>

在这里插入图片描述
点击回到顶部

点击联系我

3.3 列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
  <li>java</li>
  <li>php</li>
  <li>python</li>
  <li>c++</li>
  <li>前端</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
  <li>java</li>
  <li>php</li>
  <li>python</li>
  <li>c++</li>
  <li>前端</li>
</ul>
<hr/>

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
  <dt>学科</dt>
  <dd>java</dd>
  <dd>php</dd>
  <dd>c++</dd>
  <dd>python</dd>
  <dt>位置</dt>
  <dd>西安</dd>
  <dd>上海</dd>
  <dd>北京</dd>
</dl>

</body>
</html>

在这里插入图片描述

3.4 表格标签

表格table
行 tr
列 td
colspan:跨列
rowspan 跨行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行 tr
列  td
-->
<!-- border 设置表格边框线粗细   -->
<table border="1px">
  <tr>
<!-- colspan:跨列   -->
<!-- colspan="3" 1-1跨3列   -->
    <td colspan="3">1-1</td>

  </tr>
  <tr>
<!-- rowspan  跨行   -->
<!--  rowspan="2"   2-1跨两行  -->

    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>

  </tr>
</table>
</body>
</html>

在这里插入图片描述

四、媒体元素

音频和视频：

向网页中添加音频                  <video src=""></video> 
控制条：控制音频播放/显示/下载等         controls
自动播放                              autoplay

视频

<video src="../resources/video/片头.mp4" controls  autoplay></video>

音频

<audio src="../resources/audio/萤火虫和你.mp3" controls autoplay></audio>

五、页面结构分析

在这里插入图片描述

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<head><h2>网页头部</h2></head>
<section><h2>网页主题</h2></section>
<footer><h2>网页尾部</h2></footer>
</body>
</html>

在这里插入图片描述

六、iframe内联框架

在这里插入图片描述
我么们可以在自己创建的网页中，内联百度页面，还可以设置内联页面的大小

<iframe src="https://www.baidu.com" frameborder="0" width="650px" height="550px"></iframe>

在这里插入图片描述

Stars-Nine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础（一）

一、初始HTML1.1 什么是HTMLHTML： Hyper Text Markup Language (超文本标记语言)超文本包括:文字、图片、音频、视频、动画等1.2 HTML基本结构<body>、 </body>等成对的标签，分别叫开放标签和闭合标签单独呈现的标签（空元素)，如<hr/>;意为用/来关闭空元素二、网页基本信息<!DOCTYPE html><
复制链接

扫一扫