htmlナレッジポイントの概要

ウェブサイトとは

ウェブサイトは多くのウェブページで構成されています。

ウェブサイト構築プロセス:
1.ドメイン名(URL)
2.リーススペース(サーバー)?
3.ウェブサイト構築(1.ウェブサイトのテーマの決定、2。情報の収集、3。ウェブサイトの計画、4。ページの作成)
4.ウェブサイトの宣伝
5。ウェブサイトのメンテナンス

2. Webページとは何ですか?

Web標準(Webページの構成):構造(html)+パフォーマンス(css)+動作(js)
1. HTML:Webページの構造(Webページコンテンツ)を
実装する2. CSS:Webページの装飾とパフォーマンスを
実装する3. JS:実装するインタラクティブな効果、ページを移動させることができます

3. HTMLの歴史

htmlハイパーテキストマークアップ言語(Hyper Text Markup Language)wwwワールドワイドウェブの記述言語。ハイパーテキストとは、テキスト、画像、入力ボックス、オーディオ、ビデオなどを含むWebページを指します。したがって、純粋なテキストではなく、ハイパーテキストです。ハイパーテキストはハイパーリンクであり、タグはラベルです

H5の基本構造
1. 2つの領域1.ヘッドの説明領域2. Badyコンテンツ領域
2. HTMLタグ1.シングルラベル「空のラベル」2.ダブルラベル「ペア」

HTML構文の説明
1.鋭い角の後の最初の単語
はラベルの名前です2.ラベルの後のスペースは属性で区切られます
3.属性と属性値は等号で接続され
ます4.属性値は配置されます引用符の内側(単一引用符と二重引用符の両方を使用できます)
5.ラベルに複数の属性がある場合、属性はスペースで区切られます

共通タグ
1;タイトルタグ

-

違い:独自のデフォルトサイズがあり、テキストは太字で一意です:h1はページに1回だけ表示でき、
h2-h6はWebページセクションのタイトルにできます。一意性はありません
2:テキストの太字マーク 強く区別し、トーン
3 の役割を強調する :テキストの斜線
4:下線マーク
5:強制改行
特長:限り、次の行のBRへの党の背後にあるブラウザの出会いコンテンツとして
6:水平マーク

7:上下マーク(上) (下)
8:段落記号


9:単一のテキストの後のテキストの短い段落を表します CSSを使用してフォントの色を変更する
10:エスケープ文字 (スペース)><(左と右の角)©バージョン記号(レコードアイコン)
11:div
役割:特にWebページのレイアウト用

htmlリストの
順序付きリスト


順不同リスト

