初识HTML

最新推荐文章于 2022-02-13 17:18:50 发布

YiNuoBC

最新推荐文章于 2022-02-13 17:18:50 发布

阅读量496

点赞数 4

分类专栏： HTML 文章标签： html web 前端

本文链接：https://blog.youkuaiyun.com/qq_43928469/article/details/112535679

版权

HTML 专栏收录该内容

5 篇文章

订阅专栏

什么是HTML？

HTML：超文本标记语言(Hyper Text Markup Language)
HTML不是一种编程语言，而是一种标记语言，描述网页的语言
标记语言是一套标记标签(markup tag)
HTML使用标签描述网页中图片、文本、音乐、视频、超链接
HTML文档包含了HTML标签及文本内容
HTML文档也叫做web页面

基本框架如下：

<!-- 声明该文档为HTML类型 -->
<!DOCTYPE html>
<!-- <html></html>指定了html语句的范围，lang="en"指的是语言为英文，中文为"zh" -->
<html lang="en">
<!-- <head></head>规定了一些基本属性 -->
<head>
    <!-- 字符编码格式为UTF-8,万国码可兼容一切语言 -->
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    <!-- 主体部分，文字图片等资源或算法在这里面实现 -->
</body>
</html>

在这里插入图片描述

1、基本标签

<>单标签，用于声明一些属性
<></>双标签，决定了范围
标题标签：<h1></h1>，从h1到h6
换行标签：<br>
段落标签：<p>
水平线标签：<hr>
字体倾斜标签：<em>
字体加粗标签：<strong>
图像标签：<img src="路径" alt="替换文本" width="x" height="y">

代码实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础标签测试</title>
</head>
<body>
   <h3>静夜思</h3>
   <p>唐·李白</p>
   <hr>
   <p>床前明月光</p> 
   <p>疑是地上霜</p>
   <p><em>举头望明月</em> </p>
   <p><strong>低头思故乡</strong></p>
   <img src="./img/静夜思.jpg" alt="静夜思">
</body>
</html>

运行结果如下：
在这里插入图片描述

2、注释和特殊符号

注释：


特殊符号：

空格：&nbsp；
在HTML中连续的多个空格默认为一个空格，如果需要打出多个空格的效果则需要使用&nbsp；来表示一个空格。
大于号和小于号：&gt &lt <和>直接写在标签中有可能被识别为标签的左右结束范围的标志,所以有时候我们需要使用这两个符号
引号：&quot；理由同上
版权符号：&copy；说明版权

代码实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注释和特殊符号</title>
</head>
<body>
    <!-- 注释，不显示在页面中 -->
    <p>空格1                                                             空格结束</p>
    <p>空格2 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格结束</p>
    <p>大于号和小于号 &gt;     &lt;   </p>
    <p>引号  ""   &quot;&quot;</p>
    <p>版权符号   &copy;</p>
</body>
</html>

运行结果如下：
在这里插入图片描述

3、超链接

HTML使用标签 <a href="url">链接文本</a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a>中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

4、锚链接

超链接的另一个运用，在本页面进行跳转，如访问淘宝网首页时，当看到底部后，点击返回顶部，就可以直接返回到最初进入淘宝网首页的界面

代码实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>标题</h1>
    <a href="#base"><h2>点我直达底部</h2></a>
    <h3>文字</h3>
    <h3>文字</h3>
    <h3>文字</h3>
    <h3>文字</h3>
    <h3>文字</h3>
    <h3>文字</h3>
    <h3>文字</h3>
    <h3>文字</h3>
    <h3>文字</h3>
    <h3>文字</h3>
    <h3>文字</h3>
    <h3>文字</h3>
    <h3>文字</h3>
    <h3>文字</h3>
    <h3 id="base">文字</h3>
    <a href=""><h2>点我回到顶部</h2></a>
</body>
</html>