前端零基础入门-步骤一：页面结构层HTML-01-HTML基础

1-HTML基础

第1章基础语法

html是超文本标记语言
<head>,<title>标签里的内容不会在网页文档中显示
<hr/>标签是水平线，不需要成对出现
注释代码：

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
</head>
<body bgcolor="grey">
	<p>HELLO,everyone.This is my first page!</p>
</body>
</html>

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

第2章文章段落

2.1 文档声明和META标签

<html>,<body>,<head>标签是html文档结构标签，<!DOCTYPE HTML>不属于html标签，它用于定义文档类型

网页中不能正常显示中文，出现乱码现象，使用meta标签设置编码格式：<meta charset="utf-8">

<!DOCTYPE html>
<html>
<head>
	<title>第一个网页</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	大家好，一起来学习html标记语言
</body>
</html>

3.如果想在html页面中显示空格，使用

标题标签：<h1></h1>~<h6></h6>

段落标签：<p></p>

align对齐属性值：

left:左对齐内容

right:右对齐内容

center:居中对齐内容

justify:对行进行延申，这样每行都可以有相等的长度

换行标签<br/>

5.一个<p></p>标签代表一个段落，两个<p>标签中的文本内容不在同一行，在<p>标签中，使用<br/>文本内容的位置只是换行，其实还是一个段落

6.<pre></pre>标签用于预定义格式显示文本，即文本在浏览器中显示时遵循在HTML原文档中定义的格式

<!DOCTYPE html>
<html>
<head>
	<title>练习1</title>
	<meta http-equiv="Content-Type" content="text/http;charset=utf-8"/>
</head>
<body>
	<h3 align="center">《早发白帝城》</h3>
	<p align="center">朝辞白帝彩云间，千里江陵一日还。</p>
	<p align="center">两岸猿声啼不住，轻舟已过万重山。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>练习2</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<h1>敕勒歌</h1>
	<h2>朝代：南北朝</h2>
	<h3>作者：佚名</h3>
	<p>  敕勒川，<br/>
	     阴山下，<br/>
	     天似穹庐，<br/>
	</p>
	<pre>
  笼盖四野，
   天苍苍，
   野茫茫，
风吹草低见牛羊。
	</pre>
</body>
</html>

2.2 文字和段落标签

文字斜体：<i></i>和<em></em>
加粗：<b></b>和<strong></strong>
下标：<sub></sub>
上标：<sup></sup>

特殊符号

任务

<!DOCTYPE html>
<html>
<head>
	<title>任务</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p align="center">关于我们  |  招聘信息  |  联系我们  |  意见反馈</p>
	<hr/>
	<p align="center">Copyright © 2016 imooc.com All Rights Reserved</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>任务</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p>公式:x<sup>2</sup>+x=0 解:x<sub>1</sub>=0;x<sub>2</sub>=-1</p>
</body>
</html>

第3章列表标签

3.1 列表标签-无序列表

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<ul type="disc">
		<li>朝辞白帝彩云间，</li>
		<li>千里江陵一日还，</li>
		<li>两岸猿声啼不住，</li>
		<li>轻舟已过万重山，</li>
	</ul>
	<ul type="square">
		<li>朝辞白帝彩云间，</li>
		<li>千里江陵一日还，</li>
		<li>两岸猿声啼不住，</li>
		<li>轻舟已过万重山，</li>
	</ul>
</body>
</html>

3.2 列表标签-有序列表

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<ol type="a">
		<li>朝辞白帝彩云间，</li>
		<li>千里江陵一日还，</li>
		<li>两岸猿声啼不住，</li>
		<li>轻舟已过万重山，</li>
	</ol>
	<ol type="i">
		<li>朝辞白帝彩云间，</li>
		<li>千里江陵一日还，</li>
		<li>两岸猿声啼不住，</li>
		<li>轻舟已过万重山，</li>
	</ol>
</body>
</html>

