HTML基础-head、body

最新推荐文章于 2024-04-17 23:57:25 发布

原创最新推荐文章于 2024-04-17 23:57:25 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了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系列教程