快速入门HTML（一）

最新推荐文章于 2024-02-29 13:59:43 发布
最新推荐文章于 2024-02-29 13:59:43 发布
阅读量404 收藏 3
点赞数
分类专栏： 笔记 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43323430/article/details/107593012
版权

快速入门HTML（一）

一、认识HTML

1、浏览器的种类

浏览器作为最广泛应用的客户端之一，相信大家对此并不陌生。首先我们先来认识一下目前主流的五种浏览器
在这里插入图片描述
大家可能很奇怪，HTML为什么要说到浏览器呢，其实浏览器就是具备解析HTML代码的一种客户端，接下来你写的所有HTML代码，都将在浏览器的环境下运行，浏览器也是我们学习HTML的必要开发工具。我这里推荐大家选择火狐或者谷歌浏览器，其中谷歌浏览器就是我们所说google chrome，火狐浏览器的控制台是中文的，而谷歌浏览器的控制台是英文的，所以火狐浏览器比较适合做教学解释用，而谷歌更适合自己锻炼英语能力使用。

作为开发人员，我们最最最厌烦的浏览器无非就是IE浏览器了，特别是IE8及其以下版本，涉及到许多浏览器不兼容的问题（如果不知道不兼容啥意思，就暂且理解为你的HTML代码在其他浏览器下可以正常运行并且产生预期效果，而IE浏览器则会出现无法运行、报错的情况）。所以说初学HTML的小伙伴们，千万要谨慎选择IE浏览器作为开发测试哦，不到万不得已真的别用IE浏览器做开发！！！！

当然，也有小伙伴会问啊：“哎，咕咕，我的电脑是win 10系统，自带了Microsoft Edge这款浏览器，那这款浏览器适不适合开发呢？”我的回答是：“是完全可以胜任开发测试的工作滴！！”微软公司现在十分推崇Edge浏览器，这款浏览器不得不说是真的很用心，比之前微软的IE浏览器不知道上了多少个档次嗷，甚至在某些新语法、新特性的支持方面，Microsoft Edge浏览器做得比其他主流浏览器都做得更好，换句话说Microsoft Edge的兼容性是做得很好的。

2、揭开HTML的面纱

前面已经说过，HTML代码是可以通过浏览器进行解析的，那么解析之后长啥样呢？对的，相信小伙伴们心中已经有了准确的答案，HTML代码经过浏览器解析后，呈现在浏览器中的页面，也就是我们常说的网站，就是HTML代码解析后的成果。

也许有的小伙伴还是感到一知半解，别懵，咕咕带你去一个地方，哎，没错，就是要打开一个网站，这次我选择了打开淘宝的网站作为讲解（咕咕用的是Google chrome浏览器）

打开淘宝主界面，单击鼠标右键，点击“查看网页源代码”
在这里插入图片描述
一同操作的你是否像是打开了新世界的大门！！！没错，淘宝主界面网站的所有HTML代码都呈现在了你的眼中
在这里插入图片描述
看到这里，是不是就觉得以往神秘的网站，其实没有什么大不了嘛，就是一堆代码嘛，切！哈哈哈哈，开个玩笑。其实HTML最好的地方就是，无论是什么网站，我们都可以查看其源代码（HTML代码），也就是说，对于将要学习HTML的我们，这对于我们的学习是非常有借鉴作用的，学习一些先进网站的制作思路与特点，这对于我们的思路将会有创新式的启发。

如果在看到淘宝HTML源代码下方的小伙伴会惊奇的发现一个规律，似乎所有的东西都是被一对尖括号的东西包裹了起来，例如下图
在这里插入图片描述
是的，相信大家都已经非常快速地察觉到了，我们HTML要学习的内容也就是学习一堆尖括号和被尖括号包裹起来的内容，这些尖括号就是组成HTML代码的重要组成部分，甚至可以说，HTML代码就是由许多尖括号组成的逻辑代码。

3、正式了解HTML

看到这里，相信大家对HTML相比看文章之前有了新的认识，那么在正式进入真正的尖括号学习之前，我们先过一遍官方对于HTML的解读

概念：HTML（英文Hyper Text Markup Language的缩写），超文本标记语言。

何为HTML：简单来说HTML就是用尖括号包裹起来的内容，浏览器对这个尖括号包裹起来的内容有特殊的解释

