Beginning HTML5 and CSS3 讀後感1

時間 2019-12-06

標籤 beginning html5 html css3 css 讀後感欄目 HTML5 简体版

原文原文鏈接

Beginning HTML5 and CSS3javascript

正兒八經想作點網站，哪怕是不成體系的，至少在作iOS /Android作兩個後臺返回測試得能作吧，部署明後年的跳槽計劃，得一步步來，急不得。css

我一項認爲，iOS／Android都屬於前臺的範疇，和網頁前臺沒多少差別，只是基於平臺，要比兼容各類瀏覽器的版本簡單些而已，額外擴展一些平臺關聯性。如今跨平臺開發也漸漸興盛，主要是如今HTML5/css/javascript能讓顯示效果各類酷炫。加之iOS7的JavaScriptCore.framework，Android的V8/JavaScriptCore, 對JavaScript的支持都是各類好，因此我認爲，跨平臺方案在以後的簡單商業應用中可行性卻是有的，聽說，咱們公司在今年會部署兩個跨平臺項目。因此html5這一套東西，如今得開始好好學習練習。html

寫到這裏，我想到了cocos2dx－javascript,這個應該是引擎綁定的，具體的引擎就須要去參考源碼了。html5

廢話很少說，仍是來看看這兩天HTML5看了些什麼玩意。java

HTML5核心就是增長了語義，semantic這個詞常常出現，有個例子我記憶深入，<small>表達的意思，是it’s a small print. 不是display in a small size.這就是語義和描述的區別，我認爲也是HTML5 和 css的區別。ajax

基於語義，咱們也就知道爲何HTML5爲何會定義<section>,<nav>,<article>等等，其實這些用<div>就能夠所有搞定。就好像我大學時候那時候用table,<frame>來劃分空間弱爆了，好了，如今HTML5用單詞來表示大概的語義，具體的佈局就放給了css，好吧，我影響那時候都沒聽過css/javascript,那時候ajax仍是很高級的，看了本書，感受雲裏霧裏的。瀏覽器

簡單的描述一些書中涉及到的tag:app

Structural building blocks:<div>,<section>, and <article>ide

<div>: It’s a flow content with no additional semantic meaning.svn

<section>: a generic document or application section. it’s a chunk of related contents.

<article>: An independent section of a document or site.

how to decide which to use:

1. Would the enclosed content make sense on its own in a feed reader? If so, use <article>.

2. Is the enclosed content related? If so, use <section>.

3. If there’s no semantic relationship, use <div>.

Headings: <header>, <hgroup>, and <h1>-<h6>, plus <footer>

<header>: used for introductory and navigational content of a sectioning element.

<footer>: used for additional information about the content.

<hgroup>: A specialized form of <header> the can contain only <h1>-<h6> elements.

<h1>-<h6>:

<nav>: A section of navigational links,either to other pages (generally site navigation) or sections on the same page (such as a table of contents for long article).

<aside>: A section of a page that consists of content that is tangentially related to —but separate from — the surrounding content.

<figure>: For content that is essential to understanding but can be removed from the document’s flow (moved to a different place) without affecting the document’s meaning.

Choose between <aside> or <figure> by asking yourself if the content is essential to the section’s understanding. If the content is just related and not essential, use <aside>. If the content is essential but its position in the flow of content isn’t important (could it be moved to an appendix?), use <figure>.

一個例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Article (HTML5)</title>
</head>
<body>
<header id="branding">
<h1>Site name</h1>

</header>
<nav>
<ul><li>Main navigation</li></ul>
</nav>
<div id="content"> 
<article> 
<header>
<h1>Article title</h1>
<p>Article metadata</p>
</header>
<p>Article content...</p>
<footer>Article footer</footer>
</article>
<aside id="sidebar"> 
<h3>Sidebar title</h3> 
<p>Sidebar content</p>
</aside>
</div>
<footer id="footer">Footer</footer> 
</body>
</html>