Web前端开发-自学笔记

2022/2/3 23:43:33

编程Tag： 图片代码属性标签 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前端开发-自学笔记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Web前端开发-自学笔记

相关编程文章