首頁  >  文章  >  web前端  >  Html一天入门_html/css_WEB-ITnose

Html一天入门_html/css_WEB-ITnose

WBOY
WBOY原創
2016-06-24 11:16:491170瀏覽

一、什么是HTML

1.html:

HyperText Markup Language 超文本标记语言,是最基础的网页语言,而且都是由标签组成。

 

2.基本格式:


  


    放置一些属性信息,辅助信息。
    引入一些外部的文件。(css,javascript)
    它里面的内容会先加载。
  
  
    存放真正的数据。
  

 

3.注意事项
1)多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束。
2)想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择。
3)属性与属性值之间用“=”连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号。或公司规定书写规范。

 

二、常见标签

1.排版标签

1)换行

2)

段落标签 在开始和结束的位置上会留一个空行。

  属性:align= 对齐方式
3)


一条水平线
  属性:
    1)宽度:width 值像素 100px 可以写百分比 30%
    2)align= 对齐方式
    3)size 粗细
    4)color 值 red green blue RGB 三原色 (red green blue #aa55ff)

4)div 声明一块区域
数据
css+div
5)span 声明一块区域

代码:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>排版标签</title> 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6  7   </head> 8    9   <body>10       这是一首古诗。11       <hr width="300px" size="20px;" color="red"/>12       <p align="center">13         静夜思<br/>14        床前明月光,<br/>15        疑是地上霜。<br/>16        举头望明月,<br/>17        低头思故乡。<br/>18        </p>19        一首非常出名的古诗。20        21        <hr/>22        <div>这是div区域1</div>23        <div>这是div区域1</div>24        <span>这是span的区域1</span>25        <span>这是span的区域2</span>26   </body>27 </html>

显示:

 

 

2.字体标签

1)文本内容
  属性:
    1)size 字号的大小 最大值是7 最小值是1
    2)color 颜色
    3)face 字体

2)标题标签
  


  ...
  

    从大到小字体缩小。

3)粗体
4)斜体
    标签支持嵌套

 

代码:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>字体标签</title> 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6  7   </head> 8    9   <body>10       <h2>排版标签</h2>11       <font size="7">文本内容</font><br/>12       <font size="10">文本内容</font><br/>13       14       <hr/>15       16       <h1>这是一级标题</h1>17       <h2>这是二级标题</h2>18       <h3>这是三级标题</h3>19       <h4>这是四级标题</h4>20       <h5>这是五级标题</h5>21       <h6>这是六级标题</h6>22       23       <hr/>24       25       <b><i>这是粗体又是斜体</i></b>26       <I>这是斜体</I>27       28       29   </body>30 </html>

显示:

 

3.列表标签

1)dl 列表标签
  


    
上层项目

    
下层项目
特点:自动对齐,自动缩进。
  


