<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的新闻列表</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="">
<a href="http://localhost/x/"target="_blank">11111111111111111111111111111</a><br>
<a href="http://localhost/x/"target="_blank">222222222222222222222222222222222222222222222222</a><br>
<a href="http://localhost/x/"target="_blank">333333333333333333333333333333333333333333333333</a><br>
</div>
</body>
</html>
第二个页面是老师上课所练习内容,一个新闻页面,通过h1 p img div abbr b 等标签使用以及嵌套使用,熟练掌握常用的html标签,通过css样式表的学习,高,宽,内外边距,字体及背景颜色等设置,通过class id 等选择器的使用,使页面更丰富.本页面实现了基本的新闻页面的呈现,包含图片,文字,超链接.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" type="image/x-icon" href="img/favicon (1).ico">
<title>魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-family: 宋体;
text-decoration: none;
}
div{
width: 800px;
height: 1000px;
margin: 100px auto;
}
a{
color: #77F9F9;
}
#p1{
color: #D5CCCC;
margin-top: 20px;
}
#p2{
line-height: 90px;
background-color: #F2F2F2;
margin-top: 20px;
text-align: center;
}
img{
width: 800px;
margin-top: 20px;
}
.p{
margin-top: 20px;
text-indent: 2em;
font-size: 15px;
}
#b1{
font-size: 18px;
}
</style>
</head>
<body>
<div>
<h1>魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</h1>
<p id="p1"><abbr title="高梦杨"><a href="http://localhost/x/x"target="_blank">高梦杨</a></abbr>· 2019-3-11 13:55</p>
<p id="p2"><b>摘要：</b> 新一轮融资到手后，魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p>
<img src="img/1.jpeg" alt="摘要图片">
<p class="p"><b id="b1">钛媒体快讯 | 3月11日消息：</b>钛媒体获悉，魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p>
<p class="p">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
<p class="p">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
</div>
</body>
</html>
日笔记
2019-3-11
01:HTML简介：超文本标记语言
<!DOCTYPE HEML>
<!-- 声明 -->
<html>
<head>
<!-- 文档头部 内部的元素可与引用脚本、样式表
、为网页提供元信息 -->
<title></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 rel="stylesheet" type="text/css"
herf="style.css">
<!-- 引入外部文件 rel：规定当前文档与被连接文
档之间的关系 type：定义被连接文档的类型 -->
<link rel="icon" type="image/x-icon"
href="xxx.ico">
<!-- 引入头部logo -->
<style type="text/css">
*{margin:0px;padding:0px;}
p{rext indent:2em;}
<!-- 首行缩进 -->
</style>
</head>
<body>
<!-- 页面中常用文本元素 -->
</body>
</html>
1-2:常用文本元素
1:<h1>标题标签 有h1---h6 6种大小，注意权
重
2:<p></p>标签 段落标签
3:<b></b>加粗文本
4:<small></small>小号字体
5:<br>定义换行
6:<hr>定义水平线
7:<strong></strong>定义加重语气词 权重高
8:<del></del>定义删除线
9:<abbr></abbr>详细信息 扩展
10:<a href="" target="_black"></a>
1-3:CSS
1:white-space:nowrap; 文本不允许换行
2:overflow:hidden; 超出div部分隐藏
3:text-overflow:ellipsis; 超出部分用...显示
