HTML学习总结

最新推荐文章于 2024-09-29 09:14:30 发布

luca-weslie

最新推荐文章于 2024-09-29 09:14:30 发布

阅读量185

点赞数

文章标签： html

本文链接：https://blog.csdn.net/lucario1/article/details/114597371

版权

HTML学习总结

一、概述

HTML中文全称为“超文本标记语言”，是一种用于网络浏览器编辑和设计的标记语言，最新的一代为HTML5。本人使用的是VS Code作为开发环境，以下命令的使用都是在VS Code中完成。

二、命令的使用

在VS Code中新建了一个HTML文件，并在当前路径存放了一张图片。
在这里插入图片描述
在编辑界面输入以下代码，有点点开菜单栏，选择Open with Live Serve即可打开html文件，也可选择open in default browser打开。

<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="1.ico" type="image/x-icon">
  <title>页面标题</title>
</head>
<body>
  <h1>我的第一个Web页</h1>
  <p>随便输的内容</p>
</body>
</html>

在这里插入图片描述

我们一般添加内容都是在body元素中添加。

注释：注释一条语句的格式如下

<!-- <p>被忽视的内容</p> -->

换行、水平分割线和输入框的代码格式如下

<!-- 换行 -->
<p>我可以<br>换行</p> 
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>

效果如图
属性：元素的属性可以设置，如title属性，将鼠标移至title属性的元素，将会显示属性的提示内容。text属性不会改变输入的内容，password将隐藏输入的内容。

 <!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">

在这里插入图片描述
**标题：**HTML 提供了从大到小6级标题，分别是h1到h6，设置格式如下

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

在这里插入图片描述
超链接：下面代码为超链接语法，可在网页中添加超链接，点击相应内容可跳转到对应的网页。

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

在这里插入图片描述
锚点：也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。代码格式如下

<!-- 文档其余部分 -->
<h2 id="C4">第xx章</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第xx章</a>
<!-- 文档其余部分 -->

在这里插入图片描述
插入图片：插入在线的图片的格式如下，不建议设置长和宽，可能会影响图片显示效果。

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

在这里插入图片描述
添加本地图片的格式如下

<img src="w.jpg"> //图片文件与当前文档在同一目录中
<img src="./images/w.jpg">  //图片文件在当前目录下的images目录中
<img src="../w.jpg">  //图片文件在上一级目录中

注：下图演示的是第一种情况。
在这里插入图片描述
将图片做成一个超链接：alt为提示内容。

<a href="http://www.22dm.com/" target="_blank"><img src="w.jpg" alt="原创动力官网" ></a>

区块元素：格式如下，区块元素通常都会单独一行，如div就是区块元素。

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>

在这里插入图片描述
内联元素：总是一个接一个进行显示，不会新起一行，如span，input元素。

<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>哈哈哈</span>
<a href="https://google.com/">Google</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">

在这里插入图片描述
预设：使用pre元素，元素中的内容将原样呈现。

<pre>
    大白菜 鸡毛菜 通心菜 油麦菜
    绿的菜 白的菜
    什么菜炒什么菜
    喜羊羊 美羊羊 懒羊羊 沸羊羊
    什么羊什么样
    什么羊都喜洋洋
    我们是一群小小的羊
    小小的羊儿都很善良
    善良得只会在草原上
    懒懒的 美美的 晒太阳
    虽然邻居住着灰太狼
    虽然有时候没有太阳
    只有羊村里有音乐
    唱唱的 跳跳的 都疯狂
</pre>

在这里插入图片描述
在页面显示一段 HTML 的源代码，需参考ISO-8859-1 字符实体手册。

<p>有&nbsp;&nbsp;&nbsp;这么远&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;远！</p>
<hr>
<h2>test.html</h2>
<pre>
  &lt;h1&gt;这是个一级标题&lt;/h1&gt;
  &lt;p&gt;这是一个段落&lt;p&gt;
  &lt;a href="https://weibo.com/"&gt;xxxx&lt;/a&gt;
<pre>