webkitbrowser.dll打开本地html_HTML常用标签

weixin_39850331

于 2020-12-05 04:21:03 发布

阅读量617

点赞数

文章标签： webkitbrowser.dll打开本地html 把function放进table标签

a标签的四种常用属性

href属性

href可以拥有多种类型的属性值，外链、本地路径、本地http-server开启的本地服务路径、伪协议、javascript脚本代码、邮箱地址、本地手机通话的拨出以及自己定义的内部锚点。下面我会针对常用的属性值对其进行简要的概述。

1. 外链

<a href="baidu.com"></a>

上面的代码块中的href的取值是一个外部网址，这个网址可以是任何网址，网址也是href里面最常用的属性值

2. 本地路径

<a href="image.html">

如果上图任意一个html文件中有上述的代码块（代码块中的html文件除外），发生该种情况时，执行任意一个文件中的a标签时，我们打开的页面就是a标签href属性值中与本地相关联的本地html文件。举个例子，比如我此时点开的是table.html本地网页，并且table.html源代码中有上述的代码，我们点击a锚点时，我们就会进入image.html网页。

3. 伪协议

<a href="javascript:;"></a>

上述的代码块就是一个比较经典的伪协议，当我们执行此段代码时，浏览器不会有任何响应。同理，根据这段代码我们也可以执行javascript代码。

4. 邮箱地址、手机号的拨出

<a href="mailto:xxxxxxxx@qq.com">
<a href="tel:88888888">

5. 网页内部锚点导航

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p id="xxx">6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<a href="#xxx"></a>
</body>
</html>

执行上述代码块时，当我们点击a锚点，id为xxx的p标签中的内容会出现再当前页面顶端（前提时没有点击锚点时该p标签不在当前展示的页面范围内）。

target属性

<a href=baidu.com target="_self"></a>
<a href=baidu.com target="_blank"></a>
<a href=baidu.com target="_parent"></a>
<a href=baidu.com target="_top"></a>
<a href=baidu.com target="xxx"></a>

_self: 当前页面加载，即当前的响应到同一HTML 4 frame（或HTML5浏览上下文）。此值是默认的，如果没有指定属性的话。
_blank: 新窗口打开，即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
_parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式与 _self 相同。
_top: IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self
xxx: 页面在窗口为xxx中打来。这个值可以为任意值，此时window.name值为xxx，详见下图。

image标签

image标签的作用就是发出get请求，展示一张图片，下路就是最常见的一种image请求过程。

image附带属性

<img width="800" height="600" src="xxx.jpg" id="xxx" alt=""/>

src 属性是必须的，它包含了你想嵌入的图片的文件路径。
alt 属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。
width 图片的宽度。
height 图片的高度。

image事件

<script>
   xxx.onload=function(){
      console.log("图片加载成功")
   }
   xxx.onerror=function(){
      console.log("图片加载失败")
      xxx.scc="/404.png"
   }
</script>

图片加载成功

图片加载失败时，替换的404图片

响应式

在网页中请求的图片，我们尽量避免改变图片的尺寸比例，让其保持自适应，此时我们应该让图片的宽度随着浏览器的宽度进行自适应，此时我们应该给图片加上这么一条属性。

img{ max-width:100%;}

form>table标签

table主体标签分别由<thead>、<tbody>和<tfoot>构成，他们分别代表头部、主体以及足部或者说是尾部。这些主体标签里面又包含了

<tr>(table row的缩写，table里面的一行)

<th>(table header的缩写，table里面的表头)

<td>(table data的缩写，table里面的数据 )

下面我们用代码详细展示table非方面的属性及其展现方式。

<thead>
    <tr>
       <th></th>
       <th>小红</th>
       <th>小明</th>
       <th>小李</th>
    </tr>
</thead>
<tbody>
    <tr>
       <th>语文</th>
       <td>88</td>
       <td>78</td>
       <td>98</td>
    </tr>
    <tr>
       <th>数学</th>
       <td>76</td>
       <td>98</td>
       <td>87</td>
    </tr>
    <tr>
       <th>英语</th>
       <td>100</td>
       <td>89</td>
       <td>90</td>
    </tr>
</tbody>
<tfoot>
    <tr>
       <th>总分</th>
       <td>200</td>
       <td>200</td>
       <td>200</td>
    </tr>
</tfoot>

上述代码执行时的页面

table也可以设置css属性。

table{
    width:600px;  //--设置宽度为600像素--//
    table-layout:auto; //--采用此算法对表格进行布局--//
    border-collapse:collapse; //--合并边框--//
    border-sapcing:0px;  //--中间空格的间隙--//
}
th,td{
    border:1px solid blue;  //--给table表格设置1像素蓝色实线边框--// 
}

给table添加上述css属性后

weixin_39850331

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webkitbrowser.dll打开本地html_HTML常用标签

a标签的四种常用属性href属性 href可以拥有多种类型的属性值，外链、本地路径、本地http-server开启的本地服务路径、伪协议、javascript脚本代码、邮箱地址、本地手机通话的拨出以及自己定义的内部锚点。下面我会针对常用的属性值对其进行简要的概述。1. 外链<a href="baidu.com"></a>上面的代码块中的href的取值是一个...
复制链接

扫一扫