概述
Html和CSS在这两天的学习下，我总结为内容的显示和格式的设置。其中Html主要提供网页上都有什么内容，CSS则控制这些内容的表现形式。
Html
<!Doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>top news</title>
<link rel="stylesheet" type="text/css" href="../Styles/top-news.css">
</head>
<body>
<div class="title">
<img class="img-menu"src="../Static/Img/menu.png" alt="menu">
<img class="img-head"src="../Static/Img/head.jpg" alt="head">
<p class="title-text">Louis Barranqueiro theme demo</p>
</div>
<div class="show-content">
<p class="head-line">AirPods Pro体验评测：为什么苹果降噪耳机叫Pro？</p>
<p class="date">腾讯数码 10-29 20:00</p>
<p class="article-p" >AirPods Pro是苹果推出的首款主动降噪耳机，相比之前的AirPods，为了考虑到降噪性能，AirPods Pro整体的设计大改。</p>
<video class="video-airpods" src="../Static/Video/500days.mp4" controls = "controls"></video>
<p class="article-p">每当苹果推出一款“Pro”级别的产品，它一般都会肩负着极为重要的使命和意义。</p>
<p class="article-p">而在今天凌晨，苹果产品线中的第五款Pro级别产品——AirPods Pro悄然来临。</p>
<p class="article-p">就像曾经的iPod、Mac、iPhone和iPad一样，AirPods一经问世便成为行业标杆，引得竞争对手争相效仿。</p>
<p class="article-p">AirPods或许出道即巅峰，但它并不算完美。</p>
<p class="article-p">此外，AirPods开放式的设计虽然带来了极为舒适的佩戴感，但这也让降噪变成了一件几乎不可能实现的事。</p>
<p class="article-p">我们原本期待着今年年初的升级机型可以解决上面这两个问题，但很遗憾，那款AirPods只是一个小改款。</p>
<p class="article-p">但是现在，我们期待中的那款AirPods终于来了。</p>
</div>
</body>
</html>
首先，从语法上来讲一个html文件即从<html>到</html>，中间的内容主要就是head和body。head和body都是为我接下来所说的小盒子服务，在我的理解里，一个网页也就是一个大盒子，大盒子内放着各式各样的小盒子来进行显示扩充。
head是描述整个html属性以及我们各种小盒子（div，p，tl等）的属性。body则是表述我们总共需要多少个小盒子。
我们常见的网页内容实际上就是由一个个的小盒子组合而成的，每一段文本，一个标题，一个图标，一个背景等等都是按一个个的盒子储存。
body处
我们需要在body处把这些盒子提前设置出来。其中需要注意的是盒子的嵌套关系，选择标签。
首先是嵌套关系：我们需要在设置盒子之前就对整个网页有一个大局的意识。比如需要在什么地方设置一个工具栏。
然后是标签的选择：其中选择有两个内容，一是选择用哪一类标签，例：是视频还是音频还是超链接；二是在都可以表达该内容是选择更合适的标签，例：是使用块状元素还是行内元素，都要求表达文字的话选择p还是span等情况。
body处还有一个重要的内容就是设置各个盒子的名字class，如上述代码，如果都是同样的段落内文字我就设置了相同的className，但标题和段落内部的文字就设置了不同的className。（重要的，class的名字要符合用最短的字，表达尽可能准确且不易与其他产生误解的起名要求）
head处
head处需要设置各个小盒子的具体属性，可以在head内直接利用className{}的形式给出，这个形式也直接引出CSS文件，CSS文件的具体内容和这个一样，用CSS将这些属性设置提取出来就解放了html的功能。
利用的代码是<link rel="stylesheet" type="text/css" href="../同名.css">
CSS
.title{
position:fixed;
left:0px;
top:0px;
width: 100%;
height:30px;
background-color:aliceblue;
text-align: center;
z-index:999;
}
.img-menu{
float:left;
margin: 5px auto;
margin-left: 10px;
height: 20px;
width: 20px;
}
.img-head{
float:right;
margin: 5px auto;
margin-right: 10px;
height: 20px;
width: 20px;
border-radius:50%;
}
.title-text{
margin:5px auto;
color:darkgray;
font-size: 14px;
}
.show-content{
margin:0 auto;
margin-top: 50px;
width: 60%;
}
.head-line{
font-size: 28px;
font-weight: 900;
}
.date{
font-size: 12px;
color: darkgray;
font-weight: 400;
}
.article-p{
font-size:16px;
font-weight: 500;
line-height: 150%;
}
.video-airpods{
margin:0 auto;
height:width*16/9;
width: 100%;
position: relative;
}
CSS主要就是用于控制各个小盒子的具体表现形式，其中最近用到比较多的是：
image
这是每一个盒子都拥有的内容，其中offset直接用top，left，top，bottom设置。其他都是名字加这些方向具体设置。
特殊的border-radius:50%同时长宽设置一样可以表示保留一个圆形内容；margin:0 auto;可以用来让一个块在上下占满的情况下居中放置。
后续还需要注意的一个代码规范的点是每个标签style的顺序：应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。
head&css
head和css的都是为了格式的设计，其实这两者也是三个格式设计方法其中两个，另一个是直接body中在创建一个标签后，直接在后面的属性内容中写上style。
在一般项目中都用css格式，原因是这样使html和css的分工更加明确。
整体总结
两天的内容总结下来最重要的还是对语法的一种学习和习惯，要能理解html用于内容、功能和css用于格式。
html是一门易懂的语言，但是在细节的设计上还是需要大局意识和小创新，毕竟这是与用户交互最直接的表现形式，所以前端的内容确实是吸引人的关键，期待在后续的学习中完善更多的功能。
最后要说的是最近的学习真的很适合规范代码，我要在学会的同时用花更多的时间在规范自己代码习惯上。编码规范在微信收藏，在养成习惯之前需要再多多熟悉，在第一遍写作时就开始注意。
网友评论