2021-09-07

超链接标签

文本超链接

id 属性可用于创建一个 HTML 文档书签
提示: 书签不会以任何特殊方式显示,即在 HTML 页面中是不显示的,所以对于读者来说是隐藏的。

<!--  a标签
      href:必填,表示要跳转到那个页面得地址
      target:表示窗口在哪里打开
              _blank 在新标签页面打开
              _self  在自己网页中打开
              _parent
              _top
-->

<a href="图像标签.html" target="_blank">点击我跳转</a>
<a href="https://www.baidu.com" target="_self">点击我跳转</a>

锚链接

<!--
锚链接(页面间的跳转)
1.需要一个标记 (#名字)<a name="down">底部</a>
2.跳转到标记          <a href="链接标签.html#down">到链接底部</a>
-->

功能性链接

<!--功能性链接
    1.邮件链接:mailto:
    2.qq链接  qq推广
-->
<a href="mailto:2264512689@qq.com">点击联系我</a>

行内元素和块元素

块元素

  • 无论内容多少,该元素独占一行
  • (p,h1-h6)

行内元素

  • 内容撑开宽度,左右都是行内元素的 可以排在一行 不会换行
  • (a,strong,em等…)

列表

<!--有序列表 ol-->
<ol>
  <li>java</li>
  <li>c/c++</li>
  <li>测试</li>
  <li>前端</li>
  <li>Python</li>
</ol>

<hr/>
<!--无序列表 ul
    应用范围:导航,侧边栏
-->
<ul>

  <li>java</li>
  <li>c/c++</li>
  <li>测试</li>
  <li>前端</li>
  <li>Python</li>

</ul>

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->

<dl>
  <dt>学科</dt>
  <dd>java</dd>
  <dd>c/c++</dd>
  <dd>测试</dd>
  <dd>前端</dd>
  <dd>Python</dd>

  <dt>位置</dt>
  <dd>湖南</dd>
  <dd>广东</dd>
  <dd>四川</dd>

</dl>

提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表

标签描述
ol定义有序列表
ul定义无序列表
li定义列表项
dl定义列表
dt自定义列表项目
dd定义自定列表项的描述

表格

<!--表格table
    行 tr rows
    列 td col
    跨列 colspan
    跨行 rowspan
-->
table定义表格
th定义表格表头
tr定义表行
td定义表列
caption定义表格标题
colgroup定义表格列的组
col定义表格列的属性
thead定义表眉
tbody定义表格主体

媒元素

媒元素

视频元素video

<body>
<!--视频
    src:资源路径
    controls:控制进度条 开关 下载
    autoplay:自动播放

和音频
-->
<video src="../resource/1626599304297.mp4" controls autoplay></video>
<audio src=""></audio>

</body>

音频元素audio

页面结构分析

元素名描述
header标记头部区域的内容(用于页面或页面的一块区域)
footer标记脚步的区域内容(用于整个页面或页面的一块区域)
sectionweb页面中的一块独立区域
article独立文章的内容
aside相关内容或应用(用于侧边栏)
nav导航类辅助内容

iframe内联框架

不希望被嵌套可以:X-Frame-Options

三个可配置:
DENY:表示该网站页面不允许被嵌套,即便是在自己的域名的页面中也不能进行嵌套。
SAMEORIGIN:表示该页面可以在相同域名页面中被嵌套展示。
ALLOW-FROM uri:表示该页面可以在指定来源页面中进行嵌套展示。
<body>
<!--内联框架
    链接可以调到指定的看框架
    src:地址
    width:宽度
    height:高度
-->
<iframe src="" name="xixi" frameborder="0" width="1000" height="800"></iframe>

<a href="6.表格.html" target="xixi">跳转</a>
</body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值