何为超文本：在文本文件里面除了基本文本之外，还含有图片，音频，视频的内容（也可以通俗地理解为超越文本的范畴嘛hhh）

何为标记：使用尖括号作为特殊的标记符号

PS：这里需要小伙伴们特别注意一下，HTML并不是一门编程语言哦，它仅仅只是一门超文本标记语言，标记语言！标记语言！标记语言！重要的事情要说三遍，这也是刚开始接触HTML最容易犯的一个常识错误，大家要牢记嗷！

二、学习HTML

1、学习准备

俗话说工欲善其事,必先利其器，我们既然学习HTML，那么就先要准备一个趁手的工具，我这里推荐的是Dreamweaver，因为小伙伴们都是刚接触HTML，相信大家在某些视频上也看过大神用记事本写代码，但是对于小白们是不太友好的。记事本首当其冲的就是没有编辑代码提示，其次记事本的缩进快捷键是没有Dreamweaver好用的。Dreamweaver最强大的功能就是具有代码提示，这对于刚刚入门的小伙伴是十分友好的，这也让我们的开发效率提升了一个档次。

2、Dreamweaver的使用

至于Dreamweaver的安装包，在文末的百度网盘链接里面可以自行获取哦
好了，话不多说，我来介绍一下Dreamweaver的大概使用叭

a.站点

一个网站由很多网页组成，还包括图片等资源，为了方便管理，将这些资源放在一个文件夹里面，这个文件夹就是站点

b.在Dw中新建站点

手动创建一个文件夹
在这里插入图片描述
脚下留心：DW创建的站点其实就是创建了编辑器和文件夹的关联，DW可以创建多个站点，删除站点就是将编辑器和文件夹的关联删除了，但是并不会删除文件夹

c.使用DW

新建html文件
在这里插入图片描述
代码模块就是现在所写的代码，而其余的拆分、设计、实时视图功能我不推荐大家使用，特别是设计模式，虽然设计模式用起来特别方便，可以通过自己想要有的页面反过来生成代码，但是却不利于刚入门的小伙伴们的代码训练。作为刚入门的小白，需要更加注重代码方面的训练，不积跬步无以至千里，不积小流无以成江海。只要打好基础，那么对于未来的进阶学习肯定是十分有帮助的。
在这里插入图片描述
那么有的小伙伴会问：“哎，咕咕，我写的代码，怎么才能够让他在浏览器下运行呢？”其实啊，在编译器上就可以直接运行已编写的代码，请看下图
在这里插入图片描述
PS：DW中快捷键F12是预览网页

HTML结构的讲解
在这里插入图片描述
我们可以看到HTML基本的结构主要由html、head、body三种尖括号组成，html尖括号代表着html尖括号包裹的内容是html代码，类似于一种声明；如果把html看做是一个人的身体结构，那么head尖括号表示html的头部，body尖括号代表html的身体，所以我们今后写的所有html代码都需要放在body尖括号包裹的范围里面

3、正式学习HTML

对于编辑器的使用，相信小伙伴们已经十分清楚了，那么接下来就正式进入到我们“尖括号”的学习啦！！！
其实啊，“尖括号”它也有自己的名字，叫做“标签”，是的，标签分为单标签和双标签，接下来，我们来学习一下HTML里面有哪些常用的标签，我这里列出的标签都是我在进行网站开发时所总结出最常用的部分标签，所以相对于HTML所有标签来讲不过是沧海一粟。话虽如此，但是作为入门的话，难度也是足够滴，我主要是希望小伙伴在看完这篇文章后，就有自主学习标签的能力、测试标签的能力、并且将标签与自己的想法结合的能力，我也会尽力地为小伙伴们讲解“标签”究竟是如何在HTML里面发挥重要作用的~~

a、常用标记

常用的标记其实都是由原先的报纸而启发的，我们可以看到报纸的内容有标题、段落、字体标记，这是报纸最常用的一种文章结构标记。从而衍生出了HTML里面的标题标签和段落标签和字体标记标签。下面我们就一起来 学习一下这些衍生出来的常用标记。

标题标签（双标签）

一级标题：<h1>内容</h1>

二级标题：<h2>内容</h2>

…

六级标题：<h6>内容</h6>

解读：标签对里面是支持放任何文本内容的，一级标题h1的字体在页面显示中最大，六级标题h6的字体在页面显示中最小

