首页 > > 网页制作 > css >

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

2018-06-24 00:26:55来源：未知阅读 ()

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

三、基本语法

3.1常规标记

<标记属性1="属性值1" 属性2="属性值2" ></标记>
如下：
<strong></strong> <b></b> 
<em></em> <i></i>

3.2空标记

<标记属性="属性值"/>
如下：
<hr/>                    <！--水平线-->
<br/>                    
<img src="路径"/>        

 空格

四、常见标记（标签）

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图片标签

4.3超链接

<a href="路径地址" target="_blank"></a>

路径分为：绝对路径（https//www.baidu.com）,相对路径如（images/inder.html）.
target默认属性值为_self;_blank为打开新窗口

4.4块标签

<div></div>
说明：a、块之间自动换行
b、如果div块限定宽、高，内容为中文时，自动换行；如果是英文不换行，会溢出。
<span></span>
说明：a、span块之间不换行，宽高不能限定，随着文本的长度变化。

4.5表格标签

1、语法：<table width="" height="" border="1（表框像素）"bordercolor="表格框颜色" cellspacing="0（单元格间距）" cellpadding="内容离左边框像素">
2、说明;在表格给定宽高后,用属性cellpadding时，如果给定宽度超出设定的宽高，表格会被撑开。
      <tr>
      <th><th>
      <th><th>   
      <th><th>
      </tr>
      <tr>
      <td><td>
      <td><td>   
      <td><td>
      </tr>

3、单元格合并属性
   colspan 合并列
   rowspan 合并行
   语法：rowspan="3" //合并三行

4、表单

a、表单框
语法：<form name="表单名称" method="post/get" action=""></form>
说明：

b、文本框
<input type="text" value="默认值"/>

c、密码框
<input type="password" placeholder="提示信息"/>

d、单选框
<input type="radio" name="自定名(一致，必写)"/>
如下:
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女

e、多选框
<p>择偶标准</p>
<input type="checkbox" name="boy" value="185"/>185
<input type="checkbox" name="boy" value="黑"/>黑
<input type="checkbox" name="boy" value="男"/>男
<input type="chechbox" name="boy" value="东北"/>东北

disabled="disabled"(禁用、禁选)
checked="checked"(默认选中)
f、重置
(1)<input type="reset" value="默认值"/> （重置，清空以上填写的数据）
g、按钮
(1)<input type="button" value="只是起跳转，不提提交"/>
(2)<input type="submit" value="既跳转，又提交"/>

说明：按钮作为标签时<button>按钮</button>既跳转，又提交

h、下拉列表
(1)<select name="">
<option></option>
<option></option>
</select>

i、文本域
<textarea cols="宽" rows="行数" name="">
</textarea>

注明：
（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）表单嵌套
<table>
<form>
<tr>
     <td><input type="text" placeholder="填写用户名"></td>
     <td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr>
     <td><input type="button" value="忘记密码？"></td>
     <td><button>登录</button></td>
</tr>
</form>
</table>