HTML基础入门笔记1

jiayoujuejuezi

已于 2023-11-04 17:20:51 修改

阅读量29

点赞数

文章标签：学习笔记 html

于 2023-11-04 17:14:44 首次发布

本文链接：https://blog.csdn.net/weixin_43827944/article/details/134216870

版权

HTML初学

使用的开发工具：Hbiuder
HTML指的是超文本标记语言，是一门标记语言，不是编程语言，由标记标签构成。

新建Web项目

1、点击下方标志，新建项目
在这里插入图片描述

2、选择普通项目中的基本HTML项目
在这里插入图片描述
3、点击index.html，页面显示的是网站的首页

第一行是文档的文件类型和版本，先不用管；
<html></html>成对出现，是文档的根标签；
<head>表示头部；
<meta charset="utf-8" />表示页面编码方式，utf-8表示通用格式；
<title></title>表示文件名；
<body>表示主体
成对出现的div,body,head,html,为闭合标签
单个出现的meta,img,为自闭和标签，以/结尾
div：闭合标签，常应用于分割模块，包裹标签
h1：一级标题，在一个页面中只能出现一次
还有h2,h3,h4,h5,h6
p表示段落标签，一个p标签表示一段
注释/解除注释：选中内容，CTRL+？

今日练习代码

<!DOCTYPE html>
<html>
	<head>   <!-- 头部 -->
		<meta charset="utf-8" />  <!-- 编码格式 -->
		<title>hello!</title>  <!-- 文件名 -->
	</head>
	<body>   <!-- 主体 -->
	<!-- 成对出现的div,body,head,html,为闭合标签 -->
	<!-- 单个出现的meta,img,自闭和标签，以/结尾 -->
	<!-- div：闭合标签，常应用于分割模块，包裹标签 -->
	<!-- h1：一级标题，在一个页面中只能出现一次 -->
	<!-- 还有h2,h3,h4,h5,h6 -->
		开始努力的第一天，期待有达成目标的一天
		<div><h1>早餐与诗词的完美结合（一）</h1></div>
		<!-- p表示段落标签，一个p标签表示一段 -->
		<div>
			<p>"让孩子爱上早餐，爱上生活"</p>
			<p>早餐与生活之间有什么关系？</p>
			<p>直接上图吧：</p>
			<p><img src="img/1.jpg" alt="一个图片"? width="500" height=""></p>
			<!-- src为标签属性，用空格隔开，等号后面也就是引号里面是属性值，
			属性与属性值之间用等号，属性值用引号包裹，单双引号没有区别。
			属性和属性之间用空格隔开
			 src表示图片链接地址,相对路径，所有图片必须放在同一个项目img文件下
			 width：图片宽度，height：高度
			 alt图片不能正常显示的替换文本-->
		</div>
		<div>
			<p>早餐:秋葵蒸鸡蛋、香菇青菜包、香肠、猕猴桃坚果。</p>
			<p>《曲池荷》</p>
			<p>唐 · 卢照邻</p>
			<p>浮香绕曲岸，</p>
			<p>圆影覆华池。</p>
			<p>常恐秋风早，</p>
			<p>飘零君不知。</p>
			<p><img src="img/2.jpg" alt="一张图片" width="500"</p>
		</div>
	</body>
</html>