h标签示例：

<!doctype html>
<html>
	<head>
        <title>我的第一个网页</title>
    </head>
    <body>
        <h1>第一个网页</h1>
        <h2>第一个网页</h2>
        <h3>第一个网页</h3>
        <h4>第一个网页</h4>
        <h5>第一个网页</h5>
        <h6>第一个网页</h6>
        这是我的第一个网页，怎么样，厉害吧！
    </body>
</html>

标题效果：
在这里插入图片描述
PS：
1、在DW中通过快捷键ctrl+数字可以直接创建标题标签（例如ctrl+1创建的是h1标签）
2、h标签是独占一行的，所有在h标签后面写的东西，都会自行地进入下一行显示

段落标签（双标签）

段落标记：<p>内容</p>

解读：段落标签是一个标签对，并且它也是独占一行的

p标签示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<p>飞流直下三千尺</p>
	<p>疑是银河落九天</p>
</body>
</html>

段落效果：
在这里插入图片描述

水平线标签（单标签）

水平线：<hr>

解读：它的作用就是画出一条100%浏览器比例的水平直线

hr标签示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	飞流直下三千尺
	<hr>
	疑是银河落九天
</body>
</html>

水平线效果：
在这里插入图片描述

换行标签（单标签）

换行：<br>

解读：顾名思义，就是进行一个换行的操作

br标签示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	今天<br />明天<br />后天
</body>
</html>

换行效果：
在这里插入图片描述
字体标记（双标签）

粗体：<b>内容</b>

斜体：<i>内容</i>

下划线：<u>内容</u>

解读：b 标签的作用是内容加粗，i 标签的作用是内容倾斜，u 标签的作用是内容添加下划线

字体标记示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<b>加粗的字</b>
	<i>倾斜的字</i>
	<u>带有下划线的字</u>
</body>
</html>

字体标记效果：
在这里插入图片描述
强调标记（双标签）

强调标记，通过加粗来强调：<strong>内容</strong>

强调标记，通过斜体来强调：<em>内容</em>

强调标记，通过下划线来强调：<ins>内容</ins>

解读：看到这里，有的小伙伴可能会问：“前面不是已经有字体标记实现加粗、倾斜、下划线的功能了吗，怎么这里又有三个嘞，还更长了？”其实这里面涉及到一个搜索引擎优化的东西。在这之前，先给大家说一下语义化的概念，语义化是指用合理HTML标记以及其特有的属性去格式化文档内容，讲白了就是你的html页面里的每一个内容需要用合适的标签去包裹，比如段落内容就应该使用 p 标签，而不是使用 h 标签。我们都上过百度，也自己搜索过一些东西，那么为什么有的网站的搜索结果很靠后，而有的网站搜索结果很靠前，甚至在第一页的首个结果里面。

在这里我们排除掉名气的影响，只讨论网站是否标准地进行了语义化，对于百度的搜索引擎而言，越标准地语义化的网站，搜索引擎会将其被搜索到的结果展示得越前面。换句话说，在同等关键词下，两个相同的网站，其中A网站语义化十分标准，B网站的语义化做得一塌糊涂，那么搜索出来的结果，肯定是A网站比B网站的展示更加靠前。

所以我们回到强调标记和字体标记之间的关系来看，他们的作用均是一致的，所展示出来的视觉效果也是相同的。但是！！！！强调标记具有语义化！！！！！而字体标记并没有语义化！！！！所以说，使用强调标记的效果有两个，除了实现基本的视觉效果，还能进行搜索引擎的优化，让自己的网站能够更加深受搜索引擎的喜爱，也能更容易的展示到大众中。

当然啦，优化搜索引擎最好的办法还是出钱嘿嘿嘿，这是最快让网站提高曝光率的办法。除此之外，只能不断优化自己的网站，提供优质内容，并且优化搜索引擎，让网站的HTML代码更具语义化。

强调标记示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<strong>加粗的字</strong>
	<em>倾斜的字</em>
	<ins>带有下划线的字</ins>
</body>
</html>

强调标记效果：
在这里插入图片描述
PS：在视觉效果上，强调标记和字体标记是能够实现一致的效果的

b、标签详解

标签的分类

双标签：
成对出现的标签叫双标签，内容写在标签中间-----><p>段落</p>

