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

HTML

时间:2017-11-06 20:08:45      阅读:331      评论:0      收藏:0      [点我收藏+]

标签:spec   asc   文件的   选择器   nbsp   add   custom   enter   pos   

一、架构简介

   1、软件主要分为两种架构C/SB/S

    C/S——Customer(客户端)/Server(服务器)

    B/S——Browser(浏览器)/Server

    Browser:htmlcssjavaScriptjqueryajax

    Server:javajspservletfilterlistenerspringspring mvcmybatis

   2W3C标准

    网页主要由3部分组成:结构—HTML用于描述页面的结构、表现—CSS控制页面中元素的样式、行为—JavaScript负责页面的行为

二、HTML(Hypertext Markup Language)超文本标记语言

 元素:也称标签

 父元素:(父标签)和子元素直接上下级关系

 祖先元素:包含父元素

 兄弟元素:例如header和body

 子元素:和父标签有直接上下级关系

 后代元素:后代元素包含子元素

 

三、常用标签

 

   1、标题标签

 

   

  <!-- html中的标题标签:h1~h6 -->


    <!-- h标签强调的是重要性 -->


    <h1>这是一级标题</h1>


    <h2>这是二级标题</h2>


    <h3>这是三级标题</h3>


    


    <h4>这是四级标题</h4>


    <h5>这是五级标题</h5>


    <h6>这是六级标题</h6>

 

 

   2、段落标签

  

  <p>

      锄 禾日当午,<br/>

      汗滴禾下土。<br/>

      谁知盘中餐,<br/>

      粒粒皆辛苦。<br/>


    </p>

 

 

 

 

   3、换行标签

 

   

      锄禾日当午,<br/>

      汗滴禾下土。<br/>

      谁知盘中餐,<br/>

      粒粒皆辛苦。<br/>

 

 

   4、特殊符号

 

      空格: &nbsp;

      <:&lt;

 

  5分割线     

 

  

    <hr/>

      我是分割线

    <hr/>

 

 

6、无序列表

 ul:unordered list 无序列表

 

 li:list item 具体表单项

 

   

   <ul>


       <li>张三</li>

       <li>极速</li>

       <li>23</li>

       <li>极其</li>


    </ul>

 

 

7、有序列表

ol:ordered list 有序列表

 

 li:list item 具体表单项

 

  <ol>

       <li>张三</li>


       <li>极速</li>


       <li>23</li>


       <li>极其</li>


    </ol>

8、img标签

  img标签用于加载图片

   alt:表示图片未正常加载的时候需要显示的信息

   src:图片的路径

       相对路径:表示的是相对于当前文件所在目录的路径

       1)和当前文件在同一个目录下

       2)图片据在的目录和当前文件在同一个文件夹

       3)图片所在的目录是当前文件的上一级或上级      e.g  ../img/im.gif或../../img/im.gif

       绝对路径:

          互联网资源:http://

          本地资源:file:///     

9、iframe框架

   

<body>

     这是iframe页面
    <iframe src="img.html" width="300" heigth="500"></iframe>

</body>

8、a标签

a标签中的属性:

href="":代表要跳转的地址

target="",规定在何处打开目标页面

四、表格

   

 <table border="1" align="center" cellspacing="0" width="400" heigth="233">
      <tr>
           <td>姓名</td>

           <td>年龄</td>

           <td>性别</td>

           <td>籍贯</td>

      </tr>
      <tr>
           <td>张三</td>

           <td>32</td>

           <td></td>

           <td>河北</td>

      </tr>
      <tr>
           <td>李三</td>
           <!-- 跨行 -->
           <td rowspan="2" style="color:red;font-    size:30">25</td>
           <td></td>
           <td >重庆</td>
      </tr>
       <tr>
           <td>张三1</td>
           <!-- colspan 跨列 -->
           <td colspan="3">22</td>
      </tr>
    </table>

五、  表单

  

<body>
    <!-- 
    action:表示要跳转到目标地址
    method:指定表单的请求方式
        post:浏览器不会以地址栏的方式传递参数
        get:表单的默认请求方式,如果以get请求提交,表单的参数会在地址栏中传递
     -->
        <form action="2.html" method="get">
            
              用户名:<input type="text" name="username" value="张三"/>
              <br/>&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" name="pwd"/>
             <br> 性别:<input type="radio" name="gender" value="1"/><!-- 单选按钮通过name来区分组 -->
                 <input type="radio" name="gender" value="2"/><br/>爱好:<input type="checkbox" name="hobby" value="1"/>羽毛球
             <input type="checkbox" name="hobby" value="2"/>篮球
             <!-- 对于select 下拉列表而言,name和value是分开的 -->
             <br/>籍贯:
             <select name="address">
                 <option value="1">河北 </option>
                 <option value="2">湖南 </option>
                 <option value="3">山西 </option>
             </select>
             <br/><input type="submit"  value="Submit"/>
        </form>
 </body>

六、CSS

   1、样式表

     1)行内样式表

  id:identifier属性在整个html页面中必须是唯一

 <p id="sss" class="ab">什么颜色?</p>

  2)内部样式表

<style type="text/css">

</style>

    3)外部样式表

 <link rel="stylesheet" type="text/css"href="style.css" />   

2、选择器

<style type="text/css">

      #sss{     <!-- id选择器 -->
         color:red
         backgroud-color:yellow;
       }
       P{          <!-- 标签选择器 -->
          color:red
       }
       .ab{     <!-- 类选择器 -->
         font-size:30px;
       }
 </style>

 <head>

  <style type="">/*一个并集选择器*/

    h1,h2,h3,p{
    font-size:12px;
    color:green;
    }    /*并集选择器内依次有交集选择器(h2.special)、类选择器(special)、ID选择器(#one)*/
    h2.special,.special,#one{
    text-decoration: underline;
    color: red;
    }/*交集选择器*/
    h2.special{
    color:blue;
    font-size: 30px
    }
 </style>
</head>

<body> <h2>示例文字000</h2><!--应用于上方的并集选择器,绿字--> <h2 class="special">这是一段文字</h2><!--应用于下方交集选择器,交集选择器和并集选择器重复定义的内容,以交集选择器为准,下划线,蓝色大字,而不是红色--> <p class="special">这是一段文字</p><!--体现并集选择器中的类选择器,下划线,并集选择器优先级低于类选择器,所以不是绿字,是红字--> <h4 id="one">这是一段文字</h4><!--体现并集选择器中的ID选择器,下划线,红字--> <h4>这是一段文字</h4><
/
body>

 

  

  

 

HTML

标签:spec   asc   文件的   选择器   nbsp   add   custom   enter   pos   

原文地址:http://www.cnblogs.com/bkyy/p/7794751.html

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