day11学习 前端HTML网页基本结构、标签及超链接的使用、内联框架

已于 2022-07-12 20:34:06 修改
阅读量293 收藏
点赞数
文章标签： 前端 学习 html html5 前端框架
于 2022-07-12 18:29:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cosumerD/article/details/125749172
版权

前端

<!-- 这是HTML注释格式 -->

前端：三大技术

  • HTML：负责显示页面内容（文字、按钮、输入框等）
  • CSS：负责页面内容的布局和样式
  • JavaScript：负责实现功能。

前端文件的后缀名：html、htm、shtml

  • html现在最常用的前端文件后缀名。
  • htm和html相等，从前DOS操作系统后缀名存在限制，文件后缀名长度<=3
  • shtml:内置了脚本命令的html文件

HTML页面基本结构框架

HTML文件可理解为是一个<html标签>，<html>标签内包含<head>标签和<body>标签。

  • <head>标签存放页面部分配置项，<body>标签显示页面内容

<html>标签分为双标签（一般标签）、单标签（自闭合标签）

  • 双标签：<标签名 属性1=属性值1 属性2=属性值2 .....>内容</标签名>
  • 单标签：
    • <标签名 属性1=属性值1 属性2=属性值2 .....>
    • <标签名 属性1=属性值1 属性2=属性值2 ..... />

属性=属性值 -> 固定写法，用于修改标签的内容或样式
标签名 -> 固定写法，不同的标签用于显示不同的内容，用法是固定的。

html语法和Markdown语法属于同一类。

<!DOCTYPE html><!-- 声明这是一个html5文件，防止浏览器出现浏览器解析出现乱码 -->
<html><!--根标签,只能有一个html标签-->
    <head><!--存放元信息，不会显示-->
    	<meta charset="utf-8"><!--解析，charset用于页面指定编码-->
    	<title>这是一个HTML页面</title><!-- 页面的标题 -->
    </head>
	<style>
	<!--css内容都在这里此标签中写入 -->
	</style>
    <body>
		<!--所写的内容，和呈现的内容-->
    </body>
</html>

文本标签

  • 标题标签：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>

  • 段落标签：<p>

​ 标题标签和段落标签会自动换行（一个标签代表一行或者一段，写下一个标签时自动另起一行）

  • 文字倾斜标签：<i>，<em>
  • 文字加粗标签：<b>，<strong>
  • 换行标签：<br>
  • 水平线标签：<hr>
  • 行内文本标签：<span>

html页面敲任意多个空格恒等于一个空格
html中一个空格可以用下列两种方式表示：&nbsp; 或者 &emsp;

  • &nbsp; 表示一个像素（px）单位的空格
  • &emsp; 表示一个汉字的宽度
  • 一个&emsp; = 16&nbsp; —> 1em = 16px
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是一个HTML页面</HTML></title>
	</head>
	<body>
		<!-- 标题标签：<h1>、<h2>、<h3>、<h4>、<h5>、<h6> -->
		<h1>我国人均预期寿命提高到77.93岁</h1>
		<h2>我国人均预期寿命提高到77.93岁</h2>
		<h3>我国人均预期寿命提高到77.93岁</h3>
		<h4>我国人均预期寿命提高到77.93岁</h4>
		<h5>我国人均预期寿命提高到77.93岁</h5>
		<h6>我国人均预期寿命提高到77.93岁</h6>
		
		<!-- 段落标签：<p> -->
		<p>&emsp;&emsp;中新网7月5日电 国家卫健委5日就健康中国行动实施以来进展与成效举行发布会，健康中国行动推进委员会办公室副主任、国家卫生健康委规划司司长毛群安在会上介绍称，目前，我国人均预期寿命提高到77.93岁，主要健康指标居于中高收入国家前列，《“健康中国2030”规划纲要》2020年阶段性目标总体如期实现，健康中国行动2022年主要目标提前实现，健康中国建设开局起步良好、进展顺利，为我国全面建成小康社会、推动“十四五”经济社会发展发挥了重要作用。</p>
		<p>毛群安指出，健康中国行动实施取得了明显的阶段性成效：</p>
		
		<!-- 标题标签和段落标签会自动换行（一个标签代表一行或者一段，写下一个标签时自动另起一行） -->
		<i>
			<b>文字倾斜又加粗</b>
		</i>
		<b>
			<i>文字倾斜又加粗</i>
		</b>
		<em>文字倾斜</em>
		<strong>文字加粗</strong>
		
		<!-- 换行标签：br -->
		<br>
		<!-- 水平线标签：hr -->
		<hr>
		
		<span>一&nbsp;二</span>
		<br>
		<span>一&emsp;二</span>
		
		<!-- 行内文本标签：span -->
		<span>我的京东</span> | <span>京东会员</span> | <span>登陆&nbsp;&nbsp;注册</span>
	</body>
