ホームページ > 記事 > ウェブフロントエンド > 1 日で HTML を始める_html/css_WEB-ITnose
1 日で HTML を始める_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:16:491170ブラウズ
一、什么是HTML
1.html：
HyperText Markup Language 超文本标记语言，是最基础的网页语言，而且都是由标签组成。
2.基本格式：
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
放置一些属性信息，辅助信息。
引入一些外部的文件。（css，javascript）
它里面的内容会先加载。
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
存放真正的数据。
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
3.注意事项
1）多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
2）想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
3）属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。
二、常见标签
1.排版标签
1）换行 076402276aae5dbec7f672f8f4e5cc81
2）e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 段落标签 在开始和结束的位置上会留一个空行。
属性：align= 对齐方式
3）231a563c997aa9e3e0ae614bd16728b0 一条水平线
属性：
1）宽度：width 值像素 100px 可以写百分比 30%
2）align= 对齐方式
3）size 粗细
4）color 值 red green blue RGB 三原色 (red green blue #aa55ff)
4）div 声明一块区域 dc6dce4a544fdca2df29d5ac0ea9906b数据16b28748ea4df4d9c2150843fecfba68 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) 0f29adbd70cefc4adca2c9ff00f71767
属性:
1) size フォントサイズの最大値は 7 で、最小値は 1 です
私の周りでは h6>489364b7e0629f9745997c79a31b7c6d
フォントサイズを大から小まで縮小します。
3)9368c5823948a595f9974a5e2b3bd3f141908b66e4bc50a75b443e0dfafd01f9太字
4)7a282450d175f90c7a1cab18e4a7ad13a7d43287c9e69e794166deeac33b9b9c斜体
ラベルはネストをサポートしています
コード:
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)リストタグ
5c69336ffbc20d23018e48b396cdd57a
をdlします。cd324b2387ec29e44e8e788c60648872
2) 順序付きリストと順序なしリスト
順序付き: 228b3a281e53019be414370cd81882b2データ入力:25edfb22a4f469ecb59f1190150159c6データコンテンツbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6a00e7f5dd8e8163bcd69deb88fe81040ユーザー管理5db79b134e9f6b82c0b36e0489ee08ed2867e861ba23559b572f230426ab14ea
コード:
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. 画像タグ
41339fc7be7d959320777dd0c0f73db7
属性: src="Picture path"widthは画像の幅を表示します
heightは画像の幅を表示します画像 高さ画像の
5. ハイパーリンクリンク
3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed
機能: 1) リンクリソース
href="" を指定する必要があります。href の値が指定されていない場合、デフォルトは次のようになります。ファイル file のプロトコル。プロトコルとリンク リソースを自分で指定することのみが可能です。ブラウザが href で指定されたプロトコルを解析できない場合、アプリケーションが呼び出され、解析可能なプログラムを開くことができます。
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 <img src="girl4.jpg" width="800px" height="600px" alt="啊，美女！">16 17 </body>18 </html>
表示: ここにテキストを追加できます
6. テーブルラベル (強調)
機能: データのフォーマット
a78e6d26742c3a4ecc2eb9fa519c61bb テーブルを宣言します
属性:
1) 境界線 2) 幅
a34de1251f0d9fe1e645927f19a896e8fd273fcf5bcad3dfdad3c41bd81ad3e5 ) 整列方法 (テキストコンテンツ)
& & lt; gt; & lt;/td & gt;1) 幅
2) 高さ4) ROWSPAN 行マージ グリッド
& lt; ;/th> は太字で中央揃えになります。 C & lt; キャプション & gt; テーブルのタイトルColspan マージ ライン、Rowspan マージ
コード:
7. フォーム タグ
サーバーと対話できます。
ff9c23ada1bcecdd1a0fb5d5a0f18437f5a47148e367a6035fd7a2faa965022e
属性: action="リクエストの送信場所"
メソッド 送信メソッド(getとpost) メソッドが記述されていない場合、デフォルトでは、メソッドを取得します。
get と post の違い:
1) get フォームにカプセル化されたデータは URL 上に直接表示されます。投稿モードのデータは URL に表示されません。
2) getメソッドのセキュリティレベルは低く、postメソッドのセキュリティレベルは高くなります。
3) 取得モードでのデータの長さ、ポストはビッグデータをサポートします。
** ?sex=on：
各inputタグに名前と値を指定します 名前は必須です?username=haha&pwd=1223&sex=nv&jishu=html
73a3ca28445b1c625f2086a50cb8c7df
属性：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 隐藏标签（用户不用看到的，但是咱们开发时必须要使用的，可以把数据封装到隐藏标签中，和表单一起提交到后台）。
选择标签
221f08282418e2996498697df914ce4e18bb6ffaf0152bbe49cd8a3620346341选择下拉框
文本域textarea
4750256ae76b6b9d804861d8f69e79d3文本内容40587128eee8df8f03d0b607fe983014
8.框架标签
f900b4fc197b16ab214eecf015bb6bd2
04a0d55efbbfd646a993fbc01f262c57
eb5f059992a0ae0ef16884cb75644e40
框架标签不能写在6c04bd5ca3fcae76e30b72ad730ca86d的内部。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