html基本标签

最新推荐文章于 2024-05-12 11:55:54 发布

javaEE初学者日常分享

最新推荐文章于 2024-05-12 11:55:54 发布

阅读量161

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_73050509/article/details/126492664

版权

JavaWeb

语法要求:

1 标签需要使用<>

2 标签一般都是成对,即开标签和闭标签,闭标签多一个/

3 也有部分单标签

4 标签的单词,大小写都支持,但是建议使用小写!

5 标签可以嵌套

基本机构

一个完整的页面，具有如下结构

<!-- 根标签 -->
<html>
    <head><!-- 头标签内部,一般定义元数据 -->
        <title>Java2212</title>
    </head>
    <body>
        <!-- body内部,是整个网页内容 -->
    </body>
</html>

HBuilder的使用

前端开发工具(IDE)

VScode

Sublime Text

HBuilderX

WebStorm

以下是不完全是前端开发的

IDEA

Eclipse

解压即可使用,双击打开[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SARirBni-1661258691492)(D:\千峰上课\Every Day Stage2\day30\code\day30-html.assets\image-20220822155554819.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hF3sFxwh-1661258691493)(D:\千峰上课\Every Day Stage2\day30\code\day30-html.assets\image-20220822155811569.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mKpvW8kn-1661258691494)(D:\千峰上课\Every Day Stage2\day30\code\day30-html.assets\image-20220822155934775.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SHYLqeaJ-1661258691495)(D:\千峰上课\Every Day Stage2\day30\code\day30-html.assets\image-20220822160323413.png)]

基本标签

结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Demo1</title>
	</head>
	<body bgcolor="#4e6ef2" background="img/1.jpg">
		<!-- 
		 标签内部可以定义属性,可以调整显示效果
		 属性写法: 在开标签定义属性,属性写法:属性名="属性值"
		          多个属性空格隔开
		 bgcolor: 背景颜色
				颜色的取值: 1) 单词  
				        2) rgb(255,0,0)  取值0~255
						3) 十六进制000000-FFFFFF  (推荐)
		background:
			引入背景图片
		 -->
			你好,HBuilder
	</body>
</html>

排版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>排版</title>
	</head>
	<body>
		<!-- 
			<p></p> 段落标签
			段和段之间有间距,会自动换行
				对齐方式align: left|center|right
			
			<hr> 分割线,单标签
				width: 100px或者100%
						px是像素(固定值),
						%百分比,是当前浏览器窗口的百分比(会缩放)
				color: red
				size: 20px
			<br> 换行,单标签
			
			<h1>标题标签,会加粗和改变大小
			从h1-h6
			
		 -->
		 <h1>一年期、五年期以上LPR双双下调，100万房贷30年少还3.18万利息</h1>
		 <hr width="50%" color="red" size="2px">
		<p align="center">央广网北京8月22日消息（记者金龙）8月22日，<br>
		2022年8月22日贷款市场报价利率（LPR）为：1年期LPR为3.65%，5年期以上LPR为4.3%。
		中国人民银行授权全国银行间同业拆借中心公布，</p>
		
		<p>上个月一年期贷款市场报价利率为3.7%，五年期以上贷款市场报价利率（LPR）为4.45%，
		这意味着一年期、五年期以上LPR双双下调。</p>
		
		<p>分析指出，五年期以上LPR由4.45%下调至4.3%，这意味着，如以商贷额度100万元、贷款30年、
		等额本息还款方式计算，此次LPR下降15个基点，月供减少88.48元，累积30年月供减少3.18万元。
		之前央行降低首套房贷利率20个基点，此次LPR下调后降息效应将叠加，首套房贷款利率低至4.1%，
		已低于2009年房贷利率打七折后的4.156%。</p>
		<hr>
		
		
		
		<h1>劝学</h1>
		<h2>劝学</h2>
		<h3>劝学</h3>
		<h4>劝学</h4>
		<h5>劝学</h5>
		<h6>劝学</h6>
			<h2>颜真卿</h2>
		<hr width="750px" color="green">
	三更灯火五更鸡,<br>
	正是男儿发奋时。<br>
	黑发不知勤学早,<br>
	白首方悔读书迟。<br>
	</body>
