HTML基础一——常用基本标签（段落p，标题h，超链接a，列表（ul/ol)）

最新推荐文章于 2023-02-24 11:02:41 发布
最新推荐文章于 2023-02-24 11:02:41 发布
阅读量1k 收藏 3
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41798029/article/details/106594340
版权

脚本语言：
HTML：超文本标记语言（Hypertext Markup Language）
静态脚本：内容不会改变
#########################
Javascript/JQuert
动态脚本：页面有一些交互效果
#########################
JSP/Servlet:
使用Java语言和服务器语言进行交互
#########################
XML：可扩展的标记语言
#########################
HTML编写规范：

  1. 标签和属性一般都小写
  2. 标签一般成对出现
  3. 少数标签不成对
  4. <标签名 属性=“属性值”></标签名>属性值一般用双引号
  5. 标签嵌套一律嵌套

HTML代码基本结构

<!DOCTYPE html>
<!-- doc：文件，type:类型 html:html文件-->
<html>
	<head>
		<meta charset="UTF-8">
		<!--设置编码格式-->
		<title>网页的标题名</title>
	</head>
	<!--head:头部-->
	<body>
		<!--body:主体-->
		如果直接在html中写文本,浏览器会以默认的格式输出
		比如这两句,会放在一行
		
		常用标签:
		<p>段落标签:我是一个段落</p>
		
		<h1>我是一个一级标题</h1>
		<h2>我是一个二级标题</h2>
		<h3>我是一个三级标题</h3>
		<h4>我是一个四级标题</h4>
		<h5>我是一个五级标题</h5>
		<h6>我是一个六级标题</h6>

		<span>空标签,哪里需要哪里搬</span>
		<br />
		
		<！--br标签：换行-->
		<i>这是斜体标签</i>
		<em>这也是斜体标签&nbsp;&nbsp;空格用"&nbsp;"</em>
		<br />
		
		<hr />
		<！--hr标签：横线-->
		
		<b>这是粗体标签</b>
		<strong>这也是一个加粗标签</strong>
		<br />
		
		<big>这是大号字体</big>
		<small>这是小号字体</small>
		<br />
		
		<code>计算机的文本</code>
		
		<!--标签嵌套--><br />
		<p>今天的天气<sup><b>贼热</b></sup>,明天好像也是<sub>晴天</sub></p>
		
		<mark>颜色标记标签</mark>
		<ins>(下划线)插入标签</ins>
		<del>(划掉)删除标签</del>
		
		<acronym title="小陈">哈哈哈</acronym>
		
		<!--
        	&nbsp;空格
        	&lt;小于号<
        	&gt;大于号>
        	&quto;双引号
        	&copy;版权符号
        -->
		<p>4&lt;5</p>
		<p>4&gt;5</p>
		<p>&copy;小城有限公司</p>
		<p>&reg;注册商标</p>
		<p>&trade;商标</p>
		
		<!--
			<img />必须要有的属性:src
			alt:图片加载失败,就显示这个文字
		-->
		<img src="img/QQ截图20200519201954.png" width="500" height="400" alt="图片加载失败"/>
		<img src="C:\Users\Desktop\QQ截图20200519201954.png" width="500" height="400" alt="图片加载失败"/>
		<br />
		
		<!--
			<a href="#" target="">我是一个链接标签</a>
			target:
			_self:当前窗口进入链接
			_blank:新窗口打开
		-->
		<a href="#">我是一个链接标签</a>
		
		<!--
        	锚点应用
        	href="#"跳转本身
        -->
        <a href="#first">第一部分</a>
        <a href="#second">第二部分</a>
        <p>
        	<a name="first"></a>
        	第一部分
			58同城旗下在线招聘网站,可以方便HR在线邀约合适的求职者,通过对求职者信息的筛选,快速招工.
			www.58.com 2020-05- 6239条评价广告
			为您推荐：58同城网上兼职招聘招聘热门职位58同城招聘保证招聘 58
			58上怎么招聘招聘会在那招聘会有招聘的吗?从都招聘
			找工作 找58 工作找的快官方
		</p>
		<p>
			<a name="second"></a>
			第二部分
			58同城」海量热门工作信息,职位真实有效,虚位以待,只等你来.58同城招聘平台,高薪招聘,免费注册投递.
			www.58.com 2020-05- 6239条评价广告
			【找工作_人才招聘_58同城网招聘】-58.com
			58同城网招聘,助找工作,求职者,大学生,解决找工作难题。为找工作提供真实准确的人才招聘,职位,招工信息,也可免费发布				找工作信息.找工作哪个网站好>>上58.com 58...
			58同城 - 百度快照 - 1855条评价
			58同城-国内领先分类信息网站官方
			58同城分类信息网，为你提供房产、招聘、黄页、团购、交友、二手、宠物、车辆、周边游等海量分类信息，充分满足您免费查看/发布信息的需求。
			58同城 - 百度快照 - 1855条评价
		</p>
	</body>
