HTML基础知识学习02

最新推荐文章于 2023-08-16 18:05:03 发布
最新推荐文章于 2023-08-16 18:05:03 发布
阅读量208 收藏
点赞数
分类专栏： HTML基础学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60830137/article/details/119656619
版权

1.超链接标签

<a>标记表示网页中的一个超链接【锚点】

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

HTML 链接---href 属性[描述了链接的目标]

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

  1. 一个未访问过的链接显示为蓝色字体并带有下划线。
  2. 访问过的链接显示为紫色并带有下划线。
  3. 点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

1.1 链接的语法格式

<a href=”跳转目标”  target=”目标窗口的弹出方式”>文本或图像</a>

单词anchor 的缩写，意为：锚

两个属性的作用如下：

属性

作用

href

用于指定链接目标的url地址，（必须属性）当为标签应用属性时，它就具有了超链接的功能

target

用于指定链接页面的打开方式，期中_self为默认值，_blank为在新窗口中打开方式。

_blank----在新窗口中显示资源
_self-------在当前窗口中显示资源,会覆盖之前的内容【默认的】

1.2链接分类

1. 绝对路径表示的超链接

<a href="F:/20210810/20210812HTML(3)/testhrefpath.html">绝对路径表示的超链接</a><br>

2. 相对路径表示的超链接

​​​​​​​<a href="../testhrefpath.html">相对路径表示的超链接</a><br>

3. 网络地址表示的超链接

<a href="http://www.baidu.com/">网络地址表示的超链接</a><br>

图片跳转网页

<a href="https://www.baidu.com/s?wd=%E5%AE%9D%E8%97%8F%E6%B1%9F%E8%A5%BF&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pcs/">
        <img src="https://www.baidu.com/img/PC_69793e3487cd39e10b69d7358be8ca54.gif" width="200px" height="200px"/ >
</a>

2.HTML <head> 元素

1. HTML head 元素中的子元素--title元素【设置网页标题】

2. HTML head 元素中的子元素--base元素【设置当前页面中所有链接的基础访问地址】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML head 元素中的子元素</title>
		<base href="http://www.baidu.com"/>
	</head>
	<body>
		<h4>HTML head元素中的子元素---title元素[设置网页标题]</h4>
		<h4>HTML head元素中的子元素---base元素[设置当前网页中所有链接的基础访问地址]</h4>
		<a href="/s?wd=%E5%AE%9D%E8%97%8F%E6%B1%9F%E8%A5%BF&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pcs/">宝藏江西</a><br>
	     <a href="/index.html">百度首页</a>
	</body>
</html>

3. HTML head 元素中的子元素--link元素【设置导入外部css样式文件到当前网页中】

4.HTML head 元素中的子元素--style元素【设置当前网页中css样式】

5. HTML head 元素中的子元素--script元素【为当前网页中添加javascript脚本程序】

id : 图片元素的编号

onmouseover:鼠标进入

onmouseout：鼠标推出

onmouseover="fangda();" onmouseout="suoxiao();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML head 元素中的子元素</title>
		<!-- <base href="http://www.baidu.com"/> -->
		<link rel="stylesheet" href="mytest.css">
		<style>
			h5{
				font-size: 30px;
				color: #7FFF00;
				background-color: #0000FF;
			}
		</style>
		<!-- 
				<script>
					function fangda(){
						var imgdomobj=document.getElementById("img1");
						imgdomobj.width="200";
						imgdomobj.height="200";
					}
					function suoxiao(){
						var imgdomobj=document.getElementById("img1");
						imgdomobj.width="100";
						imgdomobj.height="100";
					}
				</script>
				 -->
				 <script src="mytest.js"></script>
	</head>
	<body>
		<h4>HTML head元素中的子元素---title元素[设置网页标题]</h4>
		<h4>HTML head元素中的子元素---base元素[设置当前网页中所有链接的基础访问地址]</h4>
		<a href="/s?wd=%E5%AE%9D%E8%97%8F%E6%B1%9F%E8%A5%BF&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pcs/">宝藏江西</a><br>
	     <a href="/index.html">百度首页</a>
		 <h4>HTML head元素中的子元素---link元素[设置导入外都css样式文件到当前网页中]</h4>
		 <p>测试link标记</p>
		 <h4>HTML head 元素中的子元素---style元素[设置当前网页中css样式]</h4>
		 <h5>测试style元素</h5>
		 <h4>HTML head 元素中的子元素--script元素[为当前网页中添加javascript脚本程序]<br>
		 <img id="img1"" src="imgs/avatar3.png" width="100px" height="100px"
		 onmouseover="fangda();" onmouseout="suoxiao();"/>
	</body>
</html>

3.表格标签

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table>标记表示一个表格
<tr标记>表示表格中的行
<td>标记表示表格中的行中的列
<thead>标记表示表格中的表头
<tbody>标记表示表格中的身体

