HTML中图像标签的使用方法。
1.src是<img>标签的必须属性,它是用于指定图像文件的路径和文件名。例:
![](https://i-blog.csdnimg.cn/blog_migrate/58a8886d174af061e50ec70845d92b50.png)
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/eb80d2fa239b6d8f62952259b5444cf1.png)
2.如若使用图片,选择图片路径最好是相对路径。绝对路径在别的电脑可能显示不出来。相对路径反斜杠用“/''绝对路径反斜杠用”"
当图片选择相对路径时。所选择方式也不一样,例:
![](https://i-blog.csdnimg.cn/blog_migrate/ca0c50f2ba744ffd79a50c35e0f338c6.png)
附:有关图片属性及说明
![](https://i-blog.csdnimg.cn/blog_migrate/231b41638eb9cb6cd2d1fe2dbc18ae23.png)
超链接标签
1.语法格式:百度
2.链接的分类:(1)外部链接:实现不同页面的转换。
(2) 内部链接:网页内部之间的相互连接。
(3) 空链接
(4) 下载链接
(5) 网页元素链接
(6) 锚点链接:快速定位网页中的位置。
外与内部标签区别:外部链接不需要加http:/
外部链接:
语法格式:
![](https://i-blog.csdnimg.cn/blog_migrate/d16e333fd99e99ace406e95c83b391ba.png)
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/ccaab29c6b6de0e69b40f9ebd1df46e1.png)
内部链接:
相比外部链接不需要加http:/
锚点链接:
语法格式:
![](https://i-blog.csdnimg.cn/blog_migrate/6c4faf3a61ecd1444fe5d6d111cfe6e2.png)
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/f14035e8583186e322d1d80f6621edd1.png)
附:有关超链接属性及说明
![](https://i-blog.csdnimg.cn/blog_migrate/f52aabd762b927aa8703f0184b3a124e.png)
注释与特殊字符
注释:
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。
HTML中的注释以"<!--"开头,以"-->"结束(可以用ctrl+/快捷键使用)
特殊字符
![](https://i-blog.csdnimg.cn/blog_migrate/625dbb4d55e67780c84dc993305328c2.png)
列表标签
无序列表
列表是用来排列布局的
无序例表的基本语法格式:
![](https://i-blog.csdnimg.cn/blog_migrate/d979f5d885675d306a4f857032e04f53.png)
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/c84a14044fa1af5ab0fbb9609690d3d7.png)
注意:1.无序例表的各个列表之间是没有顺序级别之分,是并列的。
2.<ul></ul>中只能嵌套<li></li>,其他不被允许的。
3.<li></li>可以容纳所有元素。
有序列表
各个列表会按照一定的顺序排列布局。
在HTML标签中,<ol>biaoqian用于定义有序列表,列表排序以数字来显示,并使用<li>标签来定义列表项。
自定义列表
常用于对术语或名词进行解释描述,定义列表的列表项前没有任何项目符号。
基本语法格式:
![](https://i-blog.csdnimg.cn/blog_migrate/a16a8aa3b9913f9bfd48322fff83ba36.png)
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/f333256c35f76049081ef9a755007e99.png)
表单标签
表单控件(表单元素)
<input>表单元素
用于收集用户信息。
附:有关表单属性及说明
![](https://i-blog.csdnimg.cn/blog_migrate/bd5f8920ed62b59f5d69bbc208bbfcd2.png)
基本语法格式:
![](https://i-blog.csdnimg.cn/blog_migrate/00ae5c5f5bd2a4fd95fd83b067ad8b25.png)
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/908758c03b476cfc8eff913a4baeea74.png)
<dlabel>表单元素
为input元素定义标注,用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器会自动将焦点转到或者选择对应的表单元素上,用来增加用户体验。
语法格式:<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
<select>表单元素
在页面中,如果有多个选项让用户选择,并且想要节约页面空间时。
语法格式:
![](https://i-blog.csdnimg.cn/blog_migrate/c584e1004fa481820afa59f812574f2a.png)
<textarea>表单元素
用于定义多行文本输入的控件。
语法格式:<textarea rows=" " cols=" ">
</textarea>