HTML&CSS学习总结

HTML&CSS学习总结

HTML

HTMl简介

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

现如今，HTML已经发展到HTML5，HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

HTML结构及常用标签介绍

HTML结构如下图所示：

常用标签

标题标签

<h></h>标题标签，对标题进行定义。

段落标签

<p></p> 段落标签，表示一个自然段，会独占一行。

换行标签

<br></br>换行标签，使用时使元素换行

引用图片标签

<img scr="1.jpeg" alt="这是一个图片" height=“30px” />

其中：
src： 外部图片的路径
alt： 用来设置在图片不能显示时的描述
width: 图片的宽度，height：图片的高度。这两个改变时都是同时修改，不该比例。只有当两个都同时指定时才不按比例。

meta标签

使用meta标签可以用来设置网页的关键字：

<meta name="keywords" content="HTML">

CSS

CSS简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

CSS基本语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

 选择器{
 
         声明1；
         声明2；
         ......
}

常用选择器

通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素。在开发中，我们通常使用通用选择器来清除 HTML 元素中默认的内外边距，如下所示：

* {
    margin: 0;
    padding: 0;
    /* css3盒子模型 */
    box-sizing: border-box;
}

标签选择器

一个完整的 HTML 文档由各式各样的标签组成，而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签，如下所示：

body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

Id选择器

ID 选择器用来匹配 HTML 文档中具有指定 ID 属性的标签，ID 选择器的定义需要用到#，后面紧跟 ID 属性的值，如下所示：

#nav {
    color: red;
}

类选择器

类选择器可以根据标签的 class 属性匹配具体的 HTML 标签，所有符合条件的标签都会根据选择器内的样式进行格式化。类选择器的定义需要用到.，后面紧跟 class 属性的值，如下所示：

.touming1{
     width: 230px;
     height: 90px;
     transition: .9s;
     border-radius: 9px;
     background-color: rgba(30,32,33,.6);
     margin: 0 auto;
    font-size: large; 
    font-size: 40px;    
     text-align: center;
     color: white;
 }

box介绍

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

其中：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

总结

通过这段时间的学习，我对HTML和CSS有了一些粗略的了解，其中HTML有些类似于android开发中的xml文件，两者都是通过对页面中的一些元素进行设置，从而实现整个页面布局的效果，而CSS对其中某些重复度高的内容进行设置，大大减少了工作量和重复度，也有利于后续项目的优化和设计。