1 日で HTML を始める_html/css_WEB-ITnose-htmlチュートリアル-php.cn

1 日で HTML を始める_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:16:49

オリジナル

1216 人が閲覧しました

一、什么是HTML

1.html：

HyperText Markup Language 超文本标记语言，是最基础的网页语言，而且都是由标签组成。

2.基本格式：

　　
　　　　放置一些属性信息，辅助信息。
　　　　引入一些外部的文件。（css，javascript）
　　　　它里面的内容会先加载。
　　

　　
　　　　存放真正的数据。
　　

3.注意事项
1）多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
2）想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
3）属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。

二、常见标签

1.排版标签

1）换行

2）

段落标签在开始和结束的位置上会留一个空行。

　　属性：align= 对齐方式
3）

一条水平线
　　属性：
　　　　1）宽度：width 值像素 100px 可以写百分比 30%
　　　　2）align= 对齐方式
　　　　3）size 粗细
　　　　4）color 值 red green blue RGB 三原色 (red green blue #aa55ff)

4）div 声明一块区域

数据

css+div
5) スパンは領域を宣言します

コード:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>排版标签</title> 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6  7   </head> 8    9   <body>10       这是一首古诗。11       <hr width="300px" size="20px;" color="red"/>12       <p align="center">13         静夜思<br/>14        床前明月光，<br/>15        疑是地上霜。<br/>16        举头望明月，<br/>17        低头思故乡。<br/>18        </p>19        一首非常出名的古诗。20        21        <hr/>22        <div>这是div区域1</div>23        <div>这是div区域1</div>24        <span>这是span的区域1</span>25        <span>这是span的区域2</span>26   </body>27 </html>

ログイン後にコピー

表示:

2. フォントタグ

属性:
1) size フォントサイズの最大値は 7 で、最小値は 1 です
私の周りでは h6>
フォントサイズを大から小まで縮小します。

3)太字
4)斜体
ラベルはネストをサポートしています

コード:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>字体标签</title> 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6  7   </head> 8    9   <body>10       <h2>排版标签</h2>11       <font size="7">文本内容</font><br/>12       <font size="10">文本内容</font><br/>13       14       <hr/>15       16       <h1>这是一级标题</h1>17       <h2>这是二级标题</h2>18       <h3>这是三级标题</h3>19       <h4>这是四级标题</h4>20       <h5>这是五级标题</h5>21       <h6>这是六级标题</h6>22       23       <hr/>24       25       <b><i>这是粗体又是斜体</i></b>26       <I>这是斜体</I>27       28       29   </body>30 </html>

ログイン後にコピー

表示:

3. リストタグ

1)リストタグ

をdlします。

2) 順序付きリストと順序なしリスト

順序付き:

タイプ: リストの予約番号
開始: どの番号から開始するか。
順序なし:

データコンテンツ

ユーザー管理

コード:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>列表标签</title> 5      6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7     <meta http-equiv="description" content="this is my page"> 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9     10 11   </head>12   13   <body>14       <h3>列表标签</h3>15       <dl>16           <dt>上层项目</dt>17           <dd>下层项目</dd>18           <dd>下层项目</dd>19           <dd>下层项目</dd>20       </dl>21       22       <hr/>23       24       <h3>有序列表</h3>25       <ol type="a" start="4">26           <li>有序列表</li>27           <li>有序列表</li>28           <li>有序列表</li>29       </ol>30   31       <h3>无序列表</h3>32       <ul type="square">33           <li>无序列表</li>34           <li>无序列表</li>35           <li>无序列表</li>36       </ul>37       38   </body>39 </html>

ログイン後にコピー

表示:

4. 画像タグ

属性: src="Picture path"

widthは画像の幅を表示します

heightは画像の幅を表示します画像高さ画像の

5. ハイパーリンクリンク

機能: 1) リンクリソース
href="" を指定する必要があります。href の値が指定されていない場合、デフォルトは次のようになります。ファイル file のプロトコル。プロトコルとリンクリソースを自分で指定することのみが可能です。ブラウザが href で指定されたプロトコルを解析できない場合、アプリケーションが呼び出され、解析可能なプログラムを開くことができます。
2) リソースの配置