</html>

常用标签——列表
无序列表


    有序列表 

      <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表</title>
	</head>
	<body>
		<ul>
			<!--无序列表-->
			<li>米饭</li>
			<li>牛肉</li>
			<li>鸭肉</li>
			<li>饺子</li>
			<li>面条</li>
		</ul>
		<!--
            	无序列表前面标志的类型type:
            		disc:默认值，实心圆
            		circle：空心圆
            		square：实心方块
            		设置无标志
           -->
          <ul type="square">
			<!--无序列表-->
			<li>米饭</li>
			<li>牛肉</li>
			<li>鸭肉</li>
			<li>饺子</li>
			<li>面条</li>
		</ul>
		
		<!--
            	有序列表前面标志的类型type:
            		1：默认值
            		A:
            		a:
            		I:
            		i:
           -->
		<ol>
			<li>裙子</li>
			<li>奥迪A9</li>
			<li>口红</li>
			<li>头盔</li>
			<li>砍刀</li>
		</ol>
		<ol type="I">
			<li>裙子</li>
			<li>奥迪A9</li>
			<li>口红</li>
			<li>头盔</li>
			<li>砍刀</li>
		</ol>
	</body>
</html>

      练习一

      家电排行

      <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>家电排行榜</title>
		<style>
			li{list-style-type: none;}
		</style>
	</head>
	<body>
		<h2>家电排行榜</h2>
		<img src="img/家电img/tv01.jpg"/>创维电视创维42E5CHR 42英寸 ￥2799.00 
		<hr>
		<img src="img/家电img/tv02.jpg"/>海信电视海信LED42EC260JD 42英寸 ￥2848.00
		<hr>
		<img src="img/家电img/tv03.jpg"/>索尼电视索尼 KLV-40R476A 40英寸 ￥3599.00
		<hr>
		<img src="img/家电img/tv04.jpg"/>创维电视创维42E83RE 42英寸 ￥3699.00 
		<hr>
		<img src="img/家电img/tv05.jpg"/>创维电视创维42E7BRE 42英寸 ￥3299.00 
		<hr>
	</body>
</html>

      效果展示
      在这里插入图片描述

      练习二

      HTML试卷模拟

      <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML在线考试</title>
	</head>
	<body>
		<h1>HTML在线考试</h1>
		<ol>
			<li>
				HTML中，换行使用的标签是（）。 
				<ol type="A">
					<li>&lt;br /&gt;</li>
					<li>&lt;p&gt;</li>
					<li>&lt;hr /&gt;</li>
					<li>&lt;img/&gt;</li>
				</ol>
			</li>
			<li>
				标签的（）属性用于指定图像的地址。 
				<ol type="A">
					<li>alt</li>
					<li>href</li>
					<li>src</li>
					<li>addr</li>
				</ol>
			</li>
			<li>
				创建一个超级链接使用的是（）标签。
				<ol type="A">
					<li>&lt;a&gt;</li>
					<li>&lt;ol&gt;</li>
					<li>&lt;img /&gt;</li>
					<li>&lt;hr /&gt;</li>
				</ol>
			</li>
			<li>
				&lt;img /&gt;标签的（）属性用来设置图片与旁边内容的水平距离。 
				<ol type="A">
					<li>hspace</li>
					<li>vspace</li>
					<li>border</li>
					<li>alt</li>
				</ol>
			</li>
			<li>
				下面HTML结构中，不属于列表结构的是（）。 
				<ol type="A">
					<li>ul-li</li>
					<li>ol-li</li>
					<li>dl-dt-dd</li>
					<li>p-br</li>
				</ol>
			</li>	
		</ol>
	</body>
