Web从入门到放弃-HTML的学习(三)

最新推荐文章于 2024-09-16 23:39:36 发布

OnionQueen

最新推荐文章于 2024-09-16 23:39:36 发布

阅读量87

点赞数 1

文章标签： html 前端学习

本文链接：https://blog.csdn.net/OnionQueen/article/details/127843605

版权

本文详细介绍了HTML的基本标记，包括标题、段落、换行、文本格式化、分块标签、图片、超链接、路径、表格、列表、表单等元素。强调了HTML在实际开发中的注意事项，如标题和段落的使用，以及表单元素的type属性、name和value的重要性，鼓励结合CSS学习以更好地理解和应用HTML。

摘要由CSDN通过智能技术生成

说明：

1.1.标题标记

<body> 
    <h1> 一级标题</h1> 
    <h2> 二级标题</h2>
    <h3> 三级标题</h3> 
    <h4> 四级标题</h4> 
    <h5> 五级标题</h5> 
    <h6> 六级标题</h6> 
</body>

1.2.段落标记

1.3.换行标记

1.4.文本格式化标签：

1.5.分块标签(页面布局搭建，内容分块时使用居多，必须掌握)

1.6.图片标签

<img src="xxx.png" alt="xxx" title="xxx" border="xxx" width="xxx" height="xxx" />
src：是必须要有的属性，它用于指定图像文件的路径和文件
alt：为了提高网页的语义化和用户的体验，这个属性也是要有的，主要作用是当图片加载失败时，页面中会显示图片相关的提示信息(提示信息自定义)
title：为了提高网页的语义化和用户的体验，这个属性也是要有的，主要作用是当鼠标悬停到图片上时，会显示图片相关的提示信息(提示信息自定义)
border：给图片设置边框，可有可无
width/height：给图片添加宽度属性和高度属性

1.7.常见的图片格式

jpg：JPEG(.jpg)对色彩的信息保留较好，高清，颜色较多，产品类的图片经常使用jpg格式
gif：GIF最多只能存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果
png：png图片给格式，是一种新兴的网络图片格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景
webp：webp是谷歌推出的一种全新的图片文件格式，与JPEG格式一样，WebP是一种有损压缩格式。不同的是，WebP格式的压缩效率更为出色，在同等质量下，WebP格式图像的体积要比JPEG格式图像小40%。

1.8.相对路径和绝对路径

相对路径：
- 同一级路径：图形，文件位于同一级，如<img src="1.png" />
- 下一级路径：“/”，图形文件位于HTML文件的下一级，如<img src="img/1.png" />
- 上一级路径：“../”，图形文件位于HTML文件的上一级，如<img src="../1.png" />
绝对路径࿱