ウェブサイトプロセスの開発

スタイルと機能（フォーラム、掲示板、支払い、ユーザーログインなど）を決定します。
アーティストは、Web ページのレンダリング (ホームページ、リストページ、コンテンツページ) を作成します。
制作スタッフが写真を切り抜き、ウェブページの形式に組版します。
バックグラウンドプログラムがプログラムの作成を開始します。
フロントデスクとバックデスクの統合。

HTML コメント

注: コメントは将来のメンテナンス用にのみ使用されます。

弾丸の共通属性

<ul><li>内容</li>　　<li>内容</li>　　<li>内容</li></ul>

ログイン後にコピー

l タイプ: 弾丸の種類、値: 円盤 (小さな黒い点)、円 (円)、正方形 (実線の正方形)

html番号リスト（注文）

<ol> <li>内容</li> <li>内容</li> <li>内容</li></ol>

ログイン後にコピー

＆lt; ol＆gt;私、私開始:番号からナンバリング

スクロール字幕マーク(削除されました)

<marquee> 内容…..  

</marquee>

ログイン後にコピー

共通属性

方向: スクロール方向、値: 上、下、左、右
幅: スクロール幅
高さ: スクロールの高さ
BgColor: スクロールの背景色
ScrollAmount: スクロールステップ値
ScrollDelay: 2 つのステップ間の滞在値
Loop: ループスクロール数

写真タグ

構文形式: 属性 = " 値" >

共通属性:

幅: 画像の幅。

高さ: 画像の高さ。

境界線: 画像の境界線。

Src: 画像のパス。

整列: 左、中央、右。 (グラフィックとテキストを混合した効果を実現できます)

Hspace: 画像とテキスト間の左右の間隔。

Vspace: 画像とテキストの間の上下の間隔。

ハイパーリンク

文法形式: attribute="value">content

共通属性:

Href：対象ファイルアドレスURL。

ターゲット: オープンメソッド。 _blank: 新しいウィンドウ、_self: このウィンドウ、_parent: 前のウィンドウが開きます、top: 最上位のウィンドウが開きます。

名前: 描画ポイントの名前を定義します。

mailto

#空のリンク。

Js接続:

HTMLの色表現

3つの方法
:
色の言葉:青、緑、赤、黄色。

10 進数表現: rgb (255, 0, 0)

16 進数表現 #FF0000 (赤)、#00FF00 (緑)、#0000FF (青)
アンカーリンク

意味:アンカーリンクは、Web ページのさまざまな領域にジャンプすることです

アンカーポイント (マーク) を定義します:

例:

アンカーポイント(マーク)にジャンプ:

文法:Content…..

タグ
役割: Web ページのメタ情報を提供します。 Webページの検索キーワードを指定します。
タグには http-equiv と name
の 2 つの属性があります。 http-equiv 属性

機能: http プロトコルファイルのヘッダー情報をシミュレートし、Web ページを開く方法をブラウザーに伝えます。

http-equiv 属性は通常、content 属性と組み合わせて使用されます。 content 属性は、情報の詳細な属性を指定します

Web ページの文字セットを設定します:

Web ページを自動的に更新します:;

2. name属性
は、Webページの検索キーワード、著作権情報、作成者などを設定します。

（1）       设置网页搜索关键词

（2）       设置网页描述信息

Xhtml规范

l 所有标记和属性全部小写

l 单边标记必须关闭。如：
-----

l 所有的属性值都必须加引号。

l 所有属性都必须有值。如：
---

l 标机之间要顺序嵌套，外层套内层。

l Xhtml网页必须有DTD文档类型定义代码

DTD文档类型定义

三大类型：

表格标签

（1）结构：(一行四列)

<table border=“1”>   <tr><td> </td><td> </td><td> </td><td>< /td>   </tr></table>
ログイン後にコピー

（2）border属性：

Width：宽度

Height：高度

Border：边框

Bordercolor：边框颜色

Bgcolor：表格背景色

Background：背景图片

Cellpadding：单元格与内容距离

Cellspacing：单元格与单元格距离

Rules：合并边框线，取值：all

（3）       tr属性：

bgcolor

align

height：水平：left、center、right

valign：垂直：top、middle、bpttom

（4）      td属性：

colspan：合并单元格（左右）

rowspan：合并单元格（上下）

background

width

height

bgcolor

align

valign

表单

（1）结构：

　　<form name=”form1” method=“get” action=“login.php”>   用户名：<input type=”text” name=”username”/>   密码：<input type=”password” name=”userpwd”/>   <input type=”submit” value=”提交表单”/></form>
ログイン後にコピー

