![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
前言：今天是在PHP中文网vip班学习的第一天，这已经是我第三次修改第一天学习的笔记了。学习编程对于大龄、低学历、0基础的人来说，最大的困境就是很多单词不认识，不知道什么意思，只能一个一个先了解单词的含义，也因此拖慢了学习推进的速度；看到很多同学当天就能很快提交当天学习的知识点作业，自己对自己也很着急，但我知道再着急也得踏实的把每个知识点学会了；当天直播没有听懂，就反复多看看录播的视频，多敲几遍知识点代码，相信自己也能搞定编程！
认定了的路，不要皱眉头，走下去！！
一、html文档的结构
html是超文本标记语言(Hyper Text Markup Language) ，HTML 标签可以说明文字、 图形、动画、声音、表格、链接等，html标签描述的网页可以被浏览器读取， 即平常上网所看到的的网页。
基本结构为：<html></html><head></head><title></title><body></body>
以下实例代码为html文档结构
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页标题</title> </head> <body> 网页上所有用户能看见的内容都写在这里！ </body> </html>
点击 "运行实例" 按钮查看在线实例
<html>单个叫标签，<html></html>成对出现叫元素，<html>你好</html>元素里的叫元素内容；还有一种情况如：<meta>属于单标签，也叫空元素；
html文档结构总结：
<!doctype html> 声明文档，告诉浏览器以下文档为html文档；
<html></html>元素，所有网页上能看见的不能看见的所有内容，都需要写在<html></html>内部；
<head></head>元素，是网页的头部，<head></head>内的部分是写个浏览器看的，head元素可以引用脚本、样式表、为网页提供元信息；
<title></title>是网页的标题，只能放在<head></head>内部，是seo的重要信息；
<body></body>是网页的主体部分，所有用户看的内容，都要放在<body></body>内部；
<meta>标签：<meta charset="utf-8">定义html为utf-8字符集，告诉浏览器用utf-8字符集读取内容，如果不定义字符集，中文部分会出现乱码；
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
点击 "运行实例" 按钮查看在线实例
手机端viewport：适应手机端，不允许用户缩放；一般结合媒体查询或缩放使用的；
content="width=device-width,-------获得物理设备真实宽度；
user-scalable=no,------禁止缩放；
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"-----所有缩放都给1：0的比例；
小扩展：（viewport 为窗口视区，手机浏览器是把页面放在一个虚拟的 "窗口"（viewport）中，通常这个虚拟的 "窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。width 为控制窗口 viewport 的大小，device-width 为设备宽度缩放为 100%，initial-scale 为初始缩放比例, maximum-scale 允许用户缩放到最大比例，minimum-scale 允许用户缩放到最小比例。）
总结：viewport 的宽度等于物理设备的真实分辨率，不允许用户缩放。（自适应上面用的）
<meta>标签还有一些给SEO用的，如：keywords，description；
<link rel="icon" type="image/x-icon" href="http://www.php.cn/favicon.ico">
点击 "运行实例" 按钮查看在线实例
<link rel="stylesheet" type="text/css href="地址">
<link>标签引入外部文件，如：当前页面中的外部css样式表，图片等
rel="stylesheet" 引入外部层叠样式表 ，rel：规定当前文档与被链接文档之间的关系
type="text/css 定义文档类型
href 路径地址
二、常用文本元素
<!doctype html><!-- 声明文档 -->
<html>
<head>
<title>web基础第一课：html文档结构及常用标签讲解</title>
<meta charset="utf-8"><!-- 规定html的字符编码，告诉浏览器用什么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="icon" type="image/x-icon" href="http://www.php.cn/favicon.ico">
<!-- 把样式写在head头部，称为内部样式 -->
<style type="text/css">
/*号是全局选择*/
*{margin: 0;padding: 0;}
p{
width: 400px;
text-indent:2em;}
/*首行缩进:text-indent*/
div{
width: 300px;
height: 20px;
background: #f2f2f2;
white-space: nowrap; /*文本不会换行*/
overflow: hidden; /*定义元素超出元素框时发生的事情*/
text-overflow: ellipsis; /*css3用点点点进行显示*/
}
</style>
</head>
<body>
<!-- 标题是通过 <h1> ~ <h6> 标签进行定义的
常用的就h1~h3 ，一般h4~h6我们都不用-->
<h1>我是标题</h1>
<!-- h1有权重，网页布局中只能出现一个H1标签 -->
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
<!-- 段落是通过<p>标签定义的 -->
<p>公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的 9 号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的 V 客青年公寓。</p>
<!-- 文本格式化 b/de/small-->
<b>b标签加粗文本</b><br>
<small>定义小号字体</small>
<!-- <br>标签是定义换行的 -->
<hr>
<!-- hr标签定义一根水平线 -->
<strong>定义加重语气</strong><br>
<!-- strong标签适合seo使用，页面中某些A链接比较重要，可以用strong标签框起来。
不适合随便用，可用于导航条部分。 -->
<del>定义删除文字的</del><br>
例子：<br>
<del>699</del><b>399</b>
<p><abbr title="Hyper Text Markup Language"> html</abbr>超文本标记语言</p>
<!-- 页面中常用文本属性 -->
<a href="http://www.baidu.com" target="_blank">有问题，你就百度一下</a>
<!-- 网页中的链接a/ target="_blank,在新的一页打开 -->
<div><a href="http://www.tmtpost.com/3811631.html" target="_blank">魔方公寓获得 1.5 亿美元 D 轮融资，未来将运营人才公寓和公租房 | 钛快讯</a></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
标题是通过 <h1> ~ <h6> 标签进行定义的
<h1>~<h6>，权重依次递减，<h1>权重最大，一个页面中不要出现第二个，否则会权重分散；
常用的是<h1>~<h3>；
段落通过<p>标签定义
文本格式化( b/del/small)
<b>b标签加粗文本 / <del>定义删除文字的 / <small>定义小号字体 / <strong>定义加重语气
strong标签适合seo使用，页面中某些A链接比较重要，可以用strong标签框起来。
不适合随便用，可用于导航条部分。
<abbr></abbr>标签 ：定义缩写的；<abbr title=""></abbr>
text属性
text-indent ：首行缩进
text-align：center 文本居中
把样式写在head内部称为：“内部样式”
三、网页中的图片和链接
<!doctype html><!-- 声明文档 -->
<html>
<head>
<title>魔方公寓获得 1.5 亿美元 D 轮融资，未来将运营人才公寓和公租房 | 钛快讯 - 钛媒体官方网站</title>
<meta charset="utf-8"><!-- 规定html的字符编码，告诉浏览器用什么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="icon" type="image/x-icon" href="http://www.tmtpost.com//favicon.ico?v=1">
<!-- 把样式写在head头部，称为内部样式 -->
<style type="text/css">
/*号是全局选择*/
*{margin: 0;padding: 0;}
div{
margin: 100px auto; /*auto定义居中*/
width: 700px;
height: 200px;
}
abbr{
text-decoration: none; /*去掉下划线，它不仅可以去掉abbr的下划线，还可以去掉a链接的下划线
*/
color: #52f7f2;
}
p{/*line-height:70px; line-height是定义行高的*/
font-size: 14px;
}
img{
margin: 40px 0px;
}
h1{
font-family: 仿宋 ;
/*font-family定义字体*/
}
.one{line-height: 30px; margin-bottom: 20px;}/*line-height是定义行高的 margin-bottom定义P标签的外边距*/
</style>
</head>
<body>
<div>
<h1>魔方公寓获得 1.5 亿美元 D 轮融资，未来将运营人才公寓和公租房 | 钛快讯</h1>
<p style="color: #ccc; line-height:70px"><abbr title="高梦杨">高梦杨</abbr> • 2019-03-11 15:34</p>
<!-- 在标签内写入样式，称为内联样式 -->
<!-- 是占位符，不建议大范围使用，对搜索引擎不友好 -->
<p style="text-align: center; background: #f2f2f2; line-height:70px"><b>摘要：</b> 新一轮融资到手后，魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p>
<!-- text-align:center定义文本居中background定义背景颜色 -->
<img src="https://images.tmtpost.com/uploads/watermark/1400/42e0e536b5092de016d264c4d27d8de0012f8945_1400_933.jpeg?imageMogr2/strip/interlace/1/quality/85&ext=.jpeg" width="700" alt="这是一张图片"> <!-- img内部自带宽度，所以可以直接可以在img内部给个宽度 -->
<p class="one"><b style="font-size: 18px;">钛媒体快讯 | 3 月 11 日消息：</b>钛媒体获悉，魔方生活服务集团获得由加拿大机构基金管理公司 CDPQ 投资的 1.5 亿美元的 D 轮融资。</p>
<p class="one">公开资料显示，魔方生活服务集团是国内的集中式长租公寓的代表，也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息，目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓，面向企业蓝领的 9 号楼公寓，立足中高端的摩尔公寓以及面向年轻用户的 V 客青年公寓。</p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
*是全局
margin 是外边距
padding 是内边距
text-decoration: none; 去掉下划线，去掉下划线，它不仅可以去掉abbr的下划线，还可以去掉a链接的下划线；
line-height:70px；是定义行高的；
font
font-size:14px; 是改变字体大小的；
font-family：宋体；是改变字体的；
background：填充页面背景色的；
a链接
<a href="http://www.php.cn/" target="_blank"> php中文网</a>
href 是地址， target="_blank"在新的页面打开
white-space:nowrap; white-space规定如何处理文本里的空白， nowrap文本不会换行。
overflow: hidden; overflow规定当内容溢出元素框时发生的事情 ，hidden是隐藏；
text-overflow:ellipsis; 超出部分用省略符号来代表被修剪的文本；（是css3里的一个属性）