3.3 列表标签-定义列表

<dt><dd>是同级标签

第四章图像和超链接

4.1 图像

图像标签

绝对路径：

相对路径：

效果图

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p>一幅图像:<img src="http://climg.mukewang.com/58c112ed0001370f03000300.jpg" width="30%"></p>
	<p>一幅动画图像:<img src="http://climg.mukewang.com/58c11324000144f703550220.jpg" height="50px" width="50px"></p>
</body>
</html>

4.2 超链接

超链接标签

空链接：<a href="#"> </a>

4.3 锚链接

定义锚（同一页面）

任务：

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p><a name="dingbu">这里是顶部</p>
	<p><a href="#shuiguo">水果</p>
	<p><a href="#shucai">蔬菜</p>
	<p><a href="#yundong">运动</a></p>
	<h3><a name="shuiguo">水果</a></h3>
	<ul>
		<li>香蕉</li>
		<li>苹果</li>
		<li>葡萄</li>
		<li>梨</li>
		<li>西瓜</li>
		<li>樱桃</li>
		<li>菠萝</li>
		<li>橙子</li>
		<li>柚子</li>
		<li>芒果</li>
	</ul>
	<p><a href="#dingbu">返回顶部</a></p>
	<h3><a name="shucai">蔬菜</a></h3>
	<ul>
		<li>西红柿</li>
		<li>黄瓜</li>
		<li>土豆</li>
		<li>芹菜</li>
		<li>蒜苔</li>
		<li>西葫芦</li>
		<li>香菇</li>
		<li>菠菜</li>
		<li>豆角</li>
		<li>油菜</li>
	</ul>
	<a name="yundong"></a>
	<p><a href="#dingbu">返回顶部</a></p>
</body>
</html>

定义锚（不同页面）

4.3 链接扩展功能

1. 电子邮件链接

2.文件下载

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<a href="mailto:2539391306@qq.com.cn">邮箱链接</a>
	<a href="58ca5b6700018dfc02400135.zip">文件下载</a>
</body>
</html>

原文链接：https://blog.csdn.net/qq_43405634/article/details/103789819

序列表

经过之前关于表格、表单的学习后，再来学习列表，就显得非常的简单和容易理解了。

学习是构建知识体系的过程，没有形成体系的知识学习再多也是碎片，是很难形成技能或深刻理解的，因此，如果您是零基础的初学者，第一次看我的教程，如果时间允许的话，请务必从目录中找寻第一篇，循序渐进的学习。

列表分为有序列表、无序列表和定义列表，同时列表之中还能嵌套列表，和表格非常相似。

首先介绍有序列表

要用<ol></ol>标签告诉浏览器这里是列表。

然后在里面添加<li></li>标签，在这个标签中添加内容即可。

示例代码如下

<p>我喜欢的水果</p>
<ol>
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ol>

大家可以把它放到一个新的html框架中看看效果。

完整代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>列表</title>
  </head> 
  <body>
  <h>有序列表</h>
  <p>我喜欢的水果</p>
  <ol> 
    <li>葡萄</li> 
    <li>西瓜</li> 
    <li>苹果</li> 
    <li>桃子</li>
    </ol>
  </body> 
  </html>

页面效果如下：

通过修改<ol>标签中的type属性我们可以改变序号显示的样式，默认的是数字，大家看一下不同的type值的不同效果吧！示例代码如下：

<ol type="A">
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ol>
<ol type="a"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
  、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>苹果</li> <li>桃子</li></ol>

页面效果如下：

下面给大家介绍一下搜狗输入法中如何输入罗马数字。

step1.点击"输入方式"

step2.点击"特殊符号"后选择数字序号，找到罗马数字即可

除此之外我们还可以使用CSS的方法为有序列表的序号提供更多样式。在<ol>标签中修改style属性可以直接调用这些css中的属性。写法是style="list-style-type:属性值；"