<border>属性表格的边框属性

<cellpadding>属性表格中单元格中的内容与单元格边框之间的距离

<cellspacing>属性表格中单元格之间的间距

<colspan>属性设置表格跨列【单元格的左右合并】

<rowspan>属性设置表格跨行【单元格的上下合并】

4.列表标签

表格是用来显示数据的，那么列表就是用来布局的。

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

4.1有序列表

ol标记表示一个有序列表
li标记表示列表中的每一项
ol中type 属性设置有序列表的标号[a,A,i,I,1]
ol中的start 属性设置有序列表的标号起始值

<ol type="a" start="c">
	<li>家用电器</li>
	<li>手机/运营商/数码</li>
	<li>电脑/办公</li>
</ol>

 

 

4.2无序列表

ul标记表示一个无序列表

li标记表示列表中的每一项

ol中的type属性设置列表的标号circle/square/disc[默认值]

<ul type="disc">
	<li>家用电器</li>
	<li>手机/运营商/数码</li>
	<li>电脑/办公</li>
</ul>

 

 

 

4.3自定义列表

dl标记表示一个自定义序列表
dt标记表示自定义序列表的主标题
dd标记表示自定义序列表的主标题下的次级内容
dd标记不会嵌套在dt标记下

<dl>
	<dt>家用电器</dt>
		<dd>空调</dd>
		<dd>电脑</dd>
		<dd>洗衣机</dd>
	<dt>手机/运营商/数码</dt>
		<dd>苹果</dd>
		<dd>小米</dd>
		<dd>华为</dd>
</dl>

 

 

4.4嵌套列表

<ol type="a" start="c">
	<li>家用电器</li>
	<li>手机/运营商/数码</li>
	<li>电脑/办公</li>
<ul type="disc">
	<li>家用电器</li>
	<li>手机/运营商/数码</li>
	<li>电脑/办公</li>
<dl>
    <dt>家用电器</dt>
		 <dd>空调</dd>
		  <dd>电脑</dd>
		  <dd>洗衣机</dd>
	<dt>手机/运营商/数码</dt>
		  <dd>苹果</dd>
		  <dd>小米</dd>
		  <dd>华为</dd>
		</dl>
		</ul>
	</ol>

 

 

 

 

列表元素是会自动换行的

<ul type="disc">
		<li>家用电器</li>
		<li>手机/运营商/数码</li>
		<li>电脑/办公</li>
	</ul>111111111

 

 

5. HTML 框架

iframe标记表示一个框架元素
在当前的html页面中开辟出一块空间单独显示一个html文件
width---设置框架的宽度
height--设置框架的高度
src--设置需要显示的html文件
frameborder--设置是否显示框架的边框【属性值为 "0" 移除iframe的边框】
name--设置当前框架的名称，提供给超链接的target属性，达到联动效果​​​​​​​​​​​​​​​​​​​​​

1. 开辟空间

<iframe width="400px" height="400px" src="test1.html"></iframe>

 

 

 

 

2. 联动

frameborder---设置是否显示框架的变框【属性值为“0”移除iframe的变框】

name---设置当前框架的名称，提供给超链接的target属性，达到联动效果

使用iframe来显示目标链接页面

<a href="test1.html" target="myiframe">打开test1.html</a>
		<a href="test2.html" target="myiframe">打开test2.html</a> <br>
		<iframe name="myiframe" src="test1.html" width="400px" height="400px" frameborder="no"></iframe>

 

 

 