单标签：
单个的标签叫做单标签，没有内容只有属性（因为一个标签没法包裹内容）-----><hr>

标签的属性

  • 每个标签都有自己的属性（特性）-----单标签和双标签都有属性
  • 一个标签可以有多个属性
  • 每个属性都有对应的值（也可以为空），值要用引号引起来（单引号和双引号都可以）
  • 属性之间使用空格隔开
  • 属性没有规定顺序

属性的使用
语法：<标签名 属性1="值1" 属性="值2"></标签名>
使用示例：

<!DOCTYPE html>
<html>
	<head>
        <title>我的第一个网页</title>
    </head>
    <body>
        <font size="7" face="叶根友毛笔行书2.0版" color="red">字体标签</font>普通文字
    </body>
</html>

实现效果：
在这里插入图片描述
PS：在 HTML 4.01 中，font 元素不被赞成使用（官方声明），因为字体的颜色、样式、大小、粗细等等设置，我们都能够使用后面所学的CSS来进行设置，咕咕个人认为摒弃这个标签的主要原因就是因为代码需要进行工程管理，所谓的代码工程管理可以理解为将代码分类，这样才方便我们对代码的管理，与垃圾分类是一个道理撒~~

c、列表

无序列表（双标签）

ul：代表标签的模块，范围

li：代表列表的每一项

语法：

<ul>
	<li>内容</li>
	<li>内容</li>
	<li>内容</li>
	.......
</ul>
标签名称无序列表标签
属 性属性名为type 功能为设置列表项目符号样式 属性值：circle - 空心圆 square - 正方形 disc - 实心圆（默认）
描 述注意： 1. 列表项里面至少有一个li标签（至少1一个，可以写N个） 2. 写无序列表必须先写ul双标签将所有的 li 双标签包裹起来 3. 内容必须写在li标签内 说明： 列表项目结构中没有先后顺序的列表，称之为：无序列表

无序列表示例：

<!DOCTYPE html>
<html>
	<head>
        <title>我的第一个网页</title>
    </head>
    <body>
        <ul>
            <li>新闻</li>
            <li>新闻</li>
            <li>新闻</li>
            <li>新闻</li>
            <li>新闻</li>
            <li>新闻</li>
        </ul>
    </body>
</html>

无序列表效果：
在这里插入图片描述

PS：无序列表中的 li 必须被 ul 所包裹，顺序一定不能错！！！效果图中的默认的实心小黑点是可以自行设置的，可以通过设置type属性的值，来达到自己想要的效果
在这里插入图片描述

有序列表（双标签）

ol：代表标签的模块，范围

li：代表列表的每一项

解读：其实在真实开发中，有序列表是很少用到的，大概是美观的原因，咕咕更喜欢使用无序列表，有序列表和无序列表大同小异，用法都是差不多的

标签名称有序列表标签
属 性type 设置列表项目编号样式： A,a - 设置项目编号为大小写英文字母 I,i - 设置项目编号为大小写罗马数字 1 - 设置项目编号为阿拉伯数字（默认）
描 述注意： 1. 至少有一个li标签 2. 内容必须写在li标签里 3. 写有序列表必须写ol标签 4. 设置项目编号样式为英文字母，超过26个字母，会以aa,ab,ac这样的规律递增 说明：列表结构中有先后顺序并且可以设置项目编号为（1,2,3或者a、b、c）的列表，称之为：有序列表

有序列表示例：

<!DOCTYPE html>
<html>
	<head>
        <title>我的第一个网页</title>
    </head>
    <body>
        <ol>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
		</ol>
    </body>
</html>

有序列表效果：
在这里插入图片描述
PS：对于有序列表的type属性，设置方法是和无序列表是一样的，小伙伴们可以自行尝试一下哈

自定义列表
其实在很多大型企业的网站中，都使用到了自定义列表的技术，比如小米官网最底下的结构
在这里插入图片描述
那么自定义列表到底该怎么玩呢，我们一起来看看

语法：

<dl>
		<dt>内容</dt>
		<dd>内容</dd>
		<dd>内容</dd>
		<dd>内容</dd>
	</dl>

具体介绍：