示例代码如下：(使用日语中的片假名表示序号)

<ol style="list-style-type:hiragana;"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ol>

页面效果如图所示：

是不是很有趣，这里的测试就不一一做了。为大家奉上list-style-type的值的列表与说明，大家自己课下去尝试，这个列表中既有有序列表的值也有无序列表的值。

如图：

资料来自w3school

无序列表

无序列表与有序列表的区别在于最外层的标签，它的写法是这样的：<ul></ul>。

有一个记忆的小技巧，有序的英文是order，故有序列表为order list（列表），缩写为ol。

无序为unorder，无序列表为unorder list，缩写为ul。

无序列表<ul>标签的type属性用来控制列表前的标记显示演示。

示例代码如下：

<h>无序列表</h>
<p>我喜欢的水果</p>
<ul> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ul>
<ul type="disc"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ul>
<ul type="circle"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ul>
<ul type="square"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>苹果</li> 
  <li>桃子</li>
</ul>

页面效果如下：

通过图片我们可知，无序列表默认的列表标识就是type="disc"。

style属性的话大家自己试试吧，这里就不啰嗦了。

定义列表

这个列表比较特殊，也比较不常见，主要就是显示名词定义的。

首先要写入<dl></dl>标签。这是告诉浏览器这里是个定义列表，和<ol>或<ul>一样。

定义的英文是definition，定义列表就是definition list，缩写是dl。

下面在<dl></dl>标签中间写入定义的名称<dt></dt>,即definition title（标题）。

与定义名称标签并列的是定义描述<dd></dd>,即definition describe（描述）。

示例代码如下：

<dl> 
  <dt>计算机</dt> 
  <dd>用来计算的仪器 ... ...</dd> 
  <dt>显示器</dt> 
  <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

页面效果如下：

今天的内容结束了！

列表嵌套列表的测试大家自己试试吧，学到现在，相信你们都可以完成了！

如果您喜欢我的教程请关注我，点赞也能让我充满动力！

如果您有任何疑问请给我留言，如有问题或错误请予以斧正！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

例

HTML 两个列表实例：一个有序列表 (<ol>) 和一个无序列表 (<ul>) :

<ol>

<li>Coffee</li>

</ol>

<ul>

<li>Coffee</li>

</ul>

浏览器支持

目前多数主流浏览器支持 <li>标签。

标签定义及使用说明

<li> 标签定义列表项目。

<li> 标签可用在有序列表（<ol>）、无序列表（<ul>）和菜单列表（<menu>）中。

HTML 4.01 与 HTML5之间的差异

"type" 属性在 HTML 4.01 已被废弃。HTML5 不支持该属性。

"value" 属性在 HTML 4.01 已被废弃。HTML5 不支持该属性。

提示和注释

提示: 请使用 CSS 来定义列表和列表项目的类型。

属性

属性	值	描述
type	1AaIidiscsquarecircle	HTML5 不支持该属性。HTML 4.01 已废弃该属性。不赞成使用。请使用样式取代它。规定使用哪种项目符号。
value	number	不赞成使用。请使用样式取代它。规定列表项目的数字。

全局属性

<li> 标签支持全局属性，查看完整属性表 HTML 全局属性。

事件属性

<li> 标签支持所有 HTML 事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：爬虫利器 Beautiful Soup 之搜索文档
下一篇：惊喜大曝光！如何制作网页投票?

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端零基础入门-步骤一：页面结构层HTML-01-HTML基础

1-HTML基础

第1章 基础语法

2.2 文字和段落标签

特殊符号

任务

第3章 列表标签

3.1 列表标签-无序列表

3.2 列表标签-有序列表

3.3 列表标签-定义列表

第四章 图像和超链接

4.1 图像

4.2 超链接

4.3 锚链接

4.3 链接扩展功能

HTML完整学习目录

您的项目需求

第1章基础语法

第3章列表标签

第四章图像和超链接