宇智波-林中路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础知识学习
07-08
HTML基础知识学习，html知识是做web开发必备的知识点。
点击a标签怎么发起qq聊天
Ariel的博客
10-18 3554
随碟附送
HTML的基本标签II
刘宝儿的博客
04-21 1465
HTML的基本标签a 超链接的标签 a 超链接的内容包括文字超链接、图片超链接这种单击之后可以跳转到新的页面，导航栏，通过导航栏进入到各个界面里面去。 格式： < a herf =“网址”> 文字或图片 < /a> a标签成对出现，其中加粗字体“文字或图片”部分的内容就是我们用来单击进行连接的文字或图片部分。 href 属性是超链接的意思，通过设置这个属性的取值，来设定链...
全国计算机等级考试二级Web程序设计
weixin_49346672的博客
08-16 1316
Java servlet是什么?在Web服务器端加载并运行的Java应用程序具体运行在Servet引]擎管理的JVM上,Servet是开发服务器端应用程序的一个很好选择，Servlet与JSP结合使用，能提供更强大的服务器端功能。JSP 简介 :JSP 与PHP、ASP、ASP.NET 等语言类似，运行在服务端的语言。原理:JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以结束。
android 的a标签,Android开发技巧之在a标签或TextView控件中单击链接弹出Activity(自定义动作)...
weixin_29664819的博客
05-26 375
在5.2.1节和5.2.2节介绍了标签以及TextView自动识别的特殊文本(网址、电话号、Email等)，这些都可以通过单击来触发不同的动作。虽然这些单击动作已经可以满足大多数需要了，但如果读者想在单击链接时执行任意自定义的动作，那么本节的内容非看不可。现在让我们使用5.2.1节介绍的方法重新查看Html.java文件的内容，随便找一个处理Html标签的方法，例如，endA方法。该方法用于处理标...
「HTML和CSS入门指南」a 标签详解
a451319296的博客
06-04 2277
标签是 HTML 中用于定义超链接的标签，可以用来实现网页间的跳转、下载文件等功能，并且可以与其他 HTML 元素配合使用。通过灵活运用 标签和属性，我们可以帮助用户更好地浏览页面内容，同时也可以美化和装饰页面。在实际应用中需要注意遵循 HTML 的规范，合理设置各种属性，并且避免滥用嵌套其他元素。
html页面中点击链接自动跳出相应用户的QQ聊天窗口的做法
热门推荐
csd_xuming的专栏
10-26 3万+
没事干 浏览网页，突然发现这个功能，本以为需要和qq有合作，后来发现非常简单，记录一下以后有用~ 首先前提是 必须装有QQ软件，版本的话我现在是QQ2011  beta版， 可以使用。 编辑一个html文件，写一个链接标签，标签内容如下： 点我和QQ是1101101101的用户聊天 效果如图： 点击该链接，我是用的是goo
简单构写百度页面（可以参考一下）
m0_65054943的博客
05-22 933
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=+++++++++++++++++++++++++++edge"> <meta name="viewport" content="width=device-width, initia...
百度首页设计（HTML）
NSSWTT的博客
02-18 7761
一. 百度首页总结。 知识点1：完整的网页的布局顺序。 1.先对网页整体的区域进行划分，划分为多个div区域。 百度首页由头部的一个文字导航，中间的一个按钮和一个输入框以及下边的文字简介和导航组成（可以先大致设置3个div，即上 ，中 ，下三部分）。 文字导航部分（上） ...
Python实现接口自动化测试
qq_39768010的博客
07-07 2294
python实现接口自动化测试 课程大纲介绍 目标：基于Python结合requests库实现接口自动化测试 大纲： 1.Requests是什么？ 2.Get、Post、Put、Delete请求 3.接口中Session、Cookie、Token应用 4.基于Unittest框架继承接口自动化 接口自动化测试介绍 目标： 1.理解接口自动化测试的概念 2.了解接口自动化测试的实现方法 1.接口自动化测试 1.1概念 接口测试：是对系统或组件之间的接口进行测试，主要是校验数据的交换、传递和控制管理过程，以及相
html基础知识学习笔记分享
04-09
对html的一个基础知识的了解，相比后端中包含大量的算法之类的编码。前端的编写明显的简单了很多，里面主要是对一些常用标签进行了一些了解和分享
HTML网页设计基础知识学习专题培训课件.ppt
11-20
HTML网页设计基础知识学习专题培训课件.ppt
HTML基础知识点学习一
06-30
前端入门基础知识点,HTML知识点整理,用Typora写的
html基础学习知识
04-17
学习web前端时可以用到的小知识，一些标签的详细使用方法
node-v5.11.0-x86.msi
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
41532698775097Facebook Lite_405.0.0.8.113_apkcombo.com.armeabi-v7a.apk
05-07
41532698775097Facebook Lite_405.0.0.8.113_apkcombo.com.armeabi-v7a.apk
2024-2030中国RDF制粒机市场现状研究分析与发展前景预测报告.docx
05-07
2024-2030中国RDF制粒机市场现状研究分析与发展前景预测报告
财务困境-RLPM模型.xlsx
最新发布
05-07
详细介绍及样例数据：https://blog.csdn.net/li514006030/article/details/138549562
基于python实现的Socket服务器与传感器通讯手段实现的家庭能源管理系统
05-07
【作品名称】：基于Socket作为服务器与传感器通讯手段实现的家庭能源管理系统 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
html入门基础知识无图
10-08
HTML是Web前端开发的核心技术之一，它负责网页的架构，将内容展示在网页上。HTML标签用于描述网页的结构，例如标题、段落、链接、图像等。学习HTML的基础知识包括了解HTML的基本结构和常用标签的使用方法。 以下是HTML的基础知识无图的内容： - HTML文档的基本结构是由<!DOCTYPE>声明、<html>元素、<head>元素和<body>元素组成。 - 在<head>元素中，可以设置网页的标题、引入样式表和脚本等。 - 在<body>元素中，可以添加网页的内容，如文本、图像、链接等。 - HTML标签使用尖括号包围，通常成对出现，如<p>表示段落标签，</p>表示结束段落标签。 - 标签可以有属性，属性用于描述标签的额外信息，如<img src="image.jpg">中的src属性指定图像的来源。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值