html学习

一、学习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页面

Untitled

  • 18
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值