粉阿吉整理(1)之------HTML

趁着过年,整理库存!

1. 网页组成

组成 开发语言 web标准
结构(Structure) HTML XHTML和XML
表现(Pressentation) CSS CSS
行为(Behavior) JS 对象模型(如W3C DOM)和ECMAScript

开发语言介绍:
HTML : 超文本标记语言(HyperText Markup Language) ====》 结构
CSS: 层叠样式表(Cascading Style Sheets) ====》样式
JS: (JavaScript) ====》行为
Html和XHtml最主要的不同:

  1. XHTML必须被正确的嵌套
  2. XHTML必须被正确的关闭
  3. XHTML必须拥有根元素
  4. 标签名必须用小写字母

2. 结构

<!DOCTYPE html>   声明文档类型
<html>            根文件,表示要写的东西是html
<head>            头部信息
     <meta charset="utf-8">   编码格式
     <title></title>          提示信息(显示在标题栏)
</head>

<body>            页面主体
</body>
<html>

//html 超文本标记语言 
//超文本就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素 

<  标记 
<html> 标签 
<html> <html> 标签对

3. 语法

HTML语法

1) 常规标签(双标签)
<标签 属性=“属性值” 属性=“属性值”></标签>

2) 空标签(单标签) 
<标签 属性=“属性值” />

//常用标签-文本
1) 文本标题
    <h1>一级标题</h1> 
    <h2>二级标题</h2> 
          …… 
    <h6>六级标题</h6> 

2) 段落标记 
    <p>段落文本内容</p>

3)空格 &nbsp; 实义字符

4)强制换行 <br />

5)加粗 
    <b>加粗内容</b> 
    <strong>加粗内容<> 

6)倾斜 
    <em></em> 
    <i></i>

7)水平线 <hr /> 
   删除线 <del></del> 

 8)上标/下标 
<sup>上标</sup> <sub>下标</sub>

9)下划线
 u  一般不用 用文本修饰
 
//常用标签-列表
HTML中有三种列表,分别是:
*无序列表:
  <ul> 
     <li></li> <li></li> ......
  </ul>
*有序列表:
  <ol> 
     <li></li> <li></li> ......
  </ol>
*自定义列表:
  <dl> 
    <dt>名词</dt>
    <dd>解释</dd> (定义描述) ......
  </dl>

图片标签
   <img src=“图片地址” alt=“图片名” title="图片标题" / >  (单标签)

a标签、超级链接
 <a href="链接地址" target="_self/_blank">链接文本/图片</a> 
    
属性:  target 链接打开方式
 	   _self   当前窗口    
       _blank  新窗口     
     

4. 表格

数据表格
table  表格标签
tr     行标签 
td     单元格标签

//作用及组成:
作用:显示数据
组成:
		<table>
 			<tr> 
  				<td></td> 
  				<td></td>
 			</tr> 
		</table>

表格的相关属性:
		width="表格的宽度"
		height="表格的高度" 
		border="表格的边框"  border:solid 1px
		bgcolor="表格的背景色" 
		cellspacing="单元格与单元格之间的间距" 
		cellpadding="单元格与内容之间的空隙" 
	水平对齐方式:align="left/center/right"      
	垂直对齐方式:valign="top/middle/bottom/baseline"

合并行,合并列
	合并列 colspan="所要合并的单元格的列数";
	合并行 rowspan="所要合并的单元格的行数";

5. 表单

表单组成部分 主要负责把用户的信息传递给服务器,实现数据的动态交互。  收集数据
   表单域     表单控件(元素)   提示信息

表单域 包含了处理表单数据所用的程序的URL以及数据提交到服务器的方法。
<form action='url' method='get/post' name='名' >表单内容</form>

form:用于定义采集数据的范围,即设定表单的起止位置,并指定处理表单数据程序的url地址
action: 用于提交表单数据文件的URL的地址,这个文件通常是一个后台程序或是一个电子邮件地址。
method: 指定数据传递到服务器的方式。 
name: 用于设定表单名称,便于其他地方引用表单的值。

表单控件(元素)
文本框:<input type='text'  value='请输入' placeholder='请输入'/> 
密码框: <input type='password'/> 
提交按钮: <input type='submit' value='按钮上显示的文字' /> 
重置按钮: <input type='reset' value='按钮上显示的文字'/> 
跳转按钮: <input type='button'  value='按钮上显示的文字'/> (无默认值)

讲到表单,必不可少的问题,post和get区别,传送==详细讨论post与get》

你可能感兴趣的:(入门-基础,web,html)