欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML >

如果想系统学习HTML,推荐w3school的教程:html教程

这里会手把手教大家制作一个简单的页面。

用HTML制作网站--入门篇

 

网页示例

开始制作

认识HTML框架

  • 基础框架
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head ></head>
 <title>Introduction of Georgia Lin</title>
 </head>
 <body></body>
用HTML制作网站--入门篇

 

lang属性:说明了显示的语言

整体框架由两部分组成,一部分是head,相当于网页的名称、设置等,另一部分是body,包含的内容是网页的具体设计。

title标签:位于head的标签内部,用于显示页面的名称,效果如下

用HTML制作网站--入门篇

 

  • 标题
 <h1>这里是标题</h1>

直接在标签里面写上我们需要的标题,如果需要标题显示我们需要的花样,可以在标签内加上属性

 <h1 style="font-family:Broadway;text-align:center;background-color:cadetblue"><bold>Introduction of Georgia Lin</bold></h1>

style属性:规定样式

font-family: 字体,这里我选择了可爱的Broadway字体

text-align:字体的位置,这里我选择了居中

background-color:这里可以选择背景颜色,我选择了一个较浅的蓝色

bold标签:字体加粗

用HTML制作网站--入门篇

 

标题效果

改变标题的类型和样式,我们可以得到一下的标题:

用HTML制作网站--入门篇

 

  • 插入图片
<img src="guangzhou.jpg" alt="guangzhou" align="middle">

img标签:插入图片的时候使用

src属性: 如果图片和html文件在同一文件夹下时,可以引用图片的名字

alt属性: 相当于图片在html文档中的标记的名字

align属性: 用于决定图片的位置,这里选择了居中

用HTML制作网站--入门篇

 

用HTML制作网站--入门篇

 

图片效果

  • 插入侧栏
 <aside style="background-color:aliceblue">Guangzhou , also known as Canton,
 is the capital and most populous city of the province of Guangdong in southern China.</aside>

aside标签: 用于新建侧栏

用HTML制作网站--入门篇

 

当然也可以添加属性让侧栏靠右

<aside style="background-color:darksalmon;float:right">From Georgia: 
 <br/>GZ is the city that I love most, for I was born and raised here!</aside>

flaot: 选择了right之后,可以让侧栏靠右

br:换行符,可以控制文字的断行

用HTML制作网站--入门篇

 

到此为止, 如果可以将简单的元素添加到你的html网页中,你已经掌握了不少的知识了哦!

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h59559.shtml

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-08-14 17:37 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。