Html静态网页技术小结

Html静态网页技术小结Html入门所有的html网页都是有标签（W3C规定标准标签）所有的标签使用标准：标准标签名称/标准标签名称，而标签不区分大小写IE浏览器对html源代码是解释执行（在加载网页代码的时候，浏览器碰到一行，就执行并显示一行做设置的效果）常见标签：标签名称使用方法Html在每个网页文件的第一行Head设置网页头部约束信息Title设置网页的标题信息Meta设置网页内容格式及字符编码metahttp-equiv=”Contet-Type”content=”text/html;charset=utf-8”/charsetGbkGb2312Big5Utf-8Iso-8859-1Body正文内容标签P段落标签Br换行标签Hr横线：hrcolor=”colorvalue”size=”4”width=”50%”align=”left/center/right”/H1-h6标题标签Pre预处理格式Img图片标签imgsrc=”imageurl/picname”width=””height=””alt=””align=””/A超链接标签：页面间ahref=”url”链接文字内容/a页面内部：aname=”tagname”锚标记/aahref=”#tag”链接文字内容/amarquee滚动标签：marqueescrolldelay=”100”direction=”up/down/left/right”onMouseOver=”this.stop()”onMouseOut=”this.start()”/align设置对其方式Bgcolor背景颜色：rgb英文颜色值Background背景图片font设置指定字体标签fontcolor=”colorname”size=””face=””style=””/表格技术表格主要规范化数据显示（行列格式严谨）单元格合并表格布局表格基础美化涉及表格的相关标签标签名称使用方法Table表格开始Caption表格标题信息Th设置表头信息Thead设置表头信息Tr行标签Td列标签Colspan列合并Rowspan行合并Border边线Bordercolor边线的颜色Width表格宽度Height表格高度Background表格背景Bgcolor表格背景颜色Align表格内容对其方式Cellspacing表格单元格与单元格的间距Cellpadding单元格内容与表格的边线的间距表单技术及框架布局表单是用来收集客户通过网页填写的信息表单常用标签标签名称使用方法form表单标签的开始，所有表单控件都必须包含在该标签里面formaction=url:netaddress/serverapplicationmethod=”post/get”/text单行文本框inputtype=”text”name=”username”value=”defaultvalue”size=”显示字符长度”maxlength=”最大可输入的字符个数”readonly=”readonly”/password密码框inputtype=”password”name=”passwordname”value=”defaultvalue”size=”显示字符长度”maxlength=”最大可输入的字符个数”readonly=”readonly”/Radio单选按钮inputtype=”radio”name=”sex”value=”男”/男inputtype=”radio”name=”sex”value=”女”/女checkbox复选按钮inputtype=”checkbox”name=”tech”value=”html”/htmlinputtype=”checkbox”name=”tech”value=”java”/javainputtype=”checkbox”name=”tech”value=”oracle”/oracleselect下拉列表框selectname=”bir”optionvalue=”1”1/option……………………optionvalue=”1”1/option/selecttextarea多行文本编辑框textareaname=”t”rows=”6”cols=”80”…../textareareset重置按钮inputtype=”reset”value=”取消”/submit提交按钮inputtype=”submit”value=”确定”/button自定义按钮inputtype=”button”value=”测试”/hidden隐藏表单控件inputtype=hiddenname=techvalue=javaee/案例：formaction==get用户姓名：inputtype=textname=username/br/用户密码：inputtype=passwordname=password/br/inputtype=hiddenname=techvalue=javaee/inputtype=submitvalue=提交//form最终的传值效果：=workit&password=888888&tech=javaeeCss样式表及div层布局Css用来辅助修饰美化网页效果常见的css样式内嵌样式（仅仅修饰当前页面内容效果）head……styletype=”text/css”样式规则1样式规则n/style……/head行内样式(仅仅修饰指定的一个元素效果)…style=”样式规则1样式规则n”/外部样式(可以通过一个专门独立的css样式文件，可以修饰引用了改css的所有网页效果)第一步：专门定义css文件：若干个样式规则第二部：需要安装上述规则修饰的网页需要用如下代码引用：headlinkhref=”css/workit.css”rel=”stylesheet”type=”text/css”/Orstyletype=”text/css”@Import“css/workit.css”;/style/head常见的样式：查阅专门的css官方（浏览器适应）帮助文档