#HTML/CSS基础知识总结 (文件结构,文字与段落,图片和链接,仿魔方,仿新闻列表) - 2019-3-11 第一节课#
##课程知识点总结##
+ `3-11.html`:HTML部分
+ A. 文档结构：
+ DOCTYPE : 声明 告诉浏览器以下的文档是html文档
+ html : 文档开始
- head : 文档头部
- meta标签 : 描述 HTML 文档的元数据
- meta:utf8 : 中文的显示
- meta:vp : 不允许缩放
- meta:keyword : 用于SEO
- link:css - 引入外部CSS文件
- link:favicon : 网站icon
- style : 内置样式
- title : 标题部分
+ body : 文档主体部分
- h1 - h6 标签 : 定义 HTML 标题,只有一个H1,便于SEO
- p标签 : 定义一个段落
- abbr[title="详写"]{缩写} 标签 : 定义缩写
- div标签 : 定义块级元素
- a[href,target] :超链接
- b : 加粗字体
---
+ `mofang.html`:CSS部分
+ B. CSS部分
+ css层叠样式表：内部、外部、内联
+ CSS效果
- '*' : 全部空隙清理掉
- 'ti' : text-indent: 2em : 首行缩进
- 模仿新闻列表点点点效果
```
规定如何处理元素中的空白
white-space: nowrap; /* 不允许换行 */
/* 超出部分就隐藏 */
overflow: hidden;
/* 超出就用省略号代替 */
text-overflow: ellipsis;
```
- 模仿`魔方网站新闻详情`效果
```
/* div整个页面居中效果 */
margin : 100px auto;
h1 - 改变文字字体
abbr - 取消下划线,改变文字颜色
p - 定义行高,改变文字大小
img - 设置margin{上右下左,(上下)(左右)}
class -"." 类选择器
```
--- ✄ -----------------------
以下是 html练习部分的代码
实例
<!-- ●DOCTYPE : 声明 告诉浏览器以下的文档是html文档 -->
<!--必须位于 HTML5 文档中的第一行-->
<!DOCTYPE html>
<html>
<head>
<title>学习WEB的第一节课</title>
<!--●meta : 描述 HTML 文档的元数据->
<!--meta:utf8 : 对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。-->
<meta charset="utf-8">
<!-- meta:vp : 不允许用户缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- 其他的meta标签 ,用于SEO优化 KEYWORDS ETC. -->
<!-- ●link:css - 引入外部文件(link) -->
<!-- rel:规定当前文档和被连接文档之间的关系 -->
<!-- type:类型 -->
<link rel="stylesheet" href="style.css">
<!-- ●link:favicon : 网站icon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- style : 内置样式 -->
<style type="text/css">
/* '*' -全部设置 */
/* 全部空隙清理掉 */
*{
margin:0px;
padding: 0px;
}
/*首行缩进*/
p{
/* 首行缩进, 1em=1字符 */
/* 首行缩进(text-indent) */
text-indent: 2em;
width: 400px;
}
/* 模仿新闻列表点点点效果 */
div{
width: 300px;
height: 20px;
background-color: #f2f2f2;
/* 规定如何处理元素中的空白 */
white-space: nowrap; /* 不允许换行 */
/* 超出部分就隐藏 */
overflow: hidden;
/* 超出就用省略号代替 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
一个网站只能一个H1,这样SEO不好
<h1>我是H1</h1>
<h2>我是H2</h2>
<h3>我是H3</h3>
<!-- 缩写 -->
<p><abbr title="HyperText....">HTML</abbr>(超文本标记语言)</p>
<!--div:定义块级元素-->
<!-- 网页中的连接:a -->
<div>
<a href="mofang.html" target="_blank">魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</a>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
●效果如下
--- ✄ -----------------------
以下是 模仿魔方 的代码
- --- ✄ -----------------------
实例
<!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>魔方公寓获得1.5亿美元D轮融资</title> <style> *{ margin:0px; padding:0px; } div{ /* 定义宽度 */ width: 700px; /* 定义高度 */ height: 200px; /* 例牌: div居中效果 */ margin : 100px auto; } h1{ /* 改变字体 */ font-family: '宋体'; } abbr{ /* 去掉下划线 */ text-decoration: none; /* 改变文字颜色 */ color :cyan; } p{ /* 定义行高 */ line-height: 70px; /* 谷歌最小12px */ font-size: 14px; } img{ /* 上右下左,(上下)(左右) */ margin : 30px 0; } .box{ line-height: 30px; margin-bottom: 20px; } </style> </head> <body> <div> <h1>魔方公寓获得1.5亿美元D轮融资，未来将运营人才公寓和公租房 | 钛快讯</h1> <!-- 内联样式写法 注意:和; --> <!-- SEO不推荐 --> <p style="color:#ccc;"><abbr title="高梦阳">高梦阳</abbr> • 2019-3-11 21:24:13</p> <!-- 文字居中,背景色 --> <!-- 因为设置了全部的P,所以垂直也有行高 --> <p style="text-align:center;background:#f2f2f2"><b>摘要</b>： 新一轮融资到手后，魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p> <!-- 一定要有alt,因为SEO --> <img width="700px" alt="这是图片" src="https://images.tmtpost.com/uploads/watermark/1400/42e0e536b5092de016d264c4d27d8de0012f8945_1400_933.jpeg?imageMogr2/strip/interlace/1/quality/85&ext=.jpeg" alt=""> <p class="box"><b style="font-size:18px;">钛媒体快讯 | 3月11日消息：</b>钛媒体获悉，魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p> <p class="box">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的9号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p> </div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
以下是效果图
