html的使用

一,HBuilder

--1,使用

直接解压就可以用,

创建项目: 直接点击 新建项目,输入项目名和选中项目存放位置,创建.

创建资源: 选中项目,右键,新建...

二,HTML

--1,概述

是超文本标记语言,专门用来制作网页的.

超文本: 网页中可以包含各种类型的元素.包括: 文字,数字,符号,图片,音频,视频...

标记语言: 是一个独特的语言,有独特的语法. 由大量的标记来描述的一门语言...

网页文件的后缀名: .html / .htm

--2,入门案例

java 复制代码
<!-- 这是HTML的注释,这行用来作为文档声明行,声明这是一个HTML文档 -->
<!DOCTYPE html>  
<!-- HTML是由大量标记组成,有开始标签和结束标签 -->
<html>
	<!-- head用来描述网页的属性 -->
	<head>
		<meta charset="utf-8"> <!-- 设置网页的编码-->
		<title>html</title><!-- 设置网页的标题 -->
	</head>
	<!-- body用来控制浏览器即将展示的内容 -->
	<body>
		hello html~
		hello html~ <br/> <!-- br是换行,自闭标签-->
		hello &nbsp; &nbsp;html~ <!--&nbsp;是空格 -->
	</body>
</html>

三,HTML的常用标签

--1,标题标签

在网页中插入一些标题元素(居中,字号加大)

java 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用标签</title>
	</head>
	<body>
		<!-- hbuilder的常用快捷键:复制粘贴ctrl c/v剪切ctrl x-->
		<!-- 1.标题标签 h1大~h6小,自动换行,字体加粗 -->
		<h1>31省份新增本土确诊41例 陕西35例</h1>
		<h2>31省份新增本土确诊41例 陕西35例</h2>
		<h3>31省份新增本土确诊41例 陕西35例</h3>
		<h4>31省份新增本土确诊41例 陕西35例</h4>
		<h5>31省份新增本土确诊41例 陕西35例</h5>
		<h6>31省份新增本土确诊41例 陕西35例</h6>
	</body>
</html>

--2,列表标签

在网页中加入列表效果

java 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用标签</title>
	</head>
	<body>
		<!-- 2.列表标签: 有序无序,列表项自动换行 -->
		<h3>热搜榜</h3>
		<!-- 2.1 无序列表:使用ul+li , unorderlist+list -->
		<ul> 
			
			<li>31省份新增本土确诊41例 陕西35例</li>
			<li>稳住农业基本盘做好三农工作</li>
		</ul>
		<!-- 2.2 有序列表:使用ol+li , orderlist+list -->
		<ol> 
			
			<li>31省份新增本土确诊41例 陕西35例</li>
			<li>稳住农业基本盘做好三农工作</li>
		</ol>
	</body>
</html>

--3,图片标签 & 超链接标签

在网页中加入图片元素

java 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用标签</title>
	</head>
	<body>
		<!-- 练习:做一个能被点击的图片 -->
		<a href="https://www.baidu.com">  <img src="3.jpg"/>   </a>
		<br />
		<!-- 4.超链接 
			href属性用来让超链接可以被点击,也可以指定点击的跳转网址
			target属性用来让指定超链接的打开方式,默认是_self当前窗口打开
			      _blank是用新窗口打开
		-->
		<a href="#">百度一下</a>  <br />
		<a href="https://www.baidu.com/" target="_blank">百度一下</a>  <br />
		<!-- 4.2.锚定:从一个位置回到指定的另一个位置 -->
		<a name="top">我是顶部</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>
		<a href="#top"> ^ </a> 
		<br />
		
		
		<!-- 3.图片标签: 同行展示多个图片
			src属性用来指定图片位置/路径
			(如果图片和网页文件在同级文件夹可以直接写图片名称)
			width属性用来指定图片的宽度,单位是像素px
			height属性用来指定图片的高度,单位是像素px
		-->
		<img src="3.jpg" width="30%" height="800px"/>
		<img src="3.jpg"/>
		<img src="3.jpg"/>
		
	</body>
</html>

--4,Input标签

java 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用标签</title>
	</head>
	<body>
		<!-- 1.input标签,表示输入框 -->
		普通的输入框: <input type="text"/> <br />
		密码输入框: <input type="password"/><br />
		数字输入框: <input type="number"/><br />
		日期输入框: <input type="date"/><br />
		星期输入框: <input type="week"/><br />
		单选框: <input type="radio"/>男   <br />
		多选框: <input type="checkbox"/>吃饭   <br />
		普通按钮:
		<input type="button" value="保存"/>
		<button>注册</button>
		<br />
		提交按钮:把用户在浏览器输入的数据,提交给后端的java程序来处理
		<input type="submit" value="保存"/>
		<button type="submit">保存</button>
	</body>
</html>
相关推荐
腾讯TNTWeb前端团队2 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
mghio4 小时前
Dubbo 中的集群容错
java·微服务·dubbo
范文杰6 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪6 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪6 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy7 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom7 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom7 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom7 小时前
React与Next.js:基础知识及应用场景
前端·面试·github