ホームページ > 記事 > ウェブフロントエンド > HTML 学習の道のりを共有する
HTML 学習の道のりを共有する
- 零下一度オリジナル
- 2017-06-24 13:23:222374ブラウズ
ウェブサイトプロセスの開発
スタイルと機能（フォーラム、掲示板、支払い、ユーザーログインなど）を決定します。
アーティストは、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
#空のリンク。
HTMLの色表現
3つの方法
:色の言葉:青、緑、赤、黄色。
10 進数表現: rgb (255, 0, 0)
16 進数表現 #FF0000 (赤)、#00FF00 (緑)、#0000FF (青)
アンカーリンク- アンカーポイント(マーク)にジャンプ:
- 文法:Content…..
- 機能: http プロトコル ファイルのヘッダー情報をシミュレートし、Web ページを開く方法をブラウザーに伝えます。
- http-equiv 属性は通常、content 属性と組み合わせて使用されます。 content 属性は、情報の詳細な属性を指定します
- Web ページの文字セットを設定します:
-
- 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属性是只读属性，
必须与
隐藏域
功能：看不见的框。传递一些值，而又不想让别人看到。主要用于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属性来用的。
</strong><strong>含义：</strong>当浏览器不支持框架时，会提示信息。低版本不支持。高版本都支持。</p> <p><strong>语法格式：</strong><noframes>内容 内嵌框架（行内框架）
与普通框架区别：
常用属性：
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 20px; // 上下の余白は 10px、左右の余白は 20px です。
Margin: 10px 20px 50px; // 上のマージンは 10px、左右のマージンは 20px、下のマージンは 50px です。
マージン: 10px 20px 30px 40px; // 順序は右上、左下です。
CSS 背景プロパティ
背景色: 背景色。
背景画像: 背景画像のアドレス。背景画像:url(image/banner.jpg)
以上がHTML 学習の道のりを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
- スクロール字幕マーク(削除されました)