Web前端学习第五周

strong和b、em和i

strong 和 em 都是表示强调的标签，表现形态为文本加粗和斜体。 b 和 i 标签同样也表示文本加粗和斜体。
区别在于，strong和em 是具备语义化的，而b和i是不具备语义化的。

使用CSS样式也能呈现出加粗和斜体的表现形态。

优势：可以不用多个class进行区分，简化选择器操作

引用标签

blockquote:引用大段的段落解释
q:引用小段的短语解释
abbr：缩写或首字母缩略词
address:引用文档地址信息
cite：引用著作的标题

iframe嵌套页面

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。其中src与srcdoc（可渲染标签）同时存在时仅优先识别排在首位的

应用场景：
数据传输、共享代码、局部刷新、第三方介入等。

br 与 wbr

br标签表示换行操作
wbr标签表示软换行操作

提示:如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用wbr 元素来添加 Word
BreakOpportunity(单词换行时机)

pre 与 code

pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code 标签。虽然 code标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。

map 与 area

定义一个客户端图像映射
图像映射(image-map)指带有可点击区域的一幅图像。
area 元素永远嵌套在map元素内部。
area元素可定义图像映射中的区域。

给特殊图形加链接

href属性定义区域的URL

shape属性来定义区域的形状

coords属性定义热区的坐标

 <img src="./R-C.jpg" alt="" usemap="#c"><map name="c"><area shape="circ" coords="970 465 93" href="" alt=""></map>

embed 与 object

embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已。

object元素需要配合param元素一起完成

embed 与 object

embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已。

object元素需要配合param元素一起完成

文字注释与文字方向

ruby 注释(中文注音或字符)，rt 标签定义字符(中文注音或字符)的解释或发音。
bdo标签可覆盖默认的文本方向

<bdo dir="rtl">lingling</bdo>pracice 40hours a day

效果

通过CSS方式实现

<style>span{direction: rtl;unicode-bidi: bidi-override;}</style>
</head>
<body><p><span>lingling</span>pracice 40hours a day</p>
</body>

练习：古诗排版

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>琵琶行</title><style>h1{float: left;writing-mode: vertical-rl;}.author{float: left;height: 140px;writing-mode: vertical-rl;writing-mode: tb-rl;color: gray;}.p{float: left;writing-mode: vertical-rl;}</style>
</head>
<body><div class="p"><p>浔阳江头夜送客，枫叶荻花秋瑟瑟。<br>主人下马客在船，举酒欲饮无管弦。<br>醉不成欢惨将别，别时茫茫江浸月。<br>忽闻水上琵琶声，主人忘归客不发。<br>寻声暗问弹者谁，琵琶声停欲语迟。<br>移船相近邀相见，添酒回灯重开宴。<br>千呼万唤始出来，犹抱琵琶半遮面。<br>转轴拨弦三两声，未成曲调先有情。<br>弦弦掩抑声声思，似诉平生不得志。<br>低眉信手续续弹，说尽心中无限事。<br>轻拢慢捻抹复挑，初为《霓裳》后《六幺》。<br>大弦嘈嘈如急雨，小弦切切如私语。<br>嘈嘈切切错杂弹，大珠小珠落玉盘。<br>东船西舫悄无言，唯见江心秋月白。</p></div><div class="author">白居易 〔唐代〕</div><div><h1>琵琶行</h1></div>
</body>
</html>

效果

扩展link标签

定义文档与外部资源的关系

添加网址标题栏前的小图标

DNS解析把域名解析为IP地址，加快访问网站资源的速度

扩展meta标签

添加辅助信息、功能信息等

HTLM5新语义化标签

div的替代 header：页眉
footer：页脚
main：主体
hgroup：标题组合
nav：导航
arti：独立的内容
aside：辅助信息的内容
section：区域
figure：描述图像或视频
figcaption：描述图像或视频的标题部分
datalist：选项列表
details/summary：文档细节/文档标题
progress/meter：定义进度条/定义度量范围
time：定义日期或时间
mark：带有记号的文本

Web前端学习第五周相关推荐

Web前端学习总结第一周
目录前言一.HTML和CSS概述 1.W3C 2.HTML 3.CSS CSS的作用二.HTML术语 1.HTML注释 2.HTML元素 ⑴元素的组成部分 ⑵属性 3.层次关系 ⑴嵌套 ⑵若A直 ...
Web前端学习第六周
一百一十二.b标签和i标签 strong和em都表示强调的标签,表现形态为文本加粗和斜体.b和i标签同样也表示文本加粗和斜体. 区别在于,strong和em是具备语义化的,而b和i是不具备语义化的. ...
web前端学习（五）：MySQL小型数据库，最常用而又轻便
1.数据库备份与恢复 1.建立表的外键如果出现错误,需要考虑以下三个方面的原因: 外键连接的两个字段长度,类型是否相同.(是否为Null值不影响) 单独的表是否缺少某项依赖或者主键. 表的外键名称不 ...
Web前端开发------第五周
strong和b.em和i标签几者都是表示强调的标签,表现为加粗和斜体区别在于strong和em是具备语义化的,而b和i不具备语义化引用标签 blockquote:引用大段解释 q:引用小段的短 ...
web前端学习，第二周
二十一.嵌套列表 1.1 列表之间可以互相嵌套,形成多层级的列表代码: <ul><li> 辽宁省<ul><li>沈阳</li><li ...
html css 前端实现消息提醒数_自学的福音，web前端学习全套视频教程+最新学习思维导图都在这里...
1.产品经理.这些是负责策划应用程序的一群人.他们会想出很多新鲜的.奇怪的.甚至是不可能实现的应用.一般来说,产品经理都追求丰富的功能. 2.UI设计师.这些人负责应用程序的视觉设计和交互模拟. 3. ...
web 前端学习线路图
web 前端学习线路图一.HTML 教程 HTML教程 HTML简介 HTML编辑器 HTML基础 HTML元素 HTML属性 HTML标题 HTML段落 HTML样式 HTML格式化 HTML引用 ...
零基础想要学习前端，却无从下手？其实你就差一套这样的web前端学习路线
优秀的前端工程师无论在深度和广度上都得有自己的一套清晰透明的知识体系,同时更应该具备快速学习的能力. WEB前端工程师除了需要掌握基本的前端的开发技能外,当然,这里的基本技能说的比较宽泛,大致包括HT ...
Web前端学习（千锋）
Web前端学习一 . 选择器标签选择器群组选择器(分组选择器) 通配选择器层次选择器属性选择器伪类选择器结构性伪类选择器二 . css继承三 . css优先级四 . css盒子模型 ...

Web前端学习第五周

Web前端学习第五周

strong和b、em和i

引用标签

iframe嵌套页面

br 与 wbr

pre 与 code

map 与 area

embed 与 object

embed 与 object

文字注释与文字方向

练习：古诗排版

扩展link标签

扩展meta标签

HTLM5新语义化标签

Web前端学习第五周相关推荐

最新文章

热门文章