自学html,part 2

Titijiang233

已于 2022-02-06 12:04:50 修改

阅读量76

点赞数 1

文章标签： html

于 2021-07-13 15:08:25 首次发布

本文链接：https://blog.csdn.net/Titijiang233/article/details/118669654

版权

新闻编辑

<!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>
    <h1>10 万老人每天上网超 10 小时，网瘾老人愁坏儿女</h1>
    <p>IT之家 7 月 17 日消息 据央视财经报道，
        随着智能终端适老化改造的深入进行，互联网的门槛在老人面前变低了。更多的老人享受到互联网便利的同时，新问题随之产生。</p>
    <p>过去为人父母，最担心自己的孩子沉迷网络，如今情况出现反转，不少年轻人开始为自己的网瘾父母担忧犯愁。熬夜玩游戏、做饭刷视频、网购买不停……</p>
    <p>数据显示，我国 60 岁及以上群体的网络普及率为 38.6%。其中，有超过 10 万老人日均在线超过 10 个小时。</p>
    <p>中国互联网络信息中心的数据显示，截止 2020 年 6 月，60 岁以上手机网民人均 App 的数量达到 44 个，也就是说，在单个平台大数据之外，
        现实生活中老年人对手机依赖的程度更为严重。这背后呈现了他们在现实生活中极度孤独、缺乏现实寄托和社交连接的生活状态。</p>
    <p>IT之家获悉，今年 4 月份，为了抓好互联网应用适老化及无障碍改造专项行动，工信部发布了
        《互联网网站适老化通用设计规范》和《移动互联网应用（App）适老化通用设计规范》，明确适老版界面、单独的适老版 App 中严禁出现广告弹窗。</p>
</body>
</html>

ctrl+s,单击右键，open in default browser

加粗

<strong></strong>或<b></b>

倾斜

<em></em>或<i></i>

删除线

<del></del>或<s></s>

下划线

<ins></ins>或<u></u>

<!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>
    <p>我是<strong>加粗</strong> 的文字</p>
    <p>我是<em>倾斜</em> 的文字</p>
    <p>我是<del>删除线</del> 的文字</p>
    <p>我是<ins>下划线</ins> 的文字</p>
</body>
</html>

ctrl+s,单击右键，open in default browser

大盒子，一行只能有一个

<div></div>

小盒子，一行可以有几个

<span></span>

<div>采采芣苢，薄言采之。采采芣苢，薄言有之。</div>
<div>采采芣苢，薄言掇之。采采芣苢，薄言捋之。</div>
<span>采采芣苢</span>
<span>薄言袺之</span>
<span>采采芣苢</span>
<span>薄言襭之</span>

图片标签的使用

<img src="" alt="">

<!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>
    <h4>图像标签的使用：</h4>
    <img src="okok.png" alt="我是夏漂亮">
    <h4> alt 替换文本 图片显示不出来的时候，用文字代替：</h4>
    <img src="okok1.png" alt="我是夏漂亮">
    <h4> title 提示文本 鼠标放到头像上，提示的文字：</h4>
    <img src="okok.png" alt="我是夏漂亮" title="我是夏漂亮">
</body>
</html>

<h4> width 给图片修改宽度：</h4>

    <img src="okok.png" alt="我是夏漂亮" title="我是夏漂亮" width="100">

    <h4> height 给图片修改高度：</h4>

    <img src="okok.png" alt="我是夏漂亮" title="我是夏漂亮" width="50" height="50">

<!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>
    <h4>图像标签的使用：</h4>
    <img src="okok.png" alt="我是夏漂亮">
    <h4> alt 替换文本 图片显示不出来的时候，用文字代替：</h4>
    <img src="okok1.png" alt="我是夏漂亮">
    <h4> title 提示文本 鼠标放到头像上，提示的文字：</h4>
    <img src="okok.png" alt="我是夏漂亮" title="我是夏漂亮">

    <h4> width 给图片修改宽度：</h4>
    <img src="okok.png" alt="我是夏漂亮" title="我是夏漂亮" width="100">
    <h4> height 给图片修改高度 ：</h4>
    <img src="okok.png" alt="我是夏漂亮" title="我是夏漂亮" width="50" height="50">
</body>
</html>