HTML从入门到精通-基础篇

天开始小编将会给大家讲解HTML的入门知识以及做项目会遇到的某些问题以及如何解决此类问题的方法。说道网页设计，HTML是我们必不可少的一部分。基础网页的构成，无论怎么变幻，都是由原声的HTML代码组成构成网页。

下面我就根据工作中所用和看过的书籍一点一点总结下我们常用的HTML格式和代码。

一、什么是HTML。

HTM不是一段编程语言，而是一款标记语言，本身不能显示在浏览器中。经过浏览器的编释和编译，才能正确反映HTML标记语言的内容。HTML从1.0到5.0经历了巨大的变化，从单一的文本显示功能到多功能互动，已经成为了一款非常成熟的标记语言。

二、HTML文件的基本结构

<!doctype html>

<html>文件开始标记

<head>文件头开始的标记

</head>文件头结束

<body>文件主题的内容

</body>文件主题的结束

</html>文件结束的标记

这里主要说明title和meta(元信息)

三、HTML主要常用标签

3.1标题

3.2 标题字对齐属性align

默认情况下，标题文字是左对齐的。在网页制作过程中，常常需要选择对其他的方式，这时我们就需要用到align属性。

3.3 段落标记p

段落标记是文档中最常见的标记，<p>用来起始的一个段落。

3.3 换行标记

换行标记<br>作用是在不另起一段的情况下将当前文本强制换行。

3.4 不换行标记nobr

<nobor>表示的是不换行的标记</nobor>

3.5 水平线

<hr/>

四、建立超链接

与自身网站页面有关的连接被称为内部连接

4.1绝对路径

绝对路径是包括服务器规范在内的完全路径。绝对路径不管源文件在什么位置都可以非常精确地找到，除非是目标文档的位置发生变化，否则连接不会失效。

4.2相对路径

为了避免绝对路径的缺陷，对于在同一站点之中的连接来说，使用相对路径是一个很好的方法。

4.3 内部连接

属性值

含义

-self在当前页面中打开连接

-blank在一个全新的空白窗口中打开连接

-top在顶层框架中打开连接，也可以理解为在根框架中打开连接

-parent在当前框架的上一层里打开连接

4.4 锚点连接

锚点到本页面中的位置

<a neme="2">XX产品特点</a>

锚点到其他页面的位置

<a href="index.html#1"></a>对应连接到index.html中name=1的位置

4.5 连接到外部网站

在设置友情链接时，需要打开HTTP协议进行外部连接访问。

4.6 连接到E-mail

4.7 连接到FTP

FTP代表文件传输协议，一个FTP站点通常包含一些上传和下载文件的文件目录。

大部分FTP网站需要使用用户名和密码来登录。

当然还有其他的一些连接方式，例如文件下载，连接到Telnet等。这些都会可以用a标签实现。

HTML基础就先讲到这里，后面退出DIV设计网页格式已经网页分框的实现。

入门到精通：掌握 CSS 的全程指南

Cascading Style Sheets（层叠样式表），简称 CSS，是前端开发中不可或缺的一部分。它为网页提供了美观和一致的外观，同时也为用户提供了更好的用户体验。本文将引导你从 CSS 的基础入门到精通，帮助你成为一名优秀的前端开发者。

CSS 基础入门

什么是 CSS？

天小编为大家介绍五种css样式布局以及内服源代码作为介绍，采用的方式是行内级样式（就是将css样式代码与html写在一起）

已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。

一、浮动布局

<!DOCTYPE html>

<html>

<head>

.wrap1 div{

min-height: 200px;

}

.wrap1 .left{

float: left;

width: 300px;

background: red;

}

.wrap1 .right{

float: right;

width: 300px;

background: blue;

}

.wrap1 .center{

background: pink;

}

</style>

</head>

<body>

浮动布局

</div>

</body>

</html>

浮动布局的兼容性比较好，但是浮动带来的影响比较多，页面宽度不够的时候会影响布局。

二、绝对定位布局

<!DOCTYPE html>

<html>

<head>

<title>绝对定位布局</title>

.wrap2 div{

position: absolute;

min-height: 200px;

}

.wrap2 .left{

left: 0;

width: 300px;

background: red;

}

.wrap2 .right{

right: 0;

width: 300px;

background: blue;

}

.wrap2 .center{

left: 300px;

right: 300px;

background: pink;

}

</style>

</head>

<body>

绝对定位布局

</div>

</div>

</body>

</html>

绝对定位布局快捷，但是有效性比较差，因为脱离了文档流。

三、flex布局

<!DOCTYPE html>

<html>

<head>

<title>flex布局</title>

.wrap3{

display: flex;

min-height: 200px;

}

.wrap3 .left{

flex-basis: 300px;

background: red;

}

.wrap3 .right{

flex-basis: 300px;

background: blue;

}

.wrap3 .center{

flex: 1;

background: pink;

}

</style>

</head>

<body>

flex布局

</div>

</div>

</body>

</html>

自适应好，高度能够自动撑开

四、table-cell表格布局

<!DOCTYPE html>

<html>

<head>

<title>table-cell表格布局</title>

.wrap4{

display: table;

width: 100%;

height: 200px;

}

.wrap4>div{

display: table-cell;

}

.wrap4 .left{

width: 300px;

background: red;

}

.wrap4 .right{

width: 300px;

background: blue;

}

.wrap4 .center{

background: pink;

}

</style>

</head>

<body>

表格布局

</div>

</div>

</body>

</html>

兼容性好，但是有时候不能固定高度，因为会被内容撑高。

五、网格布局

<!DOCTYPE html>

<html>

<head>

.wrap5{

display: grid;

width: 100%;

grid-template-rows: 200px;

grid-template-columns: 300px auto 300px;

}

.wrap5 .left{

background: red;

}

.wrap5 .right{

background: blue;

}

.wrap5 .center{

background: pink;

}

</style>

</head>

<body>

网格布局

</div>

</div>

</body>

</html>

希望大家可以一直关注我，支持我！感谢！！！

在线咨询

上一篇：24-跨平台导PDF，结合wkhtmltopdf很顺手
下一篇：纯css3画太极

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML从入门到精通-基础篇

入门到精通：掌握 CSS 的全程指南

CSS 基础入门

您的项目需求