0104-2020-シンプルなフロントエンドの概要(HTML&CSS&JavaScriptを&ブートストラップ)

記事のコンテンツソース:ブートストラップ部57 JavaWebの暗い馬に
HTML:ハイパーテキストマークアップ言語
HTML:
ハイパーテキスト:ハイパーテキストは、メソッドにハイパーリンクされ、異なる空間情報組織でのテキストの様々なテキストと噛み合います。
マークアップ言語:ないプログラミング言語(限り、あなたが書くように実行されます)。
拡張HTML文書:.htmlを、または.xml。
ラベルの言語で構成される。
封じ込めタグ:
タグは、あなたは私はあなたを持っている私にはできません。
そして、MySQLなどのケース小文字を区別しないですが、公式には小文字を示唆しました。
ファイルタグ:タグ/ボディ本体のラベルの見出しのhtmlルートタグ/ヘッドプラスヘッドタグ属性/タイトル
テキストラベルを:
HTML構文は厳密ではありません。
もっとタグカテゴリ。
CSS:カスケーディングスタイルシート

JavaScriptの
スクリプト言語は、いくつかの動的な効果を実現し、より良いユーザーとの対話することができます。

JavaScriptが実際に緩やかに型付けされた言語です。任意のタイプのVAR型変数の値が定義されてもよいです。
typeof演算()オペレータの
注意は、特徴的なJSがある:
±号後者の値は自動的に数値に変換することができる
値は、異なる種類の特殊JS比較演算子があるように比較することができるので、JS:合同(異なるタイプが直接falseを返す場合)。
!0と非NaNは、他の偽真である。残りの空の文字列は偽が真です。
声明では、セミコロンで終わるが、破断線が可能ラインがあります。
VARグローバル変数がされていない
ローカル変数は、
パラメータタイプが省略されてもよい場合VARない方法の定義、すなわち、
エラーなしで同じJSメソッドのオーバーライド。
JSは、内のオブジェクト:
関数の
配列は、様々なタイプの数字の特別な場所です。
正規表現:

DOM:ドキュメントの内容を制御します




电灯开关

	</head>
	<body>
	
	<img id="light" src="img/off.gif">
	
	<script>
	    /*
	        分析:
	            1.获取图片对象
	            2.绑定单击事件
	            3.每次点击切换图片
	                * 规则:
	                    * 如果灯是开的 on,切换图片为 off
	                    * 如果灯是关的 off,切换图片为 on
	                * 使用标记flag来完成
	
	     */
	
	    //1.获取图片对象
	    var light = document.getElementById("light");
	
	    var flag = false;//代表灯是灭的。 off图片
	
	    //2.绑定单击事件
	    light.onclick = function(){
	        if(flag){//判断如果灯是开的,则灭掉
	            light.src = "img/off.gif";
	            flag = false;
	
	        }else{
	            //如果灯是灭的,则打开
	
	            light.src = "img/on.gif";
	            flag = true;
	        }


	
	    }
	    
	</script>
	</body>
	</html>

ウィンドウ:ウィンドウオブジェクトの
警告は、()の期間での警告メッセージボックスと確認ボタンが表示されます。
確認は、()メッセージと確認期間を持つダイアログボックスを表示し、ボタンのボタンをキャンセルします。
*ユーザーはtrueに、メソッドの戻りを[OK]ボタンをクリックした場合
、ユーザーが[キャンセル]ボタンをクリックした場合、メソッドはfalseを返します*
プロンプト()表示は、ダイアログボックスの入力をユーザーに促すことができます。
*戻り値:ユーザーが入力した値を取得します

クッパオブジェクトモデル

COURT:

  • W3C DOM標準は、三つの異なる部分に分かれています。

  • コアDOM - 任意の構造化文書のための標準モデル

  • XML DOM - XML文書の標準モデル

  • HTML DOM - HTML文書の標準モデル

  • コアDOMモデル:

  • element:要素オブジェクト
    1.取得/作成:キャプチャし、文書を通じて作成する
    。2.方法:
    1. removeAttribute():削除属性
    2のsetAttribute():プロパティを設定

  • ノード:ノードオブジェクト、親の他の5つの
    特長*:すべてのDOMオブジェクトはノードと考えることができます
    *方法:
    * CRUD DOMツリー:
    *のappendChild():追加の子ノードのリストの最後のノードに新しい子ノード。
    *するRemoveChild():削除(およびリターンへの)現在のノードの指定された子ノード。
    *)(REPLACECHILD:新しいノードの子ノードと交換してください。
    *属性:
    *のparentNodeの親ノードを返します。
    イベント:
    フォーカス
    、マウス
    、キーボード
    提出フォーム
    ブートストラップ:フロントエンドの開発フレームワークは、半完成のソフトウェアです。
    利点:

  1. これは、スタイルの数を定義します。
  2. 応答レイアウト。ページの同じセットは、異なる解像度のデバイスと互換性を持つことができます。

ブートストラップ:

1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
	* 框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。
	* 好处:
		1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
		2. 响应式布局。
			* 同一套页面可以兼容不同分辨率的设备。


2. 快速入门
	1. 下载Bootstrap
	2. 在项目中将这三个文件夹复制
	3. 创建html页面,引入必要的资源文件


	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
	    <title>Bootstrap HelloWorld</title>
	
	    <!-- Bootstrap -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">






こんにちは世界

	</body>
	</html>

応答レイアウト

* 同一套页面可以兼容不同分辨率的设备。
* 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子
* 步骤:
	1. 定义容器。相当于之前的table、
		* 容器分类:
			1. container:两边留白
			2. container-fluid:每一种设备都是100%宽度
	2. 定义行。相当于之前的tr   样式:row
	3. 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目
		* 设备代号:
			1. xs:超小屏幕 手机 (<768px):col-xs-12
			2. sm:小屏幕 平板 (≥768px)
			3. md:中等屏幕 桌面显示器 (≥992px)
			4. lg:大屏幕 大桌面显示器 (≥1200px)

	* 注意:
		1. 一行中如果格子数目超过12,则超出部分自动换行。
		2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
		3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。

CSSスタイルとJSのプラグイン

1. 全局CSS样式:
	* 按钮:class="btn btn-default"
	* 图片:
		*  class="img-responsive":图片在任意尺寸都占100%
		*  图片形状
			*  <img src="..." alt="..." class="img-rounded">:方形
			*  <img src="..." alt="..." class="img-circle"> : 圆形
			*  <img src="..." alt="..." class="img-thumbnail"> :相框
	* 表格
		* table
		* table-bordered
		* table-hover
	* 表单
		* 给表单项添加:class="form-control" 
2. 组件:
	* 导航条
	* 分页条
3. 插件:
	* 轮播图
公開された98元の記事 ウォンの賞賛0 ビュー2210

おすすめ

転載: blog.csdn.net/weixin_43221993/article/details/103830521