二·
1.图片与多媒体:
--------------

img标签(重中之重):
网页中的图片展示就是用的img标签实现,img元素相网页中嵌入一幅图形,行内标签,单标签。
基础语句:<img src ==“图片路径”alt=“图片说明文字”/>
能够识别多种图片格式,如:png,gif,jpg。
当修改图片的高度时,图片宽度会等比例缩放(反之亦然)。

audio标签(定义音频):
基本语法:<audio src="音乐文件路径" autoplay=“autoplay”>提示文字</audio>
src属性:音乐文件路径URL,必写。
autoplay属性:自动播放。
controls属性:音乐控件。
loop属性:循环播放。
mute属性:静音。
preload:出翔该属性这音频在页面加载时进行加载,并预备播放,如果已用autoplay,这忽略此属性。

支持格式:Ogg Vorbis,MP3, wav。

video标记(定义视频):
基本语法:<video src=“视频文件路径”controls=“controls”>提示文字</video>
src属性:视频文件路径URL,必写。
autoplay属性:自动播放。
controls属性:播放控件。
height:视频播放器高度。
width:设置视频高度。
poster:规定视频下载时显示图像,或者用户点击播放按钮前显示图像。
loop属性:循环播放。
mute属性:静音。
preload:出翔该属性这视频在页面加载时进行加载,并预备播放,如果已用autoplay,这忽略此属性。

支持格式:ogg, MPEG4, WEBM。

source 标签:
source标签为媒介元素(比如<video> <audio>)定义媒介资源
基本语法:<source src="资源地址URL" type=“资源类型”>
常用的类型:
用于视频:
video/ogg
video/mp4
video/webm
用于音频:
audio/ogg
audio/mpeg

2.列表标签:ul, ol,dl:
列表标签是网页标签开发中常用的一种标签,一般用于某项数据得列表或导航,比如说:新闻列表,产品列表,图片列表。

-无序列表ul。
-有序列表ol。
-定义列表dl。

无序列表ul:常用于表示内容之间存在并列关系,每个列表分为多个子项,但是子项之间没有相应的编号,只有一个原点用于标识。
基本语法:<ul>
<li>文本内容</li>
</ul>
ul标签效果:li标签前面自动生成小圆点,一般情况会结合css去掉小圆点。
ul标签:定义列表的一个区域。
li标签:定义列表的每一个子项,可有多个子项
注意:1.ul标签是块元素;2.ul标签只能放li标签;3.li标签里面可以嵌套任何标签

有序标签ol:每个列表都分为多个子项目,没个子项都有相应的编号。
基本语法:
<ol>
<li>文字</li>
</ol>
注意:1.ol标签与li标签配合使用。2.ol可以嵌套使用。
type属性:1.A代表列表前面显示的大写字母;
2.a表示列表前面显示小写字母;
3.I代表大写罗马字母;
4.i代表小写的罗马字母;
5.默认显示数字;

dl定义列表:常用于表示名词或者概念的定义,每个子项有两个部分组成,第一部分是名词或概念,第二部分是解释和描述。
基本语法:
<dl>
<dt>名词或概念</dt>
<dd>名词或概念的解释说明</dd>
</dl>
注意:dl标签里面必须和dt和dd配合使用,一般配合css一起完成显示效果。

总结:这一节学的内容相对之前的文字,趣味性高了很多,学习起来兴趣更大,上手也很容易。也初步了解了表格相关知识,还有很多意思的内容等着学。

