导图社区 HTML基本标签

HTML基本标签

HTML基本标签全新介绍！内容包括网页的组成、基本结构、网页编辑工具、HTML的媒体元素、HTML页面中的块和行、网页基本信息等内容，感兴趣的小伙伴可以下载收藏。

编辑于2023-02-26 01:27:03

网页
HLML

😈

他的近期作品查看更多>>

HTML基本标签
HTML基本标签的思维导图，包含了HTML的媒体元素、HTML页面中的块和行、网页基本标签的语义化、图像标签、网页编辑工具等内容。
HTML基本标签
HTML基本标签全新介绍！内容包括网页的组成、基本结构、网页编辑工具、HTML的媒体元素、HTML页面中的块和行、网页基本信息等内容，感兴趣的小伙伴可以下载收藏。

HTML基本标签

社区模板帮助中心，点此进入>>

😈

他的近期作品查看更多>>

相似推荐
大纲

论语孔子简单思维导图
- 87.6k
- 936
- 1.1k
- 483
- 1
MindMaster
《傅雷家书》思维导图
- 133.3k
- 1.7k
- 2.7k
- 1.3k
- 0
MindMaster
《童年》读书笔记
- 45.3k
- 488
- 985
- 336
- 0
MindMaster
《茶馆》思维导图
- 12.5k
- 175
- 181
- 40
- 0
MindMaster
《朝花夕拾》篇目思维导图
- 25.9k
- 529
- 1.2k
- 301
- 0
MindMaster
《昆虫记》思维导图
- 33.1k
- 270
- 778
- 276
- 0
MindMaster
《安徒生童话》思维导图
- 18.3k
- 274
- 264
- 66
- 0
MindMaster
《鲁滨逊漂流记》读书笔记
- 21.4k
- 309
- 549
- 166
- 0
MindMaster
《这样读书就够了》读书笔记
- 97.8k
- 12.8k
- 9.0k
- 2.2k
- 0
Ethan
妈妈必读：一张0-1岁孩子认知发展的精确时间表
- 10.2k
- 1.7k
- 407
- 40
- 0
Ethan

HTML基本标签

网页的组成

HTML部分（<html>内容</html>）

JS部分（<script>特效</script>）

CSS部分（<style>样式</style>）

基本结构

<！DOCTYPE html> 声明

html 网页

<head>头部部分

<body>主体部分

<body>网页内容，可以是文本、图像等</body>

网页编辑工具

记事本

Dreamweaver

Notepad＋＋

Hbuilder

VScodr

网页基本信息

出现乱码解决方法

在头部部分添加<meta>标签

简体中文:gb2312

繁体中文:big5

纯英文网页:iso-8859-1

符合国际标准:UTF-8

页面背景色或背景图像

bgcolor="#FFCCFF""

网页背景色彩

background="back_image.GIF""

网页背景图像

网页基本标签的语义化

标题

<h1>

段落

图片

<img>

换行

<br>

水平线

<hr>

<hr size="5">线的厚度值

color="red"线的颜色

width="300"/>线的宽度

标题标签

<h1>最大，其次<h2>以此类推…

<h1>标签和<h2>标签在使用的时候建议包含关键词，建议只出现一次 <h3>、<h4>、<h5>标签SEO作用较小，建议不要乱用

图像标签

*.jpg

*.gif

*.png

*.bmp

图像的基本语法

<img src="图像标签"

图像的位置

width="300"

图像的宽度

height="150"

图像的高度

alt="明星演唱会开幕">

为图像添加的提示性文字，鼠标移到图像上出现提示性文字

列表标签

无序列表-type属性设置项目符号

项目符号:disc（默认）、square和circle

以<ul>标签来实现

以<li>标签表示列表项

有序列表-type属性设置项目顺序

项目顺序:1（默认）、A、a、Ⅰ、i

以<ol>标签来实现

以<li>标签表示列表项

定义类表-无项目符号和显示顺序

无项目符号和显示顺序

以<dl 标签来实现>

以<dt>标签定义列表项

以<dd>标签定义内容

预格式文本标签

标签:<pre>…</pre>

示例:<pre>…… </pre>

超级链接

<a>标签

<a href="path"

链接路径

targer="目标窗口位置">"

说明:链接在哪个窗口打开

链接文本或图像</a>

说明:单机之后跳转到相对应的页面

常用值:_self、_blank

链接到其他页面

相对路径:指定相对于当前文件的文件位置

示例:要链接到同一目录（C:\HTML）下的页面，可编写<a href="doc1.html>

绝对路径:指定从根目录到文件的完整路径

示例:要链接到同一目录（C:\HTML）下的页面，可编写<a href="c:\html\doc2.html>

链接到本页面

锚记标签:用于使用户"跳"到文档的某个部分"

定义锚标记:<a name="helpme">新人上路指男</a> 链接到锚标记所在位置:<a href="＃helpme">[新人上路]</a>

注意:如果页面不够长，锚点链接不会跳转，此时将页面内容增加一些使页面加长即可。

HTML页面中的块和行

行级标签

特点:能和其他元素保持在同一行，不能自动换行，不能设置宽高

常见的行级标签:a，span，strong，u（下划线），em（强调），i（斜体），sub（下标），sup（上标）

块级标签

特点:不能和其他元素保持在同一行（独占一行），可以自动换行，能设置宽高

常见的行级标签:div，p，h1－h6，ul，li，dl（定义列表，跟ul…li类似）， dt（定义了定义列表中的项目），dd（定义描述项目的内容，跟dt一起搭配）

常用于布局的块级标签

分区标签<div>

<div>标签可内嵌到<p>等标签内，作为普通块状元素使用

表格:<table> 行: <tr>…</tr> 列（单元格）:<td>…</td>

表单:<from> …… </from>

行内块级标签

特点:能和其他元素保持在一行，还能设置宽高

常见标签:textarea，input，img，button

HTML的媒体元素

视频元素:<video>…</video>

示例:<video src="视频路径"

说明:指定要播放的视频文件的路径

controls></video>

说明:提供播放、暂停和音量的控件

video标签常见属性

1.autoplay出现，则视频在就绪后马上播放

2.controls出现，则向用户显示控件，比如播放按钮

3.loop出现，则当媒介文件完成播放后再次开始播放

4.muted出现，则视频的音频为静音

5.src要播放的视频的URL

音频元素:<audio>…</audio>

<audio src="音频元素"

说明:指定要播放的音频文件的路径

controls></audio>

说明:提供播放、暂停和音量的控件

自动播放属性:autoplay

source标签常见属性

1.src规定媒体文件的URL 2.type规定资源的媒体类型

解释:1.source标签可以写多个，并指定type，兼容不同浏览器解码支持。但src只能写一个 2.source标签的type属性的属性值有video/ogg，video/mp4，video/webm