最近在学习Web项目开发技术，其中就涉及到了关于写前端页面的一些基础知识，本篇文章嘞我将要介绍一下下关于写前端页面的一些很基础很基础的知识（这些也是我在做第一次作业---个人简历当中都会使用到的知识啦~）也可以让初学html的小伙伴们更好的了解html！
一、HTML基础
1、HTML的简介
HTML是超文本标记语言（ Hyper Text Markup Language）的缩写，HTML 不是一种编程语言，而是一种标记语言 (markup language) ，标记语言是一套标记标签 (markup tag) ，HTML 使用标记标签来描述网页。
2、HTML标签
HTML 标签是由尖括号包围的关键词，比如 <html> ，通常是成对出现的，比如 <a> 和 </a> ，即为开始标签（开放标签）和结束标签（闭合标签）。
HTML 文档 = 网页即HTML 文档描述网页，HTML 文档包含 HTML 标签和纯文本，Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。
3、HTML元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。元素语法如下：
HTML 元素以开始标签起始，以结束标签终止。元素的内容是开始标签与结束标签之间的内容，某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束），大多数 HTML 元素可拥有属性。
4、HTML属性
HTML 标签可以拥有属性。属性提供了有关 HTML元素的更多的信息。
• 属性总是以名称/值对的形式出现，比如：name="value"。
• 属性总是在 HTML 元素的开始标签中规定。HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：<a href=“https://www.baidu.com”>百度</a>
二、HTML标签
常用标签
div：表示一个区块或者区域，可以看成一个容器，盒子。作用：用来把网页分块并且里面可以装任意的html元素。
span：表示一个小区快，比如一些文字，span和div的不同就是span能够在一行内显示而div独占一行。
p：是段落标签，通常用来装一整段文字，在一篇文章中常用。
h1-h6：h1到h6表示六级标题，表现出来的效果就是从h1开始文字大小逐渐变小。
ul li：ul为无序列表标签，li为里面的每个列表项目。作用：各种菜单，各种新闻排行都可以用无序列表来实现。
img：表示图像，可以引入一张图片。相对路径和绝对路径：img标签有个src属性，它的值是图片的地址，可以是网络地址也可以是本地地址，如果是本地路径的话，就要区分是相对路径还是绝对路径。
绝对路径：在硬盘上的具体位置，例如：“E:\www\html\frog.jpg”。
相对路径：相对于当前的html文件来说图片的具体位置可以分为同级（./frog.jpg）、下一级（./img/frog.jpg）、上一级（../img/frog.jpg）。
alt属性表示当图片没有被加载的时候显示的文字。
title属性表示当鼠标移动到图片的时候显示的文字。
a：表示超链接，target属性值“__blank”表示每次点击的时候新开一个浏览器标签页来显示链接的内容。
table：表格标签，可以让我们的表格在浏览器中显示。table有两个常用的标签tr和td。
tr标签：表示一行；td标签：表示一行里面的某个单元格。
合并单元格
1）明确合并的是哪几个单元格，找到第一个要合并的单元格
2）在第一个要合并的单元格身上（加属性），水平合并colspan，垂直合并 rowspan
3）注意：合并的数量要加上自己（从第一个单元格开始数）
三、CSS简介
1、什么是CSS
CSS（Cascading Style Sheet，“层叠样式表”或“级联样式表”），是一组格式设
置规则，用于控制web页面的外观。CSS语法有三个基本部分组成：选择器（Selector）、
属性（Properties）和属性的取值（Value）。
2、如何让一个标签具有样式
第一步：必须保证引入方式正确；
第二步：必须让css和html元素产生关联，也就是说先找到这个元素；
第三步：用相应的css属性去修饰html元素的样式。
2.1、css的三种引入形式
2.1.1、将css内嵌到html文件中，这种方式写的css又叫内联样式表。
2.1.2、 将一个外部样式链接到html文件中。这种方式书写的css又叫链接样式表。
2.1.3、 将样式表加入到html文件中。这种方式书写的css又叫行内样式表。
3、基础选择器
书写css的规则： 选择器{
属性名称:属性值；
属性名2:属性值2；
....
}
• id选择器 —— 自定义一个名称，”#”
• 类选择器 —— 自定义一个名称，”.”
• 标签选择器 —— 通过标签名称来选择对应的 html元素
4、CSS规则
颜色的表示方式：
• rgb模式。r 红色，g 绿色，b 蓝色。rgb取值范围（0-255）；
• 直接写颜色的名称；
• 十六进制。如：#9f0000 （最常用）；
• rgba(红，绿，蓝，透明度) 。a的取值范围0-1，0表示完全透明 ，1 表示不透明。
边框相关的属性：
• border-width 边框的宽度
• border-style 边框风格
• border-color 边框颜色
• border：1px solid red； 简写形式
• border-left 左边，border-right 右边，border-bottom 下边，border-top 上边
• border-radius 边框圆角
背景相关的属性：
• background-color 背景颜色
• background-image 背景图片
• background-repeat 是否重复
• background-position 背景位置
字体相关的属性：
• font-size: 80px; /*字体大小*/
• color: red; /*设置字体颜色*/
• font-weight: bold; /*字体加粗*/
• font-family："微软雅黑"，serif; /*定义字体类型*/
四、布局
元素框的最内部分是实际的内容，直接包围内容的是内边距（padding），内边距呈现了元素的背景（background）；内边距的边缘是边框（border）；边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素（其实元素的margin就是其所在父元素的padding）。元素的背景应用于由内容和内边距、边框组成的区域。在CSS中，width 和 height 指的是内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
1、块级元素和行内元素
• 块级元素：div，h1，p，li等。独占一行，可以设置宽高。
• 行内元素：span，i，a，img等。在一行内显示，一般情况不
可以设置宽高。行内元素转换成块级元素：转换以后就可以支持宽高。
2、浮动
• 普通流：不使用定位、浮动等特殊css规则的时候，元素的自然排序规则。
• 浮动：脱离了普通流，元素可以左右移动。作用：做盒子的左右布局。
“float:left;”和“float:right;”
• 浮动带来的问题：有可能会影响到后面元素的布局。解决方案：在浮动过后的元素后面一定要清除浮动：clear:both。
关于html的基础知识就先介绍到这里吧（有不足的地方还请谅解啦~毕竟活到老学到老嘛~）后续会继续更新有关Web项目开发技术的有关知识~