</html>

容器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 块标签 
			div: 行级块,默认占一行
			span: 行内块
			div后续再讲CSS时,是重要的布局组件
		-->
		<div style="background-color: red;">div</div>
		<span style="background-color: pink;">spanspanspanspan</span>
	</body>
</html>

列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			有序
				<ol>
					<li></li>
				<ol>
			type 属性可以改变序号类型
			无序
				<ul>
				</ul>
			type 属性可以改变序号类型	
		 -->
		<ol type="I">
			<li>直播被骂的“红绿灯设计师”疑销号</li>
			<li>教育部通报教材插图问题 27人被问责</li>
			<li>中国长征系列火箭创下新纪录</li>
			<li>鉴定机构确定戚薇直播间卖假货</li>
		<ol>
		<hr>
		<ul type="square">
			<li>直播被骂的“红绿灯设计师”疑销号</li>
			<li>教育部通报教材插图问题 27人被问责</li>
			<li>中国长征系列火箭创下新纪录</li>
			<li>鉴定机构确定戚薇直播间卖假货</li>
		<ul>
	</body>
</html>

图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		<img> 单标签
			src: 图片路径
				本地路径
				网络路径
			alt: 提示
			
			width:宽
			height: 高
			一般跳转一个,另一个自动变化
		 -->
		<img src="img/1.jpg" alt="柳岩" height="500px" width="500px">
	</body>
</html>

超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			超链接,用来跳转页面
			href: 跳转的路径,本地和外部路径
			target: _self(以自己页面刷新跳转),_blank(重新打开空白页展示)
		 -->
		<a href="demo5_图片.html" target="_self">跳转至demo5</a> <br>
		<a href="demo4_列表.html" target="_blank">跳转至demo4</a><br>
		<a href="http://www.baidu.com" target="_blank">baidu一下,你就OK</a><br>
		
	</body>
</html>

汇总

<!-- 颜色的三种写法 -->
定义属性，颜色,分三种写法，用第三种
bgcolor="red"
bgcolor="rgb(23,45,67)"
bgcolor="#4e6ef2"

<!-- 排版 -->
<p></p> 	<!-- 段落标签 -->


<hr> 		<!-- 分割线,单标签 -->
		<!-- width修饰占页面宽度，%和px -->
		<!-- color和size修饰调整颜色和粗细 -->

<b>		<!-- 换行 -->

<!-- 容器 块标签 -->
<div></div>		<!-- 行级块，默认占整行 -->

<span></span>	<!-- 行内块，只占自身区域 -->

<!-- 列表 -->

<ol>
    <li></li>	<!-- 有序 -->
<ol>
=================================
<ul>
    <li></li>	<!-- 无序 -->
</ul>
=================================
type=""			<!-- 改变序号类型 -->

<!-- 图片 单标签 -->
<igm src="图片地址(http//)" alt="加载失败后的提示语句">
	width 高
    height 宽
    <!-- 宽和高一般只改其一，另一个会自动匹配修改后的值 -->

<!-- 超链接 -->
<a href="网络地址" target="self">
         
<!-- 
target: 
self(以自己页面刷新跳转)
blank(重新打开空白页展示)    
-->

– 改变序号类型 -->


```html
<!-- 图片 单标签 -->
<igm src="图片地址(http//)" alt="加载失败后的提示语句">
	width 高
    height 宽
    <!-- 宽和高一般只改其一，另一个会自动匹配修改后的值 -->

<!-- 超链接 -->
<a href="网络地址" target="self">
         
<!-- 
target: 
self(以自己页面刷新跳转)
blank(重新打开空白页展示)    
-->