小黑子的HTML入土过程第五章
HTML+CSS系列教程第五章
5.1 b标签与i标签
<body>
<strong>文本</strong>
<b>文本</b>
<em>文本</em>
<i>文本</i>
</body>
—>
5.2 引用标签基本操作
例子：
- abbr：
<body>
<p>
<abbr title="world health organizition">WHO</abbr>
成立于1948年。
</p>
</body>
2. blockquote
<body>
<p>
"死而后已"一语出自诸葛亮《出师表》∶
<blockquote>“凡事如是，难可逆见，臣鞠躬尽瘁，死而后已，
至于成败利钝，非臣之明所能逆睹也。"</blockquote>
</p>
</body>
—>
3.q
<body>
<p>
WWF的目标是∶
<q>构建人与自然和谐共存的世界。</q>
</p>
</body>
—>
4.address
<body>
<p>
网易北京公司
<address>地址:北京市海淀区西北旺东路10号院</address>
</p>
</body>
—>
5.cit
<body>
<p>
<cite>资治通鉴</cite>
由北宋司马光主编的一部多卷本编年体史书
</p>
</body>
—>
5.3 iframe嵌套页面
iframe：
可以引入其他的html到当前html中显示。
主要是利用iframe的属性进行样式的调节。
<body>
<iframe src="https://www.taobao.com/（可以引入想要的地址）
" frameborder="0"></iframe>
</body>
—>默认状态下
2. 加边框就把0改成1
<body>
<iframe src="https://www.taobao.com/
" frameborder="1" ></iframe>
</body>
—>
3. scrolling:去滑块
<body>
<iframe src="https://www.taobao.com/"
frameborder="0" scrolling="no" ></iframe>
</body>
—>
4.修改宽和高
<body>
<iframe src="https://www.taobao.com/"
frameborder="0" width="500" height="500"></iframe>
</body>
—>注意在iframe下数值不要加px
5.快速填充网页
<style>
iframe{width: 100%;height: 700px;}
</style>
<body>
<iframe src="https://www.taobao.com/"
frameborder="0" scrolling="no" ></iframe>
</body>
—>
6.srcdoc:规定首先引入什么，并且可以引入标签
<body>
<iframe srcdoc="<h1>hello word</h1>"
src="https://www.taobao.com/" frameborder="0" scrolling="no" ></iframe>
</body>
—>有了srcdoc的引入，后面的src地址失效
5.4 br标签与wbr标签
在p标签输入单词，一般换行是在页面所需宽度不够时一个单词一个单词进行换行的
<body>
<p>
dsgjhjkash jksdkjshkjasdh gjk br hkjg gakjheragae
ahjkgasdkjgkjsaghagjkh ghdkag hakerjkas hg
</p>
</body>
—>
1.br（强行换行）
<body>
<p>
dsgjhjkash jksdkjshkjasdh gjk br hkjg <br> gakjheragae
ahjkgasdkjgkjsaghagjkh ghdkag hakerjkas hg
</p>
</body>
—>
2.wbr（用于 在HTML文档中指定换行机会）
如果文本太长，浏览器会对文本换行，如果担心浏览器会在不恰当的位置换行，那么就可以用
<body>
<p>
dsgjhjkash jksdkjshkjasdh gjk br hkjg gakjheragae a ahjkgasdkjsaghagjkh<wbr>ghdkag <wbr>hakerjkas hgasd aasd ae asdx
</p>
</body>
—>
5.5 pre标签与code标签
- 无转义引入代码时
<body>
<pre>
<code>
<!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>Document</title>
</head>
<body>
hello word
</body>
</html>
</code>
</pre>
</body>
—>
2.转义：将 < 转换为 < ，>转换为>
<body>
<pre>
<code>
<!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>Document</title>
</head>
<body>
hello word
</body>
</html>
</code>
</pre>
</body>
—>
5.6 map标签与area标签
给特殊图形添加链接，area能添加的热区的形状:
矩形：rect、圆形：circle
、多边形：poly。
img下，usemap="(自己随便命的名）"
map属性：name="（引用命名）"
shape= "（设定点击形状）"
coords="（每个两块便是像素点的坐标）"
href="（设置跳转链接）"
范例：
- rect：
矩形只需要设置左上角的坐标和右上角的坐标
<body>
<img src="./img/star.jpg" alt="" usemap="#star(自己随便命的名）">
<map name="star（引用命名）">
<area shape= "rect" coords="205 83 386 17" href="https://www.taobao.com" alt="">
</map>
</body>
—>效果，点击后跳转到设置的链接
- circle：
设置只需要一个坐标点，之后在该坐标点后加个半径即可
<body>
<img src="./img/star.jpg" alt="" usemap="#star">
<map name="star">
<area shape= "circle" coords="300 130 50（半径）" href="https://www.taobao.com" alt="">
</map>
</body>
—>
3.ploy:
比较麻烦，需要给多个线段转折点的坐标才可形成
<body>
<img src="./img/star.jpg" alt="" usemap="#star">
<map name="star">
<area shape= "poly" coords="305 99 233 156 256 250 172 197" href="https://www.taobao.com" alt="">
</map>
</body>
—>
5.7 embed标签与object标签
例子：
- embed
引入的flash图片，浏览器要安装flash插件才能显示
—>
- object
name用作名字，value用作引入地址
5.8 video标签与audio标签
controls属性：用于显示控制器
loop属性：用于循环播放
source标签：在MP3和MP4的格式下不适应时，引入
- audio: mp3格式
<body>
<audio src="./img/johann_sebastian_bach_air.mp3"
controls loop></audio>
</body>
—>
2. video：mp4格式
<body>
<video src="./img/intermission-walk-in_512kb.mp4"
controls></video>
</body>
—>
5.9 文字注解与文字方法
- ruby
<body>
<ruby>
汉<rt>hàn</rt>字
</ruby>
</body>
—>rt后的字不受拼音影响
- bdo
（1）
<body>
<ruby>
汉<rt>hàn</rt>字
</ruby>
<p>
<bdo dir="rtl">这是一段文字</bdo>
</p>
</body>
—>rtl：指将部分字体从右向左进行输出
（2）
<body>
<ruby>
汉<rt>hàn</rt>字
</ruby>
<p>
<bdo dir="ltr">这是一段文字</bdo>
</p>
</body>
—>ltr：指字体从左向右输出，不写dir=什么时则默认该属性
5.10 link标签扩展学习
stylsheet：指定文件类型
icon：添加网址标题栏前的小图标
dns-prefetch：最终访问网站通过IP进行访问，更加快速
<link rel="icon" type="/image/x-icon（指定图标下的格式）" href=
"http:// www.mobiletrain.org/favicon.ico（图标地址）">
由
—>
5.11 meta标示签扩展学习
name="description" content=" "
-->作用于描述给计算机或者给浏览器记录，但是用户是看不见的，有
利于（ICU）搜索引擎优化
name="keywords" content=" "
-->关键字，有利于搜索引擎搜索
name="renderer" content=" "
-->渲染浏览器内核
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-->主要针对IE浏览器进行更高级的版本进行渲染
<meta http-equiv="refresh" content="3" url=" ">
-->表示刷新页面跳转，content="秒数"
<meta http-equiv= "expires" content="Wed, 20 Jun 2019
22:33:00 GMT">
-->在规定时间内进行缓存，content="缓存时间"
5.12 HTML5新语义化标签(1)
5.12.1 header,main,footer,hgroup,nav
header,main,footer只允许要求在一个网页中出现一次
5.13 HTML5新语义化标签(2)
5.13.1 article，aside，section，figure，figcaption
5.14 HTML5新语义化标签(3)
5.14.1 datalist, details/summary, progress/meter, time, mark
- datalist:
<body>
<section>
<input type="text" list="elems（随便的命名）">
<datalist id="elems">（引入命名，该命名用class显示不出三角形符号和列表）
<option value="a"（加入列表名）></option>
<option value="b"></option>
<option value="c"></option>
<option value="d"></option>
<option value="e"></option>
<option value="f"></option>
<option value="g"></option>
</datalist>
</section>
</body>
—>
- details与summary:
(1)
<details>
<summary>
HTML
</summary>
<p>
这是一段文字
</p>
<p>
这是一段文字
</p>
<p>
这是一段文字
</p>
</details>
—>
点击前
点击后
(2)open属性：默认展开效果
<details open>
<summary>
HTML
</summary>
<p>
这是一段文字
</p>
<p>
这是一段文字
</p>
<p>
这是一段文字
</p>
</details>
—>
- progress与meter:
progress和meter的区别：
progress一般表示用于网页加载，meter一般表示测量
min：表示最小进度
max：进度最大值
value：进度占多少
low：表示最小完成（可以小于）
high：表示最多完成（可以超出）
注意：当value超过low或high时会有明显的颜色变化，但有些浏览器不支持
（1）progress
<section>
<progress min="0" max="10" value="8"></progress>
</section>
—>例子：进度在10中占8
（2)meter
I
<section>
<meta min="0" max="100" value="35"></meta>
</section>
—>
II
<section>
<meter min="0" max="100" value="90" low="10" high="40"></meter>
</section>
—>
- time:
虽然时间不会在用户面前显示，但是更符合语义化
<P>
今天是<time title="2-1"> 情人节</time>，街上人很多.
</P>
—>
- mark:
I 默认颜色时
<P>
今天是<mark>情人节</mark>，街上人很多.
</P>片
—>
II 调节标记颜色
<style>
mark{
background-color:red; /*设置背景颜色*/
color:white; /*设置文字颜色*/
}
</style>
</head>
<body>
<P>
今天是<mark>情人节</mark>，街上人很多.
</P>
</body>
—>
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
