国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從0開始接觸html--第一天學習內容總結

changfeng1050 / 506人閱讀

摘要：第一天總結段落有序無序定義列表塊級元素獨占一行，行內元素共占一行和和和塊級分區元素行內分區元素特殊字符空格小于號大于號圖片圖片不能正常顯示的時候顯示此內容路徑鼠標懸停時顯示的內容圖片地圖細節文本標簽內容標題標

第一天

總結:

  1. h1-h6 p 段落 hr br
  2. 有序 ol li 無序 ul li 定義列表 dl dt dd
  3. 塊級元素：獨占一行，h1-h6 p hr div
  4. 行內元素：共占一行, em和i strong和b u del和s span
  5. 塊級分區元素：div header nav article footer
  6. 行內分區元素：span
  7. 特殊字符： 空格：  ? 小于號:? >
  8. 圖片 圖片不能正常顯示的時候顯示此內容
  9. 圖片地圖

細節:

文本標簽:

  1. h1-h6 內容標題標簽，內容獨占一行 屬性：align=left/right/center
  2. p 段落標簽 內容獨占一行
  3. hr 水平分割線
  4. br 換行

代碼實現:


DOCTYPE html>
<html>
    <head>
        
        <meta charset="UTF-8">
        
        <title>文本標簽title>
    head>
    <body>
        <h1 align="center">我是老大h1>
        <h2 align="right">我是老二h2>
        <h3>我是老三h3>
        <h4>我是老四h4>
        <h5>我是老五h5>
        <h6>我是老六h6>
        <hr>
        <p>我是段落標簽1p>
        <p>我是段落標簽2p>
        <p>我是段落標簽3p>
        開始學習HTML了<br>你開心嗎?
    body>
html>

?

?

?

列表標簽:

  1. ul 無序列表?子標簽
  3. ol 有序列表? 屬性:type=1/a/A/i/I? reverserd="reverserd"? start="10"?子標簽
  5. dl?定義列表?子標簽:
    ? ?
  6. 有序列表和無序列表之間可以相互嵌套

代碼實現:

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表標簽title>
head>
<body>
    <h3>無序列表:h3>
    <ul type="square">
        <li>劉備li>
        <li>貂蟬li>
        <li>項羽li>
        <li>狄仁杰li>
        <li>呂布li>
    ul>
    <h3>有序列表:h3>
    把大象關進冰箱需要幾步?
    <ol reversed="reversed" start="10">
        <li>打開冰箱門li>
        <li>把大象裝進冰箱li>
        <li>關上冰箱門li>
    ol>
    
    <h3>定義列表h3>
    <dl>
        <dt>涼菜dt>
        <dd>大拌菜dd>
        <dd>花毛一體dd>
        <dd>拍黃瓜dd>
        <dt>炒菜dt>
        <dd>宮保雞丁dd>
        <dd>木須肉dd>
        <dd>小炒肉dd>
    dl>
    
    <h3>列表嵌套:h3>
    <ol>
        <li>ol1li>
        <li>ol2
        
            <ul>
                <li>第二層1li>
                <li>第二層2li>
                
                    <ol>
                        <li>第三層1li>
                        <li>第三層2li>
                        <li>第三層3li>
                    ol>
                <li>第二層3li>
            ul>
        li>
        <li>ol3li>
    ol>
body>
html>

?

?

?

特殊字符:

  1. 空格: 
  3. >? ? ?:>

代碼實現:

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>特殊字符title>
head>
<body>
我愛     學習<br>
<我愛學習>
body>
html>

?

?

分區標簽:

  1. 分區標簽自身沒有顯示效果，可以充當容器的作用，用于包含多個功能相關元素，可以進行元素的整體控制。

  2. div：塊級分區元素，獨占一行

  3. span：行內分區元素，和其它行內元素共占一行

  4. 開發頁面時通常會分為三大區

    頭部

    體部

    腳部

  5. H5標準中新增的分區標簽 作用和div一樣 但是更直觀

　　　　頭部

　　　　導航

　　　　文章，正文腳部

代碼實現:

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>塊級元素和行內元素title>
head>
<body>
<h3>分區標簽h3>
    <div>div1div>
    <div>div2div>
    <div>div3div>
    <span>span1span>
    <span>span2span>
    <span>span3span>
    <h3>H5新增分區標簽h3>
    <header>頭部區域header>
    <nav>導航區域nav>
    <article>正文區域article>
    <footer>腳步區域footer>
body>
html>

?

?

?

圖片img:

  • 路徑分為兩種：

  1. 相對路徑： 訪問站內資源使用相對路徑 a.圖片和頁面同一目錄，直接寫圖片名稱 b.圖片在頁面的上級目錄, ../圖片名 c.圖片在頁面的下級目錄, 文件夾名/圖片名

  2. 絕對路徑： 訪問其它網站的資源使用絕對路徑，以http開頭，存在風險，如果目標圖片路徑發生改變則不能顯示

  • 常用屬性：

  1. alt: 當圖片不能正常顯示的時候顯示此內容

  2. title： 當鼠標在圖片上懸停的時候顯示此內容

  3. width/height: 設置圖片的寬度和高度，可以設置像素px或百分比%，如果只設置寬度則高度等比例縮放

  • 支持的圖片格式： jpg/jpeg不支持透明色 png支持透明色 GIF動圖

