前端基础-HTML媒体

幸运
185
文章
0
评论
March 19, 202014:00:21 评论 64 2237字阅读7分27秒
 

一. a 标签 : 链接

<a href="“URL”"> ~ </a>

1. 属性说明:

属性 描述
href 定义链接地址
title 链接提示信息
target 链接打开方式(_blank 新的空白页,_self 当前页,_top)

2. 常规应用:

<a href=“http://www.163.com”>外部链接</a>
<a href=“about.html”>内部链接 </a>

3. 其他应用:

<a href="“mailto:邮箱地址”">邮件链接</a>
<a href="“tel:电话号码”">一键拨打</a>
<a href="sms:139xxxxxxx">一键发送短信</a>

href 链接的地址可以是绝对地址也可以是相对地址,也可以是页面文档的某个部分

4. 绝对地址

<a href=“http://www.163.com”>外部链接</a>

5. 相对地址

<a href="“about.html”">内部链接 </a>

锚点——————页面文档的某个部分

<a href="“#bgg”">内部链接 </a> <a name="“bgg”">内部链接 </a>或者<a id="“bgg”"
  >内部链接
</a>
注意id是唯一的。

二. img 元素 : 图像

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<img src="img/timg.jpg" alt="加载不成功" width="240" height="160" />
</body>
</html>

属性说明:

属性 描述
src 图片源地址
alt 加载不成功显示的内容
width 图片的宽度
height 图片的高度

三. 图像热区 map 元素(扩展)

<map> 属性 与 <area> 属性一起使用来定义一个图像映射 (一个可点击的链接区域).

图像热区就是能够通过点击图片的某一部分跳转。

<img src="img/charector.png" alt="加载不成功" width="800" usemap="#bgg" />
<map name="bgg">
<area
shape="rect"
coords="50 50 150 150"
rel="external nofollow" target="_blank" href="https://www.xycus.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5iYWlkdS5jb20="
alt="加载不成功"
  />
<area
shape="rect"
coords="0 0 20 20"
rel="external nofollow" target="_blank" href="https://www.xycus.com/wp-content/themes/begin/go.php?url=aHR0cDovL3Rhb2Jhby5jb20="
alt="加载不成功"
  />
</map>

说明:

  • 有map标签,map标签里面有area标签
  • map标签可以把所有的area(区域)包裹起来。
  • area(区域)标签要有形状(shape),有坐标(coords),链接地址(href),alt

四. audio : 音频

带控制器的音频播放器

<audio src="song.ogg" controls="controls"></audio>

如果考虑到不同浏览器对视频文件的兼容性

<audio width="320" height="240" controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
<p>Your browser does not support the audio tag.</p>
</audio>

标签常用属性:

属性 说明
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src url 要播放的音频的 URL

五. video : 视频

带控制器的视频播放器

<video src="movie.mp4" controls="controls"></video>

如果考虑到不同浏览器对视频文件的兼容性

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video>

标签常用属性:

属性 说明
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src url 要播放的视频的 URL
width pixels 设置视频播放器的宽度。
height pixels 设置视频播放器的高度。

本文来源于:前端基础-html媒体-幸运草博客
特别声明:以上文章内容仅代表作者本人观点,不代表幸运草博客观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与幸运草联系。

  • 本站QQ群
  • weinxin
  • 捐赠本站
  • weinxin
前端基础-HTML列表表格 html

前端基础-HTML列表表格

一、 列表 ul, ol, dl 1. 无序列表 ul HTML <ul> 元素 ( 或 HTML 无序列表元素) 代表多项的无序列表,即无数值排序项的集合,且它们在列表中的顺序是没有意义的。通常情况下,无序列表项的头部可以是几种形式,如一个点,一个圆形或方形。头部的风格并不是在页面的 HTML 描述定义, 但在其相关的 CSS 可以用 list-style-type属性。ul标签需要和li标签结合使用。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <ul type="disc"> <li>第1元素</li> <li>第2元素</li> <li> 第3元素 <ul> <li>二级1</li> <li>二级2</li> <li>二级3</li> </ul> </li> <li>第4元素</li> <li>第5元素</li> </ul> </body> </html> type 用于设置列表的着重号样式 属性说明: 属性 描述 circle 空心圆 disc 实心圆 square 方块 2. 有序列表 ol HTML <ol> 元素 表示多个有序列表项,通常渲染为有带编号的列表。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <ol type="1"> <li>第1元素</li> <li>第2元素</li> <li> 第3元素 <ol> <li>二级1</li> <li>二级2</li> <li>二级3</li> </ol> </li> <li>第4元素</li> <li>第5元素</li> </ol> </body> </html> type 指示编号类型 属性说明: 属性 描述 'a'...
HTML基础入门 html

HTML基础入门

