文章目录HTML简单介绍HTML文档撰写新建工作目录新建HTML文件HTML元素1.空元素2.元素的属性3.标题超链接语法1.锚点2.图片3.区块元素4.内联元素HTML简单介绍HTML文档撰写新建工作目录新建HTML文件在该文件夹下新...

文章目录

HTML简单介绍
HTML文档撰写
- 新建工作目录
- 新建HTML文件
HTML元素
- 1.空元素
- 2.元素的属性
- 3.标题
超链接语法
- 1.锚点
- 2.图片
- 3.区块元素
- 4.内联元素

HTML简单介绍

HTML文档撰写

新建工作目录

新建HTML文件

在该文件夹下新建一个后缀名为html 的文件
在该文件中输入如下内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>页面标题</title>
</head>
<body>
  <h1>我的第一个Web页</h1>
  <p>当前有点丑：)</p>
</body>
</html>

HTML元素

1.空元素

一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如 <br>, <hr>, <input>, <img>, <a> 等等。我们称其为空元素，如下：


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

2.元素的属性

元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。

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

一个属性必须包含如下内容：

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
属性名称，后面跟着一个 = 号。
一个属性值，由一对引号 “” 引起来。

3.标题

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>

超链接语法

1.锚点

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。

先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->

注意：

元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4
超链接中的地址需要有#符号
思考：经常在某些网站上看到一个浮动图标显示"回到页首"，它是如何实现的？
答：①使用button标签
输入代码：

<button onclick="location='https://www.baidu.com'" type="button">回到首页</button>

这是一个< button > 标签，它定义一个按钮。
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

当我们点击后，就可以回到你相应首页的网址

②在样式中直接添加
复制下面代码到文本中

<input type="button" value="回到首页" onclick="location='https://www.baidu.com'">

2.图片

在页面插入一张图片如下：

说明：

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）

3.区块元素

区块元素在浏览器显示时，通常会以新行来开始（和结束）

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

4.内联元素

内联元素一个接一个进行显示，不会新起一行

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