导图社区 HTML标记语言
以下是一篇关于HTML标记语言的脑图,介绍了HTML语言基础、HTML媒体、HTML标签、HTML简介、web浏览器等。
编辑于2021-12-20 16:50:10HTML标记语言
HTML语言基础
HTML标题
<h1> - <h6>
<h1>这是一个标题</h1> <h2>这是一个标题</h2> <h3>这是一个标题</h3>
<h1> 定义最大的标题。 <h6> 定义最小的标题。
浏览器会自动地在标题的前后添加空行
1.不要为了生成粗体或大号的文本而使用标题 2.搜索引擎使用标题为您的网页的结构和内容编制索引 3.用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的 4.h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推
HTML 段落
<p>
<p>这是一个段落。</p> <p>这是另外一个段落。</p>
浏览器会自动地在段落的前后添加空行。(</p> 是块级元素)
HTML 链接
<a>
<a href="http://www.shouce.ren">这是一个链接</a>
提示:在 href 属性中指定链接的地址
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像。 您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手
默认情况下,链接将以以下形式出现在浏览器中
一个未访问过的链接显示为蓝色字体并带有下划线 访问过的链接显示为紫色并带上下划线 点击链接时,链接显示为红色并带上下划线
target属性
_blank _parent _self _top framename
HTML 图像
<img/>
<img src="shouce.ren.png" width="104" height="142"/>
图像的名称和尺寸是以属性的形式提供的
HTML 水平线
<hr/>
可用于分隔内容
HTML 注释
<!-- 这是一个注释 -->
可以提高其可读性,使代码更易被人理解。 浏览器会忽略注释,也不会显示它们
如何查看网页源代码
单击右键 > 选择"查看源文件"(IE)或"查看页面源代码"(Firefox)
快捷键F12
HTML 折行
<br />
不产生一个新段落的情况下进行换行(新行)
<p>This is<br>a para<br>graph with line breaks</p>
HTML 输出
当显示页面时
浏览器会移除源代码中多余的空格和空行。 所有连续的空格或空行都会被算作一个空格。 HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
HTML 格式化标签
文本格式化标签
标签 描述 <b> 定义粗体文本 <em> 定义着重文字 <i> 定义斜体字 <small> 定义小号字 <strong> 定义加重语气 <sub> 定义下标字 <sup> 定义上标字 <ins> 定义插入字 <del> 定义删除字
”计算机输出“标签
标签 描述 <code> 定义计算机代码 <kbd> 定义键盘码 <samp> 定义计算机代码样本 <var> 定义变量 <pre> 定义预格式文本
HTML 引文, 引用, 及标签定义
标签 描述 <abbr> 定义缩写 <address> 定义地址 <bdo> 定义文字方向 <blockquote> 定义长的引用 <q> 定义短的引用语 <cite> 定义引用、引证 <dfn> 定义一个定义项目。
HTML媒体
主题
HTML简介
HTML文件=HTML命令组成的描述性文本
HTML命令=说明文字、图形、动画、声音、表格、链接等
HTML文件结构=头部(Head)、主体(Body)
头部=描述浏览器所需的信息,主体=包含所要说明的具体内容
什么是HTML?
超文本标记语言: Hyper Text Markup Language
NO编程语言,YES标记语言
标记语言=标记标签 (markup tag)
标记标签用来描述网页
HTML 是用来描述网页的一种语言
HTML 文档=HTML 标签+文本内容
HTML文档=web 页面
HTML 文档由嵌套的 HTML 元素构成
HTML标签/元素
尖括号包围的关键词,比如 <html>
成对出现的,比如 <b> 和 </b>
第一个开始标签(开放标签),第二个结束标签(闭合标签)
HTML标记标签
元素的内容=开始标签与结束标签之间的内容
某些 HTML 元素具有空内容
空元素在开始标签中进行关闭(以开始标签的结束而结束
大多数 HTML 元素可拥有属性
使用小写标签
web游览器
谷歌浏览器,Internet Explorer,Firefox,Safari
作用:1.读取HTML文件 2.网页显示
不显示的HTML标签,使用标签来决定如何展现HTML页面的内容给用户
HTML页面结构
<!Doctype html> 声明文档类型 <html> 定义HTML文档 <body> 定义文档的主体 <h1>This a heading</h1> 定义 HTML 标题 <p>This is a paragraph.</p> 定义 HTML 段落 <p>This is another paragraph.</p> </body> </html>
HTML版本
版本 发布时间 HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013
<!DOCTYPE> 声明
有助于浏览器中正确显示网页
不区分大小写
<!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!Doctype Html>
通用声明
HTML5 <!DOCTYPE html> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML属性
可以在元素中添加附加信息
一般描述于开始标签
以名称/值对的形式
name="value"
常用引用属性值
属性值应该始终被包括在引号内
双引号是最常用的,不过使用单引号也没有问题
属性值本身就含有双引号,那么您必须使用单引号
name='John "ShotGun" Nelson'
适用大多数HTML元素的属性
属性 描述 class 为html元素定义一个或多个类名(classname)(类名从样式文件引入) id 定义元素的唯一id style 规定元素的行内样式(inline style) title 描述了元素的额外信息 (作为工具条使用)