HTML入門

時間 2019-11-19

標籤 html 入門欄目 HTML 简体版

原文原文鏈接

簡介

Html是一門超文本標記語言,主要用於編寫靜態網頁.
本文是Html知識點彙總以及一些概念的詳解和區分,做爲初學者讀起來可能有點空洞,建議您先前往http://www.w3school.com.cn/html/index.asp學習相關基礎知識再回頭看本文.若是你已掌握了Html必備知識那本文將會帶您快速回顧聯想一遍知識點並解決一些您可能遇到過卻不曾解決的疑惑.

Html思惟導圖

思惟導圖能輔助您快速聯想回憶一些知識點,並對知識點的有一個總體上的架構

1. block,inline,inline-block的區別

block:block元素會獨佔一行，多個block元素會各自新起一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
<style type="text/css">
    .div1{
        background: pink;
    }
    .div2{
        background: red;
    }
    .div3{
        background: skyblue;
    }
</style>
<div class="div1" width="200px",height="100px">div1</div>
<div class="div2" width="100px",height="200px">div2</div>
<div class="div3" width="400px",height="50px">div3</div>
</body>
</html>

inline:inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化,inline元素設置width,height屬性無效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
<style type="text/css">
    .span1{
        background: pink;
        width:200px;
        height:100px;
    }
    .span2{
        background: red;
        width: 100px;
        height: 200px;        
    }
    .span3{
        background: skyblue;
        width: 400px;
        height: 50px;        
    }
</style>
<span class="span1">span1</span>
<span class="span2">span2</span>
<span class="span3">span3</span>
</body>
</html>

inline-block:簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現,好比咱們想要多個元素擁有不一樣的寬高而又排列在同一行內

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
<style type="text/css">
    .div1{
        background: pink;
        display: inline-block;
        width:200px;
        height:100px;
    }
    .div2{
        background: red;
        display: inline-block;
        width: 100px;
        height: 200px;
    }
    .div3{
        background: skyblue;
        display: inline-block;
        width: 400px;
        height: 50px;
    }
</style>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>

2. href與src的區別

href:用於指定超連接目標的 URL
src:規定外部資源,腳本文件的 URL
簡而言之就是href用於跳轉到指定頁面的屬性,href的對象必須是一個完整的html,css,js..文件;src則是加載資源或腳本的連接,如.jpg .mp4

//含href屬性的標籤
<a href="http://www.cnblogs.com/Lazy-Cat/">Lazy.Cat</a>

//含src屬性的標籤
<img src=""https://i.loli.net/2018/10/04/5bb5e3f117562.jpg">
<html src=""></html>
<style src=""></style>
<script src=""></script>
<input type="image" src=""></input>
...

3. rel與type的區別

rel:指外鏈文件與本頁面的關係
type:指外鏈文件的文件類型
建議寫法是捨棄rel屬性,直接用type屬性也能達到外鏈文件的效果

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

4. Html與Html5的佈局格式

html5增長了不少語義化標籤,所以在佈局上更具備語義化

// Html4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
  body {font-family:Verdana,sans-serif;font-size:0.8em;}
  div#header,div#footer,div#content,div#post 
  {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  div#content {background-color:#ddd;}
  div#menu ul {margin:0;padding:0;}
  div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>

<div id="header">
  <h1>Monday Times</h1>
</div>

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>

<div id="content">
<h2>News Section</h2>

<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

</div>

<div id="footer">
  <p>&copy; 2014 Monday Times. All rights reserved.</p>
</div>

</body>
</html>

css樣式
div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}



/******************我是分割線*************************/
//Html5

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
</style>
<body>

<header>
  <h1>Monday Times</h1>
</header>

<nav>
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</nav>

<section>
<h2>News Section</h2>

<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

<div id="post">
<h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

</section>

<footer>
  <p>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>

</body>
</html>

