前端基础_HTML(DAY03)
文章目录
- 一、HTML表格布局练习题
- 二、HTML中的列表
- 1.无序列表
- 2.有序列表
- 2.定义列表
- 三、多窗口框架 frameset
- 1.frameset的组成(注：frameset标签与body标签不能连用)
- 2.frameset的小应用
- 四、常用标签 特殊意义的标签
- 五、XHTML
- 六、HTML5
- 1.视频和音频
一、HTML表格布局练习题
用表格布局结合一些css实现如下功能的页面：
代码如下：
4.<!DOCTYPE html>
5.<html lang="en">
6.<head>
7. <meta charset="UTF-8">
8. <title>Document</title>
9.</head>
10.<body>
11. <h1>热门电影板块</h1>
12. <hr>
13. <table width="800px">
14. <tr>
15. <td>最近热门电影</td>
16. <td>热门</td>
17. <td>最新</td>
18. <td>豆瓣评分</td>
19. <td>冷门佳片</td>
20. <td>华语</td>
21. <td>欧美</td>
22. <td>日本</td>
23. <td style="padding-right:60px;padding-left:120px">
24. <a href="two.html">更多>></a>
25. </td>
26.
27. </tr>
28. </table>
29. <hr>
30. <table width="800px">
31. <tr>
32. <td><img src="data:image/2.png" width="200px"></td>
33. <td><img src="data:image/3.png" width="200px"></td>
34. <td><img src="data:image/2.png" width="200px"></td>
35. <td><img src="data:image/3.png" width="200px"></td>
36. </tr>
37. <tr align="center">
38. <td>致命ID</td>
39. <td>万能钥匙</td>
40. <td>禁闭岛</td>
41. <td>恐怖游轮</td>
42. </tr>
43.
44.
45. </table>
46. <table width="800px">
47. <tr>
48. <td><img src="data:image/2.png" width="200px"></td>
49. <td><img src="data:image/3.png" width="200px"></td>
50. <td><img src="data:image/2.png" width="200px"></td>
51. <td><img src="data:image/3.png" width="200px"></td>
52. </tr>
53. <tr align="center">
54. <td>致命ID</td>
55. <td>万能钥匙</td>
56. <td>禁闭岛</td>
57. <td>恐怖游轮</td>
58. </tr>
59.
60.
61. </table>
62.</body>
</html>
二、HTML中的列表
1.无序列表
应用：导航（nav) 侧栏 (sidebar) 商品栏 贴吧知道 其他贴子的链接
<ul> 无序列表的标签
<li>列表的选项
代码如下（示例）：
<ul><li>疾风之刃</li><li>武器大师</li><li>德玛西亚</li><li>艾欧尼亚</li></ul>
2.有序列表
<ol>有序列表的标签
<li>列表的选项
有序列表中的其他属性值(该属性都放在ul标签内)：
<type ="n"> n可以为：数字 字母A-Z 罗马字符I II III IV V VI VII VIII （表示排序的标准）
<reversed="reversed">表示降序排序
<start="n">表示从n开始排序（注：n只能是数字）
代码如下（示例）：
<ol type="1" reversed="reversed" start="2"><li>疾风之刃</li><li>武器大师</li><li>德玛西亚</li><li>艾欧尼亚</li></ol>2.定义列表
<dl>定义列表的标签
<dt>定义项目
<dd>定义的描述
代码如下（示例）：
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
三、多窗口框架 frameset
1.frameset的组成(注：frameset标签与body标签不能连用)
frameset里面的每一个窗口都是一个frame
<frameset>多窗口框架标签
：
<rows>进行行的划分 用%为单位
<cols>进行列的划分 用%为单位
代码如下（示例）：
<html><frameset cols="25%,50%,25%"><frame src="frame_a.htm" /><frame src="frame_b.htm" /><frame src="frame_c.htm" />
</frameset></html>
<frame>frameset内的框架
：
<src="url">表示框架中显示文档的地址
等等
代码如上（示例）：
2.frameset的小应用
要求:
在一个网页内 点击a框架中的页面显示b页面，点击b框架中的页面显示c页面，点击c框架中的页面显示d页面，点击d框架中的页面显示a页面
代码如下（示例）:
主页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head><frameset rows="10%,80%,10%"><frame src="A.html" name="header" /><frameset cols="10%,90%"><frame name="menu" /><frame name="center" /></frameset><frame name="footer" />
</frameset></html>
A页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>A</title>
</head>
<body><a href="B.html" target="menu">A</a>
</body>
</html>
B页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>B</title>
</head>
<body><a href="C.html" target="center">B</a>
</body>
</html>
C页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>C</title>
</head>
<body><a href="D.html" target="footer">C</a>
</body>
</html>
D页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>D</title>
</head>
<body><a href="A.html" target="header">D</a>
</body>
</html>
四、常用标签 特殊意义的标签
<address>用于描述地址 默认斜体
<article>用于描述文章的标题
<header><footer> <nav>为了让程序员能够通过代码看清楚代码的含义
类似于这样的标签他们的作用 和div是相似的 提高代码的阅读能力 -----望文生义
<label> 为input 元素定义标注（ for 属性应当与相关元素的 id 属性相同）
代码如下（示例）:
显示：点击“用户名”文本时，后面的框框有相应地标注显示
<label for="one">用户名：</label><input type="text" id="one" />
内联元素 <span> <a>
块状元素 <div> <p>
<span> 内联元素
通常用于修饰文本 默认不具有任何样式 可以通过css来添加样式
五、XHTML
XHTML 它是html4.01版本后出现的一个更严谨语法更纯粹的一个版本
从语法上对html进行更严谨的规范。
html 也可以存在 任意的单词的标签
默认把他们当成文本标签
DTD的命名规范 规范了标签的内容
xml 标签 可以用任意单词来进行定义的
六、HTML5
1.视频和音频
<video>视频
<video src="./video/final.mp4" controls="controls"></video>
<audio>音频
<video src="./video/final.mp4" controls="controls"></video>
前端基础_HTML(DAY03)相关推荐
- html表格联动,html前端基础：table和select操作
html前端基础:table和select操作 发布时间:2020-05-13 09:58:10 来源:亿速云 阅读:196 作者:Leah 这篇文章主要为大家详细介绍html前端基础中有关table ...
- element ui 图片控件 排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容 什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统 开源项目推荐 1.什么是ElementUI 官网:https://el ...
- boost log 能不能循环覆盖_前端基础进阶（十四）：深入核心，详解事件循环机制...
Event Loop JavaScript的学习零散而庞杂,很多时候我们学到了一些东西,但是却没办法感受到进步!甚至过了不久,就把学到的东西给忘了.为了解决自己的这个困扰,在学习的过程中,我一直在试图 ...
- gif透明背景动画_前端基础系列之bmp、jpg、png、gif、svg常用图片格式浅谈（二）...
IT客栈 作者:大腰子 bmp.jpg.png.gif.svg常用图片格式 之前为大家介绍了几种WEB前端常用的图片格式,对比了它们的特点,参见<前端基础系列之bmp.jpg.png.gif.s ...
- 前端基础知识整理汇总（中）
前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...
- 前端基础知识整理汇总（上）
前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ...
- jquery function_前端基础进阶（十三）详细图解jQuery扩展jQuery插件
UI 鉴赏 早几年学习前端,大家都非常热衷于研究jQuery源码. 我至今还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,"原来JavaScript居然可以 ...
- 前端基础-HTML的的标签详解
阅读目录 一.head内常用标签 二. HTML语义化 三. 字符实体 四. h系列标签 五. p标签 六. img标签 七. a标签 八. 列表标签 九. table标签 十. form标签 一. ...
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
最新文章
- AI与人类围棋士的差距到底有多大？
- 32. Longest Valid Parentheses
- hdu 4907(并查集)
- .net 后台读取pdf的值
- ldap配置系列二：jenkins集成ldap
- mysql最大连接数512_MySQL服务器最大连接数怎么设置才合理
- 爱过！HTC悄然撤离中国内地市场：京东、天猫旗舰店已全部关闭
- 生成逼真3D人偶，居然不用3D形状建模，还能学会你的舞步 | 三星CVPR Oral
- Python核心编程读笔 4
- CentOS7 升级到7.4
- 龙骨导出html文件打不开,一种用于铝型材与龙骨的连接结构的连接件的制作方法...
- 计算机网络故障检测,计算机网络故障处理
- 马斯克细分可重复使用火箭成本 两次发射就可回本儿
- Office办公软件测试题
- 欢乐喜剧人之个人见解
- 华硕主板Z97-A无法识别intel M.2 NVME固态硬盘的解决方案
- 做一套给三星手机用的导航栏图标（伪装Windows10移动版）
- 麻将判断几步入听算法
- 商用向南，家用向北丨DOMOTEX asia 2020地毯馆大布局
- 学习通作业/考试每天微信提醒:使用pushplus和华为云函数