标签名称自定义列表标签
描 述注意： 1. 必须写一个dt但是可以不写dd;dt也可以写多个 2. Dd是针对于前面最近的一个dt的表述 3. 内容必须写在dt或者dd里面 说明： 不仅仅是一列项目，还是项目标题和项目描述/注释的组合

自定义列表示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<dl>
		<dt>特色服务</dt>
		<dd>F 码通道</dd>
		<dd>礼物码</dd>
		<dd>防伪查询</dd>
	</dl>
</body>
</html>

自定义列表效果：
在这里插入图片描述
PS：dl的效果和ul、li 是一样的，都是起到一个定义范围的作用，而真正的内容需要写到dt和dd里面，dd是对dt内容的一个展述，可以说是追加补充

超链接标签（双标签）
标签：<a></a>

属性：
target（目标属性）：

​ _blank：跳转到一个新的窗口页面

​ _self：在原页面的窗口中打开新页面

title：当鼠标悬浮到链接上的时候，显示title属性的值（也就是说，tittle属性的值是可以自定义的，你写什么它就显示什么）

解读：a标签的 href 属性天然具有http网络通信的能力，href里面的值可以是本地文件，也可以是某一个网站的网址，通过点击a标签，都能够跳转至相应的界面。如果href的值是本地文件的路径的话，需要注意跳转的文件必须是真实存在在你的计算机上的，不然会跳转失败，还需要注意的就是路径的写法，至于路径的详细写法会在稍后为小伙伴们讲解。

本地跳转示例：在同一个站点内页面间跳转-------在自己电脑本地进行跳转
在这里插入图片描述
外部网址（链接）跳转示例：跳转到其他网站的链接
在这里插入图片描述
下载链接跳转示例：链接跳转到一个浏览器无法打开的文件时，就会自动出现下载界面

<a href="科比.pptx">打开ppt</a>

在这里插入图片描述

d、锚点链接

锚点是一个能够被灵活巧妙地使用的一个技术，比如百度百科中，我们可以通过点击导航中的某一个内容，浏览器窗口就能够定位到相应的位置，这大大节约了我们往下滑找内容的时间，所以锚点在内容较多时，使用锚点技术能够让用户体验更上一层楼。
在这里插入图片描述

锚点技术是利用了a标签能够进行页面跳转的特性实现的，下面我们来看看锚点的具体用法

语法：

<a href="#目标名">去目标地点</a>

<标签名 id="目标名">目标地点</标签名>

解读：从中我们可以看到，起始点必须是a标签所包裹的，因为当点击a标签时需要发生跳转；再看看终点的标签，可以看出，终点的标签可以是任何标签名，p、h1、u、i、a标签等等都可以作为终点的标签名，但是终点标签必须具备id属性，属性的值是可以自定义的，id属性的值要和a标签href属性里的值要完全对应，才能实现锚点技术，才能够通过点击起始点跳转到终点。

锚点示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<a href="#end">起始点</a>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <p>路途遥远</p>
    <b id="end">终点</b>
</body>
</html>

PS：因为需要将整个页面撑起来，让起始点和终点不在同一页面中，才能看得出跳转的效果，因为是动态效果，咕咕这里就不方便展示啦，小伙伴们可以拿着代码去体验一下哦，不过一定要注意id属性的值一定要和a标签对应上嗷

e、路径

相对路径

相对路径就是相对于当前的文件的地址，从当前文件出发去找目标

./ ：代表当前文件目录
在这里插入图片描述
例如图中的index.html文件的当前目录就是站点目录（品优购文件）

当前文件和目标文件在同一个站点中，就可以直接引入文件的名字和后缀，记住，一定要加后缀名嗷
在这里插入图片描述
当前文件和目标文件所在目录同级，那么就需要先找到和当前文件同级的目录名字aa，再使用斜杠，找到目标文件的名字和后缀名
在这里插入图片描述
其实前面的图中都省略了./，./是可以省略的，代表当前文件所在的文件夹下

. ./ ：代表当前文件的上一级目录下
(注意：两个点之间是没有空格的，是因为编辑器的两个点会显示成三个点，我才加了个空格，小伙伴们注意一下哈)

当前页面的上级目录和目标文件同级时，需要使用 . ./ 返回至上一次文件目录，然后再从上一级文件目录开始寻找目标文件在这里插入图片描述
绝对路径
绝对路径就简单易懂许多辣，绝对路径就是从计算机的盘符开始找，一直找到目标文件为止

