2015-09-16 第一节课 html的认识、html常用标签、相对路径

一、什么是html?

HTML是一种超文本标记语言.

语法：

<!DOCTYPE html> （表示申明）
<html>
　<herd>
　　<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
　　<title>标题</title>
　</herd>
<body>
　　写主体内容
</body>
</html>

注意小点：在html中分有国际编码（utf-8）和国内编码（gb2312），当我们打开网页出现是乱码的时候，可以看一下编码版本，然后进行修改！编码版本不同会直接造成乱码。

二、常用的标签：

1、段落标签 p标签（块级元素）

　 <p>我是一个兵</p>

2、水平线标签：<hr />

　　<hr size="10px" width="400px" align="center" color="red" />

（属性：size：水平线的粗细（以px为单位）； width：宽度； align：对齐方式（右：left、左：right、居中：center）； color ：颜色

3、换行标签：<br/>

4、空格：&nbsp;

5、标题文字标签：<h1>.....<h6>（块级元素）

      <h1></h1>(最大)

      <h2></h2>

      <h3></h3>

      <h4></h4>

      <h5></h5>

      <h6></h6>（最小）

注意小点：通常用于页面布局中标题设置。

文字样式：<b></b>:粗体； <i></i>:斜体； <u></u>:下划线； <s></s>:删除线； <sup></sup>:文字上标； <sub></sub>:文字下标

6、body标签：

　常用的属性：背景颜色：（bgcolor）、背景图片：（background）、文字颜色：（text）

三、列表标签：（ul/ol）

　（1）无序列表：(常用于导航、菜单、文章列表、产品列表)

标签 效果

<ul>
　　<li>项目1</li>
　　<li>项目2</li>
　　<li>项目3</li>
</ul>
    　　
  • 项目1
    • 　　
  • 项目2
    • 　　
  • 项目3
<ul>的属性：type="circle"（空心圆） type="disc"（实心圆默认)、 type="square"（方块）常和float搭配。 去掉前面符号的方法：list-style-type:none;

 

 

 



　

 

 

（2）有序列表：

标签 效果

<ol>
　<li>编号</li>
　<li>编号</li>
　<li>编号</li>
</ol>
    　
  1. 编号
    2. 　
  2. 编号
    3. 　
  3. 编号
<ol>的属性：type="1" 或A 或a或I 或i   设置编号的开始序号：Start="n"(只能是数字)

 

 

 

 

 

 

 

（3）列表嵌套的正确写法：

标签 效果
<ul>
　　<li>选项1</li>
　　<li>选项2
         <ol>
　　       <li>选项2-1</li>
　　       <li>选项2-2</li>
         </ol>
   </li>
</ul>
    　　
  • 选项1
    • 　　
  • 选项2
      　　
    1. 选项2-1
      2. 　　
    2. 选项2-2
注意：当“选项2”内部有嵌套表格时，它后面的</li>并不是直接写在“选项2”后面，而是写在它内部嵌套表格的后面.

 

 

 

 

 

 

 

 

 

 

 四、表格（table）（块级元素）

1、基本结构:

  <table>...</table>：定义表格；
  <caption>...</caption>：表格标题；
  <tr>...</tr>：定义表行；
  <th>...</th>定义表头；
  <td>...</td>:定义表元。

2、语法结构：

<table>
　<caption>表格标题<caption>
　　<tr>
　　　　<th> 姓名 </th>
　　　　<th> 性别 </th>
　　　　<th> 成绩 </th>
　 </tr>
　　<tr>
　　　　<td> 张三 </td>
　　　　<td> 男 </td>
　　　　<td> 100 </td>
　　</tr>
</table>
3、表格属性：
（1）表格布局：常用于整齐的数据，显示有规则的几行几列　　
（2）表格属性：宽：width 、高：height、边框：border、内边框宽度：cellspacing、文字到边框距离：cellpadding、
　　　　　　　 边框颜色：bordercolor、背景色：bgcolor、水平位置：align　　
（3）行列属性：高：height； 框颜色：bordercolor； 背景色：bgcolor； 水平对齐：align； 垂直对齐：valign
（4）跨行跨列：跨行：rowspan 跨列：colspan
（5）表格标题：<caption align=top或bottom>，位于表格上方或下方.

【举例如下】：

<table align="center" bgcolor="#e0e0e0" border="1px">
　<caption>表格例子</caption>
　　　<tr>
　　　　    <th>姓名</th>
　　　    　<th>性别</th>
　　　　    <th>年龄</th>
　　　</tr>
　　　<tr>
　　　 　<td>张三</td>
　　　　    <td>男</td>
　　　　    <td>25</td>
　　 </tr>
　　　<tr>
　　　　    <td>李四</td>
　　　　    <td>女</td>　
　　　　<td>22</td>
　　 </tr>
</table>
表格例子：
姓名性别年龄
张三 男 25
李四 女 22

