标签：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,标签,代码,语义,标题,自学,图片,前端开发,属性 来源： https://www.cnblogs.com/MoonSkyy/p/15862263.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。