（2）
标记属性----块元素

name

method:提交方式 get、post

action：指定表单的处理程序，一般是PHP文件

enctype：指定表单数据的编码方式。只能在method=post情况下。

application/x-www-form-urldecoded   //默认加密方式

multipart/form-data   //上传文件，值是他自己

（3）get和post方法

             Get提交方式：将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求。不安全

               如果某个表单元素，不想往服务器传递数据，那么，name可以不用写。

            POST提交方式：POST提交的数据相对安全，可以提交海量数据，可以上传附件。

单行文本域

         语法格式：属性=“值”>

  属性：

name：文本框的名字

Type：表单元素类型

Value：文本框的值

Size：文本框的长度

Maxlength：最多可以输入多少个字符。

Readonly：只读属性。可以选中，但不能修改。Readonly=“readonly”

Disabled：禁用属性同上。

单行密码域

语法格式：

属性：

name：文本框的名字

Type：表单元素类型

Value：文本框的值

Size：文本框的长度

Maxlength：最多可以输入多少个字符。

Readonly：只读属性。可以选中，但不能修改。Readonly=“readonly”

Disabled：禁用属性同上。

单选按钮

语法格式:男

                   女

属性：

name：元素名称

Checked：默认选择checked=“checked”

Value：值

复选框

语法格式：游戏

                   杀人

                   放火

属性：

name：元素名称

Checked：默认选择checked=“checked”

Value：值

下拉列表

语法格式：

<select name=””> <option value=”北京”>北京</option> <option value=”天津”>天津</option> <option value=”重庆”>重庆</option></select>
ログイン後にコピー

：只有一个name属性。

：两个属性value、selected

Selected：默认选中

层叠样式表方式改下拉列表宽度：type=”width:100px”

文本区域

语法格式：

  属性：

name：元素名称

Cols：宽度

Rows：高度

各种按钮

  提交按钮

  重置按钮

  图片按钮

  普通按钮

  普通按钮本身不具备任何功能，需与js配合使用。

上传文件域

语法格式：

  属性：

  Name：名称

  Value：上传文件名。Value属性是只读属性，

必须与enctype=”multipart/form-data”>配合实现才能上传

隐藏域

功能：看不见的框。传递一些值，而又不想让别人看到。主要用于php后台。如id号。

语法格式：

表格标题

语法格式：

是
的子标记。
放在的后面。

网页多媒体
网页视频一般是flash格式，flash比较小、兼容性好，适合网站播放。

图片热点
图片热点：给一张图片加多个热点。
语法结构：
<ing src=”inmages/01.jpg” usemap=”#Map”/><map id=”Map”><area shap=”热区形状” cords=”热区坐标” href=”链接地址” /><area shap=”热区形状” cords=”热区坐标” href=”链接地址” /><area shap=”热区形状” cords=”热区坐标” href=”链接地址” /></map>
ログイン後にコピー

标记常用属性：

Shape：热区的形状，取值：rect（矩形）、circle（圆）、polygon（多边形）

Coords：热区的坐标

如果shap=rect时，那么，coords=“x1,y1,x2,y2”列如：coords=”50,20,200,150”

（x1,y1）为左上角坐标，（x2，y2）为右下角坐标。

如果shap=circle时，那么，coords=“x,y,r”,其中（x，y）圆心坐标，r为半径。

普通框架
框架集和框架页：
框架集：:主要用来划分窗口。
框架页：:主要用来指定默认显示的网页地址。
属性：

Cols:划分左右型框架。

Cols=”200,*”   左边为宽度200px，剩下的为右边。

Cols=”180,*,180”   左右框架为180px，剩下的为中间框架

Rows：划分上下型框架

Rows=”200,*” 上框架高度为200px，剩下的为下框架。

Frameborder：是否显示边框线，取值0或1.

Border：边框粗细。

Bordercolor：边框颜色。

框架页的属性 ：

  Src：该小窗口中，默认显示的网页地址。

  Noresize：不能调整大小。Noresize=”noresize”

  Scrolling:是否显示滚动条，取值：auto、yes、no

  Name：给当前小窗口起个名字。这个name就是给标记target属性来用的。

内嵌框架（行内框架）
与普通框架区别：是<body>的子标记，因此，放在<body>中。</p> <p><strong>语法格式：</strong><iframe 属性=“值”>对不起，您的浏览器版本过低
常用属性：

Src：引入文件地址。

Width：宽度

Height：高度

Frameborder：是否显示框架的边框线，取值：yes或no。

