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>