カスタムリスト
一般的に写真を配置する
)(
画像を説明するために入れてください

展開:リスト記号のスタイルを変更します:type = "属性値"属性値:a / A i / I
リスト記号の開始の記号変更します:start + "属性値"属性値は数値を参照し、数値は最初からの数値ですスタート

ハイパーリンク
httpで始まる属性href = "ジャンプアドレス" // URL
ターゲット= "属性値"属性値は_self(デフォルト値:現在のページで開く)_blank(新しいウィンドウで開く)
タイトル= ""プロンプト情報は、画像のサブタイトルとしても使用できます(ほとんどのタグは、title属性をサポートしています)。


タグの適用imgタグの属性src = "画像パス"
alt = "テキスト置換画像"(属性値は空で削除できない)注:画像を読み込めない場合は、altのテキストが画像の
幅= ""を置き換えます画像の幅= ""画像の高さの境界線= ""画像の境界線
画像の場所(相対パス)を見つける
ターゲットと同じレベルの同じファイルにいる同じレベルを
見つける。/現在のパスの親が子を見つける/フォルダ名/絵の
名前子の親を探す... /前のレベルに戻る/絵の名前

テーブルの行と列の
幅= ""広い高さ= ""高いボーダー= ""ボーダーbordercolor = ""ボーダーの色
cellspacing = ""隣接するセルのボーダー間の間隔
cellpadding = ""ボーダー間のコンテンツの間隔
align = "properties値 "水平方向の配置属性値:左中央右
valign =" "属性値"垂直方向の配置属性値:上部と下部の中央の
結合セル:結合された行はすべて結合された行であり、列をまたがる行ではなく結合された列
結合された行属性: rowspan merge column:colspan注:行または列をマージしても、最初にtd操作で列の行をマージします

フォームタグ(タグフィールド)
属性action =“ url(パス)”フォームへのパス
送信メソッド=“ get / post”データ送信メソッド
maxlength = ""入力文字の最大長
name = "フォームの名前"

フォームコントロール:ラベル入力
属性:タイプ= ""は入力生成のタイプ(入力ボックス、送信ボタン、空のボタンなど)を指定し
ますvalue = ""タイプのタイプに応じて、役割は異なります
名前= ""現在のフォーム要素の名前
size = ""文字単位で、フォーム要素のサイズを制御します
(テキストボックス(入力ボックス)
(送信ボタン)
(パスワードボックス)
リセットボタン(現在のフォームを初期状態に戻します)
空のボタン

css構文:セレクター{属性:属性値;}注:すべてのcssコードはcssスタイルシートに配置する必要があります
css構文の説明1:セレクターはぶら下がり、htmlタグを言う
2:すべてのcss宣言は中括弧に配置する必要があります
3:css宣言には属性と属性値が含まれます
4:css属性と属性値はコロンを使用して接続されます
5:各ステートメントの最後にセミコロンが続き
ます6:属性に複数の属性値、属性値、属性値がある場合スペースで区切られています

cssスタイルシート1:内部スタイルシート<style type =“ test / css”注:内部スタイルシート、ヘッドの説明領域に配置してみてください
2:外部スタイルシートには2つの方法があります
(1)最初に.cssという名前のサフィックスを作成しますファイル
hrel = ""接続パスrel = "stylesheet"で関連性を確立します
(2)
2つの違い:本質的な違いlinkはhtmlに属します@importタグはcss
2 によって提供されるメソッドに属します2:読み込みリンクimport cssおよびhtmlを読み込みます構造は同時に読み込まれます。@import最初に構造をロードしてからスタイルをロードする
3:互換性の違いリンクの互換性はより良い
4:jsのDOMスタイルをワイプする#importインポートされたcssはjsによって動的に変更できない
3:インラインスタイルシート(行スタイル、インラインスタイル)<tag style =“ inline style”> </ tag>


スタイルシートの重みの関係:1.インラインスタイルシートの重みが最大です。
2.内部スタイルと外部スタイルの重みは、書き順に関係します!
(背面に配置されたスタイルは前面に配置されたスタイルを上書きし、同じ属性のスタイルのみが上書きされ、異なる属性のスタイルは引き続き実行されます。)
!重要->現在の宣言のウェイトが最も高い!構文:背景:赤!重要です。

CSS構文:
セレクター{属性:属性値;}
セレクター:セレクターはラベルに名前を付けるためのものです。

一:类型选择符(标签选择符)
    所有的html标签可以直接当作选择符进行应用。
    比如:div\p\em\i\b\strong.............
    特点:能选中当前结构里面全部同名标签。
    应用:想统一某一个标签样式的时候或者是清除某个标签默认样式的时候


2つ:idセレクター
構文:
名前:<tag id =“ name”> </ tag>
スタイルを名前で記述:#NAME {属性:属性値}
機能:一意性!同じページで、ID名は1回しか使用できません。
アプリケーション:Webページの周辺構造を分割する

三: 类选择符(class选择符)
    语法:
    其名称:         <标签 class="名称1 名称2 名称3 名称4..."></标签>
    用类名写样式     .名称{属性:属性值;}
    特点:
    1:一个元素可以有多个类名,类名可以重复出现
    2:可以制定一类样式.

(Id、クラス)命名規則:
小文字で始めるようにしてください。
配列、文字、アンダースコア、ハイフンの組み合わせ。
キーワードの名前付け(すべてのタグと属性がキーワードに属している)
を使用して、セクションの内容または反応構造(セマンティック)を反映するようにできるだけ名前を付けることはできません
ピンインにすることはできますが、漢字や特殊文字は表示できません。

四: 群组选择符
    语法:以逗号分隔的方式,把多个选择器组成一组,给整组添加样式.
    选择符1,选择符2,选择符3,选择符4{ 属性:属性值; }
     比如:.名称1,.名称2,.名称3.....

五: 包含选择符(子代选择器\后代选择符)    ( 通过父元素找子元素 )
    语法:
        父元素 子元素{ 属性:属性值; }


六: 伪类选择器
    a:link {color: red;}                     未访问的链接状态 
    a:visited {color: green;}	         已访问的链接状态 
    a:hover {color: blue;}                   鼠标滑过链接状态 
    a:active {color: yellow;}                鼠标按下去时的状态 
    比如a:lingk{
		color:red
                }   就会显示未访问的连接状态颜色为红色     
    
七:通配符
    *{  }

    * 选择页面中所有的元素!

    *{
        margin:0;    盒子外围间距清零
        padding:0;   盒子内部的距离清零
    }

セレクタ重量関係:
ID>クラス>タグの
4つの数字は重量表し:
- 、> 1000のインラインスタイルシート
ID - > 100
クラス- > 10
ラベル- > 1
擬似クラスセレクタ- > 10
ワイルドカード- > 0
を含むセレクタ重みは重みの合計です。
例:
idクラス{} 100 + 10 == 110
id idクラスタグ{} 100 + 100 + 10 + 1 == 211
重みが同じ場合、前に書かれたスタイルに後から書かれたスタイルが与えられます上書き。
重要な重みは背景などの最高です:赤!重要な

テキスト属性:

1: font-size:;  控制文本大小
    1:为了消除系统之间显示差异,规定:16px 为标准字体大小。
    2:文本大小设置,设置为偶数。
    3:PC端项目,设置最小尽量别低于12px ;
    4:从ps中获取文本大小,汉字量取文本高度。
    5:文本单位:  px \ em \ pt(磅)【常用在印刷领域】
    12px == 9pt
    em ( 相对大小单位,相对于父元素的font-size值而定 ) (默认情况下,  1em == 16px)              
    6:
       xx-small =9px
        x-small =11px
        small =13px
        medium =16px
        large =19px
        x-large =23px
        xx-large =27px

2:color:; 控制网页中的文本颜色
    颜色值:
        a:十六进制表示颜色值:
            16进制数字:0 - 9  a - f
            颜色值: #ff0000
                6个数字:
                    前两位     红色
                    中间两位   绿色
                    最后两位   蓝色
        b: RGB(255,0,0) 模式
            拓展: rgba(255,0,0,0.5)0.5 指定文字透明度

3:font-family:;控制的是网页中字体类型。
    默认的字体类型:"微软雅黑"
    系统能支持的字体:web安全字体:微软雅黑、宋体、楷体...
    英文默认的字体:Arial
    语法:font-family:字体1,字体2,字体3,......           
        注:
            1:中文字体必须放在引号里面
            2:如果一个字体多个单词组成 也要放在引号里面
            3:如果字体是一个单词 不需要引号。
            4:先写英文字体,后写中文字体。

4:font-weight:;控制文本是否加粗
    属性值:
        bold     加粗
        bolder   加粗
        normal   清除加粗,恢复常规文本
        100 - 900
        100 - 500:不加粗
        600 - 900:加粗的状态 

5: font-style:;控制文本的倾斜
    属性值:
        italic    倾斜
        oblique   倾斜(倾斜幅度更大,但是一般不会有明显变化)
        normal    恢复常规文本

6: line-height:; 控制文本的行高。
    a: 从ps设计图上:怎么获取行高:从第一行开始量到第二行开始。
    b: 
        单行文本:
            如果让单行文本在容器里面上下居中,line-height设置容器高度即可
            显示状态:
                小于容器高度的时候:文本往上移动
                大于容器高度的时候:文本往下移动

7:text-align:; 控制文本的水平对齐方式
    属性值:
        center   居中对齐
        left     左对齐
        right    右对齐
        justify  两端对齐

        
8:text-decoration:; 文本修饰(下划线、上划线、删除线)
    属性值:
        none     清除下划线
        underline 添加下划线
        overline  添加上划线
        line-through  添加删除线

9: text-indent:; 
    text-indent:2em;首行缩进:

    text-indent能设置负值:文字往左走。(悬挂式缩进)

10:字间距、词间距
    letter-spacing:;  字间距
    word-spacing:;    词间距

11: text-transform:; 控制文本大小写。
    属性值:
        uppercase   大写
        lowercase   小写
        capitalize  每个单词的首字母大写

浮動
プロパティ:フロート
プロパティ値:


なしの
特長:
1:浮動要素を加えた後のスペースを占有されていません。
2:複数の要素が水平に配置されている場合、配置されたすべての要素をフロートに追加する必要があります。
3:子要素がfloatに追加され、幅が親要素よりも大きい場合、次の要素は次の行に圧縮されます。

元の記事を21件公開 賞賛0件 訪問数291件

おすすめ

転載: blog.csdn.net/jiatinghui/article/details/105014963