绝对路径示例：

c:\face.txt，以盘符开头，从计算机出发去找目标
在这里插入图片描述

f、图片

图片标签（单标签）

语法：<img src='图片的源' alt='' title='' >

属性：
src：图片的地址

alt：当图片无法显示的时候，将alt后面的文字显示在图片的位置上

title：当鼠标放到图片位置的时候显示提醒性文字。

解读：图片的src属性就是写你的本地文件名字，可以写相对路径，也可以写绝对路径，只要能正确的获取到你所要显示的图片文件即可

img标签示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<img src="1.png" title="这是卡哇伊" />
	<img src="2.png" alt="这是猫咪" />
</body>
</html>

img标签效果：
在这里插入图片描述

三、总结HTML

好啦，今天的HTML学习到这里就告一段落啦，今天学了许多标签嗷，那么咕咕为大家总结一下

1、单标签

  1. hr：画一条水平线
  2. br：换行
  3. img：展示图片，src属性的值就是图片的路径

2、双标签

  1. h1-h6：标题标签，字体默认加大加粗，并且独占一行
  2. p：段落标签，独占一行
  3. b：字体标记，加粗字体
  4. i：字体标记，倾斜字体
  5. u：字体标记，为字体加下划线
  6. strong：强调标记，具有语义化，加粗字体
  7. em：强调标记，具有语义化，倾斜字体
  8. ins：强调标记，具有语义化，为字体加下划线
  9. ul-li：无序列表，具有type属性，能设置列表内容前面的符号，默认为实心圆
  10. ol-li：有序列表，具备type属性，能设置列表内容前面的序号的种类，默认为阿拉伯数字
  11. dl-dt-dd：自定义列表，用法和前面两种列表一致，dd可以理解为是对dt内容的追加说明，需要特别注意，dt和dd是同级的
  12. a：超链接标签，天然具有http网络通信的能力，能够跳转至任何能够访问的网页页面，并且还能够为锚点技术作为性能支撑

3、练习

咕咕为大家准备了今天的知识点所需要的一些练习，我将练习和编辑器安装包都放在了百度网盘里面，大家尽量利用练习来巩固所学的知识，这样知识点才不会很快地被遗忘

百度网盘链接：https://pan.baidu.com/s/1mxEjbuBVvz3qEBIRyDtFmQ

提取码：msk5

好啦，今天的内容就以上这些啦，希望能帮到大家嘻嘻嘻，我是咕咕，下次再见辣~~

以上内容如有侵权，请联系本博文。