//css樣式
header,footer,section,article {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul  {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}

5. form表單提交數據

在form標籤中添加action(提交的地址)和method(post),且有一個submit按鈕（"input type=’submit’"）就能夠進行數據的提交，每個input標籤都須要有一個name屬性，才能進行提交
當點擊登錄時，向服務端發生的數據是：username=username&password=password.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <link type="text/css" href="style.css">
</head>
<body>
<form action="www.baidu.com" method="get" name="form1">
    <input type="text" name="username"/>
    <input type="password" name="password"/>
    <input type="submit"/>
</form>
</body>
</html>

6. Html標籤瀏覽器兼容性

關於格式化的標籤在Html5中不予支持,平時編寫頁面也不建議使用格式化標籤,更好的方式是將它寫在CSS樣式裏,視頻播放有"video","embed","object"標籤,而它們各自的瀏覽器兼容性以及支持的格式都有所差別,因此兼容性最好的寫法以下

// 視頻
// ie之外的瀏覽器解析是事件捕獲的形式,即從外層到內層的執行.因
此首先執行video的每種資源格式,失敗再執行object,仍是失敗最後再
執行embed.這種寫法對於未知格式的視頻播放頗有用

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

//音頻
<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

7. Html5瀏覽器支持

當下幾乎全部主流瀏覽器都支持Html5。此外，全部瀏覽器，不論新舊，都會自動把未識別元素當作行內元素來處理,對於老式瀏覽器咱們能夠添加以下處理

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

Internet Explorer 8 以及更早的版本，不容許對未知元素添加樣式.不過Sjoerd Visscher 創造了 "HTML5 Enabling JavaScript", "the shiv",在代碼中添加下面這段註釋便可

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

8. 關於事件的回調函數

每個事件在某種操做完成後後當即調用的一個函數,而函數須要咱們用js等腳本語言語法來寫這裏很少說

<button onclick="copyText()">Copy Text</button>

1. html入門，css入門
2. 001-html入門
3. HTML+CSS入門
4. HTML，CSS入門
5. HTML入門
6. Html入門
7. HTML入門（一）
8. HTML入門篇
9. HTML CSS入門
10. [HTML]第一節HTML入門
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

HTML入門

簡介

Html是一門超文本標記語言,主要用於編寫靜態網頁.

Html思惟導圖

思惟導圖能輔助您快速聯想回憶一些知識點,並對知識點的有一個總體上的架構

1. block,inline,inline-block的區別

block:block元素會獨佔一行，多個block元素會各自新起一行

inline:inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化,inline元素設置width,height屬性無效

inline-block:簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現,好比咱們想要多個元素擁有不一樣的寬高而又排列在同一行內

2. href與src的區別

href:用於指定超連接目標的 URL

src:規定外部資源,腳本文件的 URL

簡而言之就是href用於跳轉到指定頁面的屬性,href的對象必須是一個完整的html,css,js..文件;src則是加載資源或腳本的連接,如.jpg .mp4

3. rel與type的區別

rel:指外鏈文件與本頁面的關係

type:指外鏈文件的文件類型

建議寫法是捨棄rel屬性,直接用type屬性也能達到外鏈文件的效果

4. Html與Html5的佈局格式

html5增長了不少語義化標籤,所以在佈局上更具備語義化

5. form表單提交數據

在form標籤中添加action(提交的地址)和method(post),且有一個submit按鈕（"input type=’submit’"）就能夠進行數據的提交，每個input標籤都須要有一個name屬性，才能進行提交

當點擊登錄時，向服務端發生的數據是：username=username&password=password.

6. Html標籤瀏覽器兼容性

關於格式化的標籤在Html5中不予支持,平時編寫頁面也不建議使用格式化標籤,更好的方式是將它寫在CSS樣式裏,視頻播放有"video","embed","object"標籤,而它們各自的瀏覽器兼容性以及支持的格式都有所差別,因此兼容性最好的寫法以下

7. Html5瀏覽器支持

當下幾乎全部主流瀏覽器都支持Html5。此外，全部瀏覽器，不論新舊，都會自動把未識別元素當作行內元素來處理,對於老式瀏覽器咱們能夠添加以下處理

Internet Explorer 8 以及更早的版本，不容許對未知元素添加樣式.不過Sjoerd Visscher 創造了 "HTML5 Enabling JavaScript", "the shiv",在代碼中添加下面這段註釋便可

8. 關於事件的回調函數

每個事件在某種操做完成後後當即調用的一個函數,而函數須要咱們用js等腳本語言語法來寫這裏很少說