成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

01-HTML深入

LoftySoul / 2155人閱讀

摘要：是由行構成行是由單元格構成。單元格跨行單元格可以向下跨越多個行，被占的單元格向右擠。國際貿易是世界經濟增長的重要一環(huán)，美國公開違反世貿規(guī)則，大范圍挑起貿易爭端，勢必破壞全球貿易秩序，危害世界經濟增長。

1.1? 瀏覽器的工作原理

? ? ? ? ?把一些標簽解析成用戶可視化的頁面

1.2 HTML中的標簽與元素

?

? ? ? ? ?在HTML中以開始，以結束，比如等。

?

? ? ? ? ?標簽和其內容統(tǒng)稱為元素，比如：h5

?

? ? ? ? 元素可以有屬性，比如 h5

1.3編碼

數據以什么編碼存入電腦，就必須以什么編碼取出（解碼）。

ASCLL碼

計算機編碼有UTF8、GB2312

1.4? HTML文檔結構


DOCTYPE HTML>

<html>
    
    <head>head>
    
    <body>body>
html>

1.4.1???? Head

head一般用于設置一些信息給瀏覽器解析時使用。一般在head中通過meta標簽來設置這些參數

<head>
        
        <meta charset="utf-8"/>
        
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        
        
        <mata name="keywords" content="博客園">mata>
        <mata name="description" content="米商城直營小米公司旗下所有產品，囊括小米手機系列小米Note 3、小米8、小米MIX 2S，紅米手機系列紅米5 Plus、紅米6 Pro，智能硬件，配件及小米生活周邊，同時提供小米客戶服務及售后支持。">mata>
        
        <title>小米商城title>
    head>

注：快速構建HTML結構的快捷鍵：!+Tab

1.5? ?標簽的分類

1.5.1 快標簽（block tag）

【1】獨占一行

【2】能設置寬高

無語義標簽：沒有特定的用途 => 什么都可以顯示 => 用于包含別的標簽 => 一般用于容器容納別的標簽。

有語義標簽：有特定的用途

1.5.1.1 DIV

div 是無語義標簽，一般用于頁面架構性布局（DIV+CSS）

<div id="top">
        aaaaa
div>

?

1.5.1.2 H1-H6

有語義標簽，專門用于顯示標題的。


        <h1>我是h1標題h1>
        <h2>我是h2標題h2>
        <h3>我是h3標題h3>
        <h4>我是h4標題h4>
        <h5>我是h5標題h5>
        <h6>我是h6標題h6>

1.5.1.3 列表相關

ol/li 表示有序列表（ordered list），有語義標簽。li一定是作為ol的子節(jié)點。

ul/li 表示無序列表（unordered list）有語義標簽，li一定是作為ol的子節(jié)點。







<body>
<ul>
    <li>完美生活li>
    <li>藍蓮花li>
    <li>一起搖擺li>
ul>
body>






<ul>
    <li>li>
ul>




<ul> 

   <li>li> 

   <li>li>

   <li>li> 

ul>







<body>
<ol>
    <li>完美生活li>
    <li>藍蓮花li>
    <li>一起搖擺li>
ol>
body>



dl/dt+dd 表示定義列表，有語義標簽，一般dd可以有多個








<dl>
<dt>列表標題dt>
<dd>列表內容dd>
<dd>列表內容dd>
...
dl>




        
        <dl>
            
            <dt>程序員鼓勵師dt>
            
            <dd>1、長相清新，聲線甜美，微笑常在，人見人愛；dd>
            <dd>2、善于傾聽，善不善溝通不重要，能忍受IT工程師死宅無法交流的性格；dd>
            <dd>3、耍不耍脾氣不重要，要善于發(fā)現每一個程序暖男的天性，成功馴服；dd>
            <dd>4、了解互聯(lián)網，懂科技，不然聊起來云里霧里，工程師會更受打擊。dd>
        dl>



1.5.1.4 Table


