[PDF] HTML, CSS and pdfViewer

Based on [PDF] How to use pdf.js

这里需要复习一下网页开发的基本概念。

 

HTML教程

一、CSS 样式表

Ref: https://www.runoob.com/html/html5-intro.html

 

<head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

 

<style> 元素

内联样式

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

 

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
　　<style type="text/css">
　　　　body {background-color:yellow;}
　　　　p {color:blue;}
　　</style>
</head>

 

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
　　<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

 

二、区块和布局

<div>, style 属性。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>基本测试</title> 
</head>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © mobilar.com</div>

</div>
 
</body>
</html>

 

三、HTML框架

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

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

点击链接，网页显示在“小窗口”中。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>教程(iframe_a)</title> 
</head> 
<body>

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.baidu.com" target="iframe_a">iframe_a</a></p>

<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>

</body>
</html>

 

四、HTML 脚本

 写入内容。

<body>
    
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
　　document.write("<h1>这是一个标题</h1>");
　　document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
    
</body>

改变内容。

<body>

<h1>我的第一个 JavaScript </h1>

<p id="demo">
JavaScript 可以触发事件，就像按钮点击。</p>

<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>

<button type="button" onclick="myFunction()">点我</button>

</body>

改变颜色。

<body>
    
<h1>我的第一段 JavaScript</h1>

<p id="demo">
JavaScript 能改变 HTML 元素的样式。</p>

<script>
function myFunction()
{
    x=document.getElementById("demo") 　　// 找到元素
    x.style.color="#ff0000";          　　// 改变样式
}
</script>

<button type="button" onclick="myFunction()">点击这里</button>
    
</body>

 

 

HTML5教程

一、HTML5 图形

使用 HTML5 你可以简单的绘制图形:

 

二、SVG 与 Canvas两者间的区别

[1] SVG 是一种使用 XML 描述 2D 图形的语言。

[2] Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

 

三、Canvas元素

画一个圆。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

画布上贴一张照片。

<body>

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>
　　var c=document.getElementById("myCanvas");
　　var ctx=c.getContext("2d");
　　var img=document.getElementById("scream");

　　img.onload = function() {
    　　ctx.drawImage(img,10,10);
　　} 
</script>

</body>

 

四、Canvas事件

Goto: HTML5 <canvas> 参考手册

From: canvas获取鼠标位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        canvas{ border: 1px solid black; }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.font = "16px Arial";

        canvas.addEventListener("mousemove", function(e) { 
            var cRect = canvas.getBoundingClientRect();              
            var canvasX = Math.round(e.clientX - cRect.left);        
            var canvasY = Math.round(e.clientY - cRect.top);         
            ctx.clearRect(0, 0, canvas.width, canvas.height);        
            ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
        });
    </script>
</body>
</html>

 

 

CSS 教程

一、参考

[UI] 01 - CSS

[UI] 02 - Layout & CSS3 

 

二、重叠的元素

Ref: https://www.runoob.com/css/css-positioning.html

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="utf-8"> 
　　　　<title>教程</title> 
　　　　<style>
　　　　img
　　　　{
　　　　    position:absolute;
　　　　    left:10px;
　　　　    top:20px;
　　　　    z-index:1;
　　　　}
　　　　</style>
　　</head>

　　<body>
　　　　<h1>This is a heading</h1>
　　　　<img src="w3css.gif" width="100" height="140" />
　　　　<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
　　</body>
</html>

 

End.

posted @ 2020-06-27 09:54  郝壹贰叁  阅读(374)  评论(0)    收藏  举报