ホームページ > 記事 > ウェブフロントエンド > HTML基礎学習ノート_html/css_WEB-ITnose
HTML基礎学習ノート_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:22:021426ブラウズ
1、页面
1、文件结构100db36a723c770d327fc0aef2ce13b1......73a6ac4ed44ffec12cee46588e518a5e
93f0f5c25f18dab9d176bd4f6de5d30e......9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d.......36cc49f0c466276486e50c850b7e4956
<HTML><HEAD> <title>, <base>, <link>, <isindex>, <meta></HEAD><BODY> <h1>正文</h1></BODY></HTML>2、语言字符集信息
a80d3e8b10be8444fac016e067f29eb7
基本上所有的网站的网页都有，现在一般都是UTF-8,和GBK2312
860ad7047cc0823bfb6011dea69786e6
bgcolor --- 背景色彩
text --- 非可链接文字的色彩
link --- 可链接文字的色彩
alink --- 正被点击的可链接文字的色彩
vlink --- 已经点击(访问)过的可链接文字的色彩
（颜色RGB16进制）
背景图象 5b937da1db48a8c6254dea9798563d47
4、页面空白(试了貌似不管用)页面左边的空白 20c57471a7dccabd8ceaa133f278691f
页面上方的空白(天头) a799d7c019b1e4b3e1762414c51486aa #=margin amount
5、连接9dba6f1f949f5e07bed667bf670fd9c45db79b134e9f6b82c0b36e0489ee08ed 有下划线的连接
67af59f1c65b369bba325e8a8f4515645db79b134e9f6b82c0b36e0489ee08ed无下划线不像链接
默认的是在原来的窗口打开
target="Window_Name" (打开一个新的窗口属性)
下面百度是在新窗口打开
<a href=" target="Window_Name">百度</a>6、标尺线
f32b48428a809b51f04d3228cdf461fa
标尺线的高度：7d45e04e434db619cfc922b22c300388
例如：1ef11af6852ff76ffc7273d8180f9f12
标尺线的宽度：ec6be0e7c816fd8d5a2b8bdf01031316
例如：31ae2479f694e0abc7111e54c7f5abc7dde06fa2712cb03b84def21172787bf0
标尺线的位置：5209708ab51c79efc6557445e4f1878c #=left, right
例如：72f1d70836d3c2d65d02ea09abdc61a0 1b0450adafe8c216509f897e0aa4b9bf
标尺线的颜色：b30100b286c57e940ae9cf1682eff0bb
例如：798fed922f1ed47bf7234282dafb3bfb
<!doctype html><html> <head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Document</title> </head> <body bgcolor=#ff0033 text=#00ff99 link=#000099 alink=#330099 vlink=##66cc33> <h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3><a href="http://www.baidu.com">百度</a><br/><a name="http://www.baidu.com">百度1</a><hr><hr size=20><hr width=50><hr width=50%><hr width=50%><hr width=50%><hr noshade><hr color=#000000 > </body></html>
2、字体
1、标题字体字体由大到小
4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a
c1a436a314ed609750bd7c7d319db4da2e9b454fa8428549ca2e64dfac4625cd
684271ed9684bde649abda8831d4d35539528cedfa926ea0c01e69ef5b2ea9b0
3f7b3decd2dcafb07b84d2d3985d9f400f6dfd1e3624ce5465eb402e300e01ae
39318b6f72ed39310530dfd69d0078e146eb22d0a433f22cff9940d34d5612bf
4e9ee319e0fa4abc21ff286eeb145ecc489364b7e0629f9745997c79a31b7c6d
b35601808ee30eac9a0f11ecc3d2c015631de3dd0df8235a13014b55a1414c03这些标记显示黑体字，自动插入空行
2、字体大小f46318c8e4e5e274ad3e08f51dbf9a55....e6e38b3c62e8df885fe2e3986461aa63#=1,2,3,4,5,6,7
加粗：a4b561c25d9afb9ac8dc4d70affff419....0d36329ec37a2cc24d42c7229b69747a
斜体：5a8028ccc7a7e27417bff9f05adf5932.....72ac96585ae54b6ae11f849d2649d9e6
下划线：88f336217b3880082bb52d49b5de60a5....04e11139013d3ca73accef66348e2e58
打字机文本：78f983dbc27872ba42409adefe5049d9...d98ca7951c814b9263d12f482df06c69
上标注：2cdea26b4c3988e37d674b56660962a72eb235f530502820017cce1685312d59
下标注：b96cac025db4031319c29e1eb68f19d6270ea406e83044e5b95e23270c35ff95
删除文本定义: 2e44d2d3284d23d932e1fd85f3d4cf3a6cf51b1709551acbf4a696702deda05f 533df51242d4fe18c58d599b7d69a4e442c3f6e9e03fa0a8003320368cc30da4
<!doctype html><html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <b>加粗</b><hr> <i>斜体</i><hr/> <u>下划线</u><hr/> <tt>打字机文本</tt><hr/> <sup>上标注</sup><hr> <sub>下标注</sub><hr> <s>可定义删除文本</s><hr> <strike>可定义删除文本</strike><hr> </body></html>4、逻辑字体
强调字体倾斜：907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338
强调字体加粗：8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0
用于表示计算机源代码或者其他机器可以阅读的文本内容:ffbe95d20f3893062224282accb13e8f1cd55414ff5abdfea5dd958e7e547fdd
短语标签:162cd570ab1483e383d78dcb7f452f7c01db4cd1960857e462e8b7d558780ea2
键盘文本：5e4e803d53d659f332070b5d4aa430dbd9ef50d71008f2b835cfb34737d70838
变量的名称b7f90f73cad438258bf67e62f79b21135820475f770bd7cef3d0e7b38467dabc
对特殊术语或短语的定义7f9d788ef50b059a7f76f3d2e4ccc9d1c182393edfae081cb9fa666d3b96fd2b
注释作用：f3a85e1241a187c5ac462d886e9a968bf3a85e1241a187c5ac462d886e9a968b
小型文本：d015d241ae6d34c34210679b5204fe857552a991a706bdbcb00625c14ce34064
大字号:3d49bde0e0b2e042578ad34140b6c48ecb47d890eb8c521d3966d2b2263ef112
<!doctype html><html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <b>加粗</b><hr> <i>斜体</i><hr/> <u>下划线</u><hr/> <tt>打字机文本</tt><hr/> <sup>上标注</sup><hr> <sub>下标注</sub><hr> <s>可定义删除文本</s><hr> <strike>可定义删除文本</strike><hr> <h1>逻辑字体</h1> <em>强调字体倾斜</em><hr> <strong>强调字体加粗</strong><hr> <code>用于表示计算机源代码或者其他机器可以阅读的文本内容</code><hr> <samp>短语标签</samp><hr> <kdd>键盘文本</kdd><hr> <var>变量的名称</var><hr> <dfn>对特殊术语或短语的定义</dfn><hr> <cite>注释作用</cite><hr> <small>小型文本</small><hr> <big>大字号</big> </body></html>
物理风格直接指定字体的“样式”（如粗、斜、下划线）；
逻辑风格则是指定文本的“作用”（如示例文字、缩小文字）。
就像去餐馆吃饭，点菜的时候，A告诉炒菜的师傅“炒得多一点”，这是物理风格，直接指定样式；B告诉炒菜的师傅“炒得辣一点”，这是逻辑风格，指定作用。
5、字体颜色9bc04c55d9040adebca06e48c51e58a0.....e6e38b3c62e8df885fe2e3986461aa63
6、客户端字体
e71b1e74a767ad85b1ae61b15097a55ae6e38b3c62e8df885fe2e3986461aa63
7、字符实体
& &< <> >" "
3、文字布局
1、行的控制空行:e388a4556c0f65e1904146cc1a846bee
换行：0c6dc11e160d3b678d68754cc175188a
不换行f44a345470ed5309298c118c07c6efac
2、文字的对齐 291729de4f14934f94b2884d42464163...631de3dd0df8235a13014b55a1414c03 ( 4a249f0d628e2318394fd9b75b4636b1c1a436a314ed609750bd7c7d319db4da......)
d6e673cce5c51db37498dbca93bf64d6...94b3e26ee717c64999d7867364b1b4a3 #=left, center, right
91ce9c4ba69e05eaf6d7285ca71dfbb4...16b28748ea4df4d9c2150843fecfba68 #=left, center, right
4、列表无序列表：ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6.........929d1f5ca49e04fdcb27f9465b944689
有序类表:c34106e0b4e09414b63b2ea253ff83d625edfb22a4f469ecb59f1190150159c6..........f6f112ef45f603be226bc581f9dd5e90
定义列表：5c69336ffbc20d23018e48b396cdd57a73de882deff7a050a357292d0a1fca94......67bc4f89d416b0b8236eaa5f43dee742.....cd324b2387ec29e44e8e788c60648872
定制表中的标记：feb165a3774717bdbdf91840e32f4515 #=disk,circle,square
定制有序列表表中的序号:feb165a3774717bdbdf91840e32f4515 #=A,a,I,i,1
e03b848252eb9375d56be284e690e873.........bc5574f69a0cba105bc93bd3dc13c4ec
eca8cfce48cd8f3ae6cb7e888344fec6.....bca395fde5cab0f1595e0009e6d3d3e3
43e1fc467495bab219a3286f74139f6a......c4d9033ad21c358430e75a24655d3d0f
b8a712a75cab9a5aded02f74998372b4.......1aee16100a65d522474e4de7ff568f4a
7、闪烁7afc7d03f55f3e69b40a3d28617c519d......8bc05a62ef0ba411089f2010f113d57a
<!doctype html><html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body><h1>中间</h1><div>大家愚人节快乐</div><div>大家愚人节快乐</div><div>大家愚人节快乐</div><blink>块引用</blink><div>Her Song:<blockquote>When I was young, I listened to the radio waiting for my favorite songs....</blockquote></div><h1>定制列表元素</h1><ul><li type=disc>ONE<li type=circle>TWO<li type=square>THREE</ul><h1>定制列表</h1<dl><dt>Today<dd>Today is yesterday.<dt>Tomorrow<dd>Tomorrow is today.</dl><h1>有序列表</h1><ol><li>Today<li>Tommorow</ol><h1>无序列表</h1<ul><li>Today<li>Tommorow</ul> </body></html>
4、图像
1、插入图像基本语法： 6323e17470b4a87738dac4c048248603src对应图片的地址,alt图片的提示内容
e95c51be4210a333b1e0171aa57b96be#=top,middle,bottom 分别为上、中、下
3、边框1e44938e6ede81a8475b5f519e38ec5a #=value
5、表格
1、基本语法：f5d188ed2c074f8b944552db028f98a1...f16b1740fad44fb09bfe928bcc527e08 - 定义表格
a34de1251f0d9fe1e645927f19a896e8 - 定义表行
b4d429308760b6c2d20d6300079ed38e - 定义表头
b6c5a531a458a2e790c1fd6421739d1c - 定义表元(表格的具体数据)
默认的不带边框，
带边框的表格：bb643a387a53979effdf2ff19129bb42
跨多列的表元 835353731c6a6673553d64db27dd5445
跨多行的表元 4f0a6b443ac658f9c2971477ee43ff4b
3、表格尺寸设置 边框尺寸设置：94a897ec76c9cd784d82ad34825b9d06表格本身尺寸设置：1c3421682bc885512ff5e24583591cca
表元间隙设置:708da535e78273d7a6bb7e0598e610ef
表元内部空白设置:bd871ac2c8b1e7e9d9fb8dfd70b0f6d7
4、表格内文字的对齐和布局2f1cd69bdf3804f7124d5dcf531d0f04
8cabf4f5ebf919c57c87e25402a48c3a #=left, center, right
f51870f17caeac9f7d8f762cd7fc4ced
5、表格在页面的对齐c23ff5d08b5bf8bd3e502c0d6c3b4d25#=left right center
e10efed3293eb06d06cfd32a63f672af....37eb775bb5a9e6f3d094e96a76117fe8
7、表格色彩a70825fbe1b5904eb1ed73ebf0653b27
<!doctype html><html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <table border> <caption >标题</caption> <tr> <th bgcolor=ffaa00>HTML</th> <th bgcolor=#3300cc>MySql</th> <th rowspan=2 >Css</th> </tr> <tr bgcolor=#ffffff><td>A</td><td>B</td> </tr> </table> </body></html>8、表格中分隔线的显示
显示所有的分隔线：95121b5a1ef88ad4f181b914ba529f35
只显示组与组之间的分隔线：1ab053fb44c9280c1d376314faa13829
只显示行与行之间的分隔线：33e3057b2e70e41fc0feafa74291bbd8
只显示列与列之间的分隔线 : 2b674bd427cd2aa1bb8929e531d2aeb5
不显示任何分隔线:1936558b97bc41ecbe53df9c79305b0c
6、表单
1、基本语法5c9c9cdb3d69af09919eb1b11faba9b9(提交方法一般都是POST或者GET)
（enctype=”multipart/form-data”提交文件）
.........
.........
f4f7bfa548d103691d6b9ba5dcdf6c2e
73e20527c4b39a5569bf640e17eb894e
一般的数据提交方式都是通过表单来完成的
下面试表单中提供给用户的输入形式
59d00fe83dfada48a27769c5ac97d019
文字输入：*=text
密码输入：*=passwd
复选框：*=checkbox （默认选中 checked="checked'）
单选框：*=redio
图像坐标：*=image
4541a39a73f66844cb6823f9b27f27ca
隐藏表单元素：*=hidden
文件：type=file
列表选择框:14270eeb917b9c0865f33d36f514ce275a07473c87748fb1bf73f23d45547ab84afa15d3069109ac30911f04c56f333818bb6ffaf0152bbe49cd8a3620346341
文本区域：1fafe29d381c170faa48268670e0177340587128eee8df8f03d0b607fe983014
7、移动的文字
1、基本语法
ed126914ed1419bab26abf7cf307b7b9.....7204e33a7a23f6efcc788532e245c31b
2、文字移动的属性设置
509f0ddb337d4176be994cbbc5e78c72.....7204e33a7a23f6efcc788532e245c31b #=left,right（移动的方向，向右，向左）
3、方式：
b3ec35bb2849cc2499b1e130293b0063.....7204e33a7a23f6efcc788532e245c31b
#=scroll（一圈一圈绕着走）
#=slide（只走一次）
#=alternate (来回走)
4、循环
387cb5a550487e96380718e79dbc2b54.....7204e33a7a23f6efcc788532e245c31b #=次数
5、速度
6bfb7eb919a917eca4063a0d3464c52c.....7204e33a7a23f6efcc788532e245c31b #=速度
6、延时
7d69d9aa3f5fa99033709d417b6ee59c.....7204e33a7a23f6efcc788532e245c31b #=时间
8、多媒体内容
55525077f4f7e35471b8122e1f748d55