学习Java的日子 Day44 HTML基础

Day44 HTML

学习路线：

在这里插入图片描述

前端：展示页面、与用户交互 — HTML

后端：数据的交互和传递 — JavaEE/JavaWeb

1.网页的组成部分(HTML+CSS+JavaScript)

前端开发的工作模式：开发输出html+css+js

HTML：页面结构
CSS：页面样式表现
JavaScript：交互行为

在这里插入图片描述

2.HTML简介

HTML：超文本标记语言——HyperText Markup Language

超文本：链接

标记：标签，带尖括号的文本

3.HTML基本结构

html：整个网页

head：网页头部，用来存放给浏览器看的信息，例如 CSS

title：网页标题

body：网页主体，用来存放给用户看的信息，例如图片、文字

在这里插入图片描述

注意：

标签要成对出现，中间包裹内容

<>里面放英文字母（标签名）

结束标签比开始标签多 /

标签分类：双标签和单标签

4.掌握常用的标签

4.1 标题标签

h1-h6

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

显示特点：

* 文字加粗

* 字号逐渐减小

* 独占一行（换行）

4.2 段落标签

xxx

<p>用良心做教育</p>
<p>做真实的自己</p>

显示特点：

* 独占一行

* 段落之间存在间隙

4.3 文本标签

span – 文本标签

br – 换行标签

hr – 分割线标签

<span>用良心做教育</span>
<br/>
<span>做真实的自己</span>
<hr />

4.4 图片标签

img - 图片标签

src：图片资源路径

width：宽度

height：高度

alt：图片加载失败后显示的文本内容

注意：

100px – 100像素

30% ---- 占页面宽度的百分比（适配度）

<img src="../img/波多野结衣.jpg" width="100px" height="100px"/>
<br />
<img src="../img/波多野结衣.jpg" width="30%" height="30%" />
<br />
<img src="http://img.duoziwang.com/2020/02/06242324110320.jpg" width="100px" height="100px" />
<br />
<img src="http://img.duoziwang.com/2020/02/xxx.jpg" width="100px" height="100px" alt="图片加载失败" />

4.5 有序列表(ol>li)

有序列表也是一列项目，列表项目使用数字进行标记。

ol - 有序列表

type - 展示类型（1-阿拉伯数字 a-小写英文字母 A-大写英文字母 i-小写罗马数字 I-大写罗马数字）

li - 列表项

<h3>注册流程：</h3>
<ol type="1">
	<li>填写基本信息</li>
	<li>绑定银行账号</li>
	<li>绑定手机号</li>
	<li>注册成功</li>
</ol>

4.6 无序列表(ul>li)

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

ul - 无序列表

type - 展示类型（circle-空心圆 discs-实心圆 square-实心方块）

li - 列表项

<ul type="square" >
	<li>xxx</li>
	<li>yyy</li>
	<li>zzz</li>
</ul>

有序列表和无序列表的区别：前面是不是有数字序号

4.7 定义列表(dl>dt>dd)

dl - 定义列表

dt - 列表头

dd - 列表体

<dl>
	<dt>
		<h2>小明</h2>
			<img src="../img/小明.jpg" width="60px" />
	</dt>
	<dd>
		<p>2003年10月出生于四川，当天天气晴空万里，四川峨眉山金顶惊现佛光</p>
		<p>小明从小就爱钻研互联网相关技术</p>
		<p>5岁精通HTML</p>
		<p>9岁精通Java</p>
		<p>15岁精通数据库</p>
		<p>17岁能够独立完成大型分布式微服务项目</p>
		<p>20岁时因不满老板压榨员工，一怒之下删库跑路，至今下落不明...</p>
	</dd>
</dl>

4.8 列表案例

注意：HTML标签可以无限层嵌套！！！


		<ul>
			<li>
				<h3>荤菜</h3>
				<ol>
					<li>回锅肉</li>
					<li>仔姜鸭丝</li>
					<li>爆炒腰花</li>
					<li>宫保鸡丁</li>
					<li>小鸡炖蘑菇</li>
				</ol>
			</li>
			<li>
				<h3>素菜</h3>
				<ol>
					<li>清炒空心菜</li>
					<li>鱼香茄子</li>
					<li>土豆炒洋芋</li>
					<li>西红柿炒番茄</li>
				</ol>
			</li>
			<li>
				<h3>汤类</h3>
				<ol>
					<li>翡翠蛋花汤</li>
					<li>皮蛋黄瓜汤</li>
					<li>胡豆瓣酸菜粉丝汤</li>
					<li>开水白菜</li>
				</ol>
			</li>
		</ul>

4.9 超链接

a - 超链接

href - 链接地址

target - 跳转目标（_self在当前卡页跳转，_blank在新增卡页跳转）

<a href="http://www.baidu.com" target="_self">百度一下</a>
<br />
		
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<br />
		
<a href="08_列表案例.html" target="_blank">跳转本地页面</a>
<br />
		
<a href="08_列表案例.html" target="_blank">
	<img src="../img/小明.jpg" width="50px"/>
</a>

4.10 锚链接

<a href="#new01">法治</a><!--定位到锚点处-->
		<a href="#new02">国际</a><!--定位到锚点处-->
		<a href="#new03">娱乐</a><!--定位到锚点处-->
		
		<a name="new01"></a><!--下锚点-->
		<h1>法治新闻 - 为何半夜母猪频频惨叫</h1>
		<h1>法治新闻 - 为何八旬老太以外怀孕</h1>
		<h1>法治新闻 - 是人性的溟灭</h1>
		<h1>法治新闻 - 是道德的沦丧</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<a name="new02"></a><!--下锚点-->
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<a name="new03"></a><!--下锚点-->
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>

总结

1.了解前端和后端的区别

2.HMTL、CSS、JavaScript

3.安装HBuilder

总结

1.了解前端和后端的区别

2.HMTL、CSS、JavaScript

3.安装HBuilder

4.常用的标签

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/606160.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【linux】——日志分析

【linux】——日志分析

1. 日志文件 1.1 日志文件的分类 日志文件&#xff1a; 是用于记录Linux系统中各种运行消息的文件&#xff0c;相当于Linux主机的“日记". 日志文件对于诊断和解决系统中的问题很有帮助&#xff0c;系统一旦出现问题时及时分析日志就会“有据可查”。此外。当主机遭受攻…
阅读更多...
JVM的垃圾回收

JVM的垃圾回收

JVM简介 JVM 是 Java Virtual Machine 的简称&#xff0c;意为 Java虚拟机。 虚拟机:是指通过软件模拟的具有完整硬件功能、运行在一个完全隔离的环境中完整计算机系统 1.JVM的内存区域划分 jvm是一个java进程 每一个java进程就是一个jvm实例 一个进程运行过程中 就要从操作系…
阅读更多...
uniapp0基础编写安卓原生插件之编写安卓页面在uniapp上显示（摄像头调用）

uniapp0基础编写安卓原生插件之编写安卓页面在uniapp上显示（摄像头调用）