什么是网页? 网页由:文字,图片,音频,输入框,视频,按钮等一系列的元素来组成的 我们在学习网页开发之前我们首先需要了解一下什么是Web开发标准? WEB标准不是某一个标准,而是一系列标准的集合。网页主要是由三部分组成:结构,表现 和 行为。 Web表现是由W3C这个组织来定义的一套标准。 W3C:万维网联盟创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构 结构标准(HTML):指的就是我们编写网页的结构 表现标准(CSS):层叠样式表 行为标准(JavaScript):简单的理解指的是网页的交互效果 我们在学习网页开发之前我们要了解一下浏览器的概念,认识一下主流的浏览器有哪些。 什么是浏览器:浏览器指的就是一种用于帮助我们检索并解析展示万维网信息的一个应用程序。 通过以上图片的展示想必大家对这些主流的浏览器都使用过吧! 那么接下来我们来说说浏览器的内核。 什么是浏览器的内核? 浏览器最重要或者说核心的部分是“Rendering  Engine”,可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”。 它的作用是负责对网页语法的解析并进行渲染(显示),渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息,不同的浏览器会有不同的内核,所以渲染出来的效果也是有所不同的。 了解一下主流浏览器的内核: Internet Explorer:Trident 内核 Chrome:Blink 引擎 Opera:在13年的时候用的还是Presto,之后用也是Blink引擎 FireFox:Gecko 内核 Safari:WebKit引擎 通过以上的知识点学习我们对Web前端开发也有了一定的了解了,那么接下来我们正式的进入到HTML的学习中了,请小伙伴我和一起加油学习吧 《HTML基础入门》 什么是HTML? HTML(Hyper Text Markup Language):超文本标记语言 那么我们在学习网页开发的时候我们需要知道什么是网页的结构 网页的结构: 通过以上的图片所展示的信息来看,想必大家对网页的结构都了解了 那么接下来我们来说一说网页结构中的标签分类: 双标签:标签有开头有结尾 例如: <head></head> <body></body>........ 单标签 :标签有开头没有结尾 例如: <link />  <hr />...... 这里有个细节,不知道小伙伴有没有发现呀,是什么呢? 标签的嵌套,标签里面嵌套着标签这里我们一般称之为是:"父子关系",标签并列显示我们称之为是:"兄弟关系"。 注意:网页的后缀都是 .html 结尾的,大家可以按照以上图片所给的格式编写出属于自己的一个网页吧 本文来源于:HTML基础入门-幸运草博客 特别声明:以上文章内容仅代表作者本人观点,不代表幸运草博客观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与幸运草联系。
「JS」HTML 简介 html

「JS」HTML 简介

  通常一个网页由什么部分构成? 一般由前端三巨头构成:HTML、CSS、JavaScript HTML 决定了这个网页的结构是什么样子的:什么东西在哪里,有什么内容等 CSS 决定了这个网页的部件是长什么样子的:颜色、大小、粗细、形状等 JavaScript 决定了这个网页怎么样动,有什么样的反应:动画怎么做,与用户怎么互动等 一个网页的绝大多数功能,通常由这三个部分完成,它们极大地丰富了我们的互联网生活。 什么是 HTML? HTML:超文本标记语言(Hyper Text Markup Language),它不是一门编程语言,而是一种标记语言,这种标记语言常常用于描述网页,我们在网上看到的诸多网页,其本尊都是它。 以 Chrome 浏览器打开 bing 主页为例,打开网址 https://cn.bing.com/ : 在主页按鼠标右键,点击 View Page Source ,显示网页的源代码,即 HTML 文本,看到它本来的样子,: 未经浏览器修饰的 bing 主页的 HTML 源码: 这些 HTML 代码,只有经过浏览器正确显示之后,才最终变成了你使用的样子: 想要做网页设计,甚至入门前端,就要从学习 HTML 开始。 Be a Architect Powered By Programming 本文来源于:「JS」HTML 简介-幸运草博客 特别声明:以上文章内容仅代表作者本人观点,不代表幸运草博客观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与幸运草联系。
Typora 自动导出 HTML html

Typora 自动导出 HTML

看之前我要提醒你,本文并没有解决“Typora 自动导出 HTML”问题! 使用 Typora 写文章真的太方便了,之前《如何优雅地使用 Typora 写文章》讲到发布微信公众号和图片自动上传云端,但是,当我有很多草稿需要导出 HTML 的时候,手动一个一个点击显得有那么一些麻烦,那么,懒癌患者开始思考,有没有自动导出的方法? 本篇文章不仅会提供相关脚本,也会提供整个开发思路,这对于学习、开发和优化程序是非常重要的。 分析 分析 Typora 导出的 HTML: 分析了多个 HTML 后发现了,只有 body 标签中的内容才是我们自己的文章,其他的都是样式代码,一摸一样的样式代码; 分析 Typora 安装的目录结构: 我找到了 style 文件夹,再进去: 发现了 base.css 和主题文件夹,凭借我敏锐的洞察力,这一定是导出 HTML 用到的样式文件; 样式解决了,我们还需要将文章转为 HTML,文章是 markdown(md)格式的; 通过 Typora 打开开发者工具: 可以发现,Typora 本身就是一个浏览器,已经将转换好的 HTML 代码显示出来了,那么我们只需要通过 js 读取,再拼接上样式即可; 该有的我们都有了,我们可以参照《如何优雅地使用 Typora 写文章》中的 typora-plugins-win-img,通过 js 调用 pandoc 转化 markdown 至 html,再附加主题样式; 最后一个问题是,控制这个 js 调用时间; 解析 typora-plugins-win-img 的 js: 字面意思是当鼠标离开或者点击 div #write 中的 img 时出发,好主意! 验证了这个方法; 那么,我也可以通过同样的方式调用转换程序; OK,判断可行; 动手 在 Typora 文件夹下建立如下目录结构: 编写 md2html.js 文件: (function($){ var baseHtml1 = "略"; var baseHtmlThemeCss = "略"; // 主题样式代码 var baseHtml2 = "略"; // write 文章主体代码 var baseHtml3 = "略";...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: