HTML 是用来描述网页的一种语言。
1、HTML 指的是超文本标记语言 (Hyper Text Markup Language)
2、HTML 不是一种编程语言,而是一种标记语言 (markup language)
3、标记语言是一套标记标签 (markup tag)
4、HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
1、HTML 标签是由尖括号包围的关键词,比如
2、HTML 标签通常是成对出现的,比如 和
3、标签对中的第一个标签是开始标签,第二个标签是结束标签
4、开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
1、HTML 文档描述网页
2、HTML 文档包含 HTML 标签和纯文本
3、HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容
如何使用样式
当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:
(1)外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
(2)内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过
body {background-color: red}
p {margin-left: 20px}
(3)内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
This is a paragraph
我们通过使用 标签在 HTML 中创建链接。
有两种使用 标签的方式:
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
超文本:什么是超文本?我的理解就是超链接,你可以根据网页显示的内容,根据超链接(也可以说为定义的锚)链接到网页的任何位置,链接到当前网页或者网络上的任何一个网页、图像、文档等等上去(也就是你的目标链接)。
href/target/name用来创建链接
Html布局:
(1)使用
(2)使用 HTML5 的网站布局
HTML5 提供的新语义元素定义了网页的不同部分:
HTML5 语义元素
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
(3)使用表格的 HTML 布局
HTML 响应式 Web 设计
什么是响应式 Web 设计?
RWD 指的是响应式 Web 设计(Responsive Web Design)
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的
(1)自己创建【自己写的代码让其自适应】
(2)使用 Bootstrap【 CSS 框架】
另一个创建响应式设计的方法,是使用现成的 CSS 框架。
Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
Bootstrap 帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机
HTML 框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面
使用的是frame标签
例如:垂直框架
效果图:
image.png
水平框架:
效果图:
image.png
框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
使用框架的坏处:
开发人员必须同时跟踪更多的HTML文档
很难打印整张页面
框架结构标签(
)框架结构标签(
)定义如何将窗口分割为框架每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
框架标签(Frame)
Frame 标签定义了放置在每个框架中的 HTML 文档。
在下面的这个例子中,我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中,而 HTML 文档 "frame_b.htm" 被置于第二个列中:
iframe:
HTML
元素以下标签都可以添加到 head 部分:
、、、、