当前位置:网站首页 / web前端 / 正文

AY H5笔记3

时间:2019年03月12日 | 作者 : aaronyang | 分类 : web前端 | 浏览: 395次 | 评论 0

img图片/map/area

除了src,alt,height,width(宽高可以百分比)

还有<map>定义图片映射。包含多个<area>子元素

<area> 有几个属性,例如shape指定内部区域是哪种区域,该属性默认值是rect,矩形区域。还有circle和poly代表圆形区域和多边形区域,

coords指定多个坐标值,用于确定区域位置。href指定资源,alt是图片的文本,target,类似超链接a的target用法。

img就不写demo了。直接map,然后定义2个区域,在img上使用usemap,指定上 map的name或者id

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <img src="http://www.wpfui.com/abl/o_3.jpg" alt="AY" width="175" height="311" border="0" usemap="#firstmap"/>
    <map name="firstmap" id="firstmap">
        <area shape="circle" coords="50,60,70" href="http://www.baidu.com" alt="去百度" />
        <area shape="poly" coords="100,20,110,30,120,60,80,45,60,40,150,70,60,200" href="http://www.ayjs.net" alt="去AY" />
    </map>

</body>
</html>

image.pngimage.png

如图,单击会导航过去,会显示区域。真的可以做个地图了。好方便,地图区域是个多边形,然后坐标好了,就可以了。


在img上指定ismap, 浏览器会自动传递单击的坐标

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <!--<img src="http://www.wpfui.com/abl/o_3.jpg" alt="AY" width="175" height="311" border="0" usemap="#firstmap"/>-->
    <!--<map name="firstmap" id="firstmap">
        <area shape="circle" coords="50,60,70" href="http://www.baidu.com" alt="去百度" />
        <area shape="poly" coords="100,20,110,30,120,60,80,45,60,40,150,70,60,200" href="http://www.ayjs.net" alt="去AY" />
    </map>-->
    <a href="http://www.wpfui.com"><img src="http://www.wpfui.com/abl/o_3.jpg" alt="AY" width="175" height="311" border="0" ismap="ismap" /></a>
</body>
</html>

后面140,71自动添加的

image.png


table

H5删除了table的align,bgcolor,border等属性,建议所有table的控制放到css里面(以前还有cellpadding,cellspacing,width,height等)

table定义表格,可以有最多1个caption(表格标题),thead表格头,tfoot表格脚,多个tr表格行,多个tbody表格体(给tr分组的)

tr下是td,td可以指定colspan,合并列,rowspan合并行,height单元格高度,width,单元格宽度,可以百分比


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <table style="width:400px" border="1">
        <caption>测试标题</caption>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
        </tr>
        <tr>
            <td colspan="2">AB</td>
            <td>C</td>
        </tr>
        <tr>
            <td rowspan="2">AA</td>
            <td>B</td>
            <td>C</td>
        </tr>
        <tr>
            <td>B</td>
            <td>C</td>
        </tr>
    </table>
</body>
</html>

image.png

thead,tbody,tfoot不怎么常用,tfoot就是最后1行

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <table style="width:400px" border="1">
        <caption>测试标题</caption>
        <thead>
            <tr>
                <td>列1</td>
                <td>列2</td>
                <td>列3</td>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="3">一共5行,加头6行</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td colspan="2">AB</td>
                <td>C</td>
            </tr>
            <tr>
                <td rowspan="2">AA</td>
                <td>B</td>
                <td>C</td>
            </tr>
            <tr>
                <td>B</td>
                <td>C</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

image.png

tbody就是行分组


看下colgroup和col元素,统一设置每一列的单元格的属性。不常用。th和td一样的,只不过加了个语义,表示列头,一般默认加粗。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <table style="width:400px" border="1">
        <caption>测试标题</caption>
        <colgroup style="background-color:red;">
            <!--设置第一列宽度60-->
            <col style="width:60px" />
            <!--设置横跨两列,设置两列宽各位100-->
            <col span="2" style="width:100px" />
        </colgroup>
        <thead>
            <tr>
                <th>列1</th>
                <th>列2</th>
                <th>列3</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="3">设置了3列</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>
            </tr>
        </tbody>
        <!--<tbody>
            <tr>
                <td colspan="2">AB</td>
                <td>C</td>
            </tr>
            <tr>
                <td rowspan="2">AA</td>
                <td>B</td>
                <td>C</td>
            </tr>
            <tr>
                <td>B</td>
                <td>C</td>
            </tr>
        </tbody>-->
    </table>
</body>
</html>

image.png


iframe增强

移除frameset,frame,noframes这3个

保留iframe元素。类似wpf的frame

属性

src:url的地址,name:iframe的名字。longdesc:指定一个页面URL,该页面包含该iframe的长描述

