HTML基础|青训营

140 阅读5分钟

1. 行内元素:

既然要通过超链接的方式访问同一页面的某一位置内容,那么首先要给该位置建立一个书签。

使用以下语法定义书签:<a name="书签名称">文字</a>

定义了书签后,链接到该书签的超链接,其基本语法为:<a href="#书签名称">链接点</a>

name 中定义的书签名称与 href 中 # 号后面的书签名称相同。

在 a 标签中还有个 target 属性可以用来规定打开链接文档的位置,它有如下表所示的几种属性值

属性值描述
_blank在新窗口中打开被链接文档。
_self在相同的框架中打开被链接文档。
_top在整个窗口中打开被链接文档。
_parent在父框架集中打开被链接文档。

其使用格式为:<a target="_blank|_self|_top|_parent"></a>

在 HTML 中,可以使用 strong 标签来给文字加粗

<img src="图像 URL" alt="图像描述" />

属性说明如下:

· src 属性定义了图像的链接地址。

· alt 属性则当图像无法显示时,替代显示的文本。

另外,在 img 标签里可以用 width 属性来设置图片的宽度,用 height 属性来设置图片的高度。

当你把鼠标移到元素上会显示出现一段提示文本。

其基本使用格式如下所示:<img title="提示文本内容" />

a 标签:

· 用于页面之间的跳转。

· 用于链接电话、邮箱等。

· 用于文档书签。

span 标签没有固定的表现格式,它就像一个透明的盒子,当加入 CSS 代码时,它才会产生视觉上的变化。span 标签最大的特点时可以把很多标签放在同一行。

strong 标签用于给文字加粗。

img 标签用于在页面中显示图片。

学了这四个标签,你会发现这四种标签可以显示在同一行,这就是行内元素的特点了。

2. 块级元素

所谓无序列表,是指以实心圆 ●(默认)、空心圆 ○、实心方块 ■ 开头的,没有顺序的列表项目。

我们使用 type 属性可以修改列表开头的符号,其取值如下:

属性值说明
disc实心圆 ●
circle空心圆 ○
square实心方块 ■

自定义列表: 用 dl 标签表示自定义列表,其中的 dt 是代表列表项,而 dd 是列表项的描述。比如:我们需要对列表项的内容进行解释的时候,就可以使用自定义列表了。

基本用法为:

<dl>
​
 <dt>列表项一</dt>
​
 <dd>列表项一的描述</dd>
​
 <dt>列表项二</dt>
​
 <dd>列表项二的描述</dd>
​
</dl>

块级标签:div 标签没有特定的含义,它主要是用于实现页面布局操作。如果与 CSS 一同使用,div 标签可用于对内容块设置样式属性。

p 标签用于对文本内容分段,因为我们不能像在 word 里编辑文本那样使用回车来换行。

系列标题标签,在 HTML 中一共有六级标题,用 <h1> ~ <h6> ,在浏览器解析标题标签时,会将标题内容设为一个段落,字号大小会根据 n 值的大小来确定。

最后给大家介绍了三种列表标签,分别是无序列表(ul)、有序列表(ol)、自定义列表(dl)。

3. 表单:在 HTML 文档中,使用 form 标签来进行表单提交。form 标签有两个重要的属性,action 和 method 属性,其中 action 的属性值是表单提交的地址,method 的属性值是提交的方法。

其基本语法为:<form action="表单提交地址" method="提交方法"></form>

method 属性规定了表单提交方式,最常用的有两种方式,分别是 GET 和 POST。其中 GET 是把表单中的参数放置在 HTTP 请求的头部发送给服务器,而 POST 是将请求参数置于请求体内发送。

input 标签表示表单,其中它有不同的属性,用于表示不同的表单类型。

这里给大家介绍是四种类型的表单:

· 文本类表单

· 选择类表单

· 文件上传类表单

· 按钮表单

· 单选框和复选框的使用格式如下所示:

·    <!--单选框-->
​
·    <input type="radio" name="选项名" value="提交值" />
​
·    <!--复选框-->
​
·    <input type="checkbox" name="选项名" value="提交值" />

· 注意:使用单选框时,每个选项一定要设置相同的 name 值,否则就没有单选的效果。

· 在 HTML 中,我们使用 type="file" 表示文件类型表单元素,其使用格式为:

<input type="file" name="表单名字" accept="上传文件的格式" />

· 在 HTML 中,我们使用 type="submit" 表示发送类型表单元素,其使用格式为:

· <input type="submit" name="表单名字" value="表单名" />

下拉列表:<select>
 <option>选项一</option>
​
 <option>选项二</option>
​
 <option>选项三</option>
​
</select>

select 有两个常用属性,如下所示:

属性描述
multiple设置下拉列表可以选择多项。
size设置下拉列表选择几个表项。

option 有两个常用属性,如下所示:

属性描述
selected设置是否被选中。
value设置列表项的默认值。

4.HTML5新增标签: 在 HTML5 中,使用 audio 标签来播放声音文件或者音频流,该标签支持 Ogg、MP3、WAV 等音频格式。

其使用格式如下:

<audio src="URL" controls></audio>

参数说明:

· src 属性用于指定要播放的声音文件。

· controlscontrols="controls" 简写形式,用于提供播放、暂停和音量控件。

除了上面两种属性,audio 标签还有以下属性可用:

· autoplay 属性:音频自动播放。

· loop 属性:音频自动重复播放。

· preload 属性:用来缓冲 audio 标签的大文件,它有三个属性值 none(不缓冲)、auto(缓冲音频文件)、metadata (缓冲文件的元数据)。

HTML是前端学习的基础,是整个页面的基础骨架,知识点不是特别多,相对来说容易上手。