一、学习html基础
(一)官方文档阅读
<html>为大属性。包括<head>和<body>两个属性。中文要使用<DOCTYPE html>和<meta charset=”uft-8”>来标明避免错误。
<h1>到<h6>就是标题。<p>就是段落。对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
<br> (换行) <hr> (水平线)
字体中,<strong>(是粗体, <em>是斜体。<sub>下标,<sup>上标。<del>删除字。
<a href=”xx”链接></a>就是链接。<img src="URL" alt="替换文本" height="42" width="42">是图片。<code>代码,<var>变量。
<title> 元素:
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时,显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
无序列表
<ul> <li>项目</li> <li>项目</li> </ul>
有序列表
<ol> <li>第一项</li> <li>第二项</li> </ol>
HTML <script> 标签
<script> 标签用于定义客户端脚本,比如 JavaScript。
<script> 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
HTML 图像- 设置图像的高度与宽度
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。
属性值默认单位为像素:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
HTML 布局 - 使用<div> 元素
div 元素是用于分组 HTML 元素的块级元素**图像链接:**您还可以使用图像作为链接。在这种情况下,<a> 元素包围着 <img> 元素。例如:
<a href="<https://www.example.com>">
<img src="example.jpg" alt="示例图片">
</a>
普通的链接:<a href="Example Domain">链接文本</a> 图像链接: <a href="Example Domain"><img src="URL" alt="替换文本"></a> 邮件链接: <a href="mailto:webmaster@example.com">发送e-mail</a> 书签: <a id="tips">提示部分</a> <a href="#tips">跳到提示部分</a>
下载链接:<a href="document.pdf" download>下载文档</a>
HTML 链接- id 属性
id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示,即在 HTML 页面中是不显示的,所以对于读者来说是隐藏的。
实例
在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips")":
<a href="#tips">访问有用的提示部分</a>
或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":
<a href="<https://www.runoob.com/html/html-links.html#tips>">
访问有用的提示部分</a>
(二)用vs code写了一个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8">
<title>
hello world
</title>
</head>
<body>
<h1>my web</h1>
<p>hello world
<a href="<https://www.canva.cn/learn/the-sea-image/>">这是一个链接</a>
<p><img src="<https://static-cse.canva.cn/blob/239388/e1604019539295.e502a758.avif>" width="258" height="209" />
</p>
</p>
</body>
</html>
将html另存到独立开发文件夹里。
*安装 "open in browser" 扩展。。*鼠标右击编辑器上的文件名,选择在默认浏览器打开,可以看到web页面。
安装Live Preview插件,在编辑版右击选择show preview,可以实时显示web页面