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

html基础

时间:2016-04-24 21:43:04      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:

什么是HTML

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,它规定了自己的语法规则,用来表示比“文本”更丰富的意义,比如图片,表格,链接等。浏览器(IE,FireFox等)软件知道HTML语言的语法,可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。

所有的HTML文档都应该有一个<html>标签,<html>标签可以包含两个部分:<head>和<body>。

html>
  <head>
    <title>第一个Html文档</title>
  </head>
  <body>
 内容
  </body>
</html>
 

改变字体,字号,文字颜色。

<font size="6">6</font>
<font size="4">4</font>
<font color="red" size="5">红色的5</font>
<font face="黑体">黑体的字</font>

加粗,下划线,斜体字也是常用的文字效果,它们分别用<b>,<u>,<i>表示:

<b>Bold</b>
<i>italic</i>
<u>underline</u>  
 
用来表示标题的标签有:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,它们分别表示一级标题,二级标题,三级标题...
 

<hr>标签用于在页面上添加横线。可以通过指定width和color属性来控制横线的长度和颜色。

<hr width="90%" color="red" /> 
 

<img>标签用于在页面上添加图片,src属性指定图片的地址,如果无法打开src指定的图片,浏览器通常会在页面上需要显示图片的地方显示alt属性定义的文本。

<img src="" /> 
 

超级链接用<a>标签表示,href属性指定了链接到的地址。<a>标签可以包含文本,也可以包含图片。

<a href="http://deerchao.net">链接1</a>
<a href="http://validator.w3.org"><img src="图片地址" /></a> 
 

由于HTML文档会忽略空白符,所以要想保证正常的分段换行的话,必须指出哪些文字是属于同一段落的,这就用到了标签<p>。

<p>这是第一段。</p>
<p>这是第二段。</p> 
 

有时,要把文档看作不同的部分组合起来的,比如一个典型的页面可能包括三个部分:页头,主体,页脚。<div>标签专门用于标明不同的部分:

<div>页头内容</div>
<div>主体内容</div>
<div>页脚内容</div>  
 

<table>标签里通常会包含几个<tr>标签,<tr>代表表格里的一行。<tr>标签又会包含<td>标签,每个<td>代表一个单元格。

<table>
  <tr>
    <td>2000</td><td>悉尼</td>
  </tr>
  <tr>
    <td>2004</td><td>雅典</td>
  </tr>
  <tr>
    <td>2008</td><td>北京</td>
  </tr>
</table> 
 

<th>和<td>非常相似,也用在<tr>里边,不同的是<th>代表这个单元格是它所在的行或列的标题。

<table>
  <thead>
    <tr><th>时间</th><th>地点</th></tr>
  </thead>
  <tbody>
    <tr><td>2000</td><td>悉尼</td></tr>
    <tr><td>2004</td><td>雅典</td></tr>
    <tr><td>2000</td><td>北京</td></tr>
  </tbody>
</table> 
 

列表

表格用于表示二维数据(行,列),一维数据则用列表表示。列表可以分为无序列表(<ul>),有序列表(<ol>)和定义列表(<dl>)。前两种列表更常见一些,都用<li>标签包含列表项目。

无序列表表示一系列类似的项目,它们之间没有先后顺序。

<ul>
  <li>苹果</li>
  <li>桔子</li>
  <li>桃</li>
</ul>

有序列表中各个项目间的顺序是很重要的,浏览器通常会自动给它们产生编号。

<ol>
  <li>打开冰箱门</li>
  <li>把大象赶进去</li>
  <li>关上冰箱门</li>
</ol>

html基础

标签:

原文地址:http://www.cnblogs.com/gjkbendan/p/5428137.html

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