##HTML的复习## ①

最新推荐文章于 2024-11-02 16:29:50 发布

不放弃的梦

最新推荐文章于 2024-11-02 16:29:50 发布

阅读量244

点赞数 1

文章标签： Html复习

本文链接：https://blog.youkuaiyun.com/XBT1118/article/details/97401319

版权

1、设置viewport，在网页头部添加

<!--此处的设置最大宽度就是1，也就是整个网页的宽度，用户不能调节大小-->

2、设置图片（max-width：设置图片最大宽度为浏览器总宽度）

3、根据浏览器大小显示不同的图片

</picture>

4、自适应文字（单位vw：即“viewport width”的缩写）

1vw=1%

5、media查询（所谓的media查询，就是根据浏览器大小定义不同的css样式。）

<style>
 .fuck-left {
   float:left;width:20%;height:80px;background:#d98062;
 }

 .fuck-middle {
   float:left;width:60%;height:80px;background:#d4db54;
 }

 .fuck-right {
   float:left;width:20%;height:80px;background:#46acb6;
 }

 @media screen and (max-width: 800px) {
  .fuck-left, .fuck-middle, .fuck-right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
 }
</style>

<div class="fuck-left"></div>
<div class="fuck-middle"></div>
<div class="fuck-right"></div>

6、使用 Bootstrap 前端库，也可以达到自适应的网页效果（由twitter开发出来的）

7、HTML 框架就是用来在网页中显示另外一个网页

<iframe src="框架内网页的url地址" width="100%" height="250"></iframe>

<iframe src="框架内网页的url地址" style="border:1px solid LightGray;"></iframe><!--设置框架边框-->

8、把HTML框架当做超链接的target（点击该超链接时，当前页面不会做任何跳转，而是该超链接元素target属性所绑定的框架元素的页面元素进行页面跳转。target属性绑定的是目标框架的name属性。）

<iframe src="https://zhuanfou.com" name="iframe_name" 
style="width:100%;height:250px;border:1px solid LightGray;">
</iframe>

<a href="https://sand-box.cn" target="iframe_name">
点击我，跳转到沙盒首页去
</a>

9、HTML 元素背景色设置（使用`background`特性或`background-color`特性都可以设置背景色。）

<div style="background-color:LightGray;">
地镇高岗，一派西山千古秀；
</div>

<div style="background:LightBlue;">
门朝大海，三河合水万年河。
</div>

10、HTML 元素背景图片设置（使用`background`特性或`background-image`特性都可以设置元素的背景图片。）

background:url('背景图片的url地址');

background-image:url('背景图片的url地址');

11、让背景图片不重复显示（默认情况下，设置了图片会重复显示，如果不希望图片的重复显示，将元素`background-repeat`特性设置成no-repeat即可）

background-image:url('背景图片的url地址');
background-repeat:no-repeat;

12、HTML JavaScript（这里简单的介绍一下，等后面复习到的时候再深入了解）

JavaScript脚本不可以直接插入html源码中，要用`<script>`这个标签包住

<script>
document.write("专否，干翻砖家！");
</script>

<p id="demo">砖家牛b，独霸天下</p>
<button onclick="ganfan();">点我</button>

<script>
function ganfan(){
    document.getElementById("demo").innerHTML = "专否，干翻砖家！";
}
</script>

13、HTML <head> 元素：<head>标签内的元素主要是CSS样式表、JS脚本以及其他一些原信息。<head>标签内一般可包括如下标签：`<title>`、`<style>`、`<meta>`、`<link>`、`<script>`以及`<base>`。

14、`<title>`元素是用来定义文档的标题，在所有的HTML/XHTML文档中这都是必要的。 `<title>`元素： * 定义的标题会显示在浏览器的选项卡上 * 该页面被搜索引擎收录后，搜索引擎显示结果中的页面名称也就是来源title元素的内容 * 文档的标题即该页面被用户收藏在收藏夹中显示的名称

<!DOCTYPE html>
<html>

<head>
  <title>页面标题</title>
</head>

<body>
该网页文档的具体内容 bla bla bla ...
</body>

</html>

15、HTML <style> 元素

`<style>`元素是用来定义具体的CSS样式表的。这里大致理解即可，具体在CSS教程中会学到。

<style>
  p {
    color:Tomato;
     }
 </style>

16、HTML <link> 元素

`<link>`元素是用来定义外部CSS样式表，href属性即外部CSS样式表的链接地址。

<link rel="stylesheet" href="/static/css/bootstrap.min.css">

17、HTML <meta> 元素：`<meta>`元素被用于定义元数据信息的，该元素是不会显示在页面内容里，其主要是在进行一种信息的声明。声明页面的描述、关键词、文档作者、文档主要语言以及其他元数据。浏览器、搜索引擎等程序会获取meta元素以进行进一步操作。

<meta charset="UTF-8"><!--meta声明文档编码格式为UTF-8格式-->
<meta name="description" content="学习魔教功法"><!--声明对网页内容的描述-->
<meta name="keywords" content="葵花宝典,吸星大法,化功大法,九阴白骨爪"><!--声明网页的关键词，方便搜索引擎索引-->
<meta name="author" content="BKL"><!--声明网页的作者--> 
<meta http-equiv="refresh" content="30"><!--声明文档30秒刷新一次-->

18、通过meta设置viewport（在做移动端自适应网站时，可利用meta来设置viewport（用户视窗部分的特性声明）。浏览器可以根据viewport这种元数据信息做出相应显示特性，width=device-width代表视窗大小就是设备宽度；initial-scale=1.0代表初始大小就是正常大小，不放大也不缩小；user-scalable=no就是代表不让用户缩小页面。）

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
maximum-scale=1.0, user-scalable=no">

19、HTML <script> 元素：定义JavaScript脚本的。`<head>`标签里可以直接通过script元素来放js脚本，但是更多情况是用script元素来引入外部js脚本。

20、HTML <base> 元素：定义所有相对路径的url地址是相对哪个绝对路径的，以及还可以设置默认的target属性。

<base href="https://logo.zhuanfou.com/" target="_blank">

（假期闲着没事复习一下以前学过的内容，不然忘掉了）