如何制作漂亮的网页

4 篇文章 0 订阅

如何制作漂亮的网页-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可以混合成任何颜色。

在这里插入图片描述

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值