Html基础知识学习——map热区、 iframe打开其他网页、 flash背景透明、 英文单词 数字词内断行、超出文本不显示并且显示省略号 、元素隐藏、 宽高未知img居中显示(十九)

文章目录

  • map热区
  • iframe打开其他网页
  • flash背景透明
  • 英文单词 数字词内断行——换行
    • word-break: break-all
    • word-wrap:break-word
  • 超出文本不显示并且显示省略号
  • 元素隐藏
  • 宽高未知img居中显示

map热区

在图片上点击特定区域触发不同效果:点击鱼眼睛进入百度搜索页面

 <img src="bigptr.jpg" usemap="#Map">
    <map name="Map">
        <area shape="circle" coords="378,132,56" href="http://baidu.com" target="_blank">
    map>

Html基础知识学习——map热区、 iframe打开其他网页、 flash背景透明、 英文单词 数字词内断行、超出文本不显示并且显示省略号 、元素隐藏、 宽高未知img居中显示(十九)_第1张图片

iframe打开其他网页

  <iframe src="https://www.sina.com.cn" width="1200" height="400" frameborder="0"  >iframe>

Html基础知识学习——map热区、 iframe打开其他网页、 flash背景透明、 英文单词 数字词内断行、超出文本不显示并且显示省略号 、元素隐藏、 宽高未知img居中显示(十九)_第2张图片

flash背景透明

<object >
    
    <param name="wmode" value="transparent">
    <embed src="1.swf" width="400" height="400"  wmode="transparent">
object>  

英文单词 数字词内断行——换行

word-break: break-all

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle> 
    <style>
        /* 英文单词 数字词内断行——换行*/
        p{width: 200px;border: 1px solid #000;font: 14px/24px Arial;word-break: break-all;}
    style>
head>
<body>
    <p>fgfffffffff   fffgbbbbbbbbbbbbbbbbbbb  bgfdndfgdnndfnffn    agaaaacxbvxbbvn
        22222222222222222222222222222222      5555555555d
    p>
body>
html>

Html基础知识学习——map热区、 iframe打开其他网页、 flash背景透明、 英文单词 数字词内断行、超出文本不显示并且显示省略号 、元素隐藏、 宽高未知img居中显示(十九)_第3张图片

word-wrap:break-word

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle> 
    <style>
        /* 英文单词 数字词内断行——换行*/
        p{width: 200px;border: 1px solid #000;font: 14px/24px Arial;word-wrap:break-word;
}
    style>
head>
<body>
    <p>fgfffffffff   fffgbbbbbbbbbbbbbbbbbbb  bgfdndfgdnndfnffn    agaaaacxbvxbbvn
        22222222222222222222222222222222      5555555555d
    p>
body>
html>

Html基础知识学习——map热区、 iframe打开其他网页、 flash背景透明、 英文单词 数字词内断行、超出文本不显示并且显示省略号 、元素隐藏、 宽高未知img居中显示(十九)_第4张图片

超出文本不显示并且显示省略号

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        /*  超出文本不显示并且显示省略号*/
        p{width: 200px;border: 1px solid #000;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    style>
head>
<body>
    <p>
        君不见,黄河之水天上来,奔流到海不复回。君不见,高堂明镜悲白发,朝如青丝暮成雪。人生得意须尽欢,莫使金樽空对月。天生我材必有用,千金散尽还复来。烹羊宰牛且为乐,会须一饮三百杯。
岑夫子,丹丘生,将进酒,杯莫停。与君歌一曲,请君为我倾耳听。钟鼓馔玉不足贵,但愿长醉不愿醒。古来圣贤皆寂寞,惟有饮者留其名。陈王昔时宴平乐,斗酒十千恣欢谑。主人何为言少钱,径须沽取对君酌。五花马,千金裘,呼儿将出换美酒,与尔同销万古愁。
    p>
body>
html> 

在这里插入图片描述

元素隐藏

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{width: 100px;height: 100px; background-color: aqua;border: 5px solid #000;}
        .box1{display: none;}
        .box2{visibility: hidden;}
    style>
head>
<body>
    <div class="box1">div>
    <div class="box2">div>
    <div class="box3">div>
body>
html>

Html基础知识学习——map热区、 iframe打开其他网页、 flash背景透明、 英文单词 数字词内断行、超出文本不显示并且显示省略号 、元素隐藏、 宽高未知img居中显示(十九)_第5张图片

宽高未知img居中显示

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box{width: 800px;height: 600px;border: 2px solid #000;text-align: center;}
        span{display: inline-block;height: 100%;vertical-align: middle;}
        img{vertical-align: middle;}
    style>
head>
<body>
    <div class="box">
        <img src="bigptr.jpg"  /><span>span>
    div>
body>
html>

Html基础知识学习——map热区、 iframe打开其他网页、 flash背景透明、 英文单词 数字词内断行、超出文本不显示并且显示省略号 、元素隐藏、 宽高未知img居中显示(十九)_第6张图片

你可能感兴趣的:(html,学习,前端)