页面中常用标签
头部部分标签及身体部分标签
<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.ico"><!-- 引入头部logo-->
<!-- 标题是通过 <h1> ~ <h6> 标签进行定义的 --> <h1>第一个标题标签</h1> <h2>第一个标题标签</h2> <h3>第一个标题标签</h3> <p>段落标签</p> <b>加粗文本</b> <br>换行 <hr>水平线 <small>小号字体</small> <strong>定义加重语气</strong> <del>定义删除字</del> <abbr title="超文本标记语言"> html</abbr> <a href="http://www.php.cn/" target="_blank"> php中文网</a>超链接标签 <div></div> 盒子元素
相关属性及样式：
a标签
href属性：表示连接的地址，如http://baidu.com ;
target属性：链接在什么地方打开，比如新窗口打开
title属性：鼠标悬浮到元素上显示的文字
p标签：首行缩进 text-indent:2em
新闻标题超过显示省略号，需要在文本元素外给个div空值宽度，如200px
white-space: nowrap; //当前文本不换行
overflow: hidden;//超出隐藏
text-overflow:ellipsis //文本超出部分显示省略号
完整代码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一课</title>
<style type="text/css">
*{margin: 0;padding: 0}
a{text-decoration: none}
div{margin: 100px auto;width: 700px;height: 200px;}
abbr{text-decoration: none;color: #52f7f2}
p{line-height: 70px;font-size: 14px;font-family: "Adobe 仿宋 Std R";}
img{margin: 30px 0px}
.box{line-height: 30px;margin-bottom: 10px;}
h1{width: 400px;white-space: nowrap;overflow: hidden;text-overflow:ellipsis}
</style>
</head>
<body>
<div>
<h1><a href="http://www.tmtpost.com/3811631.html" target="_blank">魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</a></h1>
<p style="color: #ccc"><abbr title="高先生">高先生</abbr> . 2019-10-15 19:25:25</p>
<p style="text-align: center;background-color: #cccccc"><b>摘要：</b>新一轮融资到手后，魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p>
<img src="https://images.tmtpost.com/uploads/watermark/1400/42e0e536b5092de016d264c4d27d8de0012f8945_1400_933.jpeg?imageMogr2/strip/interlace/1/quality/85&ext=.jpeg" width="700" alt="图片">
<p><b style="font-size: 18px">钛媒体快讯 | 3月11日</b>消息：钛媒体获悉，魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资</p>
<p class="box">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
<p class="box" style="text-indent: 2em">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总计：
学习到了html和css的相关知识，我比较在意的是标签的属性及样式，例如文本超出隐藏等。都是些实用的知识需要慢慢消化
