HTML学习笔记

HTML是什么

Hyper Text Markup Language(超文本标记语言)

网页基本标签

HTML 框架

<!-- html中的注释方式，快捷键ctrl+/ -->
<!-- !DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<!-- lang:指定该html标签内容所用的语言,en为英语 zh-CN为中文 -->
<html lang="en">
<!-- head:代表网页头部-->
<head>
<!--meta:描述标签，它用来描述我们网站的一些信息-->
<!--meta一般用来做seo（搜索引擎优化）-->
<!-- 字符集(Character set)是多个字符的集合,计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。UTF-8是目前最常用的字符集编码方式让 html 文件是以 UTF-8 编码保存的， 浏览器根据编码去解码对应的html内容。-->
    <meta charset="UTF-8">
    <meta name="keywords" content="狂神说Java">
    <meta name="description" content="b站学html">
<!--网页标题-->
    <title>我的第一个网页</title>
</head>
<!--网页主体-->
<body>
any content
</body>
</html>

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

常用标签

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的

HTML 段落是通过 <p> 标签进行定义的

HTML 链接是通过 <a> 标签进行定义的。

HTML 图像是通过 <img> 标签进行定义的。

<!--标题标签-->
<h1>一级标签</h1>
<h2>一级标签</h2>
<h3>一级标签</h3>
<h4>一级标签</h4>
<h5>一级标签</h5>
<h6>一级标签</h6>
    
<!--水平线标签-->
<hr/>
    
<!--段落标签-->
<p>两只老虎     两只老虎</p>
<p>跑得快  跑得快</p>
<p>一只没有耳朵   一只没有尾巴</p>
<p>真奇怪  真奇怪</p>
    
<!--换行标签-->
<br/>
    
<!--粗体，斜体-->
粗体：<strong>i love you</strong>
<br>
斜体：<em>i love you</em> 
<br/>
    
<!--特殊字符-->
空格：&nbsp;<br/>
你        好<br/>
你&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好<br/>
大于号：&gt;<br>
小于号：&lt;<br>
版权标识：&copy;

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
    
<!--图像标签-->
<!--../代表路径上一级，src建议使用相对路径且src为必填项-->
<img src="../source/image/1.png" alt="图片失效时显示的文字" title="鼠标悬停时的文字" width="214" height="194"/>
    
</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
    
<!-- 链接标签 --> 
<a href="https://ruheyun.cn" id="top">点击跳转到我的博客</a>
<br>

<!-- target="_self"默认窗口弹出方式,target="_blank"新窗口弹出 -->
<a href="https://ruheyun.cn" target="_blank">
  <img src="../source/image/1.png" alt="图片失效时显示的文字" title="鼠标悬停时的文字" width="214" height="194"/>
</a>
<br>
    
<!--锚链接
1.用id做一个锚标记
2.用#跳转到标记
<a id="顶部"></a>
<a href="#顶部"></a>>
-->
<a href="#top">回到顶部</a>
<br>
<!--功能性链接
邮件链接
-->
<a href="mailto:ruhe@duck.com">点击我的邮箱联系我</a>

</body>
</html>

HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

开始标签	元素内容	结束标签
	This is a paragraph	</p>
	This is a link	</a>

注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。

块元素：
无论内容多少，该元素独占一行
行内元素：
内容撑开宽度，左右都是行内元素的可以排在一行

HTML 属性

HTML 标签可以拥有*属性*。属性提供了有关 HTML 元素的*更多的信息*。

属性总是以名称/值对的形式出现，比如：*name="value"*。

属性总是在 HTML 元素的*开始标签*中规定。

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
有序列表：
<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

无序列表：
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

自定义列表：
<dl>
  <dt>列表名字</dt>

  <dd>列表选项1</dd>
  <dd>列表选项2</dd>
  <dd>列表选项3</dd>
</dl>
</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--tr:行   td：列  colspan：跨列   rowspan：跨行-->
<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
</body>
</html>

媒体标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体标签</title>
</head>
<body>
   <!-- 视频标签，autoplay:自动播放，controls：控制条 --> 
<video src="" controls autoplay ></video>
   <!-- 音频标签 --> 
<audio src="" controls autoplay></audio>
    
</body>
</html>

页面分析

2023-01-30_17-53-15

iframe标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe框架标签</title>
</head>
<body>
    
<iframe src="https://www.ruheyun.cn" frameborder="0" height="" width=""></iframe>
    
</body>
</html>