html入门第二天。的更多相关文章

  1. JAVA入门第二季(mooc-笔记)

    相关信息 /** * @subject <学习与创业>作业1 * @author 信管1142班 201411671210 赖俊杰 * @className <JAVA入门第二季&g ...

  2. ElasticSearch入门 第二篇:集群配置

    这是ElasticSearch 2.4 版本系列的第二篇: ElasticSearch入门 第一篇:Windows下安装ElasticSearch ElasticSearch入门 第二篇:集群配置 E ...

  3. Docker 入门 第二部分: 容器

    目录 Docker 入门 第二部分: 容器 先决条件 介绍 你的新开发环境 使用 Dockerfile 定义一个容器 Dockerfile 应用本身 requirements.txt app.py 构 ...

  4. Hibernate入门第二课 Hibernate Tools for Eclipse Plugins安装

    Hibernate入门第二课 Hibernate Tools for Eclipse Plugins安装 你们可以直接去,http://blog.csdn.net/wei_chong_chong/ar ...

  5. Java入门第二季学习总结

    课程总概 该门课程作为java入门学习的第二季,是在有一定的java基础上进行的进一步学习.由于该季涉及到了java的一些核心内容,所以相对第一季来说,课程难度有所提升.大致可将该季的课程分为五部分: ...

  6. 解析Mybatis入门第二天

    入门第二天 目的:使用Mybatis对数据库中的数据进行简单的操作.例如:增.删.改.查. 前言:同样是使用idea创建一个普通的maven工程(如何创建一个普通的Maven工程可以参考入门第一天的详 ...

  7. 数据结构入门第二课(浙大mooc)

    数据结构入门第二课 目录 数据结构入门第二课 引子 多项式的表示 方法1 顺序结构表示多项式各项 方法2 顺序结构表示非零项 方法3 链表结构存储非零项 多项式问题的启示 线性表 线性表的抽象数据类型 ...

  8. COM编程入门第二部分——深入COM服务器

    本文为刚刚接触COM的程序员提供编程指南,解释COM服务器内幕以及如何用C++编写自己的接口.继上一篇COM编程入门之后,本文将讨论有关 COM服务器的内容,解释编写自己的COM接口和COM服务器所需 ...

  9. Kotlin入门第二课:集合操作

    测试项目Github地址: KotlinForJava 前文传送: Kotlin入门第一课:从对比Java开始 初次尝试用Kotlin实现Android项目 1. 介绍 作为Kotlin入门的第二课, ...

  10. SpringMVC入门第二天

    SpringMVC第二天 1.   回顾 1.Springmvc介绍? Springmvc是Spring公司 2.Springmvc入门程序 第一步:Web工程 第二步:导Jar包 第三步:web.x ...

随机推荐

  1. Linux简单线程池实现(带源码)

    这里给个线程池的实现代码,里面带有个应用小例子,方便学习使用,代码 GCC 编译可用.参照代码看下面介绍的线程池原理跟容易接受,百度云下载链接: http://pan.baidu.com/s/1i3z ...

  2. Azure CosmosDB (6) 冲突类型和解决策略

    <Windows Azure Platform 系列文章目录> 当我们为CosmosDB配置多个Azure Region写入,就需要考虑冲突类型和解决策略. 对于配置了多个写入区域的 Az ...

  3. 【Leetcode】无重复字符的最长子串

    暴力解法,枚举所有子字符串组合 输入:长度[0,n]的字符串 耗时过长--- class Solution { public: int lengthOfLongestSubstring(string ...

  4. css 小坑

    1.display:inline-block 内容上下移动 原因:inline-block 默认对齐方式是底部对齐 方法:加一个 vertical-align:top; 属性 把垂直对齐方式改为顶部

  5. Javascrip错误类型

    Javascrip一旦发现错误,会自动创建一个Error类型对象. Javascrip中有几种错误类型?六种1.SyntaxError 语法错误2.ReferenceError 引用错误3.TypeE ...

  6. Selenium常用方法

    Selenium是一个自动化测试工具,利用它可以驱动浏览器执行特定的动作,如点击.下拉等操作,同时还可以获取浏览器当前呈现的页面的源代码,做到可见即可爬.对于一些JavaScript动态渲染的页面来说 ...

  7. CFile、CStdioFile、FILE和其他文件操作(转+总结)

    CFile.CStdioFile.FILE和其他文件操作(转+总结) 2010-04-10 20:36:33|  分类: VC++|举报|字号 订阅     下载LOFTER我的照片书  |     ...

  8. ubuntu16.04 pip install scrapy 报错处理

    Failed building wheel for Twisted inculde/site/python3./Twisted failed with error code in tmp/pip-in ...

  9. NPOI 导出Excel部分

    ) { MessageBox.Show("没有找到相关的数据!", "系统提示", MessageBoxButtons.OK, MessageBoxIcon.I ...

  10. 深度学习(一)——CNN算法流程

    深度学习(一)——CNN(卷积神经网络)算法流程 参考:http://dataunion.org/11692.html 0 引言 20世纪60年代,Hubel和Wiesel在研究猫脑皮层中用于局部敏感 ...