如何制作漂亮的网页-html基础1
新手上阵**大神勿喷**
一.工欲善其事,必先利其器。拥有好的开发工具,是一个必要的选择;要开发出好看又实用的网页就离不开HTML。
以下是两个实用的开发工具下载链接:
1.sublimetext 下载链接:
sublimetext链接****懒人必备
sublime 需要在packgecontrol中下载相应插件。
2.idea 下载链接
直接创建好项目后,在index.jsp项目中编写代码。
IntelilJ idea 链接***常用(个人推荐)
二.首先我们来认识一下HTML
1.1 HTML概述
HTML称为“超文本”(Hyper Text Markup Language)标记语言,是一种标识性的语言。它包括一系列标签。通过这些标签可以将网络上的文档格式统一,使分散的[Internet]资源连接为一个逻辑整体。HTML文本是由HTML标签组成的描述性文本,HTML标签可包括[文字]、[图形]、[动画]、[声音]、[表格]、[链接]等。
1.2 HTML网页模板
我们所创建的每一张页面都会包含DTD、html、head、title、meta和body元素。常见的HTML模板如下:
html元素
html指明该文档是HTML格式。元素告诉浏览器怎么解释这个文档。
title元素
title它配置了在浏览器窗口标题栏里显示的文本。称为网页标题。
meta元素
meta描述网页的特征,例如字符集等;charset="UTF-8"。
body元素
body主体标签,包含的文本元素直接显示在浏览器的网页上。
三.废话不多说动手操作
代码1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一张网页</title>
</head>
<body>
<h1>我的第一张网页 1</h1>
<h2>我的第一张网页 2</h2>
<h3>我的第一张网页 3</h3>
<h4>我的第一张网页 4</h4>
<h5>我的第一张网页 5</h5>
<h6>我的第一张网页 6</h6>
</body>
</html>
h1/h2/h3/h4/h5/h6是标题元素
网页显示如下图
运行html后可以看到如上图所示,a,b,c,d,e,f,g
a.指html里的title元素。
b,c,d,e,f,g,分别是一级标题,二级标题…,五级标题,六级标题
代码2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一张网页</title>
<style>
body{background-color:yellow; }
</style>
</head>
<body>
<h1>我的第一张网页 1</h1>
<h2>我的第一张网页 2</h2>
<h3>我的第一张网页 3</h3>
<h4>我的第一张网页 4</h4>
<h5>我的第一张网页 5</h5>
<h6>我的第一张网页 6</h6>
</body>
</html>
style元素,在html里很重要,可以设置body里的各种属性,如颜色,表格样式,字体大小,风格等等。
body{background-color:yellow; }
备注:为body设置背景颜色为黄色。此处的yellow也可以设置为#ffff00。
因为三原色red(红)–>#ff0000、green(绿)–>#00ff00、blue(蓝)–>#0000ff可以混合成任何颜色。