</html>

      效果展示
      在这里插入图片描述
      其余练习题效果：
      在这里插入图片描述
      在这里插入图片描述

      顾拾忆~
      关注
      【前端基础篇】快速学习HTML常用标签和属性
      前端知识分享喵
      06-12 1375
      WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure-html）、表现（Presentation-css）和行为（Behavior-javascript）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
      html H标题标签的用法
      12-09
      对于H标签的用法特别是h1的用法一直是个争议的问题，也是值得我们研究的问题。我在总结了前人经验的基础上结合自己对H标签的理解，写下了这篇文章，希望对大家有所帮助。 什么是H标签？ W3C指出h1-h6标签可定义标题。h1定义最大的标题。h6定义最小的标题。 h1，h2，h3，h4，h5，h6，作为标题标签，并且依据重要性递减。我认为遵循这样的原则是很有必要的，它能让页面的层级关系更清楚，让搜索引擎更好地抓取和分析出页面的主题内容等等。为了更好的理解，请看下面的代码： <body> <h1>一级标题</h1> <p>段落</p> <div> <h2>二级标题</h
      HTML--超链接标签
      weixin_50392306的博客
      04-28 3804
      超链接标签 <a>用于定义超链接，作用是从一个页面链接到另一个页面 链接的语法格式 <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> 属性 作用 href 用于指定链接目标的url地址，（必须属性）当标签应用href属性时，它就具有了超链接的功能 target 用于指定链接页面的打开方式，其中_self为默认值当前窗口打开，_blank为在新窗口打开。 例如：<a href="http://www.q
      html前端常用标签的概括：title，标题与段落，水平线与换行符，常见的转义符，链接，图片标签，表格，列表，常见的无意义标签，表单
      weixin_45620570的博客
      01-20 227
      hello HTML 一级标题h1 二级标题h2 三级标题h3 四级标题h4 五级标题h5 六级标题h6 段落标签p 我是水平线 哥哥 妹妹 加一个换行符把 弟弟 我是空格：   我前面是不是有个空格 我是大于号：> 我是小于号：< 点击我，本窗口访问百度 点击我，新窗口访问百度 ...
      html标题标签h,标题标签h与段落p标签
      weixin_33571513的博客
      06-11 709
      html标题标签网页中的标题标签分为6级，从到随着数字的增大 标题越小，标题标签之间不可嵌套，标题标签为双标签，必须以配套使用，如。效果如下图代码效果html段落标签网页中段落标签为，它也是双标签，必须以结束。段落标签之间不可嵌套，如果嵌套之后，浏览器会自动解析，不显示嵌套效果。代码效果html换行标签网页中段落标签会起到自动换行的作用，但有时候我们不想以段落的形式显示，只是单纯的换行，我们可能会...
      Html学习笔记2：基本格式、标签、超链接
      孔孟老儿
      09-23 459
      基本的代码 html:代表了网页的开始和结束 head:网页的相关描述信息 body:定义了网页的主体内容的开始和结束 注意编码 声明编码后的格式 在body里面加一个超链接 百度 Head里面的头标签 rel 告诉浏览器   这是一个icon的文件 Meta里
      HTML——标签，路径，锚点，列表
      流楚丶格念的博客
      06-24 4743
      这里写目录标题标签换行标签(熟记)div span标签(重点)文本格式化标签(熟记)标签属性图像标签img (重点)链接标签(重点)锚点定位 （难点）base 标签 基本的注释标签路径(重点、难点)相对路径绝对路径列表标签无序列表 ul （重点）有序列表 ol （了解）自定义列表（理解）链接小案例 标签 换行标签(熟记) 单词缩写： break 打断 ,换行 在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 &l
      HTML基本语法——文字 图片 超链接 表格 表单 框架
      tcbdbd的博客
      07-25 1291
      HTML 超文本标记语言 属性 <a href="">内容</a> <img src=""/> 不区分大小写 建议小写 作用：开发静态页面 运行环境: 浏览器 开发环境:记事本 dw hbuilder 标题： <h1>我的第一个标题</h1> 段落： <p>我的第一个段落</p> 列表： 有序列表： &...
      HTML第一章-基本标签
      12-07
      - `<ul>`和`<ol>`：无序列表和有序列表。 - `<li>`：列表项。 4. **图像标签** - `<img>`：插入图片，`src`属性定义图片源，`alt`属性提供替代文本。 5. **区块元素** - `<div>`：定义一个内容区域，常用于...
      HTML学习篇（三） 标题，段落和列表
      豪阁的个人博客
      01-13 2139
      下面将分别总结HTML中标题（h1~h6）、段落（p）和列表（ul、ol）的使用。 标题 HTML里面表示标题的是h1、h2、h3、h4、h5、h6标签，通过编写以下代码： &lt;body&gt; &lt;h1&gt;这是标题 1&lt;/h1&gt; &lt;h2&gt;这是标题 2&lt;/h2&gt; &lt;h3&gt;这是标题 3&lt;/h3&gt;
      HTML三个列表标签 ul ol dl
      qq_41877857的博客
      12-26 1349
      ul标签（无序列表） ul标签里面的一级子标签只能是<li>，而li标签里面可以是任意标签 <ul> <li>苹果</li> <li>香蕉</li> <li>雪梨</li> </ul> 效果 ol标签（无序列表） ol标签里面的一级子标签只能是<li>，而li标签里面可...
      HTML HTML 标题 (stage1-13)
      MAC--芳
      12-29 387
      基础篇-HTML 标题 1.标题 标题（Heading）是通过 - 标签进行定义的. 定义最大的标题。 定义最小的标题。 实例： h1>这是一个标题。h1> h2>这是一个标题。h2> h3>这是一个标题。h3> 注释: 浏览器会自动地在标题的前后添加空行 2.标题很重要 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
      HTML自定义链接。实现段落导标题
      MZ199290的博客
      09-05 1505
      一。 Document 标题11111 标题22222 标题33333 标题11111 标题11111 标题11111 二 Document 段落1111 段落2222 段落3333 段落4444
      html超级链接和常用标签
      Brooke_w的博客
      07-20 443
      html超级链接和常用标签0720
      【Web前端—HTML】认知部分（二 ）标签 有示例
      青山的青衫的博客
      06-30 1067
      web开发HTML标签相关
      html 中<ul>不占空间,HTML-ul分分钟理解
      weixin_28982257的博客
      06-08 603
      在HTML中，列表有三种，如图分别是有序、无序和自定义列表。上面是我在网络上找到的一张图片很明了就看以看出来，今天要分享的就是其中的无序列表Ul(unordered list)，给大家整理了一下我所知道的。希望能对刚刚入门的不是很懂的人有所帮助。无序列表无序列表是一个没有顺序的项目的列表，此列项目使用粗体圆点(典型的小黑圆圈)进行标记。●无序列表始于 标签。每个列表项始于 ,且无序列表ul的各...
      面包屑导航
      最新发布
      ChengoShan的博客
      02-24 1961
      面包屑是我们在项目开发过程中比较常用的导航形式，市场上也有很多的插件可以用，但是小程序开发中限于包的大小，这种简单的导航引一个插件得不偿失，所以可以选择手撸是最好的方式。该篇文章原理上解释了面包屑的实现原理，应该指的大家借鉴。
      html 常用标签及其全称,HTML常用标签及其全称(示例代码)
      weixin_34621186的博客
      06-15 224
      a 超级链接(anchor)abbr 简写的(abbreviation)acronym 首字母缩略词(acronym)address 地址(address)b 粗体(bold)bdo局部控制文字方向big 放大(big)blockquote 引用块(blockquote)br 换行(break)center 居中(center)cite 引用(cite)code 代码(code)dl 字典列...
      HTML标签及属性
      weixin_45921263的博客
      01-27 848
      HTML标签及属性 一、HTML标签         其标签分为单标签和双标签 1.单标签 标签 描述 <img scr = "图片所在的路径" alt = "描述图片的信息（在图片发生损毁或者受其他影响时，作为描述）" width = "设置图片的宽" height = "设置图片的高" title = "图片的标题"/> 行内块标签（图片的引入） <br/> 换行 <hr/> 也叫空标签,没有元素内容,只
      HTML基础：文本分段与超链接的创建
      本资源介绍了HTML基础中的一个重要知识点——文本与超链接的创建。HTML（HyperText Markup Language）是用于创建网页结构的语言，A标记符是核心元素，用于创建超链接。A标记符的基本语法是`<a href="目标URL">链接...
      评论
      添加红包

      请填写红包祝福语或标题

      个

      红包个数最小为10个

      元

      红包金额最低5元

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

      抵扣说明：

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

      余额充值