> 文档中心 > HTML零基础入门(一)

HTML零基础入门(一)

文章目录

    • 1.HTML常用标签
    • 2.文本格式化标签
    • 3.
      标签
    • 4.图像标签
    • 5.图像标签和路径
    • 6.超链接标签(重点)
    • 7.特殊字符

1.HTML常用标签

1、h1-h6标题标签逐一递减,每一个标签占一行。

2、

段落标签,自动换行

3、强行打断换行

4、body内容标签,head头部,title页面标题内容

5、html表示结构,css表示外表,JavaScript表示行为

2.文本格式化标签

语义 标签 说明
加粗 第一个语义更加强烈!
倾斜 第一个语义更加强烈!
删除线 第一个语义更加强烈!
下划线 第一个语义更加强烈!

3.

标签

div和span是没有语义的,是一个盒子,用来装内容

特点:div标签用来布局,一行只能放一个div,大盒子

span标签用来布局,一行上可以多个span,小盒子

4.图像标签

标签用于定义HTML页面中的图像

<img src="图像url" />

src是标签的必须属性,它用于指定图像文件的路径和文件名

alt替换文本 图像显示不出来的时候用文字替换

<img src="img1.jpg" alt="不存在的图片"/>

title 提示文本 鼠标放在图像上,提示的文字

<img src="img.jpg" alt="不存在的图片" title="存在图片"/>

图片需要设置宽度width、高度height、边框粗细border

5.图像标签和路径

相对路径:以引用文件所在位置为参考基础,而建立的目录路径。

这里简单来说,图片相对于HTML页面的位置

相对路径分类 符号 说明
同一级路径 图像文件位于HTML文件同一级 HTML零基础入门(一)
下一级路径 / 图像文件位于HTML文件下一级 HTML零基础入门(一)
上一级路径 …/ 图像文件位于HTML文件上一级HTML零基础入门(一)

绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

6.超链接标签(重点)

1.外链接:

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a><a href="http://www.qq.com" target="_blank">腾讯</a>

target 打开窗口的方式 默认的值是_self 当前窗口打开页面 _blank 新窗口打开页面

2.内链接:网站内部页面之间的相互链接,直接链接内部页面名称即可

<a href="img.html">首页</a>

3.空链接:如果当时没有确定链接目标时

<a href="#">首页</a>

下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件

<a href="img.zip">下载文件</a>

地址链接是文件.exe或者是zip等压缩包形式

5.网页元素链接:网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接

<a href="http://www.baidu.com"><img src="img.jpg"/></a>

6.锚点链接:点我们点击链接,可以快速定位页面中的某个位置。

在链接文本的href属性中,设置属性值为#名字的形式,

<a href="#冠军">中国好声音第一季</a>

第一季的内容

<h3 id="冠军"></h3>

7.特殊字符

空格符

 

小于号

<span class="token entity named-entity" title="<

大于号

 ">>

在这里插入图片描述

体育科学