HTML学习笔记4

最新推荐文章于 2024-02-21 15:13:13 发布

佩然于心

最新推荐文章于 2024-02-21 15:13:13 发布

阅读量163

点赞数

分类专栏：前端Web 文章标签： HTML

本文链接：https://blog.csdn.net/sinat_40302975/article/details/82665474

版权

前端Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

&Html响应式设计：

什么是响应式 Web 设计？

RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的

How实现响应式设计？

创建自己的响应式设计
使用Bootstrap

使用css框架来创建响应式设计

Bootstrap是最流行的开发响应式web的Html，css，js框架
Bootstrap能开发在任何尺寸的设备的站点

*****************************重点了解搜索下！************************************

&Html框架：

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

框架：通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

<frameset>框架结构标签

框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行/列
rows/columns 的值规定了每行或每列占据屏幕的面积

注：frameset 标签也被某些文章和书籍译为框架集。

<Frame>框架标签：定义了放置在每个框架中的 HTML 文档。

在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：

</frameset>

&假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。

为不支持框架的浏览器添加 <noframes> 标签。

重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。

代码示例：

<html>

<body>您的浏览器无法处理框架！</body>

</noframes>

</frameset>

</html>

&Html lframe （内联框架）

～用于在网页内显示网页～

添加 iframe 的语法

URL 指向隔离页面的位置。

设置宽度和高度：height 和 width 属性用于规定 iframe 的高度和宽度。属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。
删除边框：frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 "0" 就可以移除边框：
iframe作为链接目标：iframe 可用作链接的目标（target），链接的 target 属性必须引用 iframe 的 name 属性：

&Html背景（在比较新的Html中已经废弃，最好用Css来定义）

背景（<body>属性：bgcolor，Background）

提示：如果你打算使用背景图片，你需要紧记一下几点：

背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
背景图像是否与页面中的其他图象搭配良好。
背景图像是否与页面中的文字颜色搭配良好。
图像在页面中平铺后，看上去还可以吗？
对文字的注意力被背景图像喧宾夺主了吗？

&Html脚本： JS

<script>

用于定义客户端脚本，比如 JavaScript。
script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。

<noscript>

提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

&如何应付老式浏览器？

注意： 如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。

===》将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。

JavaScript:

<!--

document.write("Hello World!")

//-->

</script>

&Html头部元素：

HTML <head> 元素

<head> 元素是所有头部元素的容器。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

HTML <title> 元素

title 元素在所有 HTML/XHTML 文档中都是必需的。

title 元素能够：

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

HTML <base> 元素

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：

HTML <link> 元素

<link> 标签定义文档与外部资源之间的关系。

<link> 标签最常用于连接样式表：

HTML <style> 元素

<style> 标签用于为 HTML 文档定义样式信息。

body {background-color:yellow}

p {color:blue}

</style>

HTML <meta> 元素

元数据（metadata）是关于数据的信息。<meta> 标签提供关于 HTML 文档的元数据。

元数据不会显示在页面上，但是对于机器是可读的。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

针对搜索引擎的关键词：一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

&Html字符实体：

HTML 中的预留字符必须被替换为字符实体。

？什么是预留字符

Html 中对某些字符有预定义了，若直接使用则可能产生冲突

HTML 实体

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

字符实体类似这样：

&entity_name;

或者

&#entity_number;

如需显示小于号，我们必须这样写：< 或 <

不间断空格（non-breaking space）＆nbsp

HTML 中有用的字符实体

注释：实体名称对大小写敏感！

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

如需完整的实体符号参考，请访问我们的 HTML 实体符号参考手册。

＆HTML统一资源定位器： URL

URL - Uniform Resource Locator

URL格式：

scheme://host.domain:port/path/filename

解释：

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

URL Schemes

以下是其中一些最流行的 scheme：

Scheme	访问	用于...
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页。加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		您计算机上的文件。

佩然于心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记4

&amp;Html响应式设计：什么是响应式 Web 设计？RWD 指的是响应式 Web 设计（Responsive Web Design） RWD 能够以可变尺寸传递网页 RWD 对于平板和移动设备是必需的How实现响应式设计？创建自己的响应式设计使用Bootstrap 使用css框架来创建响应式设计Bootstrap是最流行的开发响应式web的Ht...
复制链接

扫一扫

专栏目录