Scrolling：是否显示滚动条。取值：yes、no、auto。
Name：制定小窗口的名称，改名称也是给标记的target属性来用。

Align：框架在网页中对齐方式，取值：left、center、right。

CSS简介
CSS 层叠样式表。
CSS的主要目的：是给html标记添加各种各样的表现（表格、样式）。比如：文字样式、背景、文本样式、连接样式。

语法格式：
<style type=”text/css”> h1{Color:red;    //文本颜色 Text-align:center;    //对齐方式 Border:1px solid #444;     //半框样式 Background-color:#ffff00;    //背景色}</style>
ログイン後にコピー

CSS选择器
基本选择器
(1) “*”选择器：通配符

描述：将匹配所有的html标记，所有标记都会改变。

语法：*{color：red；}

（2）标签选择器

描述：将匹配指定的html标记

语法：h1{color：red；}

（3）class选择器（类选择器）-----使用最多的选择器

描述：给一类html标记加样式。这里所指的“一类”是：每个html标记都有的一个class属性，且class的一样。Class属性是公共属性，每个html标记都有。

格式：

　　　　　　

　　　　　　


　　　　　　


　　　　　　

(3) 子要素セレクター

説明: 要素の子要素にスタイルを追加します

CSS サイズ属性

幅: 要素の幅、必ず px 単位を追加してください。

高さ: 要素の高さ。

CSS フォントのプロパティ

フォントサイズ: テキストのサイズ。例: font-size: 14px;

フォントファミリー: フォント。例: フォントファミリー: Microsoft Yahei

フォントスタイル: イタリック、値: イタリック。例: フォントスタイル: イタリック

フォントの太さ: 太字、値: 太字。例: font-weight: 太字

CSS テキストプロパティ

色: テキストの色

テキスト装飾: テキスト装飾線、値: なし (なし)、下線 (下線)、上線 (上線)、ラインスルー (取り消し線)

Text-align: テキストの水平方向の配置、値: 左、中央、右

Line-height: 行の高さは、次のような固定値またはパーセンテージにすることができます。行の高さ: 24px; 行の高さ: 150%; テキストのインデント: 最初の行のインデント。テキストのインデント: 28px;

文字の間隔: 単語の間隔。

疑似クラスセレクター
ハイパーリンクには 4 つの状態があります

通常の状態 (: リンク): マウスが置かれていないときの前のリンクのスタイル。

Put state (:hover): リンク上にマウスを置いたときのスタイル。

アクティブ化状態 (: アクション): マウスの左ボタンを放さずに押し続けるスタイル。

訪問ステータス (: 訪問): マウスの左ボタンを押してポップアップし、この時点のスタイル。

日常業務では、次のような書き方でリンクにスタイルを追加します。

A:link,a:visited{ color:#444;text-decoration:none } //Replace "normal; 「ステータス」と「訪問ステータス」を 1 つにまとめました。 A:hover{ color:#990000;text-decoration:underline; } //単一の効果を作成するには「マウスオーバー」

CSS リスト属性

List-style: list style、value: none。箇条書きや数字の前にあるさまざまな記号を削除します。

> " / li>

CSS border 属性: 各要素には境界線を含めることができます
Border-left: 左の境界線。
形式: border-left: 太い線と細い線の色
線のスタイル: なし、実線、破線 (破線)、点線 (点線)

例:
border-left: 5px赤の破線

右境界線: 右境界線。

Border-top: 上部の境界線。

Border-bottom: 下の境界線。

枠線: 4辺に同時に枠線を追加します。
CSS パディングプロパティ: 境界線からコンテンツへのパディング
注: 通常、幅と高さのプロパティを呼び出すとき、それらは内側と外側のマージンと境界線を除いた、コンテンツの幅と高さを指します。

Padding-left: 左内側のパディング距離、右行からコンテンツまでの距離。

Padding-right: 右内側のパディング距離。同上

Padding-top: トップ。

Paddingbottom: 次へ。

省略形
// 四辺の内側のパディングは 10px;
// 上下は 10px; ;

Padding : 5px 10px 20px; // 上は 5px、左と右は 10px、下は 20px; // 順序は上、右です。、下、左;

CSS マージン属性: 外側への距離

Margin-left: 左の線から外側までの距離

Margin-right: 右...

Margin-top: Top....

Margin-bottom: Bottom....

略語:

Margin: 10px; // 4 つの外側のマージンはそれぞれ 10 ピクセルです。

Margin: 10px 20px; // 上下の余白は 10px、左右の余白は 20px です。

Margin: 10px 20px 50px; // 上のマージンは 10px、左右のマージンは 20px、下のマージンは 50px です。

マージン: 10px 20px 30px 40px; // 順序は右上、左下です。

CSS 背景プロパティ

背景色: 背景色。

背景画像: 背景画像のアドレス。背景画像:url(image/banner.jpg)

以上がHTML 学習の道のりを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
html 勉強ルーキー

ソース：php.cn

前の記事：iOSでポップアップウィンドウを閉じた後も、ポップアップウィンドウの一部がまだ「ページ上に残っている」問題に対処するにはどうすればよいですか? 次の記事：GIT-SVN テクノロジーを使用した APICloud Studio 2 チュートリアル

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

NameValuePair メソッドを使用してパラメーターを渡すサンプルチュートリアル

1970-01-01 08:00:00

dom4j を使用して XML ドキュメントを解析する例

1970-01-01 08:00:00

カタログサービス - Microsoft マイクロサービスアーキテクチャのサンプルコードの分析

1970-01-01 08:00:00

.net Elasticsearch の例の開始方法の詳細な説明

1970-01-01 08:00:00

Spring Boot に JSP サポートを追加する構成例の詳細な紹介

1970-01-01 08:00:00

JS は window.open で開かれたウィンドウが閉じているかどうかをどのように検出しますか?

1970-01-01 08:00:00

データベースに接続する sqlyog での文字化けの問題とその解決策を共有する

1970-01-01 08:00:00

Java での可変長パラメーターの使用例

1970-01-01 08:00:00

最新のAmap API WEB開発事例チュートリアル

1970-01-01 08:00:00

AJAX の長所と短所

1970-01-01 08:00:00

最新の問題

PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...

から 2024-04-16 09:34:16

0

0

4687

ページが突然 CSS またはブートストラップを取得できなくなりますそれで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...

から 2024-04-06 21:58:04

0

1

800

CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...

から 2024-04-06 20:22:15

0

1

454

livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したいこれまでに試したこと: Laravel コンポーネントを含めることによる Live...

から 2024-04-06 20:02:10

0

2

543

文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...

から 2024-04-06 17:40:41

0

2

410

関連トピック
詳細>

html著作権記号

 HTMLオンラインエディター

 HTMLウェブページ制作

 HTMLスペース

 htmlとは何ですか

 HTMLのフォントサイズを設定する方法

 htmlからテキストへ

 HTMLテキストボックスのコードの書き方

人気のおすすめ

URLってどういう意味ですか？

DOM とはどういう意味ですか?

画像サイズを変更する方法

HTMLでフォントを太字にする方法

HTML画像のサイズを設定する方法

人気のチュートリアル
詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)

1416845

PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

4257451

JAVA 初心者向けビデオチュートリアル

2475853

Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル

503687

PHP ゼロベースの入門チュートリアル

844123

最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)

