XHTML の基本 (一部の CSS を含む)_html/css_WEB-ITnose

http://www.ycku.com/xhtml/

のビデオチュートリアルに基づくいくつかのメモ

xhtml の説明は、Baidu Encyclopedia から引用しています

Extensible Hypertext Markup Language は、同じ方法で表現されるマークアップ言語ですハイパーテキスト マークアップ言語 (HTML) も似ていますが、構文はより厳密です。

継承関係の観点から見ると、HTML は標準ユニバーサル マークアップ言語に基づいたアプリケーションであり、非常に柔軟なマークアップ言語です。一方、XHTML は標準ユニバーサル マークアップ言語のサブセットである拡張マークアップ言語に基づいています。 XHTML 1.0 は、2000 年 1 月 26 日に W3C 勧告になりました。

以下の例では、ヘッダー で html5 の使用を宣言していますが、構文的には xhtml に近いです。間違いがあれば、個人的にはお知らせください。最初に XHTML を学習し、次に HTML5 を学習します

ほとんどのタグ属性については、http://www.w3school.com.cn/tags/index.asp にアクセスしてクエリを実行し、制御するための組み込み属性を理解することができます。外観は開発ではほとんど使用されないため、ここでは詳しく説明しません。ただし、より懸念されるいくつかの問題は、CSS の開発中にのみ発見されます。互換性の問題 (PC CSS) については、後で新しいものを開いて現在のものについて説明します。意見。

XHTML

"http://www.w3.org/TR/html4/loose.dtd">

XHTML1.0 スタイルのタグ

1. すべての単一タグは閉じられている必要があります:
、

---

、 など。

2.自分自身に等しい:checked="checked"、readonly="readonly" など

3. 廃止されたタグ:

、 などを使用しないようにしてください。

4. 廃止されたタグを使用しないようにしてください。属性: align、bgcolor

html 基本タグ

" "

;/colgroup＆gt;
3 番目は、太字で中央揃えの属性を非表示にします

col タグは、色や背景などのテーブルの列に作用します

テーブルの背景の優先順位背景色の優先順位よりも高くなります

html image

文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top

缺省是bottom,在图像最的下方见到文字,

top上 center中间