</html>

超链接和图片标签

  • 图片标签：<img>

    • src=

      1. 可以写入链接。

      2. 可以写本地图片路径

    • title= 鼠标放到图片上可以提示文字

    • alt= 当图片不显示时，显示文字

    • width=、height= 能够修改图片、标签盒子等的显示宽度和高度

  • 超链接标签：<a>

    • href=
      1. 引入在线链接。
      2. 可以引入本地文件(html文件)
      3. 可以引入id选择器
    • target=
      1. _self:当前标签页跳转（默认）
      2. _blank:新的标签页跳转
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 id="top">顶部</h1>
		<img src="https://www.1baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
		alt="百度" title="点击一下，了解更多">
		<img src="./img/1.jpg" alt="" width="100pxpx" height="250px">
		
		<a href="https://www.baidu.com" target="_blank">百度一下</a>
		<a href="./01-文本标签.html">文本标签</a>
		
		
		<!-- 将图片变为可点击的超链接 -->
		<a href="https://yrzx.qq.com/act/2890/a20200518xz/index.html" target="_blank">
			<img src="https://game.gtimg.cn/images/ulink/act/2890/a20200518xz/bg-kv1.jpg" 
				alt="" width="100px" height="50px">
			<p>一人之下手游</p>
		</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 id="mid"></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>
		
		<!-- 页面跳转 -->
		<!-- id属性如何调用：使用#调用id属性 -->
		<a href="#top">返回顶部</a>
		<a href="#mid">返回中部</a>
	</body>
</html>

列表和内联框架

  • <iframe> 内联框架

    <iframe> 经常被用在登录、注册页面

  • 列表

    列表中的内容放在<li>

    列表在网站中主要被用来做下拉菜单和展示同一类内容

    • 有序列表<ol>
    • 无序列表 <ul> 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<iframe src="https://www.bilibili.com/"width="1300px"height="400px" ></iframe>
		
		<ul>
			<p>千峰成都校区学科一览</p>
			<li>Java</li>
			<li>前端</li>
			<li>Python</li>
			<li>UI</li>
			<li>物联网</li>
		</ul>
		
		<ol>
			<p>千峰成都校区学科一览</p>
			<li>Java</li>
			<li>前端</li>
			<li>Python</li>
			<li>UI</li>
			<li>物联网</li>
		</ol>
	</body>
