web前端入门到实战:HTML基础标签图片文本超链接列表表格介绍

1.HTML基础标签图片常见代码形式属性名常见的图片格式为以下三种:.jpg(图片有损压缩,影响画质)、.png(图片无损压缩、容积大、具有透明通道)、.gif(动图)。图片路径地址分为本地图片和网络图片,本地图片中分为绝对路径(从盘符开始算起)和相对路径(从当前路径算起),相对路径属于平级关系,如果图片相对于上一级,表现形式为"../"在属性名中,alt="属性名"是当图片无法正常展示出来时显示的文字,title="占位符"是鼠标移动到图片上展示出来的提醒文字。

2.HTML基础标签文本分为这个段落

标题h1-h6,文本随标签数字的增大而减小,标题的展示代码如下:

1 
 2 
 3 
 4     
 5     
 6     HTML基础标签文本
 7 
 8 
 9     

标题1

10

标题2

11

标题3

12

标题4

13
标题5
14
标题6
15 16 专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧 (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

在这里不得不说的是浏览器的机制:针对空格、回车、table键,只要在字符之间(何谓字符,类似

我是字符

就是在这个标签之间的文字),浏览器就会强制的转换为一个空格;如果没有在字符之间,则会直接清空,当然我们在编辑器中的排列添加的空格是为了排版的需要!如果想要排版展示的文字和在浏览器窗口展示的一样,我们应该怎么办?常见代码如下:

 1 
 2 
 3 
 4     
 5     
 6     HTML基础标签文本
 7 
 8 
 9     换行
10
下划线 11 空格  12 文本格式化标签: 13 文本加粗 14 斜体 15 删除线 16 17

3.html基础标签超链接,常见形式为文本,在href="#"里面,这个#可以替换为任何网址,如果不写就为空,用#表示。点击链接的文本,链接的网址打开形式分为当前窗口和新窗口打开,展示代码为新窗口打开,当前窗口打开,还有我们常说的书签标记:锚点展示代码形式如下

View Code

 1 68点击跳转1或者也可以这样写:168点击跳转1,除此之外,默认的点击返回顶部

View Code

4.html基础标签列表分为无序列表,有序列表,自定义列表,字面意思理解就是有无顺序的区别,代码展示形式如下:

 1 
 2 
 3 
 4     
 5     
 6     html基础标签列表
 7 
 8 
 9     
10     
    11
  • 1
  • 12
  • 2
  • 13
  • 3
  • 14
  • 4
  • 15
16 17
    18
  1. 1
  2. 19
  3. 2
  4. 20
  5. 3
  6. 21
  7. 4
  8. 22
23 24
25
26
文本
27 28
29 30

5.html基础标签表格

包含若干行,行里面包含若干个单元格,单元格的标题是
内容为,在表格中最重要的2个是合并行或者列,而colspan=""代表的是单元格可横跨列数rowspan=""代表的是可横跨行数,展示代码:

专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

 1 
 2 
 3 
 4     
 5     
 6     html基础标签
 7 
 8 
 9     
10         
11         
12             
13             
14             
15             
16         
17         
18             
19             
20             
21         
22         
23             
24             
25             
26         
27         
28             
29             
30             
31         
32         
33             
34             
35         
36     
colspan列数 rowspan行数
部门姓名性别工资
小明1W
小林1W
小影1W
工资合计3W
37 38 专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧 (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

你可能感兴趣的:(web前端入门到实战:HTML基础标签图片文本超链接列表表格介绍)