主要用 left或者right,align left或者right属性的设置相当于 浮动float的设置(博客或者日志的图文粗略显示模式

vspace="10" hspace="10" 对应上下margin

上述基本属性基本使用css来实现就可以了

在a标签的包括下图像,边框的设置:css设置图像边框为0,css reset中要设置

设置图标 ie6会有问题显示不了图标

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 1

 

 

Alt属性对应无图像加载时候,对图像的描述，开发的时候必须加入，然而title属性看效果使用也无伤大雅。

Html 超链接

</p>   <p>超链接也叫 URL 中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据 URL</p>   <p>的地址找到所需的资源。</p>   <p>格式:</p>   <p>scheme://host[:post]/path/filename</p>   <p>scheme指的是 http,ftp,file,mailto,news,gopher,telnet 七种</p>   <p>host 指的是 IP 地址或计算机名称</p>   <p>post 指的是服务器端口</p>   <p>path 指的是文件路径</p>   <p>filename 指的是文件</p>   <p> </p>   <p>基准参考点</p>   <p>基本格式：&lthead&gt&lt basehref=”http://localhost:8080”&gt &lt/head&gt</p>   <p>对应的该页面下的超链接为http://localhost:8080/*</p>   <p>

163@163

href="mailto:163@163.com" 使用本机的邮件发送

锚点 a设置name name="123"

跳转到123的锚点,a超链接 href写的#123 一般直接使用top返回顶部,对应某些页面的锚点,使用href="1.html#123"

超链接hover 点击后css失效  使用正确的书写顺序 link visited hover active 其实就是一个样式重写的问题

Target属性 target="_blank" 新窗口打开

_blank

ブラウザは常に、新しく開かれた名前のないウィンドウにターゲット ドキュメントを読み込みます。

_self

このターゲットの値は、ターゲットを指定しないすべての タグのデフォルトのターゲットであり、ターゲット ドキュメントがロードされ、ソース ドキュメントと同じフレームまたはウィンドウに表示されます。このターゲットは、ドキュメント タイトルの タグの target 属性と組み合わせて使用​​しない限り、冗長であり不要です。

_parent

このターゲットにより、ドキュメントが親ウィンドウ、またはハイパーリンクによって参照されるフレームを含むフレームセットに読み込まれます。この参照がウィンドウ内またはトップレベルのフレーム内にある場合、それは target _self と同等です。

_top

このゴールにより、ハイパーリンクを含むウィンドウにドキュメントが読み込まれます。_top ゴールを使用すると、含まれているフレームがすべてクリアされ、ドキュメントがブラウザ ウィンドウ全体に読み込まれます。

もちろん、target="du" など、新しいウィンドウの名前を自分で定義することもできます。そうすると、新しいウィンドウが du ウィンドウまたはラベルで開かれます

• 序文
• 第 1 章
• 第 1 章2
• 第 3 章

すべてのハイパーリンクは定義された view_window で開かれ、あまりにも多くのページを繰り返し開くことはありません

HTML フォーム

;

"

< ;/optgroup>

>

< ;/Select & gt;

属性値 Multiple は複数の選択肢、Optgroup Label = "Guangxi"、次のオプションの名前が表示されます。選択すると、複数選択リストを js で実装する必要があります。そうしないと、ユーザーはアカウントを購入できません

< /html>

外側の境界線:

..

タイトル:

...

効果のタイトルは境界線の内側にあります

- ---タイトル------------- ----

htmlフレームワーク

< Frame src="6.Form">

body タグを削除する必要があります

現在、基本的なネストはフローティングフレームを使用しています

iframe

通常、JavaScriptが必要です Webページの高さを自動的に取得します

htmlメディア（主にFlash用）

高さと幅が必要です

wmode

value

windowはFlashを独自の長方形のウィンドウで再生します

opaqueはFlashの背後にあるページを非表示にします

transparentはFlashの特定の部分を透明にします

object はオブジェクトであり、その値を挿入する必要があります。対応するフラッシュは、型宣言オブジェクト type

BGM の場合は、bgsound src="URL"loop="回数" を使用して

メタタグ (メタについては機会があれば詳しく説明します)

時限ジャンプ ページ

リフレッシュとは、再定義されたジャンプ ページを実現するためにページを再ダウンロードすることを意味します

通常は head 内に記述されます

メタ レコードは、検索を増やすための対応する情報

<メタ名="ジェネレーター" content= "開発ツール? ">

;/html & gt;

xml

xml は独自のラベルを作成できます。主に

Dtd などを保存するためにデータを使用します。重複するスタイル シート
優先度:

1. インライン スタイル シートの重みは 100 です

3. 10

4. HTML タグ セレクターの重みは 1 です

css ファイルの導入に @import を使用しないでください。ファイルが複数のスレッドでダウンロードされなくなります

px ピクセルの長さを推奨します。 Em は現在のフォントの高さに基づいています (絶対値はいずれにしても rem があります。これを見てください) rem (css3) はルート要素に従ってスケールします

Color rgb(0,0,0) (通常は使用します)エフェクトには rgba (これも css3)、通常、デザインの下書きには #000000 を使用します。これらはあなた次第です

単純にフォントを太字にすると、通常は表示されません。フォント: 12px ボールド; 複合タグを使用します

ボールドには font-weight: ボールドを使用するのが最善です

text-indent 最初の行のインデントはテキスト段落の前のスペースに使用できます (中国語のカスタム形式

line) -height: 100px 100px コンテナーの垂直方向のセンタリングに対応します

vertical-align:middle

最初の使用法、最初に見てください 後の文「表のセルでは、このプロパティはセル ボックス内のセルの内容の配置を設定します」 。 「これは簡単に理解できます。テーブルの TD にvertical-align:middle スタイルを追加すると、テーブルの内容が垂直方向の中央に配置されます。同様に、vertical-align:bottom を指定すると、下に配置されます」 -aligned を与えると、vertical- align:top は上を揃えます

。

2 番目の使用法については、前のページの文を参照してください。「この属性は、要素が配置されている行のベースラインを基準としたインライン要素のベースラインの垂直方向の配置を定義します。方法はわかりません。」専門的な言葉で話すため、次のように例えます。 a と b の 2 つの要素があり、a と b が両方とも img であるとします。以下に示すように、b のベースライン) は a の中間位置に揃えられます:

a と b の両方にvertical-align:middle スタイルが追加されている場合、それらは互いの中間位置に揃えられます。以下に示すように、垂直方向の正中線は揃っています。

この時点で、アイデアは明確です。

同じ原則がテキストなどにも当てはまります。

CSS 背景

背景

略語の背景を宣伝する: カラー背景画像の繰り返し添付位置

list-style:url はほとんど使用しない;画像は高さに応じて調整できないため、通常は背景を使用します

シンプル px。これは CSS

シンプル px。これは CSS

< ;p> ;シンプルな px。これは CSS

シンプルな px。これは CSS

シンプルな px。これは CSS

シンプルな px。これは CSS< /p>

シンプル ピクセル。これは CSS

シンプル ピクセル。これは CSS

シンプル ピクセル。これは CSS

単純な px.これは css

単純な px.これは css

単純な px.これは css

;

• これは css
• これは css
• シンプル px。 css
• シンプルなピクセル
  境界線と境界線

  
  

  
  

  

   

  
  

  CSS链接、光标、DHTML、缩放

   

  超链接测试

  超链接测试2

  123

  zoom:1 缩放图像,只有ie6需要这个标签来显示全部内容

  cursor 指定鼠标图片,html就指定整个页面

  
  

  滤镜

   

  滤镜必须是块状对象而且是定义了高度的块状元素,而且是只有ie支持,filter里面滤镜的必须配合属性才有效

  滤镜必须是块状对象,而且是只有ie支持,filter里面滤镜的必须配合属性才有效

  

  filter ie9以下包括ie9 ,才支持,然而ie9支持opacity 标签了

  
  

  Css选择器

  优先级:

  1.内联样式表的权值最高 1000；

  2.ID 选择器的权值为 100

  3.Class 类选择器的权值为 10

  4.HTML 标签选择器的权值为 1

   

  每个id只能在html里面使用一次,唯一的元素,不会混淆(虽然可以用多个相同id但是不符合规范)

  class可以在多个元素里面使用

  选择符号

  标签 div

  Id   #div

  Class .div

  div.div , div .div 优先级都属于11,所以谁先写在前面就会被后一个重写css

  div.div    div中class位div被选中, div .div      div中的子元素class为div的元素被选中

  link 加载css

  css越晚加载的越重要，因为会覆盖之前加载的

  123

  滤镜必须是块状对象而且是定义了高度的块状元素,而且是只有ie支持,filter里面滤镜的必须配合属性才有效

  滤镜必须是块状对象而且是定义了高度的块状元素,而且是只有ie支持,filter里面滤镜的必须配合属性才有效

  滤镜必须是块状对象,而且是只有ie支持,filter里面滤镜的必须配合属性才有效

  通过css设置，首先设置body的字体，如

  body {font-size: 14px;}

  然后其他的都可以使用相对尺寸设置了，如

  h1 {font-size: 2em;} /*14*2 = 28*/

  h2 {font-size: 1.8em;}

  等等

  这样便于快速修改页面的整体文字尺寸，同时也不影响你修改局部的文字大小。

  很少在嵌套标签里面加class,一般使用子类选择器来继承css

  ie6不支持高级选择器 h1 >gt i{}

  ie6只支持a的伪类，实在现在还有多少页面会做ie6-7的兼容

  
  

  css 构造模型 定位（排版重点）

   

  测试10086moki

  测试001moki

  测试002moki

  123

   

  
  

  CSS构造颜色、背景与图像

  1

  2

  

   

  

  

  "/>

  
  < ;style>

  body{margin:50px;padding:0}
  ul{margin:5px;padding:2px;
  list-style: none;
  width:160px
  }
  li{
  background :#ddd;
  margin:0;
  padding:2px 10px;
  border-left:1px ソリッド #fff;
  border-top :1px ソリッド #fff;
  border-left:1px ソリッド #666;
  border-bottom:1px ソリッド #fff;
  }
  a{display:block;}

  • 111

  ;!--

  ie-8 以降はパディングありデフォルトではマージン、

  水平リスト li{display:inline;}

  タイトルを設定するには ul list-style-image:url(1.jpg); を使用します。対応する前句読点のアイコンを調整することはできません。

  ul li

  li {

  background:url(1.jpg) no-repeat 0% 50%;

  padding-left:150px;

  line-height:150px ;

  } を設定することをお勧めします

  インラインリスト display:inline; 高さはインラインで調整できません

  li{display:inline;

  /* display:inline;1 行リストではリストのプレフィックス番号が削除されますが、引き続き使用することをお勧めしますfloat* /

  background:url(1.jpg) no-repeat 0% 50% ;

  padding-left:150px;

  padding-top:150px;

  line-height:150px

  }

  垂直リストは、元の背景設定で、a が display:block; に設定されている場合、IE7 では a タグに高さを追加する必要はありません。そうしないと、少し問題が発生します

  - ->

  CSSで構築されたハイパーリンク

< ;tr>

gt;gt;

gt;gt;

1	2	3	4
1	2	3	4

gt;gt;

1	2	3	4< /td><
1	2	3	4

CSSフォーム構築

< ;フィールドセット>

レジストリ

性別: nan ;nv< ラベル & gt;

& lt;/フォーム & gt; フォームクラス = "ラベル" & gt;

& & lt; label for="name">名前:

< ;label for="name ">123123:

145 :

< /form>

< ;!--

ラベルを使用してテキストの配置を実現します

display:inline-block; を使用すると対応する機能を実現できますが、フローティングも実装できます。

古いバージョンの IE ブラウザはサポートしていません属性display:inline-block!

正確な説明は、「inline-block 属性を使用すると、IE でレイアウトがトリガーされるため、要素に設定された幅と高さが有効になり、表示効果が他のブラウザーと一致するとは言えません。」です。 /7 は、display:inline-block をサポートします。

-->