1、表格标题

表格标题的位置，可由align属性来设置，其位置分别是表格上方和表格下方。设置格式如下：
<caption align="top">标题位于表格上方</caption>
<caption align="bottom">标题位于表格下方</caption>

2、尺寸设置

一般情况下，表格的总高度和总宽度是根据各行和各列的总和自动调整的。如果我们要直接固定表格的大小，可以使用下列方式：
<table width="n1" heiht="n2">
widht和height属性是指表格的宽度和高度，n1和n2可以用像素来表示，也可以用百分比来表示。

3、边框设置

表格边框是用<table border="n">属性来体现的，它表示表格边框的边的厚度和框线。将border设成不同的值，有不同的效果。
border="0"为无边框（缺省值）；n越大，边框越厚。

4、表元间隙

表元间隙表现为格线与格线之间的宽度，可以使用<table cellspacing="n">属性加以设置。n表示像素值。

5、表元空白

表元空白表现为内容与格线之间的宽度，可以使用<table cellpadding="n">属性加以设置。n表示像素值。

6、文字对齐/布局

表格内的数据排列方式有两种，左右排列和上下排列。
左右排列以align属性来设置，上下排列由valign属性来设置。
左右排列的位置可分为三种：居左（left)、居右(right)和居中(center)；
上下排列比较常用的有四种：上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。

7、跨多行/多列表元

要创建跨多行、多列的表格，只需在<th>或<td>中加入rowspan或colspan属性，这两个属性的值，表明了表元中要跨越的行或列的个数。

【举例1如下】：

<table align="center" bgcolor="#e0e0e0" cellspacing="0" celladding="0" border=”1px">
　　　　<tr>
　 　　　　　<th colspan="3">值班人员</th>
　　　　</tr>
　　　　<tr>
　　　　　　<th>星期一</th>
　　　　　　<th>星期二</th>
　　　　　　<th>星期三</th>
　　　</tr>
　　　<tr>
　　　　　　<td>张三</td>
　　　　　　<td>李四</td>
　　　　　　<td>王五</td>
　　　</tr>
</table>
值班人员
星期一星期二星期三
张三 李四 王五

【举例2如下】：

<table align=“center” bgcolor=“000” cellspacing=“0” celladding=“0” border="1">
　　<tr>
　　　　<th rowspan=2>值班人员</th>
　　　　<th>星期一</th>
　　　　<th>星期二</th>
　　　　<th>星期三</th>
　　</tr>
　　<tr>
　　　　<td>张三</td>
　　　　<td>李四</td>
　　　　<td>王五</td>
　 </tr>
</table>
值班人员星期一星期二星期三
张三 李四 王五

8、颜色设置

在表格中，既可以对整个表格填入底色，也可以对任何表行、任何表头、任何表元使用背景颜色或背景图像。
背景颜色使用bgcolor=#属性设置；
背景图像使用background="URL"属性设置；
表格边框颜色使用<table bordercolor=#>属性设置。

四、a标签（超链接）

　1、超链接标记：<a href="超链接地址">文字或图片</a>

　　2、图片超链接：<a hrer="http:\\www.baidu.com"><img src="aaa.jpg"></a>

　　3、html 空链接 href="#"与href="javascript:;"的区别，前面其实跳转，后面不跳转，用户体验更好点。

　　4、空链接与其它各类链接的区别：　

　　　　　href="JavaScript:;" 同 href="javascript:void(0);" ，空链接，点击不会有任何跳转

　　　　　href="#"　　　　　　同#top，点击回到顶部，页面不刷新

　　　　　href=" "　　　　　　 点击后刷新并回到顶部

　　　　　href="/"　　　　　　点击跳转到上一级目录

　5、链接打开窗口：  _blank 在新窗口打开）、_parent（在父级窗口打开）、_self （在当前窗口打开）、_top（返回信息显示在顶级浏览器窗口中）

五、<img />标签：

　图片标记：<img src="图片路径" alt="图片描述" title="图片标题" width="" height="" />

　　这里alt属性常用于图片打不开的时候文本替代。title属性用于鼠标滑停时候显示。图片加alt属性也利于网页优化，通常加关键词。

　　图片属性：高度：height； 宽度：width； 边框宽度：border； 优先读低分辨率图：lowsrc； 文字标注：alt

六、绝对路径&相对路径：

　　绝对路径： http://www.cnblogs.com/ 或 D:\360Downloads

　　相对路径:   ../../a/b.jpg

　　

课堂总结：

 虽然有些html有自己的属性，去设置该标签的外观，但是实际开发中，不会用它自己的属性去做外观处理，而是用css.

posted @ 2015-09-17 01:08  75-逢场作戏  阅读(234)  评论(0)  编辑  收藏  举报