名前 name 専門用語アンカー

コード:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>图片标签</title> 5      6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7     <meta http-equiv="description" content="this is my page"> 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9     10 11   </head>12   13   <body>14       <h3>图片标签</h3>15       <img src="girl4.jpg" width="800px" height="600px" alt="啊，美女！">16       17   </body>18 </html>

ログイン後にコピー

表示: ここにテキストを追加できます

6. テーブルラベル (強調)

機能: データのフォーマット
<表＞テーブルを宣言します
属性:
1) 境界線 2) 幅

3) テキストと内側の境界線のセルパディング間の距離

) 整列方法 (テキストコンテンツ)

& & lt; gt; & lt;/td & gt;

1) 幅

2) 高さ

4) ROWSPAN 行マージグリッド

& lt; ;/th> は太字で中央揃えになります。 C & lt; キャプション & gt; テーブルのタイトル

Colspan マージライン、Rowspan マージ

コード:

7. フォームタグ

サーバーと対話できます。

入力項目の内容ユーザー名パスワード

属性: action="リクエストの送信場所"
メソッド送信メソッド(getとpost) メソッドが記述されていない場合、デフォルトでは、メソッドを取得します。

get と post の違い:
1) get フォームにカプセル化されたデータは URL 上に直接表示されます。投稿モードのデータは URL に表示されません。
2) getメソッドのセキュリティレベルは低く、postメソッドのセキュリティレベルは高くなります。
3) 取得モードでのデータの長さ、ポストはビッグデータをサポートします。

** ?sex=on：

各inputタグに名前と値を指定します名前は必須です

?username=haha&pwd=1223&sex=nv&jishu=html

　　属性：type 值可以指定很多的值，每一个不同的值代表的不同输入组件。

　　1）type=text 文本框
　　2）type=password 密码
　　3）type=radio 单选按钮
　　　　name属性
　　4）type=checkbox 多选按钮
　　　　单选和多选都有默认值：checked="checked"
　　5）type=reset 重置按钮
　　6）type=submit 提交按钮
　　7）type=file 上传文件的输入项
　　8）type=button 按钮
　　9）type=image 图片（也是提交按钮，）
　　10）type=hidden 隐藏标签（用户不用看到的，但是咱们开发时必须要使用的，可以把数据封装到隐藏标签中，和表单一起提交到后台）。

　　选择标签
　　　　选择下拉框
　　文本域textarea
　　　　文本内容

8.框架标签

框架标签不能写在的内部。body不能写在frameset的上面。

代码：

left.html：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>left.html</title> 5      6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7     <meta http-equiv="description" content="this is my page"> 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10   </head>11   12   <body>13       <ul>14           <li><a href="http://www.baidu.com" target="right">百度</a></li>15           <li><a href="http://www.sina.com" target="right">新浪</a></li>16       </ul>17   </body>18 </html>

ログイン後にコピー

right.html：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>right.html</title> 5      6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7     <meta http-equiv="description" content="this is my page"> 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9     10     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->11 12   </head>13   14   <body>15       <font color="green" size="7">北京欢迎您！！</font>16   17   </body>18 </html>

ログイン後にコピー

top.html:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>顶部logo</title> 5      6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7     <meta http-equiv="description" content="this is my page"> 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9     10     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->11 12   </head>13   14   <body>15       <img src="../girl4.jpg" height="160"/>16       17   </body>18 </html>

ログイン後にコピー

09-htmldemo.html:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <html> 3   <head> 4     <title>框架标签</title> 5      6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7     <meta http-equiv="description" content="this is my page"> 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9     10     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->11 12   </head>13   14   <frameset rows="160,*">15       <frame src="top.html" name="top">16       <frameset cols="180,*">17           <frame src="left.html" name="left">18           <frame src="right.html" name="right">19       </frameset>20   </frameset>21   22  <body>23       24   </body>25 </html>

ログイン後にコピー

显示：注意这里的frameset

代码下载地址：

https://github.com/BigShow1949/02-HTML-CSS