桓致
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML快速入门
weixin_42140899的博客
02-16 408
一，HTML的初识 1，HTML是什么？ HTML（HyperText Markup Language） 是计算机语言中的其中一种，是一种标签语言。全称叫超文本标签语言。 超文本：文字，图片，音乐，视频，程序，链接… 一张网页上面放的放的就是超文本。 标签：叫标记 ，<abc> <name></name> ，html中定义好一些标签，如<h1>&lt...
HTML 快速入门
liyananBest的博客
07-20 452
文章目录HTML一、什么是 HTML二、HTML 基本结构三、HTML 基本标签1、标题标签2、段落标签3、换行标签4、水平线标签5、粗体、斜体标签6、注释7、特殊符号四、图像标签五、链接标签锚链接六、行内元素和块元素行内元素块元素七、列表什么是列表列表分类1、有序列表2、无序列表3、自定义列表八、表格跨行跨列九、视频和音频1、视频2、音频十一、表单重要属性十二、表单中的输入控件1、文本框2、密码框3、单选框4、多选框5、下拉框6、文本域7、文件域8、按钮普通按钮提交按钮重置按钮图像按钮十三、表单应用1、只
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。
qq_53058639的博客
09-04 2723
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
HTML入门（详细）
qq_63525426的博客
05-03 2万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
Html零基础入门教程(非常详细)
最新发布
景天科技苑
02-29 3442
HTML ，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是用来描述网页的一种语言， 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
HTML代码大全（初学者必备！必背！）
10-21
很多初学网页制作的人，都可能会为了记不住HTML代码。这里提供HTML代码。熟练HTML的人这个没有用，不熟练的人还是拿去背一背比较好！
HTML常用标签
fyyxc的博客
01-19 226
web概念概述 * JavaWeb： * 使用Java语言开发基于互联网的项目 * 软件架构： 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端程序，在远程有一个服务器端程序 * 如：QQ，迅雷... * 优点： 1. 用户体验好 * 缺点： 1. 开发、安装，部署，维护 麻烦 2. B/S: Browser/Server...
WebSphere快速入门.doc
11-30
"WebSphere 快速入门" 本书主要介绍 ...本书提供了一个系统的电子商务基础知识和 WebSphere 快速入门指南，对于信息技术类的高年级大学生和研究生，以及从事电子商务应用开发的技术人员都具有很高的参考价值。
php快速入门
01-08
### PHP快速入门知识点详解 #### 一、PHP简介与安装配置 - **PHP定义**：PHP（Hypertext Preprocessor）是一种广泛使用的开源通用脚本语言，尤其适用于Web开发并可嵌入HTML中。语法吸收了C语言、Java以及Perl的特点...
html入门教程 html标记符号快速掌握
09-28
本文将带你快速入门HTML，了解并掌握常见的HTML标记符号，包括元素、属性、基本框架以及文本、段落、列表、表格和交互式表单的创建。 HTML元素是由开始标签和结束标签组成的，例如`<p>`和`</p>`用于创建段落。有些...
Koa框架基础快速入门
01-27
**Koa框架基础快速入门** Koa框架是Node.js领域中的一个轻量级Web应用框架，由Express团队创建，旨在提供更加简洁、高效且强大的功能。Koa的主要目标是通过使用ES6的Generator特性（在较新版本的Node.js中为async/...
HTML5快速入门（一）—— HTML简介
黑森林工作室
06-08 1万+
前言：1.HTML5的发展非常迅速，可以说已经是前端开发人员的标配，在电商类型的APP中更是运用广泛，这个系列的文章是本人自己整理，尽量将开发中不常用到的剔除，将经常使用的拿出来，使需要的朋友能够真正快速入门，如果有哪些不清楚的地方或者错误，欢迎联系我 2.更新时间没有规律，一般会在3天左右更新一篇（全系列预计会有12篇）因为需要工作，所以只能在闲暇之余整理，如果有喜欢的朋友可以关注我，将会第一时
【JavaWeb】四、HTML&&CSS
weixin_42301220的博客
03-08 391
前端知识
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 22万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
HTML标签大全，存起来总有一天用的上
黑马程序员官方博客
03-29 748
快速入门 1.新建文本文件，后缀名改为 .html/.htm 2.编写 HTML结构标签 3.在中使用定义标题字体 4.使用标签定义图片 5.保存后，使用浏览器打开该文件 基础标签 标签 描述 <h1> ~ <h6> 定义标题，h1最大，h6最小 <font> 定义文本的字体、字体尺寸、字体颜色 <b> 定义粗体文本 <i> 定义斜体文本 <u> 定义文本下划线 <center> 定义
新手小白如何快速学习HTML
qq_41740200的博客
12-06 391
作为一个小白刚接触HTML首先需要了解HTML的基础内容代码，这些代码后期不一定常用，但能够有效的帮助新手了解HTML结构。 HTML5是现在前端必不可少的超文本标记语言，它有着简便快捷的特性。 基础内容： 一，文本标记 加粗b倾斜i下划线u删除线s上标sup下标sub换行br...
30分钟让你精通html
菲菲家的吴先森
04-02 1690
本文目标 30分钟内让你明白HTML是什么，并对它有一些基本的了解。一旦入门后，你可以从网上找到更多更详细的资料来继续学习。 什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查
快速学习HTML（半小时）
qq_39627579的博客
04-30 679
时间紧迫直接上代码 <!-- 一个HTML文件 1.首先第一行由一个doctype文本描述标签 2.接下来由一个<html></html>标签 我们要做到是编辑<html></html>里的内容，具体包括 1.head部分：主要设置网页的描述、编码、引入的文件 2.body部分：作为在浏览器上的显示部分，主要处理：文字、图片、链...
一小时快速入门HTML网站制作教程
本篇HTML入门教程旨在向初学者传授制作网站的基础知识，消除人们对于网站制作的误区，即认为它是一项高难度的工作。教程强调，尽管市面上有一些声称能快速创建网站的软件，但为了确保网站符合W3C标准并达到个人满意...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值