Blogger Information
Blog 23
fans 1
comment 0
visits 19794
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
介绍HTML文档头部中的标签使用及其他常用的标签-2019年3月11日
蛋糕356的博客
Original
841 people have browsed it

1.

<!--1:前端知识介绍-->
<!--文档结构:html\head\body\title\meta-->
<!-- 声明 告诉浏览器以下的文档是html文档 -->
<!DOCTYPE html>
<html>
<head><!-- 文档头部 head  head内部的元素可以引用脚本、样式表、为网页提供元信息 -->
 <title>学习WEB第一节课</title><!-- 文档头部标题 -->
 <meta charset="utf-8">
 <!-- 不允许用户缩放 -->
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <!-- 引入外部文件(link) -->
 <link rel="stylesheet" type="text/css" href="style.css">
 <!-- rel:规定当前文档与被链接文档之间的关系-->
 <!-- type:定义被连接文档的类型 -->
 <link rel="icon" type="image/x-icon" href="favicon (1).ico"><!-- 引入头部logo-->
 <style type="text/css">
  /*内部样式*/
     *{margin:0;padding: 0; }
     p{
      width:400px; 
      text-indent:2em;/*首行缩进*/
     }
     div{
      width: 300px;
      height: 20px;
      background: #f2f2f2;
      /*white-space 规定如何处理元素内的空白*/
      white-space:nowrap; /*文本不会换行 */
      /*overflow 属性规定当内容溢出元素框时发生的事情*/
      overflow: hidden; /*超出部分隐藏*/
        /*text-overflow (css3)属性规定当文本溢出包含元素时发生的事情*/
      text-overflow:ellipsis;/* 用省略符号来代表被修剪的文本*/
     }
 </style>
</head>
<body>
<!-- 页面中常用文本元素 -->
<!-- 标题是通过 <h1> ~ <h6> 标签进行定义的 -->
 <h1>第一个标题标签</h1>
 <h2>第一个标题标签</h2>
 <h3>第一个标题标签</h3>
<!-- 段落是通过 <p> 标签定义的-->
 <p>***在慰问电中表示,惊悉埃塞俄比亚航空公司一架客机失事,造成包括埃塞俄比亚、肯尼亚、中国公民在内的重大人员生命损失,我谨代表中国政府和中国人民,并以我个人的名义,向遇难者表示沉痛的哀悼,<br>向遇难者家属表示深切的慰问。相信埃塞俄比亚政府能够有效做好善后工作,中方将提供必要的支持和帮助。
 </p>
 <b>加粗文本</b>
 <br>
 <small>小号字体</small>
 <br><!-- 定义换行 -->
 <hr> <!-- 定义水平线 -->
 <!-- 文本格式化(b\del\) -->
 <strong>定义加重语气</strong>
 <del>定义删除字</del>
 <br>
 <del>599元</del><b>399元</b>
    <p> <abbr title="HyperText Markup Language"> html</abbr>(超文本标记语言)</p>
 <!--  页面中常用文本属性: -->
    <!-- 首行缩进(text-indent) -->
    <!--网页中的链接:a-->
  <!--   <a href="地址"></a> -->
  <a href="http://www.php.cn/" target="_blank"> php中文网</a>
  <div><a href="demo2.html" target="_blank">魔方公寓获得1.5亿美元D轮融资,未来将运营人才公寓和公租房 | 钛快讯</a></div>
</body>
</html>

2.

<!DOCTYPE html>
<html>
<head>
 <title>魔方公寓获得1.5亿美元D轮融资</title><!-- 文档头部标题 -->
 <meta charset="utf-8">
 <link rel="icon" type="image/x-icon" href="favicon (1).ico"><!-- 引入头部logo-->
 <style type="text/css">
  /*内部样式*/
     *{margin:0;padding: 0; }
     div{
      margin:100px auto;/* 居中*/
      width:700px; /* 定义宽度*/
        height: 200px; /* 定义高度*/
     }
     abbr{
      text-decoration: none;/*去掉下划线*/
      color:#52F7F2;
     }
     p{
       /*行高*/
      font-size:14px;
     }
     img{
      margin:40px 0;
     }
     h1{
      font-family:宋体; /*改变字体*/
     }
     .box{line-height: 30px; margin-bottom: 20px;}
 </style>
</head>
<body>
  <div>
    <h1 >魔方公寓获得1.5亿美元D轮融资,未来将运营人才公寓和公租房 | 钛快讯</h1>
   <!--  内联样式写法 -->
    <p style="color: #ccc; line-height: 70px;"><abbr title="高梦杨">高梦杨</abbr>  .  &nbsp;2019-3-11   &nbsp;13:55</p>
   <!--  文字居中 背景色 -->
    <p style="text-align: center; background:#f2f2f2; line-height: 70px;"> <b>摘要:</b> 新一轮融资到手后,魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p>
    <img src="1.jpeg" width="700" alt="这是一张图片">
    <p class="box"> <b style="font-size: 18px;">钛媒体快讯 | 3月11日消息:</b>钛媒体获悉,魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p>
    <p class="box">公开资料显示,魔方生活服务集团是国内的集中式长租公寓的代表,也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息,目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓,面向企业蓝领的9号楼公寓,立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
     <p class="box">公开资料显示,魔方生活服务集团是国内的集中式长租公寓的代表,也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息,目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓,面向企业蓝领的9号楼公寓,立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
  </div>
</body>
</html>

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments