HTML/CSS从零开始-HTML基础(一)-html教程-PHP中文网

首页

web前端

html教程

HTML/CSS从零开始-HTML基础(一)

高洛峰

Oct 09, 2016 pm 03:29 PM

一、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