前言 如果你对安卓插件开发部分不熟悉你可以先看uniapp0基础编写安卓原生插件和调用第三方jar包和编写语音播报插件之零基础编写安卓插件 效果 开始 dcloud_uniplugins.json {"nativePlugins": [{"hooksClass": "","plugins": [{&…
阅读更多...
软件试运行方案，试运行报告（word原件获取）

软件试运行方案，试运行报告（word原件获取）

一、 试运行目的 &#xff08;一&#xff09; 系统功能、性能与稳定性考核 &#xff08;二&#xff09; 系统在各种环境和工况条件下的工作稳定性和可靠性 &#xff08;三&#xff09; 检验系统实际应用效果和应用功能的完善 &#xff08;四&#xff09; 健全系统运行管理体制&…
阅读更多...
Pspice for TI学习

Pspice for TI学习

Pspice for TI中PSpice Part Search空白解决方法 配置环境变量 Cad_PSpice_TI_Regr_Srvr https://software-dl.ti.com/pspice/S009 重新安装2023版的Pspice Pspice安装链接 打开新安装的软件即可发现PSpice Part Search可以正常使用了 VSIN各参赛的含义 VOFF直流偏置VAMPL…
阅读更多...
JavaEE企业级开发中常用的Stream流

JavaEE企业级开发中常用的Stream流

介绍 在Java编程中&#xff0c;Stream流是Java 8引入的一个重要概念&#xff0c;它提供了一种新的处理集合的方式&#xff0c;可以更加简洁、高效地进行数据操作。Stream流支持各种常见的操作&#xff0c;比如过滤、映射、排序、聚合等&#xff0c;同时也支持并行处理&#xf…
阅读更多...
Vue 项目 尚品汇（二）（暂停进行）

Vue 项目 尚品汇（二）（暂停进行）

一、Home 模块组件拆分 基本流程 先写静态页面 拆分静态组件 获取服务器的数据进行展示 动态业务 &#xff08;一&#xff09;三级联动组件 如果一个组件在很多模块之间都在使用&#xff0c;我们就拆分成成一个全局组件 只需注册一次 在全局的项目都能使用 三级联动在 …
阅读更多...
Java：就业市场上的常青树-永远的宠儿

Java：就业市场上的常青树-永远的宠儿

除了兴趣&#xff0c;我们学习编程最主要的目标是找一份好工作&#xff0c;选择合适的编程语言就非常重要了&#xff0c;毕竟选择大于努力&#xff0c;男怕选错行&#xff0c;学编程最怕选错语言。比如&#xff0c;如果你选Perl&#xff0c;那就糟糕了&#xff0c;基本上可以断…
阅读更多...
高效备战！2024年陕西省绿色工厂申报条件好处和各地区奖补

高效备战！2024年陕西省绿色工厂申报条件好处和各地区奖补

什么是绿色工厂&#xff1f; 绿色工厂是制造业的生产单元&#xff0c;是绿色制造的实施主体&#xff0c;属于绿色制造体系的核心支撑单元&#xff0c;侧重于生产过程的绿色化。 通过采用绿色建筑技术建设、改造厂房&#xff0c;预留可再生能源应用场所和设计负荷&#xff0c;…
阅读更多...
PyQt5中的事件与信号处理

PyQt5中的事件与信号处理

文章目录 1. 简介1.1事件(Event)1.2 信号(Signal)与槽(Slot)1.3 自定义信号 2. 一个信号与槽的简单示例13. 一个信号与槽的简单示例24. 事件发送者5. 创建自定义信号6. 一个简单计算器 1. 简介 在PyQt5中&#xff0c;事件和信号处理是GUI编程的核心概念。事件是指用户操作或系…
阅读更多...
吴恩达机器学习笔记：第 9 周-16推荐系统(Recommender Systems) 16.3-16.4

吴恩达机器学习笔记：第 9 周-16推荐系统(Recommender Systems) 16.3-16.4

目录 第 9 周 16、 推荐系统(Recommender Systems)16.3 协同过滤16.4 协同过滤算法 第 9 周 16、 推荐系统(Recommender Systems) 16.3 协同过滤 在之前的基于内容的推荐系统中&#xff0c;对于每一部电影&#xff0c;我们都掌握了可用的特征&#xff0c;使用这些特征训练出了…
阅读更多...
codeforce#937 (div4)题解

codeforce#937 (div4)题解

E. Nearly Shortest Repeating Substring 给出字符串s&#xff0c;是否存在长度为k的字符串多次拼接后得到的字符串与s最多有一位不同 由题意得&#xff0c;k一定是n的因数&#xff0c;所以暴力枚举就好&#xff0c;求出满足 s [ i ] s [ i m o d k ] s[i] s[i \mod k] s[…
阅读更多...
C++之初阶模板

C++之初阶模板

个人主页&#xff1a;救赎小恶魔 欢迎大家来到小恶魔频道 好久不见&#xff0c;甚是想念 今天我们要深入讲述C内存管理 目录 引言&#xff1a; 模板 1. 泛型编程 2. 模板函数 2.1函数模板的原理 2.2模板函数的实例化 2.3函数模板的匹配 3.类模板 STL STL 的主要组…
阅读更多...
[答疑]关于《评“状态和事件本质相同”》的6个疑问

[答疑]关于《评“状态和事件本质相同”》的6个疑问

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 丁绍恒 2024-5-8 16:17 &#xff08;补注&#xff1a;上图摘自https://mp.weixin.qq.com/s/QhAhSdET5psZQEEW6f9KoA&#xff09; 1、您提到“【警戒条件】是一个【表达式】&#xff0…
阅读更多...
内网安全综合管理系统是什么 | 好用的那我王安全管理系统有哪些

内网安全综合管理系统是什么 | 好用的那我王安全管理系统有哪些

内网安全综合管理系统是指一种集成终端管理、网络管理、内容管理、资产管理等功能的综合性安全管理系统。它主要对内网上的主机进行统一安全管理&#xff0c;包括对网络主机用户操作实施监督控制&#xff0c;并对主机中的安全软件&#xff08;如主机入侵监测系统、主机防火墙和…
阅读更多...
【编程基础】人人都应该懂得递归小知识

【编程基础】人人都应该懂得递归小知识

文章目录 什么是递归递归和栈尾递归递归和分治归并排序 递归和 什么是递归 下面引用刘汝佳的《算法竞赛入门经典》中对递归的定义&#xff1a; 递归&#xff1a;参见递归。递归&#xff1a;如果你还不理解递归是什么&#xff0c;请参见递归。 递归事实上就是函数直接或间接调…
阅读更多...
520送男士内裤给男朋友好吗？五大男士内裤测评种草

520送男士内裤给男朋友好吗？五大男士内裤测评种草

相信有很多朋友都选在520这个特殊的日子里为心爱的人挑选一份特别的礼物吧&#xff01;如果送礼给男朋友或老公&#xff0c;一份实用的礼物肯定是最佳选择哦&#xff01;很多男性朋友每条内裤都穿很久&#xff0c;如果给男朋友挑选合适的男士内裤&#xff0c;也是一种关心体贴的…
阅读更多...
冯喜运：5.9今日黄金原油最新走势分及盘面操作策略布局

冯喜运：5.9今日黄金原油最新走势分及盘面操作策略布局

【黄金消息面分析】&#xff1a;周四&#xff08;5月9日&#xff09;亚市早盘&#xff0c;现货黄金窄幅震荡&#xff0c;目前交投于2313美元/盎司附近。金价周三持稳&#xff0c;投资者等待美国数据为美联储可能降息提供线索&#xff0c;地缘局势给金价提供支撑&#xff0c;但美…
阅读更多...
利用爬虫解决数据采集难题

利用爬虫解决数据采集难题

文章目录 安装为什么选择 BeautifulSoup 和 requests&#xff1f;安装 BeautifulSoup 和 requests解决安装问题 示例总结 在现代信息时代&#xff0c;数据是企业决策和发展的关键。然而&#xff0c;许多有用的数据分散在网络上&#xff0c;且以各种格式和结构存在&#xff0c;因…
阅读更多...
2024年小程序视频怎么下载下来

2024年小程序视频怎么下载下来

小程序视频下载工具我已经打包好了&#xff0c;有需要的自己下载 小程序下载工具打包链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;1234 --来自百度网盘超级会员V10的分享 1.首先解压好我给大家准备好的压缩包 2.退出微信&#xff0c;电脑右下角进行右键退出…
阅读更多...
最新文章

Copyright @ 2022~2023