HTML <a>等元素

　　#<a>元素

<body>

</body>

　　href 属性
href 跳转地址：

href 跳转到某个锚点（页面某个位置）
快速输入内容：（(h2>{内容$})+p>lorem）*6
a>(内容$)*6

设置锚点：a跳转到h2
<a href="#charpter1">第一章</a>
<h2 id = "charpter1">第一章</h2>

快速输入
((h2[id="charpter$"]>{章节$})+p>lorem100)*6
快速回到顶部
<a href="#">回到顶部</a>

href 功能性链接：点击后触发某功能
执行js代码
<body>
<a href="javascript:alert('你好')">
弹出你好
</a>
</body>

发送邮件 mailto
<a href="mailto:123@qq .com">点我发送邮件</a>

拨打点号 tel，手机端触发

<a href="tel:+"></a>
<a href="tel：1853333">给我打电话</a>

target属性

表示跳转窗口位置
1、_self:覆盖当前页面
2、_blank 新窗口打开

title属性
全局属性：提示文字

　　#多媒体元素
video支持：MP4、webm

<video src="url" style="width: 50px" controls="controls" autoplay></video>

audio元素用法同video元素，支持mp3

<audio src=""></audio>

旧版本浏览器不支持video和audio，处理方式

<video style="width: 50px" controls="controls" autoplay muted>
    <source src="格式1">
    <source src="格式2">
</video>

　　#列表元素
有序列表
　　ol： ordered list
　　li： list items

<ol type="I">
<li></li>
</ol>

默认排序为阿拉伯数字，用type属性改变（I i A a 1）如type="i";
***应使用 CSS 的 list-style-type属性设置排序格式

ol 的属性 reversed布尔属性倒序排列

无序列表
　　ul unordered list

<ul>
<li></li>
</ul>

***选中代码按ctrl +shift + 向上键快速复制

定义列表
　　dl： definition list
　　dt： definition title
　　dd： definition description

<dl>
    <dt>THML</dt>
    <dd>超文本标记语言</dd>
    <dt>元素</dt>
    <dd>HTML单元</dd>
</dl>

　　#容器元素
该元素代表一个块区域，用于放置其他元素
div元素
ul>li*4>lorem1快速输入内容

语义化元素
header 可以用于表示网站或文章头部，套div等
footer 用于页角或文章底部
article 用于表示整片文章
section 用于表示文章的一章内容
aside用于表示侧边栏

元素包含关系
以前：块级元素包含行级元素，行级元素不可以包含块级元素，a元素除外
现在：元素的包含关系由元素的内容类别决定

查包含文档例如搜索 h1 mdn

总结：
1、容器元素中可以包含任何元素
2、a元素几乎可以包含任何元素
3 、某些元素只能包含固定的子元素（ul>li; ol>li; dl>dt>dd），
4 、标题元素不能包含段落元素，并且不能包含容器元素

posted on 2021-09-21 17:22 PerfectData 阅读(83) 评论(0) 编辑收藏举报

刷新页面返回顶部

Perfect Data

HTML <a>等元素

导航

公告