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

AY H5笔记2

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

保留元素

<!-..-->注释

<html><head><title><body>

<h1>到<h6>

<p><br><hr><div><span>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
    <!--注释水平-->
    <hr />
    <span>Hello</span><span>World</span><span>iPhone</span><span>xs Max</span>
    <br />
    <div>Hello</div><div>World</div><div>iPhone</div><div>xs Max</div>
    <p>P1</p>
    <p>P2</p>
    <p>P3</p>
</body>
</html>

image.png

Span和P中间只能包含文本,图片,超链接,文本格式化元素和表单控件

p可以包含span,span不能包含p,div包含的更多了。

div太多滥用,语义不清晰了,所以推荐H5的article section nav 代替div


文本格式

b加粗,i斜体,em强调文本,跟i差不多

strong定义粗体文本与b的用法和作用基本相同

strong在h5有语义,表示重要的文本

small小号字体文本,h5删除了big元素,用来标识小字印刷体。通常免责声明、注意事项、法律规定和版权声明

sup定义上标文本。

sub上标文本

bdo 定义文本的方向,应该制定dir属性,只能填写ltr或者rtl

上面元素可以和span相互包含

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <span><b>加粗</b></span><br />
    <span><i>斜体</i></span><br />
    <span><b><i>加粗斜体</i></b></span><br />
    <span><em>我是em</em></span><br />
    <p><strong>加粗</strong></p>
    <small><span>小号</span></small>
    <div>X<sup>2</sup></div>
    <div>Y<strong><sub>2</sub></strong></div>
    <bdo dir="ltr">Hello AY</bdo><br />
    <bdo dir="rtl">Hello AY</bdo><br />
</body>
</html>


image.png


语义相关元素

abbr一个缩写

address表示一个地址

blockquote 长文本引用,缩进方式显示文本,使用cite属性,指定引用文本的url或者出处。

q定义短文本引用,不带换行的,自动添加引号

cite表示作品的标题,斜字体显示所包含的文本

code表示一段计算机代码

dfn定义个专业术语。粗体或者斜体显示所包含的稳定本

del定义文档中被删除的文本,通常中画线形式显示

ins定义文档中插入的文本,通常下画线显示

pre用于表示该元素文本进行了预格式化。里面的换行空格回车都被保留

samp定义示范文本内容

kbd定义键盘文本,表示文本是通过键盘输入的。

var用于表示一个变量,通常斜体字显示

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <p>你说的<q>会写诗</q>是什么意思</p>
    <div>
        <blockquote cite="大诗人">
            2016年 改bug的冷静,编码的激情。完成后的喜悦<br />
            2018年 改bug的脾气,编码的浮躁。放弃后的喜悦<br />
        </blockquote>
        Ay最近说的话
    </div>
    <p><cite>《AY语录》</cite>2019群里收集</p>
    定义个代码段 <br />
           <code>
               public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
               WebHost.CreateDefaultBuilder(args)
               .UseStartup&lt;Startup&gt;();
           </code>
           <pre>
public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
            WebHost.CreateDefaultBuilder(args)
                .UseStartup&lt;Startup&gt;();
</pre>
</body>
</html>

image.png

code不会换行的。,你在里面可以写br

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <p>AaronYang的简写是<abbr title="AaronYang">AY</abbr></p>
    <p>地址:<address>合肥市庐阳区工投产业园</address></p>
    <p><dfn>HTML</dfn>是浏览器认识的</p>
    <p>可以输入<kbd>Ctrl+C</kbd>复制文本</p>
    <samp>
        这是一段示例<br />
        这是一段很长的示例<br />
    </samp>
    <var>sb</var> 通常是StringBuilder的变量名
    <p>又是一天过去了,一天天的</p>
</body>
</html>

image.png



超链接(红色的是h5增加的)

href链接地址,target打开方式_self,_blank,_top,_parent后面两个顶层框架,父框架

hreflang 指定超链接所连接的文档所使用的语言

download指定用户保存下载资源时默认文件名

type指定被链接文档的MIME类型

media:URL的媒体类型。默认all,只有指定href才生效

a和span和p一样,可以放文本图像,各种文本格式化元素和表单

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <a href="http://www.ayjs.net"><b>百度ay</b></a>
    <a href="http://www.ayjs.net" target="_blank"><em>em文字(新页面打开)</em></a>
    <a href="http://www.ayjs.net" target="_blank"><img src="http://www.wpfui.com/abl/o_2.jpg" /></a>
    <a href="Index01.html" >下载</a>
</body>
</html>

image.png

最后Index01.html是当前页面所在文件夹的路径,然后加上这个文件

image.png

看下downlaod

 <a href="http://www.wpfui.com/abl/o_3.jpg" download="AY的照片.jpg" type="image/jpeg"><img src="http://www.wpfui.com/abl/o_3.jpg" alt="点击我下载吧"/></a>

image.png

设置锚点

    <div id="mainmao"><a href="#mao1">前往锚点1</a><a href="#mao2"> 前往锚点2</a></div>
    <div style="height:1000px" id="mao1">
        <a href="#mainmao">我是猫1  前往顶部</a>
    </div>
    <div style="height:1000px" id="mao2">
        <a href="#mainmao">我是猫2  前往顶部</a>
    </div>

就是当前页面快速滚动到该地点,你也可以跨页面定位  Index01.html#mao1



列表

保留ul 无序列表,ol有序列表

在ol中,h5增加了

start 起始数字,默认数字,如1、A等

type哪种类型编号,例如1代表数字,A或者a代表大写字母或者小写字母.I和i代表大写或者小写罗马数字,该属性不推荐使用了

reversed,是否反转排序,目前没浏览器支持

li定义列表项。

dl定义术语列表

dt定义标题列表项

dd定义普通列表项


ul/ol -> li

dl -> dt/dd

li和dd是跟div一样,里面可以放同类型的元素

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <p>普通ul</p>
    <ul>
        <li>十年欧巴</li>
        <li>杜蚊子</li>
        <li>AY死胖子</li>
    </ul>
    <p>翻转</p>
    <ol reversed="reversed">
        <li>十年欧巴</li>
        <li>杜蚊子</li>
        <li>AY死胖子</li>
    </ol>
    <p>type=a</p>
    <ol type="a">
        <li>十年欧巴</li>
        <li>杜蚊子</li>
        <li>AY死胖子</li>
    </ol>
    <p>type=1 start="4"</p>
    <ol type="1" start="4">
        <li>十年欧巴</li>
        <li>杜蚊子</li>
        <li>AY死胖子</li>
    </ol>
    <p>start=3</p>
    <ol  start="3">
        <li>十年欧巴</li>
        <li>杜蚊子</li>
        <li>AY死胖子</li>
    </ol>
</body>
</html>

image.png

dl的用法

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>
</head>
<body>
    <h1>dl的用法</h1>
    <dl>
        <dt>你说啥</dt>
        <dd>C#很帅</dd>
        <dt>说啥大实话呢</dt>
        <dd>说了咋的了?你瞅啥</dd>
    </dl>
   
</body>
</html>

image.png



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


推荐您阅读更多有关于“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

标签列表