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

html学习笔记二

时间:2016-01-06 21:51:29      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:


html图片标记

<html>
<head>
<title>图片演示</title>
</head>
----------------图片演示---------------<br/>
<body>
<br/><BR/>
<img src = "猪.jpg" width = 170px height = 190px /><!--直接在网页上显示-->
<!--实际上仅仅须要指定宽带就可以。自己主动调整比例-->
<img src = "http://www.baidu.com/img/bdlogo.png" width = 300 border = 1></img><!--粘贴百度的Log图片,前提没防盗-->
<!--border 加边框-->

</body>
</html>

<hr> 是加横线切割

由上:能够说明能够从外部站点得到图片地址


html表格标记


表格的主要用途:

1.显示数据、图片

2.网页布局


基本的语法:

td 表示列。tr表示行

cellspaceing 表示空隙大小,指两个列(行)间的距离

cellpadding  表示填充大小,各行各列中的内容被填充,一定程度上会撑大格子

<html>
<head>
<title>表格演示</title>
</head>
<body>
<table border = 4 cellspacing = 5 bordercolor = "red" align = "center" bgcolor = "blue" width = 500px >
<!--align 布局 center : 居中布局 -->
<!--CSS: cellspacing 空隙大小  bordercolor 线变颜色 -->
<!--cellpadding = "" 填充大小-->
<!--bgcolor 表格背景-->
<!--tr 代表行  td 代表列-->
<tr align = "center"><td>1</td><td>2</td><td>3</td></tr>
<!--tr 里有align 能够放数字居中-->
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</body>
</html>


关于特殊字符。

注意:

要在网页中打印 “<bg>”。由于<>是keyword,所以就须要转义,html中的转义字符是 。&


    c&lt;d d&gt;c   ->    c<dd>c

<font> 你         好</font>:你和好中不管多少空格最后仅仅会显示一个。所以 &nbsp; 表示空格

<font>你&nbsp;&nbsp;&nbsp;&nbsp;好<font>


Table_Demo:


<html>
<head>
<title>菜谱Demo</title>
</head>
<body>
<table border = 1 bordercolor = #F474DA cellspacing = 0 height = 200 align = "center" width = 430px border = 1 >
<tr align = "center"><td colspan = 3>今日菜单</td></tr><!--列合并 一列 = 三列-->
<tr align = "center"><td rowspan = 2>素菜</td><td>黄瓜</td><td>白菜</td></tr><!--行合并-->
<tr align = "center"><td>茄子</td><td>土豆泥</td></tr>
<tr align = "center"><td rowspan = 2>荤菜</td><td>鱼</td><td>肉</td></tr>
<tr align = "center" ><td>蛋</td><td>猪肉<img width = 80px src = "猪.jpg" /></td></tr>
</table>
</body>
</html>

操作思想:

为了操作数据,须要对数据进行不同标签的封装,通过标签的属性值对已封装的数据进行操作。

而标签就相当于一个容器,对容器中数据的操作,就是不断的改变容器的属性值

Dreamweaver是一个html制作的一个好软件


1.演示列表标签:

列表标签:dl

上层项目:dt

下层项目:dd:dd标签,封装的内容会被自己主动缩进,dd有缩进效果

 <dl>
        <dt>游戏名称:</dt>
        <dd>DNF</dd>
        <dd>LOL</dd>
    </dl>>

2.有序和无序的项目列表演示(经常使用)

有序:ol

无序:ul

不管有序和无序。条目的封装用的都是<ls>,且两者都有缩进效果

<body>

   <ul type=""><!--type = "",是样式-->
       <li> 无序项目</li>
       <li> 无序项目</li>
       <li> 无序项目</li>
       <li> 无序项目</li>
       
   </ul>
   <ol type="A"><!--从A開始排列-->
       <li> 有序项目</li>
       <li> 有序项目</li>
       <li> 有序项目</li>
   </ol>
</body>





html学习笔记二

标签:

原文地址:http://www.cnblogs.com/mengfanrong/p/5107373.html

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