web网页搭建:HTML与CSS(一)

  • 什么是html和css?

html(hypertext markup language),即为超文本标记语言。将html文件放在web服务器上,任何浏览器就可以通过互联网得到你的web界面了。首先html是一种markup language,通过标记的方式,它可以告诉浏览器文本的结构是怎样的。css是一种样式框架。html绘制出网页的主要结构,而css则可以给html的结构提供不同的显示样式,让网页变的更加丰富多彩。

  • 如何创建html文件并通过浏览器浏览?

在window系统下,最简单的方式便是创建一个记事本,并更改其后缀txt为html即可。之后就可以在里面写代码了。浏览html文件,只需将它拖拽到浏览器中便可以查看它的样式了。

  • 最简单的html文件

最简单的html文件由head和body两部分组成。简单的html文件中,style可放在head中,style的类型这里采用css框架。复杂的style设置可以另设一个html文件。在body中即可写自己的网页了。body由许多元素构成,元素又可设置不同的属性。在html文件中会自动忽略回车,空格等。

下面在代码中介绍常用的元素:

注释: 6级标题h1-h6:

标题

(h==head) 段落:

段落

(p==pragraph) 超链接(本页打开): 内容(..为上一级文件夹 href==hyper reference,title为提示符) 超链接(新页打开): 内容(增加target="_black"属性在新标签页打开,inf.html#pi可定位到id为pi的元素位置) 强调:内容 图片:(src==source) 列表行:
  • 内容
  • (li==list items,li与ol或ul嵌套使用) 无序列表:
      ...
    (ul==unorder list) 有序列表:
      ...
    (ol==order list) 换行:.....
    短句引用:....引用内容(q==quote) 块引用:
    引用内容
    代码:代码 原样显示:
    内容

    示例代码




    my first html



    nankai university

    person info

    hello,my name is huzhiwei , i'm from nankai university,this is my first html!

    my favorite color:

    1. red
    2. blue
    3. orange

    the cities i have visited:

    • tianjin
    • beijin
    • qingdao

    demo

    test for first time!Here is my favorite quote:Do not wish for an easy life. Wish for the strength to endure a difficult one.just for it!

    Do not wish for an easy life.
    Wish for the strength to endure a difficult one.

    my first code:

    hello world!



    显示结果如下:


    web网页搭建:HTML与CSS(一)_第1张图片
    res.png

    你可能感兴趣的:(web网页搭建:HTML与CSS(一))