table是由行（row）構成、行是由單元格（table-cell）構成。


    

  • …：表格的一行，所以有幾對tr?表格就有幾行。
    • 

  • …：表格的一個單元格，一行中包含幾對…，說明一行中就有幾列。
    • 

  • …：表格的頭部的一個單元格，表格表頭。
    • 

  • 表格中列的個數，取決于一行中數據單元格的個數。
    • 

  • table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的
    • 

  • 表頭，也就是th標簽中的文本默認為粗體并且居中顯示


    



        <table border="1"  >
            <tr>
                <td>aatd>
                <td>bbtd>
                <td>cctd>
            tr>
            <tr>
                <td>aatd>
                <td>bbtd>
                <td>cctd>
            tr>
            <tr>
                <td>aatd>
                <td>bbtd>
                <td>cctd>
            tr>
        table>
        
        
    


    1.5.1.4.1??? 單元格跨列
    

    • 



colspan一個單元格向右占多個列。



<table border="1">
            <tr>
                <td>11td>
                <td colspan="2">22td>
            tr>
            <tr>
                <td>aatd>
                <td>bbtd>
                <td>cctd>
                <td>cctd>
            tr>
        table>



? ? ? ? ? ? 1.5.1.4.1??? 單元格跨行


rowspan單元格可以向下跨越多個行，被占的單元格向右擠。



<table border="1">
            <tr>
                <td>11td>
                <td>22td>
                <td>33td>
            tr>
            <tr>
                <td rowspan="2">aatd>
                <td>bbtd>
                <td>cctd>
            tr>
            <tr>
                
                <td>bbtd>
                <td>cctd>
            tr>
        table>



1.5.1.5 P


標簽表示段落




        <p>十年后的今天，世界經濟復蘇的勢頭遠不如人們期許的那樣強勁，信心的極端重要性并未減弱。然而，正如國際貨幣基金組織總裁拉加德所言，“籠罩世界經濟的烏云正變得越來越重，最大和最重的烏云是信心的惡化”。惡化人們對世界經濟發(fā)展前景信心的源頭來自何方？只要隨手翻一翻各國的報章，讀一讀那些有關美國同貿易伙伴大打貿易戰(zhàn)憂心忡忡的報道，答案再清楚不過地擺在人們面前。p>
        <p>國際貿易是世界經濟增長的重要一環(huán)，美國公開違反世貿規(guī)則，大范圍挑起貿易爭端，勢必破壞全球貿易秩序，危害世界經濟增長。世界銀行上月初發(fā)布報告指出，全球關稅廣泛上升將會給全球貿易帶來重大負面影響，對新興市場和發(fā)展中經濟體的影響尤為明顯，特別是那些與美國貿易或金融市場關聯(lián)度較高的經濟體。權威人士預測，如果關稅回到GATT/WTO（關貿總協(xié)定和世貿組織）之前的水平，世界經濟將立即收縮2.5%，全球貿易量將削減60%以上，負面影響超過2008年國際金融危機。p>
    
        
        <p>
            <div>testdiv>
        p>



1.5.1.6 br


br表示換行，
 我們把這種中間沒有內容的標簽稱為開閉同體標簽。


1.5.2? 行內標簽


【1】? 在一行內顯示


【2】? 不能設置寬高，內容撐開寬高


1.5.2.1 span


span 是無語義行內標簽，一般作為容器使用。



<span style="background: red;height: 100px;">Lorem ipsum dolor sit amet.span>TEST



1.5.2.2? a


a 表示鏈接


1.5.2.2.1? 路徑相關




        <a href="http://www.baidu.com/">百度a>
        
        
        
        <a href="C:UsersAdministratorDesktopindex-gbk.html">index-gbka>
        
        
        
        <a href="./index.html">indexa>
        <a href="index.html">indexa>
        



相對路徑 . 表示當前目錄， .. 返回上一級目錄。鏈接找資源時，一定先從當前目錄開始找，所以當前目錄可以省略。


1.5.2.2.3? ? 錨點


通俗地說，錨點就是指在頁面內做調整



<div id="top">div>
        <div>
            <a href="#early-exp">早年經歷a>
            <a href="#professional-exp">演藝經歷a>
            <a href="#personal-life">個人生活a>
            <a href="#musics">音樂作品a>
        div>
        
        <p id="early-exp">早年經歷Loremp>
        <p id="professional-exp">演藝經歷Lop>
        <p id="personal-life">個人生活Lorem ipsum dolor p>
        <p id="musics">音樂作品Lorem p>
        <div>
            <a href="#top">TOPa>
        div>



1.5.2.3 Img


專門用于顯示圖片。


1.5.2.3.1常用屬性


alt：當圖片加載失敗時的提示文本


title：當鼠標懸停時的提示文本



