HTML基础-head、body

本文介绍了HTML的基础知识,包括文档结构、常用标签及属性等,并通过实例展示了如何使用这些元素来构建基本的网页。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一个程序员退休之后想练练书法,于是准备好了笔墨纸砚,摆好放在书桌上,他提起笔沉思片刻,然后郑重其事地写下了“Hello World”。


HTML简介

HTML(超文本标记语言——HyperText MarkupLanguage)是构成Web世界的基石。它描述并定义了一个网页的内容。其他除HTML以外的技术则通常用来描述一个网页的表现/展示效果(CSS)或功能(JavaScript)。


HTML初识

  • 后缀.html
  • 文档类型声明
<!doctype html>
  • head和body
<head></head>
<body></body>

写在head中

  • meta
<meta charset="utf-8"/>
  • 网页三要素
<title>标题</title>
<meta name="keywords" content="关键字"/>
<meta name="description" content="描述内容"/>

写在body中

  • 标题标记
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
  • 段落标记
<p>
床前明月光
疑是地上霜
举头望明月
低头思故乡
</p>
  • 分割线
<hr />
  • 强制换行
<br />
  • 保留格式
<pre>
小白上楼梯
去吃肯德基
薯条呀薯条
汉堡呀汉堡
</pre>
  • 普通容器标签
<div>普通容器标签</div>
  • 普通内联元素
<span>普通内联元素</span>
  • 超链接
<a href="https://baidu.com" target="_blank">百度</a>
<a href="new.html" title="new.html" target="_blank">new</a>

href后面写链接地址

target默认值是_self
可设置成_blank

  • 相对路径
<img src="图片.jpg" title="图片" alt="图片" />
<img src="./img/图片.jpg"/>
<img src="../图片.jpg"/>
<img src="../img/图片.jpg"/>
  • 绝对路径
<img src="https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"/>
<img src="C:\Users\XUAN\Desktop\day01\图片.jpg"/>
<img src="/图片.jpg"/>

title 提示图片内容
alt 在图片错现错误时,提示图片内容

  • 列表
无序列表
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>大白梨</li>
</ul>
有序列表
<ol>
  <li>篮球</li>
  <li>足球</li>
  <li>羽毛球</li>
</ol>
对话列表
<dl>
  <dt>你好,小王</dt>
  <dd>你好,小李</dd>
  <dt>How are you?</dt>
  <dd>Fine,3Q</dd>
  <dt>How old are you?</dt>
  <dd>...</dd>
</dl>
  • 样式标签
<em>斜体</em>
<strong>加粗</strong>
<i>斜体</i>
<u>下划线</u>
<b>加粗</b>
<del>删除</del>

<small></small>

a<sub>b</sub>下标
a<sup>b</sup>上标

<code>console.log('hello geek')</code>

<mark>标记</mark>
<blockquote>引用</blockquote>
  • 在网页中载入另一个网页
<iframe src="网页链接" width="数字" height="数字" frameborder="数字"></iframe>
  • 符号
    这里写图片描述

  • 注释

<!--注释-->

推荐网站:HTML系列教程

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

拾光璇影

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值