scrolling:是否显示滚动条。yes显示,no不显示,auto自动

height,width,frameborder,marginheight:设置该iframe的顶部和底部的页边距。marginwidth,设置该iframe的左侧和右侧的页边距(AY觉的这个名字取的不太好)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <iframe src="http://www.baidu.com" width="500" height="300"/>
</body>
</html>

image.png


+srcdoc属性

指定一段Html,忽略src属性,IE不支持

   <iframe src="http://www.baidu.com" width="500" height="300" srcdoc="<h1>测试好</h1><div>AY刚学</div>"/>

image.png

+seamless属性

bool类型,让iframe生成的框架像源文档的一部分,不再显示边框和滚动条。貌似不常用,直接vue,模块化就ok了。


+sandbox属性

给框架中的网页增加一系列限制。

"":限制全部

allow-forms:允许框架内的表单进行提交。(通常配合allow-same-origin一起使用) sandbox="allow-forms allow-same-origin"

allow-same-origin:允许将框架内所加载的网页视为与使用该iframe元素的页面来自相同源(即时这两个网页来自不同的源,也可以被看做相同域名相同端口的)

allow-scripts:允许加载网页执行js脚本

allow-top-navigation:允许将框架内所加载网页中的超链接导航到父级窗口。

不指定,表示不限制所有。指定"",等于

禁用该页面内的插件。禁止表单提交,框架中的超链接只能在本框架中导航。frame的页面来自不同的源。对于不同源的网页(两个页面对应URL的域名不同或端口不同,即认为这两个页面是不同源的)该页面将会被禁止使员工Ajax与服务器交互,禁止加载来自服务器的内容,同时禁止该页面从Cookie或Web storage读取内容。

所有浏览器都支持。

*允许指定多个属性值,使用空格隔开




H5通用属性

保留通用属性:

id 类似wpf的name属性

style类似wpf的style

class类似wpf的StaticResource/DynamicResource

dir排列方向:ltl(从左向右)和rtl(从右向左),类似wpf的HorizonAlignment属性

<table border="1">
    <tr>
        <td style="width:200px;" dir="ltr"><span>我是</span><span>大聪明</span></td>
        <td style="width:300px;" dir="rtl"><span>我是</span><span>大聪明</span></td>
    </tr>

</table>

image.png

title属性,类似wpf的tooltip

lang属性:告诉浏览器和搜索引擎,所使用的语言,zh中文,en英文,fr法语,ja日语等

一般html元素会指定

<html lang="zh">

<div lang="ja">はようございま</div>

accesskey属性:指定激活该元素的快捷键。 类似wpf的ContentPresenter的RecognizesAccessKey 属性

    <div>
        用户名(U)<input type="text" name="username" accesskey="u" /><br/>
        密码(P)<input type="text" name="pass" accesskey="p" /><br />
        <a href="http://www.ayjs.net" accesskey="L">AY博客(L)</a>
    </div>

按下Alt+对应的字母,就可以激活元素,如果文本框,就是获得焦点,如果超链接,就是等于单击该导航

tabindex 类似wpf的tabindex,指定数字1,2,....N用于按Tab键顺序导航的.如果值等于-1,表示不受tab键盘的影响,不会被导航到的。


新增通用属性:

contentEditable="true"

如果一个父元素的contentEditable=true,那么子元素也是该值,继承的。把元素变成可编辑状态

下面例子,双击表格,变成可编辑的。

<table  ondblclick="this.contentEditable=true">
        <tr>
            <td style="width:200px;" dir="ltr"><span>我是</span><span>大聪明1</span></td>
            <td style="width:300px;" dir="rtl"><span>我是</span><span>大聪明2</span></td>
        </tr>

    </table>

image.png

designMode属性 双击设计时,页面中所有支持contentEditable属性的元素都变成可编辑状态

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body ondblclick="document.designMode='on';">
    <div>aaaa</div>
    <table style="width:400px;border-collapse:collapse" border="1">
        <tr>
            <td>列1</td>
            <td>列2</td>
        </tr>
        <tr>
            <td>列2_1</td>
            <td>列2_2</td>
        </tr>
    </table>
</body>
</html>

image.png


hidden属性

hidden="true" 等同于 css的display:none

等于wpf的Visibilty="Collapsed"

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <div id="self">我是AY</div>
    <button onclick="var s = document.getElementById('self'); s.hidden = !s.hidden;">显示/隐藏</button>
</body>
</html>

image.png单击后image.png



spellcheck属性

<input/><textarea/>增加的拼写检查。

    <textarea spellcheck rows="3" cols="80" ></textarea>

IE和火狐暂未支持。


contextmenu属性

目前只有火狐支持。

<div contextmenu="mymenu">