代碼實現

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>


 
 
 
<img alt="這是一個美女" src="a.jpg">
<img alt="這是一片風景" title="這是標題" width="50%"  src="../water.jpg">
<img alt="這是一只老虎" width="50%" src="abc/tiger.jpg">
<img src="https://goss.veer.com/creative/vcg/veer/800water/veer-152360031.jpg">
body>
html>

?

?

圖片地圖:

  • 常用屬性：
  1. shape： 形狀，常用rect矩形 和 circle圓形
  2. coords：坐標 矩形四個值(x1,y1,x2,y2) 圓形三個值(x,y,半徑)
  3. href: 值為路徑，可以寫相對路徑和絕對路徑，路徑可以指向頁面，也可以指向文件，如果瀏覽器支持打開此格式的文件則直接瀏覽（圖片，pdf等）如果不支持打開則下載此文件

代碼實現:

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<img src="a.jpg" width="500px" usemap="#mymap">

<map name="mymap" id="mymap">

<area alt="文字介紹" shape="rect" coords="0,0,100,100" href="demo06.html">
<area alt="文字介紹" shape="circle" coords="200,200,100" href="../water.jpg">
map>
body>
html>

?

?

?

回顧練習:

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>回顧總結練習title>
head>
<body>
    <h1>這是h1h1>
    <h2>這是h2h2>
    <h3>這是h3h3>
    <h4>這是h4h4>
    <h5>這是h5h5>
    <h6>這是h6h6>
    <hr>    
    <p>段落標簽1p>
    <p>段落標簽2p>
    <p>段落標簽3p>
    測試換行<br>測試換行    
    <h3>無序列表h3>
    <ul type="circle">
        <li>吃飯li>
        <li>睡覺li>
        <li>敲代碼li>
    ul>
    <h3>有序列表h3>
    <ol type="1" start="8" reversed="reversed">
        <li>HTMLli>
        <li>CSSli>
        <li>JavaScriptli>
        <li>JQueryli>
    ol>
    <h3>定義列表h3>
    <dl>
        <dt>歌星dt>
        <dd>周杰倫dd>
        <dd>劉德華dd>
        <dd>張學友dd>
        <dt>影星dt>
        <dd>周星馳dd>
        <dd>成龍dd>
        <dd>李連杰dd>
    dl>
    <h3>列表嵌套h3>
    <ul>
        <li>我的訂單li>
        <ul>
            <li>全部訂單li>
            <li>待付款li>
            <li>待收貨li>
            <li>待評價li>
            <li>退貨退款li>
        ul>
        <li>我的優惠券li>
        <li>收貨地址li>
        <ul>
            <li>地址管理li>
        ul>
        <li>賬號管理li>
        <ul>
            <li>我的信息li>
            <li>安全管理li>
        ul>
    ul>
    <h3>分區標簽h3>
    <div>div1div>
    <div>div2div>
    <div>div3div>
    <span>span1span>
    <span>span2span>
    <span>span3span>
    <h3>H5新增分區標簽h3>
    <header>頭部區域header>
    <nav>導航區域nav>
    <article>正文區域article>
    <footer>腳步區域footer>
    <h3>塊級元素h3>
    div,h1-h6,p,hr
    <h3>行內元素h3>
    span,<em>斜體em> <i>斜體i>
    <strong>加粗strong> <b>加粗b>
    <u>下劃線u>
    <del>刪除線del> <s>刪除線s><br>
    <h3>圖片標簽h3>
    <img alt="這是圖片" title="圖片" width="50%" src="../water.jpg" usemap="#mymap">
    <h3>圖片地圖h3>
    <map name="mymap" id="mymap">
        <area shape="rect" coords="0,0,100,100" href="http://www.baidu.com">
        <area shape="circle" coords="150,50,50" href="http://www.baidu.com">
    map>
    
body>
html>

?

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1884.html

相關文章

  • 技術甜品店 - 收藏集 - 掘金

    摘要：前端切圖神器前端掘金安裝前端的基礎工作就是把設計師的設計稿還原成前端頁面，所以切圖是作為一個前端的基本技能。 騰訊 Web 工程師的前端書單 - 閱讀 - 掘金作者：link 2014年一月以來，自己接觸web前端開發已經兩年多了，記錄一下自己前端學習路上看過的，以及道聽途說的一些書，基本上按照由淺入深來介紹。 JavaScript 入門 《JavaScript權威指南（第六版）》 ★...

    Gilbertat 評論0 收藏0

  • SegmentFault 技術周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

    摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了，總結過去的 2017，相信小伙們一定有很多收獲...

    caspar 評論0 收藏0

  • SegmentFault 技術周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

    摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了，總結過去的 2017，相信小伙們一定有很多收獲...

    nihao 評論0 收藏0

  • SegmentFault 技術周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

    摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了，總結過去的 2017，相信小伙們一定有很多收獲...

    Drummor 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<