html网站设计（HTML中的内联框架及进阶设计）|快速备案

今天将为大家带HTML的内联框架，以及网页进阶设计，在想对网页做出更进一步的完善时，我们可以使用JavaScript对网页设计出更多的样式以及使用响应式设计来设计出更加出众的网页外观。一、HTML框架—iframe1、Iframe是一种可以在网页内联其他网页的元素2、Iframe语法为：<iframe arc = “URL”></iframe>（其中URL指向不同的网页）3、Iframe以height和width属性来定义长度和宽度，示例：运行结果： 4、在iframe中可以用frameborder属性来定义是否显示边框，设置属性为“0”的时候移除iframe的边框，示例：运行结果：二、HTML javaScript1、JavaScript是面向Web的编程语言，获得了所有网页浏览器的支持，是目前使用最广泛的脚本编程语言之一，也是网页设计和Web应用必须掌握的基本工具。2、在HTML中是用<script>标签来定义客户端脚本（JavaScript）。3、JavaScript的常见用途是图像处理、表单验证和内容的动态更改。4、JavaScript更改内容的示例：<!DOCTYPE html><html><head><title>javascript示例</title></head><body> <button type="button" onclick="myCat()">点击这里！</button> <p id="eg1">看这里</p> <script> function myCat(){ document.getElementById("eg1").innerHTML ="hello!"; } </script></body></html> 运行结果：点击前点击后Javascrip可以修改样式，示例：<!DOCTYPE html><html><body><h1>我的第一段 JavaScript</h1><p id="demo">JavaScript 可以更改 HTML 元素的样式。</p><script>function myFunction() { document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow"; }</script><button type="button" onclick="myFunction()">点击我！</button></body></html> 运行结果：点击前点击后三、HTML文件路径1、文件路径描述了网站文件夹结构中某个文件的位置。2、文件路径会在连接外部文件时被用到：l 网页l 图像l 样式表l JavaScript3、绝对文件路径是指向一个因特网文件的完整URL，示例： <img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">运行结果：4、相对路径指向了对于当前页面的文件。四、HTML响应式设计1、RWD指的是响应式Web设计（Responsive Web Design）。2、RWD 能够以可变尺寸传递网页。3、RWD 对于平板和移动设备是必需的。创建响应式设计的一个方法，实在急来创建它，示例：<!DOCTYPE html><html lang="en-US"><head><style>.city {float: left;margin: 5px;padding: 15px;width: 300px;height: 300px;border: 1px solid black;} </style></head><body><h1>Welcome to the New world</h1><h2>Resize this responsive page!</h2><br><div class="city"><h2>London</h2><p>London is the capital city of England.</p><p>It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p></div><div class="city"><h2>Paris</h2><p>Paris is the capital and most populous city of France.</p></div> <div class="city"><h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.</p></div></body></html>运行结果：4、另一个创建响应式设计的方法，是使用现成的 CSS 框架—Bootstrap。5、Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。6、Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机，示例：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><div class="container"><div class="jumbotron"> <h1>Welcome to the New world</h1> <p>Resize this responsive page!</p> </div></div><div class="container"><div class="row"> <div class="col-md-4"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="col-md-4"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="col-md-4"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div></div></div></body></html>运行结果：学完这一节对网页的进阶设计内容，是不是觉得对网页设计有了更多的认识呢？

相关文章