1416845 回の学習

JAVA 初心者向けビデオチュートリアル

2475853 回の学習

Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル

503687 回の学習

Web フロントエンド開発の簡単な紹介

215273 回の学習

PSビデオチュートリアルをゼロからマスターする

876897 回の学習

[Web フロントエンド] Node.js クイックスタート

6363 回の学習

海外のWeb開発フルスタックコースの完全なコレクション

5011 回の学習

Go言語実践GraphQL

4196 回の学習

550W ファンマスターが JavaScript をゼロから段階的に学習します

633 回の学習

Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

21319 回の学習

最新のダウンロード
詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

[フォームボタン] jQuery エンタープライズメッセージフォームの連絡先コード

[プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果

[メニューナビゲーション] HTML5 クールなパーティクルアニメーションナビゲーションメニューの特殊効果

[フォームボタン] jQuery ビジュアルフォームのドラッグアンドドロップ編集コード

[プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤーコード

[html5特殊効果] 古典的な HTML5 プッシュボックスゲーム

[画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール

[フォトアルバム効果] CSS3 個人アルバムカバーホバーズーム効果

[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート

[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート

[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート

[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート

[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート

[フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート

[フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します

[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

[PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)

[PNG素材] 4 つの赤い 2023 卒業バッジベクター素材 (AI+EPS+PNG)

[バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）

[PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）

[PNG素材] 黒と白のスタイルの山アイコンベクター素材 (EPS+PNG)

[PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）

[バナー画像] フラットスタイルの植樹祭バナーベクター素材 (AI+EPS)

[PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート

[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート

[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート

[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート

[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート

[フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート

[フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します

[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

私たちについて免責事項 Sitemap

PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！