</html>
奶盖er
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端——内联框架
翊小宸的博客
07-01 144
<!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> <!--
前端学习 -- 内联框架iframe
A08110123的博客
03-12 188
内联框架iframe 可以向一个页面中引入其他的外部页面 内联框架中的内容不会被搜索引擎所检索，所以开发中尽量不要使用内联框架 <iframe></iframe> 属性： src：外部页面的地址，可以使用相对路径 width和height：可以设置框架的宽度和高度 name：可以为内联框架指定一个名字，可以将该属性值设置为超链接的targ...
Web前端——HTML内联框架
巧克力布丁的博客
07-03 799
内联框架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 内联框架，用于向当前页面中引入一个其他页面 src 指定要引入的网页的路径 frame
前端学习（HTML）--内联框架
weixin_55904436的博客
12-04 210
本人学习笔记勿扰
前端入门——内联框架
qq_44213733的博客
09-23 110
前端学习day01-HTML标签01
06-21
本教程“前端学习day01-HTML标签01”着重讲解HTML的基本概念和常用的HTML标签，旨在帮助初学者入门HTML，了解其在网页设计中的重要作用。 HTML由一系列元素组成，这些元素通过标签来表示。标签通常成对出现，比如`...
深入剖析HTML5 内联框架iFrame
01-19
由于现在frame和frameset很少使用，已经过时了，已经被div+CSS代替了，所以，这里只是举例说明一下，当下还在使用的内联框架iFrame 所谓的iFrame内联框架，我的理解就是在网页内部嵌套一个网页，并且可以一级一级地...
HTML框架标签超链接标签控件标签学习教案.pptx
01-05
在HTML中，框架标签、超链接标签和控件标签是构建交互式网页的关键元素。以下是对这些概念的详细解释： **HTML框架标签**： 框架（Frames）是HTML中用于将网页分隔成多个独立区域的技术，每个区域可以加载不同的...
头歌教学实践平台 Web前端开发基础 HTML基本标签
01-20
这些标签构成了网页的基本结构，使内容具有语义化，并能被浏览器正确解析和展示。 1. **HTML文档结构**：每个HTML页面都始于`<!DOCTYPE html>`声明，它告诉浏览器文档类型和版本。接着是`<html>`元素，它是整个文档...
《前端》HTML内联框架iframe
BelleDiao的博客
03-01 626
HTML中内联框架主要用于在网页中实现另一个网页的显示，相当于在网页中嵌套了另一个网页。 Iframe内联框架的src属性用于网页连接的设置，src指向哪个链接，网页上就显示哪个网页。 语法： <iframe src="URL"></iframe> 或直接设置宽高： <iframe src="demo_iframe.htm" width="2...
内联框架[HTML][web前端]
m0_57001006的博客
04-20 295
内联框架 内联框架的作用: 用于向当前页面中引入一个其他页面 引入的这个页面就称之为: 内联框架(就像窗口一样) 用iframe标签来表示一个内联框架 iframe标签中的src属性用来指定要引入的网页的路径 注意: 我们的内联框架中也是src属性,也就是说我们的内联框架也是引入的形式,而不是引用的形式 iframe标签中的framehorder属性用来指定内联框架的边框 属性值为"0"表示无边框 属性值为非零表示有边框(包括输入负数,只要不是0就是有边框) 我们一般都是设置为无边框
前端学习9：HTML内联框架
RainstormGod的博客
04-14 821
属性值默认单位是像素，但是也可以用百分比来设定（比如“60%”)。height和width属性用于规定iframe的高度和宽度。frameborder属性规定是否显示iframe周围的边框。iframe可作为链接的目标(target)。iframe用于在网页内显示网页。提示：URL是指向隔离页面的位置。
HTML的简要学习---内联框架（待补充）
qq_51635297的博客
07-18 113
HTML的简要学习---内联框架（待补充）
HTML笔记（HTML元素--框架以及内联框架）
banmao8461的博客
07-03 317
使用框架，可以在同一浏览器窗口中显示不止一个页面 1 框架 1.1 <frameset>元素 <frameset>元素定义如何将窗口分割为框架，每个<frameset>元素定义一系列的行或列的位置，其中rows与cols属性的值规定了每行或每列占屏幕的面积（可百分比）。而<frame>元素负责定义各自行与...
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 176
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 965
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 103
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
最新发布
清水欧度 Odoo ERP
07-23 755
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 620
CTFWP，ctfshow-web42
HTML框架与内联框架(Iframe)知识测试
"HTML测试题，包括框架的构成与设置，HTML语言的*>标签，Iframe标记的使用，内联框架的特点，以及视频数据流和HTML文本显示状态代码的相关知识。" 在HTML中，框架（Frames）是一种将网页内容分割成独立区域的技术，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值