二·
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. RN 时间戳

    let curTime = Date.now(); 获取到当前时间 curTime: 1555120690696 是指从1970.1.1到现在的毫秒(ms)数 cxk() { //之前时间 let p ...

  2. 学习笔记《Java多线程编程实战指南》一

    1.1什么是多线程编程 多线程编程就是以线程为基本抽象单位的一种编程范式,和面向对象编程是可以相容的,事实上Java平台中的一个线程就是一个对象.多线程编程不是线程越多越好,就像“和尚挑水”的故事一样 ...

  3. win10 mac随机功能测试

    win10 MAC随机功能指针对无线网卡 随机功能包含网卡随机, 跟网络随机两种, 这两种互不影响 一“无线网卡mac随机” 单击无线图标->网络和internet设置->wlan 影响无 ...

  4. 最大化及等比例测试演化Demo-Grid方法

    Demo1-简单测试: <!doctype html> <html> <head> <meta charset="utf-8"> & ...

  5. gradle项目

    gradle构建web项目 0.安装gradle http://services.gradle.org/distributions/ 下载对应版本:gradle-5.2.1-bin.zip 解压到自定 ...

  6. Linux内核中的printf实现

    1 #ifndef __PRINT_H_ 2 #define __PRINT_H_ 3 4 void print(char* fmt, ...); 5 void printch(char ch); 6 ...

  7. Vue 使用axios获取数据

    axios  的使用 1.安装  cnpm  install  axios --save 2.哪里用哪里引入axios <script> import Axios from 'axios' ...

  8. Java——String类中的compareTo方法总结

    String类的定义:    java.lang  类 String   java.lang.Object      java.lang.String 所有已实现的接口:Serializable, C ...

  9. memory_profiler的使用

    作用:memory_profiler是用来分析每行代码的内存使用情况 使用方法一: 1.在函数前添加 @profile 2.运行方式: python -m memory_profiler memory ...

  10. Python Excel 多sheet 多条数据 自定义写入

    pip install xlwt python excel 数据写入操作,处理网站数据导出以及不是太多数据的爬虫存储, 用处蛮多的轮子. (150+++++++++++++++++++++++++++ ...