<menu type="context" id="mymenu">

  <menuitem label="Refresh"></menuitem>

  <menuitem label="Twitter"></menuitem>

</menu>

</div>



新增结构元素

article和section

article表示文章,内部可以放header表示标题,footer表示脚注,多个section表示段落,多个article表示附属文章

section分块,可以包含section表示子分块。可以h1-h6表示1个标题,也可以放article

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <h1>我是H1</h1>
    <article>
        <h2> 我是h2</h2>
        <p>学习h1和h2</p>
        <section>
            <h2>第一部分 我是h2</h2>
            <article>
                <h3>1.我是h3</h3>
                <div>我是h3的div</div>
                <p>我是p一个段落</p>
            </article>
            <article>
                <h3>2.我是h3</h3>
                <div>我是h3的div</div>
                <p>我是p一个段落</p>
            </article>
        </section>    
        <section>
            <h2>第二部分 我是h2</h2>
            <article>
                <h3>2,1.我是h3</h3>
                <div>我是h3的div</div>
                <p>我是p一个段落</p>
            </article>
            <article>
                <h3>2.2.我是h3</h3>
                <div>我是h3的div</div>
                <p>我是p一个段落</p>
            </article>
        </section>
    </article>
</body>
</html>

image.png

就是一块一块,类似div的用法,主要有点语义,让人一看代码就知道是一篇文章结构。如果div做也可以,但是别人不知道是文章,可能看完理解后,哦,这段代码是个文章。

文档结构写好了,后面可以用css梅花。


看下header和footer

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <header>
        <a href="#">返回首页</a>
        <h1>文章demo如下</h1>
    </header>
    <h1>我是H1</h1>
    <article>
        <h2> 我是h2</h2>
        <p>学习h1和h2</p>
        <section>
            <h2>第一部分 我是h2</h2>
            <article>
                <h3>1.我是h3</h3>
                <div>我是h3的div</div>
                <p>我是p一个段落</p>
            </article>
            <article>
                <h3>2.我是h3</h3>
                <div>我是h3的div</div>
                <p>我是p一个段落</p>
            </article>
        </section>
        <section>
            <h2>第二部分 我是h2</h2>
            <article>
                <h3>2,1.我是h3</h3>
                <div>我是h3的div</div>
                <p>我是p一个段落</p>
            </article>
            <article>
                <h3>2.2.我是h3</h3>
                <div>我是h3的div</div>
                <p>我是p一个段落</p>
            </article>
        </section>
        <footer>
         我只是一个脚注总结
        </footer>
    </article>
    
</body>
</html>

image.png

header也可以放在article里面。


看下nav和aside元素

nav用于定义页面上的“导航条”,包括页面上仿的“主导航条”“边栏导航”“页面导航”“底部导航”等

aside定义当前文章附属信息,通常来说,<aside>元素施一公css渲染成侧边栏。放在body则全局,放在内部元素,则父元素添加边栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <header>
        <a href="#">返回首页</a>
        <h1>文章demo如下</h1>
    </header>
    <h1>我是H1</h1>
    <article>
        <h2> 我是h2</h2>
        <p>学习h1和h2</p>
        <section>
            <h2>第一部分 我是h2</h2>
            <article>
                <h3>1.我是h3</h3>
                <div>我是h3的div</div>
                <p>我是p一个段落</p>
            </article>
            <article>
                <h3>2.我是h3</h3>
                <div>我是h3的div</div>
                <p>我是p一个段落</p>
            </article>
        </section>
        <section>
            <h2>第二部分 我是h2</h2>
            <article>
                <h3>2,1.我是h3</h3>
                <div>我是h3的div</div>
                <p>我是p一个段落</p>
            </article>
            <article>
                <h3>2.2.我是h3</h3>
                <div>我是h3的div</div>
                <p>我是p一个段落</p>
            </article>
        </section>
        <footer>
            我只是一个脚注总结
        </footer>
        <aside style="position:absolute;right:10px;bottom:300px">
            <section>
                <h4>我是内侧边栏h4</h4>
                <div>用户:AY</div>
                <div>时间:2019-3-12</div>
                <div>性别:公</div>
            </section>
        </aside>
    </article>
    <aside style="position:absolute;right:10px;bottom:10px">
        <h3>导航</h3>
        <nav>
            <ul>
                <li><a href="#">查看AY信息</a></li>
                <li><a href="#">查看AY论坛</a></li>
                <li><a href="#">博客园</a></li>
                <li><a href="#">博客推荐</a></li>
            </ul>
        </nav>
    </aside>
</body>
</html>

image.png

看下main元素

一个html文档只应包含一个main元素,用于除导航条,logo,版权信息等之外的主要内容。不应该放在允许重复出现的内容中,如article,section,aside,nav,footer,header等元素内

image.png


看下figure和figcaption元素