<img alt="阿黛爾" title="阿黛爾" src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=d6e1fdf69325bc312b5d069e66e4ea8c/6f061d950a7b020880e017d968d9f2d3572cc8d9.jpg" />



1.5.2.4?var/strong/em


var、strong、em 本意表示強調作用，有語義標簽，強調的表現形式不一樣，var/em 斜體強調，strong加粗強調。



<var>我是varvar>  
<strong>我是strongstrong>   
<em>我是emem>   



在實際開發(fā)過程中，一般來說都不用他們的本意，而是把他們降級成一般的無語義行內標簽使用


?
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉載請注明本文地址：http://systransis.cn/yun/2013.html

               

                      
               
              

              

                
相關文章

                
    
                             
                                                                                                    
  • 
                                                
    
                            
                        
      
                                                
    
                          
    01-html介紹和head標簽
    
                                                     
    摘要：三開發(fā)工具的使用使用技巧編輯器四介紹的概述全稱，翻譯為超文本標記語言，它不是一種編程語言，是一種描述性的標記語言，用于描述超文本內容的顯示方式?！巨D】01-html介紹和head標簽主要內容web標準瀏覽器介紹開發(fā)工具介紹HTML介紹HTML顏色介紹HTML規(guī)范HTML結構詳解一、web標準web準備介紹：w3c：萬維網聯(lián)盟組織，用來制定web標準的機構（組織）web標準：制作網頁遵循的規(guī)范...
    
                                                   
                          
    
                                
    
                                    番茄西紅柿
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    01.HTML
    
                                                     
    摘要：向服務器提交表單的通常做法是使用提交按鈕。規(guī)定瀏覽器應該自動完成表單默認開啟。規(guī)定在提交表單時所用的方法默認。規(guī)定識別表單的名稱對于使用。表單元素表單元素是允許用戶在表單中輸入內容比如文本域下拉列表單選框復選框等等。

網頁的組成

結構（HTML）：超文本標記語言
表現(CSS):層疊樣式表
行為(JavaScript):腳本語言

一個良好的網頁要結構、表現、行為三者分離
HTML簡...
    
                                                   
                          
    
                                
    
                                    aboutU
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    01.HTML
    
                                                     
    摘要：向服務器提交表單的通常做法是使用提交按鈕。規(guī)定瀏覽器應該自動完成表單默認開啟。規(guī)定在提交表單時所用的方法默認。規(guī)定識別表單的名稱對于使用。表單元素表單元素是允許用戶在表單中輸入內容比如文本域下拉列表單選框復選框等等。

網頁的組成

結構（HTML）：超文本標記語言
表現(CSS):層疊樣式表
行為(JavaScript):腳本語言

一個良好的網頁要結構、表現、行為三者分離
HTML簡...
    
                                                   
                          
    
                                
    
                                    Soarkey
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    JavaWEB開發(fā)01——HTML
    
                                                     
    摘要：網站信息頁面需求分析我們公司的需要一個對外宣傳的網站介紹介紹公司的主要業(yè)務公司的發(fā)展歷史公司的口號等等信息技術分析概述超文本標記語言超文本比普通文本功能更加強大可以添加各種樣式標記語言通過一組標簽來對內容進行描述關鍵字是由瀏覽器來解釋執(zhí)行靜

1.網站信息頁面
1.1需求分析:
我們公司的需要一個對外宣傳的網站介紹,介紹公司的主要業(yè)務,公司的發(fā)展歷史,公司的口號等等信息
1.2技術分析:...
    
                                                   
                          
    
                                
    
                                    IntMain
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    rem 單位實現頁面自適應布局
    
                                                     
    摘要：單位介紹既然扯到了這個單位，那就有必要先解釋下這個單位具體含義，上的解釋注意圖中的畫線部分，這個單位需要高版本的瀏覽器支持，不過，一般用于移動端布局，所以，基本上無需考慮瀏覽器版本問題，放心用吧。相對于根元素的大小，自動計算出其具體值。

 A. 先看一個函數：
/*
 * 設置根元素字體大小
 * @param Number minSW 最小縮放的設備屏幕寬度
 * @param Nu...
    
                                                   
                          
    
                                
    
                                    xavier
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           

              
 
                

                    
                    
LoftySoul

                    
男|高級講師

                    
                    

                          
TA的文章

                          閱讀更多
                    

                      
                


                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    














<