HTML5教程

Web前端开发-自学笔记

本文主要是介绍Web前端开发-自学笔记,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、HTML认知
1、HTML骨架标签
(1)html标签:网页的整体
(2)head标签:网页的头部
(3)body标签:网页的身体
(4)title标签: 网页的标题


2、注释
(1)注释的作用:
①为代码添加的具有解释性、描述性的信息,主要用来帮助开发人员理解代码
②浏览器执行代码时会忽略所以的注释
(2)注释的快捷键:
在vscode中:ctrl + /


3、HTML标签的结构
(1)标签的结构图:

(2)结构说明:
①标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
②常见标签由两部分组成,我们称之为:双标签。 前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容
③少数标签由一部分组成,我们称之为:但标签。 自成一体,无法包裹内容
(3)标签之间的关系:
①嵌套关系(父子关系)
<head>
<title></title>
</head>
②并列关系(兄弟关系)
<head></head>
<body></body>

 

4、HTML标签学习
排版标签
(1)标题标签
①代码:h系列标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
②语义:1~6级标题,重要程度依次递减
③特点:
文字都有加粗
文字都有变大,并且从h1→h6文字逐渐减小
独占一行
(2)段落标签
①代码:<p>内容</p>
②语义: 段落
③特点:
段落之间存在间隙
独占一行
(3)换行标签
①作用:让文字强制换行显示
②代码:<br>
③语义: 换行
④特点:
单标签
让文字强制换行
(4)水平线标签
①作用:分割不同主题内容的水平线
②代码:<hr>
③语义:分割线
④特点:
  单标签
  在页面中显示一条水平线

文本格式化标签

注意:单词标签突出内容的重要性(语义更强烈)

媒体标签
(1)图片标签
①作用:在网页中显示图片
②代码: <img src="" alt="">
③特点:
单标签
img标签需要展示对应的效果,需要借助标签的属性进行设置!
(1.1)图片标签的介绍
①标签的完整结构图: ./ 是当前的意思

②属性注意点:
标签的属性写在开始标签内部
标签上可以同时存在多个属性
属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分
(1.2)图片标签的alt属性
①属性名:alt
②属性值:替换文本
·当图片加载失败时,才显示alt的文本
·当图片加载成功时,不会显示alt的文本
<body>
<img src="./错的路径图片会加载失败" alt="加载失败" title="">
</body>
</html>
(1.3)图片标签的title属性
①属性名:title
②属性值:提示文本
·当鼠标悬停时,才显示的文本
注意:title属性不仅可以用于图片标签,还可以用于其他标签
<body>
<img src="./1.jpg" alt="加载失败" title="二次元美女战士">
</body>
</html>
(1.4)图片标签的width和height属性
①属性名:width和heigth
②属性值:宽度和高度(数字)
③注意:
·如果只设置width或heigth中的一个,另一个没设置的话,图片会自动等比例缩放(此时图片不会变形)
·如果同时设置了width和heigth,若设置不当此时图片可能会变形

这篇关于Web前端开发-自学笔记的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!