AY H5笔记2

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

保留元素

<!-..-->注释

<!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>

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

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

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

文本格式

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

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

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

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>

语义相关元素

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>

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>

超链接（红色的是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>

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

看下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>

设置锚点

    <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>

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>