2)有序列表和无序列表
  有序:

        type:列表前序标号
        start:从第几个开始。
      无序:

        数据条目:
  • 数据内容

  •     
  • 用户管理
  •  

    代码:

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>列表标签</title> 5      6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7     <meta http-equiv="description" content="this is my page"> 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9     10 11   </head>12   13   <body>14       <h3>列表标签</h3>15       <dl>16           <dt>上层项目</dt>17           <dd>下层项目</dd>18           <dd>下层项目</dd>19           <dd>下层项目</dd>20       </dl>21       22       <hr/>23       24       <h3>有序列表</h3>25       <ol type="a" start="4">26           <li>有序列表</li>27           <li>有序列表</li>28           <li>有序列表</li>29       </ol>30   31       <h3>无序列表</h3>32       <ul type="square">33           <li>无序列表</li>34           <li>无序列表</li>35           <li>无序列表</li>36       </ul>37       38   </body>39 </html>

    显示:

    4.图片标签

    Html一天入门_html/css_WEB-ITnose
      属性:src="图片的路径"
                width 显示图片的宽度
            height 显示图片的高度
            alt 图片的说明文字/Users/apple/Library/Containers/com.tencent.qq/Data/Library/Application Support/QQ/Users/.png

    代码:

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>图片标签</title> 5      6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7     <meta http-equiv="description" content="this is my page"> 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9     10 11   </head>12   13   <body>14       <h3>图片标签</h3>15       <img src="girl4.jpg"    style="max-width:90%" height="600px" alt="啊,美女!">16       17   </body>18 </html>

    显示:一个美女

     

    5.超链接链接

      
      作用:1)链接资源
            href="" 必须指定 如果href的值不指定,默认是file文件的协议。只有自己指定协议,链接资源。如果href中指定的协议,浏览器不能解析,就会调用应用程序,可以解析的程序就可以打开。
         2)定位资源
            name 名称 专业术语 锚

    代码:

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>超链接标签</title> 5      6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7     <meta http-equiv="description" content="this is my page"> 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9     10 11   </head>12   13   <body>14     <a href="http://www.baidu.com">百度</a><br/>15     <a href="girl4.jpg">啊,美女!</a><br/>16     <a href="mailto:xxx@sina.com">联系我们</a><br/>17     <a href="http://www.xunlei.com/moves/bxjg.rmvb">变形金刚</a><br/>18     <a href="thunder:23cwe2s@32sd==">变形金刚</a><br/>19     20     <hr/>21     22     <a name="top">顶部位置</a>23     <hr/>24     25     50年前,长沙镖子岭。26 27   四个土夫子正蹲在一个土丘上,所有人都不说话,直勾勾地盯着地上那把洛阳铲。28 29 30     <hr/>31     32     <a name="center">中间位置</a>33     <hr/>34 35 36 50年前,长沙镖子岭。37 38   四个土夫子正蹲在一个土丘上,所有人都不说话,直勾勾地盯着地上那把洛阳铲。39 40 <hr/>41     42     <a href="#top">回到顶部</a>43     <a href="#center">回到中间</a>44     <hr/>45     46   </body>47 </html>

    显示:这里可以多搞一些文字

     

    6.表格标签(重点)

    作用:格式化数据

    声明一个表格
      属性:
        1)边框 border
        2)width 宽度
        3)文字与内边框的距离 cellpadding


      属性:
        1)align 对齐方式(文本内容)


      属性:
        1)width
        2)height
        3)colspan 列合并单元格
        4)rowspan 行合并单元格
    会加粗 并且会居中。
    表格的标题
    colspan 合并行, rowspan合并列

    代码:

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>表格标签</title> 5      6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7     <meta http-equiv="description" content="this is my page"> 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9     10 11   </head>12   13   <body>14   <!-- 15       序号 姓名  性别16       1     张三    女17    -->18   19   <table border="1" width="400px" cellpadding="8" cellspacing="1">20       <caption>用户列表</caption>21       <tr>22           <th>序号</th>23           <th>姓名</th>24           <th>性别</th>25       </tr>26       <tr align="center">27           <td>1</td>28           <td>张三</td>29           <td>女</td>30       </tr>31       <tr align="center">32           <td>2</td>33           <td>李四</td>34           <td>男</td>35       </tr>36   </table>37   38   <hr/>39   40   <table border="1" width="400px" cellpadding="8" cellspacing="1">41       <caption>用户列表</caption>42       <tr>43           <th>序号</th>44           <th>姓名</th>45           <th>性别</th>46       </tr>47       <tr align="center">48           <td>1</td>49           <td>张三</td>50           <td>女</td>51       </tr>52       <tr align="center">53           <td>2</td>54           <td>李四</td>55           <td>男</td>56       </tr>57       <tr align="center">58           <td colspan="3">59               人数总计:<font color="red">2人</font>60           </td>61           <!-- <td></td>62           <td></td> -->63       </tr>64   </table>65   66   <hr/>67   68   <table border="1" width="400px" cellpadding="8" cellspacing="1">69       <tr>70           <td rowspan="3">71               <img  src="bx.jpg"    style="max-width:90%" height="200px" alt="Html一天入门_html/css_WEB-ITnose" >72           </td>73           <td>74               商品信息:冰箱75           </td>76       </tr>77       <tr>78           <!-- <td></td> -->79           <td>80               商品价格:299981           </td>82       </tr><tr>83           <!-- <td></td> -->84           <td>85               <img  src="gwc.png" alt="Html一天入门_html/css_WEB-ITnose" >86           </td>87       </tr>88   </table>89   90   91   </body>92 </html>

    显示:

     

    7.表单标签(重点)

    作用:可以和服务器进行交互。
    输入项的内容 用户名 密码


      属性:action="提交的请求位置"
         method 提交方式(get和post) 如果method没有写默认是get方式提交。

          get和post区别:
          1)get方式表单封装的数据直接显示在url上。post方式数据不显示在url上。
          2)get方式安全级别较低,post级别较高。
          3)get方式数据的长度,post支持大数据。


      ** ?sex=on:
      在每个输入的标签中指定name和value name必须指定
      ?username=haha&pwd=1223&sex=nv&jishu=html

     


      属性:type 值可以指定很多的值,每一个不同的值代表的不同输入组件。

      1)type=text 文本框
      2)type=password 密码
      3)type=radio 单选按钮
        name属性
      4)type=checkbox 多选按钮
        单选和多选都有默认值:checked="checked"
      5)type=reset 重置按钮
      6)type=submit 提交按钮
      7)type=file 上传文件的输入项
      8)type=button 按钮
      9)type=image 图片(也是提交按钮,)
      10)type=hidden 隐藏标签(用户不用看到的,但是咱们开发时必须要使用的,可以把数据封装到隐藏标签中,和表单一起提交到后台)。

      选择标签
        选择下拉框
      文本域textarea
        

     

    8.框架标签

      

    框架标签不能写在

    的内部。body不能写在frameset的上面。

    代码:

    left.html:

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>left.html</title> 5      6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7     <meta http-equiv="description" content="this is my page"> 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10   </head>11   12   <body>13       <ul>14           <li><a href="http://www.baidu.com" target="right">百度</a></li>15           <li><a href="http://www.sina.com" target="right">新浪</a></li>16       </ul>17   </body>18 </html>

    right.html:

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>right.html</title> 5      6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7     <meta http-equiv="description" content="this is my page"> 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9     10     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->11 12   </head>13   14   <body>15       <font color="green" size="7">北京欢迎您!!</font>16   17   </body>18 </html>

    top.html:

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>顶部logo</title> 5      6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7     <meta http-equiv="description" content="this is my page"> 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9     10     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->11 12   </head>13   14   <body>15       <img  src="../girl4.jpg"    style="max-width:90%"/ alt="Html一天入门_html/css_WEB-ITnose" >16       17   </body>18 </html>

    09-htmldemo.html:

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>框架标签</title> 5      6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7     <meta http-equiv="description" content="this is my page"> 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9     10     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->11 12   </head>13   14   <frameset rows="160,*">15       <frame src="top.html" name="top">16       <frameset cols="180,*">17           <frame src="left.html" name="left">18           <frame src="right.html" name="right">19       </frameset>20   </frameset>21   22  <body>23       24   </body>25 </html>

     

     显示:注意这里的frameset

     

     代码下载地址:

    https://github.com/BigShow1949/02-HTML-CSS

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn