小言_互联网的博客

前端学习day01:前端

350人阅读  评论(0)

<!DOCTYPE html><!--html5文档标识-->
<html lang="en">   <!--根标签  ctrl+/单行注释   ctrl+shift+/多行注释-->
<head>
    <!--
   
头部:相关浏览器,不向用户展示
   
-->
   
<meta charset="UTF-8"><!--媒体标签,解释语言 charset="utf-8"字符编码-->
   
<title>网页</title>
    <h1>hello world</h1>
</head>
<!--身体   用户可以看到的地方-->
<body>
<h2>我是优秀的少先队员</h2>
</body>
</html>

 

 

 

 

<!--加粗标签-->

<html>

<head>

    <title></title>

    <meta charset="UTF-8">

</head>

<body>

我没有加粗

<b>我是加粗标签</b>

<strong>我也是加粗标签</strong>

<em>我是&nbsp;斜体标签</em>

<i>我也&nbsp;是斜体&nbsp;标签</i>

<!--钱的符号:&yen;  空格:&nbsp;&nbsp; 版权符号&copy;-->

<del>&yen;199.00</del>

&copy;

<!--换行:br-->

<br>在这换行一次<br>在这也换行一次<br>在这又换行一次

<u>下划线</u>

<hr color="blue" width="300px" align="left">

<!--color颜色、width宽度(默认居中)、align对齐方式-->

</body>

</html>

 

 

 

 

<!--字体属性-->

<html>

<head>

    <title></title>

    <meta charset="UTF-8">

</head>

<body>

<span>默认字体</span>   <!--小盒子,包裹小元素或简单的文本-->

<span style="color:green;font-family:'楷体';font-style:italic;font-weight:900" >默认字体</span>

<span style="color:red;font:normal 400 20px '楷体'">第二行字</span>

</body>

</html>

 

 

 

 

<!--div和span-->

<html>

<head>

    <title></title>

    <meta charset="UTF-8">

</head>

<body>

<!--div宽度默认屏幕的100%,高度取决于内容-->

<div style="width:300px;height:400px;background-color: green">我是大盒子的内容</div>

<!--span宽度和高度取决于内容需要的宽度-->

<span style="width:300px;height:400px;background-color:red">我是小盒子</span>

<p>hahahahahahahah</p>

<h1>h1</h1>

<h2>h2</h2>

<h3>h3</h3>

<h4>h4</h4>

<h5>h5</h5>

<h6>h6</h6>

</body>

</html>

 

 

 

 

<!--图片-->

<html>

<head>

<title></title>

<meta charset="UTF-8">

</head>

<body>

<img src="https://www.baidu.com/img/bd_logo1.png" alt="图片消失了">

<!--同级路径直接写图片名字-->

<img src="1.jpg" alt="图片消失了">

<!--上一级、下一级-->

<img src="img/feiji1.png" alt="图片消失了">

<img src="../image/feiji2.png" alt="图片消失了">

<div style="border:1px solid black">

    <img src="1.jpg" alt="">

</div>

<div style="border:1px solid black">

    <img src="1.jpg" alt="" style="vertical-align:bottom">

    <!--解决图片和底线空隙:

    默认是基线(baseline)

    1:改变对齐方式 底线(bottom)、中线(middle)、顶线(top)

    2:切换成不是文字-->

</div>

</body>

</html>

 

 

 

 

<!--作业1-->

<html>

<head>

    <title>作业01.html</title>

    <meta charset="UTF-8">

</head>

<body>

<div style="background-color:#f5f5f5;width:1167px;height:270px;">

    <div style="height:5px"></div>

    <h1 style="font-size:35px">#网红滤镜下的佘诗曼#</h1>

    <div style="width:837px;float:left">

        <p style="font-size:13px;line-height:24px">#网红滤镜下的佘诗曼#日前,#佘诗曼[超话]#在某火锅店用餐,店主原来是一名网红,当她发现娴妃娘娘出现时,便拍视频发布到社交平台,还拉着阿佘玩自拍,亲和力超好的阿佘没有拒绝,微笑着对着镜头配合拍摄。但是这"美颜"下的人儿是谁啊,完全认不出!阿佘自己都被吓到往后退,这艰难又不失礼貌的微</p>

        <div style="color:#808080">

            <div style="width:200px;float:left">

                <img src="0101.png" alt="" style="vertical-align: middle">娱乐有饭  1月14日 08:25

            </div>

            <div style="width:300px;float:right">

                <div style="float:right">

                    <img src="images/images/0106.png" alt="" align="left" style="vertical-align: middle">319

                </div>

                <div style="float:right">

                    <img src="images/images/0105.png" alt="" align="letf" style="vertical-align: middle">1201 |

                </div>

                <div style="float:right">

                    <img src="images/images/0104.png" alt="" align="left" style="vertical-align: middle">5572 |

                </div>

            </div>



        </div>

    </div>

    <div style="width:288px;float:right">

        <img src="images/0102.png" alt="">

    </div>

</div>

</body>

</html>

 

 

 

 

<!--作业2-->

<html>

<head>

    <title>作业02.html</title>

    <meta charset="UTF-8">

</head>

<body>

<div style="width:264px;height:315px;background-color:#ffffff">

    <p style="font-size:17px">旅行家专栏</p>

    <div>

        <img src="images/0201.png" alt="">

        <p style="font-size:14px">西北偏北</p>

        <p style="font-size:12px;color:#7d6666">西北就是远方。是苍老的白云。是清真寺。是牛羊肉。是北方的河。是干了的黄河。是野性。是沉默</p>

    </div>

</div>

</body>

</html>

 

 

 

 

<!--作业3-->

<html>

<head>

    <title>作业03.html</title>

    <meta charset="UTF-8">

</head>

<body>

<h1>40.6摄氏度:上海创出140年气象史上高温新纪录</h1>

<p>2016年7月27日 10:58:26 来源: 新华网</p>

<hr>

<p>新华网上海7月26日电(记者李荣)26日13时36分至47分这一时间段,上海徐家汇气象观测站测得当日最高温达40.6摄氏度。这是上海有气象记录以来140年的高温新纪录,打破了此前1934年创下的40.2摄氏度的历史极值。</p>

<p>上海已经连续2天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说,今年副热带高压强度特别强,对上海及江南地区的控制“实在太稳定了”,整个7月份基本上都处在它的势力范围之内。25日上海已出现了气象史上7月份“第四高”的高温值,这使得26日的“基础”气温就很高,超过了30摄氏度,然后不断地升温。此外,26日白天风小,又吹的是西南风,特别是在中午之后这一个最易出现高温的时段,光照又比较强,所以气温“直线飙升”,一举冲破历史极值,出现了“创纪录”的极端酷暑天</p>

<p>在上海历史上,出现40摄氏度以上极端高温的几率并不大。根据相关资料,中心城区徐家汇观测站140年来仅出现了5次记录,除了这一次的新纪录,还有就是1934年7月12日的40.2摄氏度;1934年8月25日、2009年7月20日、2010年8月13日的40摄氏度。</p>

<p>由于气温实在太高,上 海26日下午不少地区出现了热对流天气。气象台说,首先是浦东地区,下起了热雷雨。到15时05分,全市大部分地区出现了分散性的雷电活动和热雷雨,中心城区徐家汇等地都响起了隆隆的雷声。</p>

</body>

</html>


转载:https://blog.csdn.net/weixin_43800846/article/details/88674349
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场