html学习笔记

最新推荐文章于 2024-09-13 17:21:46 发布

葡萄玛奇朵朵

最新推荐文章于 2024-09-13 17:21:46 发布

阅读量62

点赞数

分类专栏：前端文章标签： html html5 前端 java

本文链接：https://blog.csdn.net/zhujianghan/article/details/118732126

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html学习笔记

HTML
合集

HTML

HTML是什么

HTML是HyperText Mark-up Language的首字母简写。意思是超文本标记语言。
HTML不是编程语言，而是标记语言。
文件扩展名为.html/.htm

HTML5是什么

HTML5是HTML的一个最新的版本。
在这里插入图片描述

简单实战

<!DOCTYPE html><!--文档类型-->
<html><!--起始标签-->
	<head><!--标签---做一些设置-->
		<meta charset="utf-8" /><!--设置编码<meta/>是单标签,但是在后面自己闭合，添加属性：charset设置页面编码-->
		<title>晗晗呀</title><!--设置标题-->
	</head><!--标签-->
	<body><!--标签-->
		hello world
	</body><!--标签-->
</html><!--结束标签-->

在这里插入图片描述

注意：

ctrl+?快捷键添加注释
ctrl+S保存

常用标签1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用标签</title>
	</head>
	<body>
		<!--h1~h6类似于文档中的不同大小的标题-->
		<h1>h1标签</h1>
		<h2>h2标签</h2>
		<h3>h3标签</h3>
		<h4>h4标签</h4>
		<h5>h5标签</h5>
		<h6>h6标签</h6>
		<!--p标签 主要来显示大段的文本-->
		<p>p标签 主要来显示大段的文本</p>
		<!--div标签  用于组合块级元素    页面划分区域-->
		<div>1div标签</div>
		<div>2div标签</div>
		<!--img显示图片     src是图片地址    alt是如果图片显示不出来就显示alt里的内容-->
		<!--绝对路径-->
		<img src="https://img.kaikeba.com/051131701202glan.jpg?imageView2/2/w/375/format/webp.png" alt="图片加载不出来"/>
		<!--相对路径，图片在项目文件中    一个点表示当前文件，两个点表示跳出当前目录-->
		<img src="img/01.png"/>
	</body>
</html>

在这里插入图片描述

常用标签2 超链接实现页面间的跳转

<!--a标签添加超链接  在a标签上使用href属性添加超链接地址，用a嵌套p标签-->
		<a href="https://www.kaikeba.com/?channel=dGyV3Ar3vh&pageCode=B2KAz3oN8dv">
			<p>开课吧</p>
		</a>
		<!--video视频标签,src属性指向视频地址-->
		<video controls src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/cae-legoup-video-target/2bd6df29-c184-4d9e-8a52-824114e8747b.mp4"></video>
		<!--audio实现音频的播放-->
		<audio controls="controls" src="http://vd3.bdstatic.com/mda-mg09zn7vng57hzp3/360p/h264/1625123079982038432/mda-mg09zn7vng57hzp3.mp4"></audio>
		<!--实现输入框 type用来设置input的类型，type=text，表示获取文本，type=color.表示颜色选择器-->
		<input type="text"  />
		<input type="color" />
		<input type="number" />
		<input type="range" />
		<input type="data" />
		<input type="time" />
		<input type="url" />
		<input type="email" />

在这里插入图片描述

合集

<!DOCTYPE html>
<html></html>
<head></head>
<meta charset=“UTF-8”>
<title></title>
<body></body>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<p></p>
<div></div>
<div>
<p></p>
</div>
<img src="" alt=""/>
<a href="">
<p></p>
</a>
<video controls src=""></video>
<audio controls=“controls” src=""></audio>
<input type=“text” />
<input type=“color” />
<input type=“number” />
<input type=“range” />
<input type=“data” />
<input type=“time” />
<input type=“url” />
<input type=“email” />
<style></style>
transition
translate
scale
width 元素宽度
height 元素高度
border 边框
background 背景设置
margin 外边距
padding 内边距
font-sixe 字体大小
text-align
line-height 行高
color
hover
class
id
postion
relative
absolute
top
left
span