码迷,mamicode.com
首页 > Web开发 > 详细

HTML基础教程 一

时间:2014-05-19 17:19:19      阅读:356      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   c   java   

  HTML是HyperText Markup Language(超文本标记语言)的简写,超文本的意思是带有链接的文本,标记语言(markup language),是一种将文本以及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码。

一. HTML文件:

  a.<!DOCTYPE html>总是在第一行,这样其他人就知道他在读的是说明语言

  b.<html>总是在第二行,这是HTML文件的开始

  c.</html>总是在最后一行,这是HTML文件的结束

  d.<>包起来的东西称为标签,标签总是成对出现,一个表示开始,一个表示结束

bubuko.com,布布扣
<!DOCTYPE html>
<html>
</html>
bubuko.com,布布扣

二. head 和 body

  和人一样,HTML文件也包含连个部分,头(head)和身体(body), head包含关于HTML文件的信息,例如标题,body则是网页的主体.

bubuko.com,布布扣
<!DOCTYPE html>
<html>
    <head>
        <title>My Webpage</title>
    </head>
    
    <body>
    </body>
</html>
bubuko.com,布布扣

三. 标题和段落

  标题的标签是<h1></h1>,从h1一直到h6,表示不同的大小,<p></p>是段落的标签.

 四. 超链接

  1.首先,在开始<a>标签里添加链接,<a href="URL">

  2.开始标签之后添加描述性文字,点击描述性文字就能跳转到你的链接网站.

  3.写上闭标签</a>

例如这里是一个指向腾讯首页的链接:
bubuko.com,布布扣
<a href="http://www.qq.com">腾讯网首页</a>
bubuko.com,布布扣

 

五. 插入图片

我们使用这样一个图片标签:<img>,这个标签和其他标签有一些不一样,我们在标签里为src添加指向图片的URL,还有一点不同的是它没有闭标签,而是用/表示结束,一个图片标签是这样的:
bubuko.com,布布扣
<img src="url" />
bubuko.com,布布扣

 

六. 在图片上添加链接:

  简单点说,就是将普通链接里的描述性文字换成图片,一般形式:

bubuko.com,布布扣
<a href="url"> <img src="url" /> </a>
bubuko.com,布布扣

 

7.有序列(ordered lists)

  1.有序列的标签是<ol></ol>

  2.在上面的便签内用<li></li>表示一个条目,开闭之间是你的内容

  3.他们将按1. 2. 3. .. 的形式列出

bubuko.com,布布扣
<ol>
    <li></li>
    <li></li>
</ol>
bubuko.com,布布扣

 

8.无序列

  标签是<ul></ul>,它的显示形式是点而不是数字,其他和有序列一样.

bubuko.com,布布扣
<ul>
   <li></li>
  <li></li>
</ul>
bubuko.com,布布扣

 

 九. 注释   

  注释以<!--开始,以-->结束,例:

bubuko.com,布布扣
<!-- This is an example of a comment! -->
bubuko.com,布布扣

 

十. 文本大小

  现在我们来改变文本大小,怎么做呢?我们用styles属性,让它等于font-size(字体尺寸),紧接着是一个冒号,后面是你想要的大小,以px(pixels(像素)的缩写)结束.

例如,我们指定一个段落的字体为12px,我们可以对开始标签<p>做一下改动:

bubuko.com,布布扣
<p style="font-size: 12px">
bubuko.com,布布扣

 

十一: 文本颜色

  改变文本颜色,只要在style里添加color属性就型,例如我们指定一个h2的标题为红色:

bubuko.com,布布扣
<h2 style="color:red">
bubuko.com,布布扣

  如果想同时改变文本尺寸与颜色,我们可以这样做:

bubuko.com,布布扣
<h2 style="color: green; font-size:12px">
bubuko.com,布布扣

 

 十一. 字体家族

  我们已经知道怎么改变文本颜色与尺寸,那么怎么改变字体呢?我们可以使用font-family属性:

bubuko.com,布布扣
<h1 style="font-family: Arial">Title</h1>
bubuko.com,布布扣

Arial是一种字体样式,更多的大家可以自己去查.

  我们可以对其他标签做同样的事情,例如对一个list:

bubuko.com,布布扣
<li style="font-family: Arial">Hello!</li>
bubuko.com,布布扣

 

十二. 背景颜色

  我们可以通过style的background-color属性指定背景颜色,例如我们指定一个段落的背景颜色:

bubuko.com,布布扣
<p style="background-color: red;"></p>
bubuko.com,布布扣

 

十三. 排版

  通过修改style的text-align属性可以对文本进行排版:靠左(left),居中(center),靠右(right),例如我们让一个标题居中:

bubuko.com,布布扣
<h1 style="text-align:center">
bubuko.com,布布扣

 

十四. 粗体与斜体

  将文本置于<strong></strong>标签中可以对文本进行加粗.

    将文本置于<em></em>标签中可以产生斜体效果.

HTML基础教程 一,布布扣,bubuko.com

HTML基础教程 一

标签:style   blog   class   code   c   java   

原文地址:http://www.cnblogs.com/ezhengnan/p/3734764.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!