Maison > Article > interface Web > HTML/CSS从零开始-HTML基础(一)
HTML/CSS从零开始-HTML基础(一)
- 高洛峰original
- 2016-10-09 15:29:011008parcourir
一、web标准
1.1结构
(1)xhtml(Extensible Hypertext Markup language) 可扩展超文本标记语言
(2)W3C(world wide web consortium)万维网联盟
a、制定了结构（xhtml、xml）、表现（css）、标准。
1.2表现
（1）css(cascading style sheets)层叠样式表
1.3行为
（1）ECMA（Europan Computer Manufactures Association）欧洲电脑场商联合会
a、制定了行为 DOM(Document Object Model) 文本对象模型
b、ECMAscript标准
二、HTML基本结构
<!doctype html>
<html>
<head>
<meta charest="utf-8"> <!--编码格式-->
<title></title>
</head>
<body>
<h1></h1> <!--标题-->
.
.
.
<h6></h6>
<p></p> <!--段落-->
</body>
</html>三、基本语法
3.1常规标记
74e7802910dcda44fc0fc0edc6ec27084668e1f8f2556fbda981cac1b10ab4f7
如下：
8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0 a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a daf5b078b3cbc5613722d1edbf97f7e7
907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338 5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6 9af37b09af6f2de50ebc037f0b477b02
3.2空标记
83cc5cb3f756b13702a94adae26fe34b
如下：
fa8fd94cc4b4d9671e4ee513ae2a31d1 d52fe3996717b6fdf7916c7165037b3c
076402276aae5dbec7f672f8f4e5cc81 65758a343f344d9910c78c64a2645516
1c6e26d3fb1208fc52a7d067ec309791 b1e5fe2ae6a8194efdb17f6020a337af
空格
四、常见标记（标签）
4.1列表
a、有序列表
<ol> ordered <li></li> <li></li> <li></li> </ol>
b、无序列表
<ul> unordered <li></li> <li></li> <li></li> </ul>
c、自定义列表
<dl> definition list <dt>被解释</dt> <dd>解释</dd> definition description </dl>
说明：dd可以重复,但是dt只允许有一个;
有序列表中参数 tyle="A"，start="3",//第一个序列从C开始。
4.2图片标签
ee53e283853f526ca767fe91c94017f8
4.3超链接
7665ab8e9dc395e1d3e4a17ec4d6a3985db79b134e9f6b82c0b36e0489ee08ed
路径分为：绝对路径（https//www.baidu.com）,相对路径如（images/inder.html）.
target默认属性值为_self;_blank为打开新窗口
4.4块标签
说明：a、块之间自动换行
b、如果p块限定宽、高，内容为中文时，自动换行；如果是英文不换行，会溢出。
说明：a、span块之间不换行，宽高不能限定，随着文本的长度变化。
4.5表格标签
1、语法：
818205897b395809e55bf822f6ad3bd5
2、说明;在表格给定宽高后,用属性cellpadding时，如果给定宽度超出设定的宽高，表格会被撑开。
a34de1251f0d9fe1e645927f19a896e8
b4d429308760b6c2d20d6300079ed38eb4d429308760b6c2d20d6300079ed38e
b4d429308760b6c2d20d6300079ed38eb4d429308760b6c2d20d6300079ed38e 94e8635d6b0bf77d8374a0d84d55971d
b4d429308760b6c2d20d6300079ed38eb4d429308760b6c2d20d6300079ed38e
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1cb6c5a531a458a2e790c1fd6421739d1c
b6c5a531a458a2e790c1fd6421739d1cb6c5a531a458a2e790c1fd6421739d1c db20b48319bd1e4eaacd9ce21dcccf58
b6c5a531a458a2e790c1fd6421739d1cb6c5a531a458a2e790c1fd6421739d1c
fd273fcf5bcad3dfdad3c41bd81ad3e5
3、单元格合并属性
colspan 合并列
rowspan 合并行
语法：rowspan="3" //合并三行
4、表单
a、表单框
语法：561963ed25e503819690cf1037c5a30ef5a47148e367a6035fd7a2faa965022e
说明：
b、文本框
092a008e181b9c255177370e679f0364
c、密码框
d092a17dce8bc4c047072a2097725d35
d、单选框
0791d1586d94b692cdb9984aafc7c770
如下:
8023824e570769ae1589bdfb94c042a9男
c3c9b3c321e3e8fe53bdbb1e37ba18e2女
e、多选框
e388a4556c0f65e1904146cc1a846bee择偶标准94b3e26ee717c64999d7867364b1b4a3
04760614dd276391c6ae6c76ff1e7b81185
8c6c43416b9345bc87ce3b87fa66d322黑
f1e7a177b26924b7b5b3887e3a8de500男
d95f7aa1d633fcaee543be198a7d2bf1东北
disabled="disabled"(禁用、禁选)
checked="checked"(默认选中)
f、重置
(1)93a85c88ee5e42c0e85faf3cda149083 （重置，清空以上填写的数据）
g、按钮
(1)e9b7c402b319b5a4aecdf69a6b9f31c0
(2)0eb42c5645ff73487d71fb6aac00e5e7
说明：按钮作为标签时bb9345e55eb71822850ff156dfde57c8按钮65281c5ac262bf6d81768915a4a77ac0既跳转，又提交
h、下拉列表
(1)10747b6ba43ea00abe1475b279a5cf66
5a07473c87748fb1bf73f23d45547ab84afa15d3069109ac30911f04c56f3338
5a07473c87748fb1bf73f23d45547ab84afa15d3069109ac30911f04c56f3338
18bb6ffaf0152bbe49cd8a3620346341
i、文本域
a0c73cfc13f8fa09851f3e9a7020a81c
40587128eee8df8f03d0b607fe983014
注明：
（1）以上文本框放在表单form里；
（2）在form中属性method的属性值post/get的区别？
a、get是从服务器上获取数据，post是向服务器传送数据；
b、get是把参数值加到提交表单的Action的属性所指的URL中，值和表单内的各个字段一一对应，在URL中可以看见，
post是通过HTTP，post机制将表单内的各个字段与其内容放置在HTML HEADER内一起传送给ACTION属性的URL地址，用户看不见这个 过程。
c、对于get方式，服务器端的ReqestQueryString获取变量的值，对于post方式服务器用Request.Form获取提交数据。
d、get数据传输量小不大于2kb,post的传输量大，一般不受限制
f、get安全性低，post安全性高，但传输效率高
（3）value在input中的用法
a、type="button" /"reset"/"submit"；表示按钮上的文本
b、type="text"/"password";表示初始值
c、type="check"/"radio"定义与输入相关值
（4）表单嵌套
f5d188ed2c074f8b944552db028f98a1
ff9c23ada1bcecdd1a0fb5d5a0f18437
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1ce62bbf775736401c314f832b4d1b6bd2b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c6567fa30056e21249eb80c721bd6de1cb90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c9eae9a5a5b38b217953304783d7e5951b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1cbb9345e55eb71822850ff156dfde57c8登录65281c5ac262bf6d81768915a4a77ac0b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f5a47148e367a6035fd7a2faa965022e
f16b1740fad44fb09bfe928bcc527e08