html以及css的部分相关内容及运用
主要還是對這幾天學的內容進行一個總結，html和css的部分概念以及運用。
1.html以及css的概念：前者是超文本標識語言，解析渲染瀏覽器，后者是定義文檔樣式，重疊樣式表。其中html5的文本元素有?em、i、q、strong、a、p、cite、blockquote等；結構元素有aside、section、div、article 、header、footer等。
2.選擇器的分類：（1）基本選擇器包括元素選擇器、類選擇器、通配符選擇器、并集選擇器；（2）層次選擇器包括子級選擇器、后代選擇器、兄弟選擇器、通用選擇器；（3）偽類選擇器包括動態選擇器、語言偽類選擇器、結果偽類選擇器、否定偽類選擇器；（4）偽元素選擇器。
3.css劃分區域的知識點：盒模型的分為塊盒和行盒，產生什么樣類型的盒子取決于它的display屬性，取值有none、inline(指定元素為行級元素)、block（指定元素為塊級元素）。
4.運用實例：實現頁面的塊挨著擺放，其中html代碼為
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>F47</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/new.css">
</head>
<body class="bodyclass" >
<!--導航欄-->
<header class="bodyheader">
<nav>
<a href="#" class="aclass" >首頁</a>          
<a href="#" class="aclass">易牛課堂</a>         
<a href="#" class="aclass">易牛班級</a>         
<a href="#" class="aclass">易牛咨詢</a>         
<a href="#" class="aclass">課題小組</a>
</nav>
</header>
<div class="articelclass">
<article >
<h1>Web前端--HTML5基礎知識</h1>
<p>瀏覽：316 評論：10 贊：101</p>
<hr>
<h2>HTML5發展簡述</h2>
<p>HTML發展已久，而HTML5則是在這期間通過人們不斷改進HTML而來的。在1991年世界上第一個網頁誕生以來，HTML就是網站開發中最主要的語言之一，并且一直在不斷發展與進化。而現在，美觀、高速、多平臺，這些詞已經密切地和HTML5聯系起來。在HTML5的幫助下，傳統的網頁，已經帶給人們堪比桌面程序的用戶體驗。2012年12月 17日，W3C 發布了HTML5以及 Canvas 2D 兩個標準的完全定義版本，標志著 HTML5 的標準已經在趨向穩定。隨著移動互聯網的高速發展，HTML5也將迎來前所未有的發展機會。越來越多的人涌入HTML5學習浪潮中。</p>
<hr>
<h2>HTML5新性能</h2>
<p>HTML5 提供了有效的數據管理、繪圖、視頻和音頻工具。它簡化了面向 Web 和便攜式設備的跨瀏覽器應用程序的開發。HTML5是推動移動云計算服務的技術之一，因為它可以實現更高程度的靈活性，可以開發出激動人心的交互式網站。它還引入了新的標記和增強，包括一個優雅的結構、表單控件、API、多媒體、數據庫支持，并極大地加快了處理速度。</p>
<p>Html5的優點即是“一次性開發，多次分發”，使得一次設計適應不同終端成為可能。信息流架構應用化都是直接在WEB(或wap)端抓取數據，html5可以直接使用跨平臺數據面不使用后臺API，大大降低研發維護成本而且呈現的效果幾乎沒有什么區別。Html5最大的意義在于改變WEB文檔的結構方式，借助于header,foot,section,article，這些標配、標簽我們可以實現更具結構化語義化的WEB文檔，這樣，搜索引擎更容易索引到WEB站點，我們可以搜索到更快更準備的信息。</p>
<p>HTML5不僅僅局限于HTML語言本身，還包括了CSS3以及JavaScript語言里新增的函數和功能。HTML5能始終堅持不斷發展，并很快得到廣泛認可，與其在制定之初就確立的核心理念有很大的關系。這些核心理念就是我們今天在W3C站點上所看到的HTML5設計原理這份文檔，概括起來就是——兼容性、實用性、互操作性以及普遍可訪問性。</p>
<hr>
<h2 >HTML5兩大特點</h2>
<p>HTML5有兩大特點：</p>
<p>首先，<strong>它強化了Web網頁的表現性能。</strong></p>
<p>其次，<strong>追加了本地數據庫等 Web 應用的功能。</strong></p>
<p>在語義上，HTML5賦予網頁更好的意義和結構。更加豐富的標簽將隨著對RDFa的，微數據與微格式等方面的支持，構建對程序、對用戶都更有價值的數據驅動的Web。而本地存儲特性使基于HTML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度。這些全得益于HTML5 APP Cache，以及本地存儲功能。</p>
<p>總的來說HTML5實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。雖然HTML5有CSS、JavaScript技術，但還是要單獨提出CSS3和JS來進行學習更好。如今HTML5是IT行業網站開發不可或缺的技術，也是web前端開發必備技能之一，是很值得大家學習的。</p>
</article>
<footer>文章來源：<strong>易牛云課堂</strong>
<p>原文鏈接：<a href="#">http://www.16ketang.com/article/12</a></p>
</footer>
<!-- 側邊欄-->
<section class="section" >
<h3>相關資訊</h3>
<hr>
<P><a href="#">JS模塊簡史</a></P>
<p><a href="#">設計師應該知道的簡約設計</a></p>
<p><a href="#">React進階 第一部分</a></p>
<p><a href="#">React進階 第二部分</a></p>
<p><a href="#">React進階 第三部分</a></p>
</section>
<section class="section" >
<h3>熱門資訊</h3>
<hr>
<P><a href="#">JS模塊簡史</a></P>
<p><a href="#">設計師應該知道的簡約設計</a></p>
<p><a href="#">React進階 第一部分</a></p>
<p><a href="#">React進階 第一部分</a></p>
<p><a href="#">React進階 第一部分</a></p>
</section>
</div>
<footer class="footerclass">Powered by EduSoho v8.0.23 ©2014-2017 好知網 課程存檔 <br>
課程內容版權均歸 易牛云課堂 所有 蜀ICP備16007351號</footer>
</body>
</html>
css代碼為
.bodyheader{
color: #616161;
width: 100%;
height: 80px;
text-align: center;
font-size: 20px;
line-height: 70px;
}
.bodyclass{background-color: #f5f8fa;
color: #616161;}
.aclass{color: #c1c1c1;}
.footerclass{background-color: #212121;
color: #616161;
width: 100%;
height: 160px;
text-align: center;}
a:link{color: #616161}
a:visited{color:yellow; }
a:hover{color: blue;}
a:active{color: darkorchid;}
.articelclass{ width: 70%;}
.section{width:40%;
color: red;}
.section{color: inherit;}
div>article{background-color: antiquewhite;}
body footer{background-color: #c1c1c1;}
body section{background-color: aquamarine;}
section+section{background-color: darkkhaki;}
h1,h2{color: darkred;}
nav>a:first-child{color: cornsilk;}
nav>a:nth-child(2){color: greenyellow;}
nav>a:nth-child(3){color: lavenderblush;}
nav>a:last-child{color: salmon;}
這樣就可以實現內容在頁面中的顯示，但是因為還沒有學習方框布局，所以還不能進行方框的正確擺放順序。
轉載于:https://www.cnblogs.com/yan0850475050/p/8481632.html
總結
以上是生活随笔為你收集整理的html以及css的部分相关内容及运用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 三问JavaBean
- 下一篇： jquery的html代码中a的oncl