HTML と CSS のクイック スタート 01 - 基本概念_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:15:13
オリジナル
1256 人が閲覧しました

Web フロントエンド テクノロジは常に私の弱点であり、単純なスタイルを調整するのに多くの時間を費やすことがよくあります。最近、フロントエンド部分の開発をしていたので、この部分の知識を体系的に補おうと思いました。内容は比較的単純で、工具のマニュアルを勉強するのとよく似ていますが、目的は熟練して使いこなすことです。

Html (ハイパーテキスト マークアップ言語): 1990 年にティム バーナーズ リー卿によって設計され、インターネットでのテキスト送信の標準形式になったと言えます。インターネット業界 私たちにとって、これが仕事の基本です、ふふ。

基本的なドキュメント形式、次の例を参照してください:

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>cheer up, xionger</title> 6 </head> 7 <body> 8 <p>first course</p> 9 <br/>10 <h1>hello</h1>11 <hr/>12 <h1>world</h1>13 </body>14 </html>
ログイン後にコピー

一般的な HTML タグ

段落を

内で使用します。 改行と水平タブレベル 1,2 ヘッダー ページまたはエリアの上部 地域の脚注 ページまたはサイト全体のナビゲーションリンクコンテンツのテーマグループ ヒント: Web コンテンツを確認してください (http://validator.w3.org/)。時間があるときは、[ソースの表示] を使用して一般的な Web サイトのソース コードを表示し、どこから学ぶ価値があるかを確認できます。 : カスケード スタイル シートは、フォント、色、位置などのスタイル構造を定義する言語であり、Web ページ上で情報をフォーマットおよび表示する方法を説明します。これに含まれるスタイル ルールは、テキストの段落やリンクなど、Web ページの要素に適用できる書式設定の指示です。
タグ要素 解釈
HTML ドキュメント全体を閉じる
... HTML ドキュメントのヘッドを閉じるには、< 内で
を使用します。 ;html> タグ ... タグ内で使用します
..< /body> 閉じた HTML ドキュメントの本文。段落間の行をスキップするには、


および

..

.< /h2>

..
..
& & Lt; 記事 & gt;
& & < ; 余談 & gt; .. & lt;/余談 & gt;
CSS (カスケード スタイル シート)

基本的な外部スタイルシート

、簡単な例は次のようになります:

 1 first02.css 2 body{ 3 font-size: 10pt; 4 font-family: Verdana, Geneva, Arial, Helvetica,sans-serif; 5 color:black; 6 line-height: 14pt; 7 padding-left: 5pt; 8 padding-right: 5pt; 9 padding-top: 5pt;10 }11  12 h1{13 font:14pt Verdana, Geneva, Arial, Helvetica,sans-serif;14 font-weight: bold;15 line-height: 20pt;16 }17 18 p.subheader{19 font-weight: bold;20 color: #593d87;21 }22 23 img{24 padding:3pt;25 float:right;26 }27 28 a{29 text-decoration:none;30 }31 32 a:link, a:visited{33 color:#8094d6;34 }35 36 a:hover,a:active{37 color: #FF9933;38 }39 40 footer{41 font-size: 9pt;42 font-style: italic;43 line-height: 12pt;44 text-align: center;45 padding-top: 30pt;46 }47 48 first01.html49 <!DOCTYPE html>50 <html>51 <head>52 <meta charset="utf-8">53 <title>About Xionger</title>54 <link rel="stylesheet" type="text/css" href="first02.css">55 </head>56 <body>57 <section>58 <header>59 <h1>About Xionger</h1>60 </header>61 <p>62 <img src="python.jpg" alt="Xionger logo" /> 伐木工光头强在森林中伐木赚钱。为了保卫丛林,熊兄弟一起反抗,无数次打败了光头强。上演了搞笑的丛林保卫战。 后来光头强变成猎人,由于对外面世界的好奇,熊大和熊二翻山越岭,走出丛林,来到城镇动物马戏团,光头强仍不屈不挠地与他们作对。后来又因臭豆腐阴差阳错返回丛林。由于怜悯光头强,经历一次次困难后,送光头强回家过年。 熊二[1] 是比较懒惰,贪吃的狗熊,但不失可爱。他很懒,比较笨,一般是熊大想出来的决策,虽然他的体型很胖胜于熊大,但力气超大,熊大无法抵挡。他还非常善良,心很软,也会为光头强感到可怜(在熊出没之过年中,正是他带头帮助了光头强,如果不是他,那等到猴年马月光头强都回不了家了)。63 </p>64 <p class="subheader">Xionger History</p>65 <p>熊二一般情况下呆呆傻傻,憨态可掬,但是非常善良,特别是那婉转的腔调。他非常可爱,力大无穷,但是太过肥胖,每当去光头强家被光头强发现后,熊大和蹦蹦都会很轻松地从窗户逃出,而熊二的屁股肯定都会卡在那里。 熊二是一头憨厚可爱、力大无穷、有勇无谋的雄性狗熊,但又十分鲁莽,有时熊大不在,小动物们落难,熊二都会挺身而出,运用力量打败光头强。熊二喜欢母熊翠花,常常为了讨好翠花与熊大大打出手;在讨好翠花这一方面,熊二略逊于熊大。熊二老实又听话,但是笨笨的,也非常可爱,贪吃。可是由于熊二有时太过鲁莽,或者熊二做出些蠢事,总被他那聪明的老哥熊大责备甚至教训,熊二对此也只能老实地听着挨着。动物们几乎都是依靠熊大的计谋、熊二的力量才打败光头强的。而且在光头强家中搞恶作剧,偷吃光头强的水果,捣毁光头强的家。防止光头强砍树,捍卫了东北丛林。66 </p>67 <p><a href="http://www.baidu.com" />[continue reading]</p>68 </section>69 <footer>70 Copyright &copy;2016-2016(www.xionger.com). All rights reserved.Use with permission.71 </footer>72 </body>73 </html>
ログイン後にコピー

基本的なレイアウト属性 (表示属性)

label 要素

通訳

block

要素を新しい行に表示し、その横にリスト項目タグを付けます inline 現在の段落を使用して要素をインラインで表示しますnone要素は非表示になっているため表示しないでください
新しい段落など、新しい行に要素を表示します List-item

Diplay属性依赖于相对定位(relative positioning)的概念,它以为着元素将相对于页面上的其他元素进行定位,之后还会介绍绝对定位(absolute positioning)的概念。

Tip:常见的表示长度和宽度的单位有:in,英寸;cm厘米,mm毫米,%百分比,px像素,pt磅。

基本格式化属性

属性 诠释
Border 边框的各边
Border-Width 边框边缘的宽度
Border-color 边框边缘颜色
Border-style 边框边缘样式:solid单线边框,double双线边框,dashed短划虚线边框,dotted点线边框,groove具有沟槽外观的边框,none无边框,hidden等价无边框
Border-left/right/top/bottom 边框左、右、上、下
Background-color 元素的内部区域颜色
Text-align 内容对齐方式,包括左边、右边、中间,justify两端对齐
Text-indent 内容缩进方式
Font-family 字体系列,按顺序选择
Font-size/weight 字体大小和粗细(normal,lighter,bold,bolder)
Font-style 字体的样式,normal,italic
Line-height 行距,用于设置每个文本行的高度
Padding 给元素左边、右边、上边、下边添加填充

使用样式类和ID

使用样式类p.subheader{font-weight: bold;color: #593d87;}使用样式IDp#title{font:24pt Verdana,Geneva, Arial}引用样式<link rel="stylesheet" type="text/css" href="first03.css">
ログイン後にコピー

Tip:验证样式表,http://jigsaw.w3.org/css-validator/

 

经典的html5页面结构如下图所示

 

 

参考资料:

  1. 梅洛尼 . HTML与CSS入门经典(第9版) [M]. 北京:人民邮电出版社, 2014.

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート