用HTML制作网站--入门篇

HTML是什么?

HTML是一种超文本的标记语言,常被用于网页设计。
如果想系统学习HTML,推荐w3school的教程: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>
    

lang属性:说明了显示的语言
整体框架由两部分组成,一部分是head,相当于网页的名称、设置等,另一部分是body,包含的内容是网页的具体设计。
title标签:位于head的标签内部,用于显示页面的名称,效果如下

  • 标题

      <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标签:字体加粗

标题效果

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


  • 插入图片

    <img src="guangzhou.jpg" alt="guangzhou"  align="middle">
    

img标签:插入图片的时候使用
src属性: 如果图片和html文件在同一文件夹下时,可以引用图片的名字
alt属性: 相当于图片在html文档中的标记的名字
align属性: 用于决定图片的位置,这里选择了居中

图片效果

  • 插入侧栏

     <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标签: 用于新建侧栏

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

<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网页中,你已经掌握了不少的知识了哦!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,820评论 1 45
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,105评论 0 0
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,262评论 4 61
  • 金鱼的记忆只有七秒 它的爱恨是否更干脆 在爱的开始就结束 在恨的过程就遗忘 幸好它在转身时爱上了那个红尾姑娘 一秒...
    许白下阅读 155评论 0 0