给显示图片增加语义的。

figure类似div,表示定义一块放图片的区域,figcaption就是区域的标题

    <figure>
        <figcaption>Ay相册</figcaption>
        <img src="http://www.wpfui.com/abl/o_2.jpg" alt="图片1" />
        <img src="http://www.wpfui.com/abl/o_3.jpg" alt="图片2" />
        <img src="http://www.wpfui.com/abl/o_4.jpg" alt="图片3" />
    </figure>

image.png

新增语义元素

mark 标注重点内容,类似span的用法,用于全文检索时的高亮的关键字

time表示时间,标注具体时间的,无显示效果,可以指定yyyy-MM-ddTHH:mm的格式,可以日期,可以时间。pubdate属性表示是否为发布时间,告诉搜索引擎,此文档的发布时间。


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <time datetime="2019-3-12">2019年3月</time>AY开始学习<mark>HTML5</mark>的东西,不知道是不是有点晚了。<br />
    <time datetime="20:20">晚上8点</time>开始看书<br /> <time datetime="06:00">早上6点</time>开始上班
</body>
</html>

image.png

details   和 summary

基本上一起使用

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <time datetime="2019-3-12" pubdate>2019年3月</time>AY开始学习<mark>HTML5</mark>的东西,不知道是不是有点晚了。<br />
    <time datetime="20:20">晚上8点</time>开始看书<br /> <time datetime="06:00">早上6点</time>开始上班
    <details>
        <summary>学习计划</summary>
        先学习H5,然后CSS3,然后ES6,然后vue,然后bootstrap,然后app相关的,然后微信
    </details>
</body>
</html>

image.png

detail自带折叠效果。

====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========

ruby,rtc,rb,rt,rp元素

用于东亚文字定义解释

ruby用于为一个或者多个短语定义ruby注释。ruby注释的通用形式是在短语后面紧跟一段注释文字,用于说明该短语的发音或其他注释。

rb为ruby的子元素,定义ruby注释所解释的短语。

rt定义ruby注释的说明部分(发音或其他注释),通常是ruby或者rtc的子元素,如果后面紧跟rb,rt,rtc,rp,可以省略结束的rt

rtc:rt的容器

rp:用于为不支持ruby注释提供备用文本。一个广泛的约定是,使用该元素标注ruby注释的文本内容两边的圆括号。对于支持ruby注释的浏览器而言,rp元素不显示。

    <ruby>
        饕
        <rb>餮</rb>
        <rp>(</rp>
        <rt>tao</rt>
        <rt>tie</rt>
        <rp>)</rp>
    </ruby>

image.png

bdi元素

将一段文本从它所在的上下文中隔离出来。在某些情况下,浏览器会自动确定文字的方向。可能打乱布局。

把阿拉伯文的内容加进去

不使用

    <ul>
        <li>杨洋:20岁</li>
        <li>مرحباً :22岁</li>
    </ul>

image.png你代码都写不到前面去。

使用的话

    <ul>

        <li><bdi>杨洋</bdi>:20岁</li>

        <li><bdi>مرحباً </bdi>:22岁</li>

    </ul>

image.png



wbr元素

wbr是word Break Opportunity用于指定在文本的 某处适合添加换行,如英文单词太长,浏览器错误的换行。你用了wbr是告诉浏览器超出长度了该怎么换行

不添加wbr

<p>wbr告诉浏览器如何换行</p>
    我是一个长单词我是一个长单词我是一个长单词我是一个长单词我是一个长instantaneously

image.png

添加wbr

    <p>wbr告诉浏览器如何换行</p>
    我是一个长单词我是一个长单词我是一个长单词我是一个长单词我是一个长instant<wbr>ane<wbr>ously

image.png


menu和menuitem元素

定义菜单项

可以为contextmenu提供属性值

参数 type:指定菜单项类型,command普通菜单项,checkbox复选菜单项,radio单选菜单项,command是默认值

label:菜单文本

icon:菜单图标

disabled是否可用

checked是否勾选

radiogroup当type是radio时候,有效,表示一组

default表示菜单是否是默认菜单项

    <menu>
        <menu label="文件">
            <menuitem type="command" onclick="file_new()" label="新建" />
            <menuitem type="command" onclick="file_open()" label="打开" />
            <menuitem type="command" onclick="file_save()" label="保存" />
        </menu>
        <menu label="编辑">
            <menuitem type="command" onclick="edit_cut()" label="剪切" />
            <menuitem type="command" onclick="edit_copy()" label="复制" />
            <menuitem type="command" onclick="edit_paste()" label="粘贴" />
        </menu>
    </menu>

目前火狐支持。




====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========


至少还要写10篇左右才能讲完。。

推荐您阅读更多有关于“web前端,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘.NET,Java,Web前端,有想找想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表