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

2015年9月16日html第一节课(初识html、常用html标签、相对路径)

时间:2015-09-17 00:55:04      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:

一、什么是html

     html是一种超文本标记语言。

     主体架构如下:

     <html>

           <head>

                <title>我的第一个html页面</title>

           </head>

          <body>

              hello world!

         </body>

    </html>

注意小点:html默认的编码版本是utf-8。另外一种是gb2312。当有时候我们打开别人的源码发现是乱码的时候,可以看一下编码版本。编码版本不同会造成乱码。

二、常用的标签(记)

1、段落标签 p标签(块级元素)

     <p>这是第一个html页面</p>

2、字体标签<h1>.....<h6>(块级元素)

      <h1></h1>(最大)

      <h2></h2>

      <h3></h3>

      <h4></h4>

      <h5></h5>

      <h6></h6>(最小)

常用于页面布局中标题设置

3、body标签

      常见属性:bgcolor(背景颜色)、 text(字体颜色)、background(背景图片)======一般会在css中设置

4、列表标签(ul/ol)

     无序列表:(常用于导航、菜单、文章列表、产品列表)

     <ul>

         <li>列表1</li> 

         <li>列表2</li> 

         <li>列表3</li> 

    </ul>

<ul>的属性主要有type="disc"  (实心圆 默认)、type="circle"  (空心圆)、type="square"  (方块)。自带属性不常用。常和float搭配。

    有序列表:     

    <ol>

         <li>列表1</li> 

         <li>列表2</li> 

         <li>列表3</li> 

    </ol>

 5、表格(table)(块级元素)

   很少用于整个页面的布局。常用于整齐的数据。显示有规则的几行几列。

<table>
    <tr>
       <th> 姓名 </th>
       <th> 性别 </th>
       <th> 成绩 </th>
    </tr>
    <tr>
       <td> 张三 </td>
       <td> 男 </td>
       <td> 100 </td>
    </tr>
</table>

rowspan:跨行  colspan:跨列

6、其他标签

     换行标签  <br/>

     水平线标签 <hr/>

     空格&nbsp;

     加粗<b></b>

     倾斜<i></i>

     下划线<u></u>

     删除线<s></s>

     p2 p<sub>2</sub>

     p2 p<sup>2</sup>

7、a标签(超链接)

    <a href="http:www.baidu.com">百度</a>  必须加http(超文本传输协议)

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

8、<img />标签

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

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

 

 三、 相对路径   

      ch7_2.html 调用sea.gif

技术分享

课堂总结:

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

其他:常用的块级标签和行级标签

一般的 块级元素诸如段落<p>、标 题<h1><h2>...、列表。<ul><ol><li> 、表格<table>、表单<form>、<div>和<body>等元素。

块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。

行级标签:类似文本的显示方式,按“行”逐一显示,常用的行级标签有:

(1)、图像标签<img>:表示用于在网页中显示图片.
(2)、超链接标签<a>:
(3)、范围标签<span>:表示用于标识行内的某个范围.例如:实现行内某个部分的特殊设置以区分其他内容.
(4)、换行标签<br />:表示强制换行显示.
(5)、输入框标签<input>
(6)、多行文本域标签<textarea>

2015年9月16日html第一节课(初识html、常用html标签、相对路径)

标签:

原文地址:http://www.cnblogs.com/minguofeng/p/4814974.html

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