HTML语言网页制作-----标签、表格、表单、框架

一：序

Html静态网页，内容(hyper text markup language，超文本标记语言)

Css 网页美化

Javascript 脚本语言

二：html的介绍

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> --这一行可以不写

    <head>--网页上的控制信息

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>页面标题</title>

   </head>

   <body>

页面要显示的内容

   </body>

</html>--结束标签

网页三部份内容：HTML CSS Javascript

路径：一般做网页的时候用的相对路径。

images/aaa.jpg 网页同一个目录中找images文件夹，再在images里面找aaa.jpg images/1000/aaa.jpg 网页同一个目录中找images文件夹，再在images里面找1000文件夹，再在1000文件夹中找aaa.jpg ../images/aaa.jpg 找网页上一级文件，在网页上一级文件夹中找images文件夹，在images文件夹中找aaa.jpg ../../images/aaa.jpg 找网页上两级文件，在网页上两级文件夹中找images文件夹，在images文件夹中找aaa.jpg

HTML格式：

一、body： bgcolor (页面背景色）text(文字颜色）background（背景壁纸） topmargin（上页边距） rightmargin（右页边距） bottommargin（下页边距）

leftmargin（左页边距）以上的属性仅做了解。

二、标签：（一）基本标签： 1.格式控制： <font face="字体名称" color="颜色" size="大小"></font> 字体 <b></b>加粗 <strong></strong> <i></i>倾斜 <em></em> <u></u>下划线 <br>或<br/>相当于回车 <pre></pre> <center></center> 居中转义：——需要记住  ——空格 <——小于号 < ；>——大于号 > &——& © ——©

例：

2.内容容器： <h1></h1> ...<h6></h6> ——标题。默认情况下，加粗，独立一行 <p></p> ——段落。独立一段，默认情况下，段落前后都会有一行大小的空白。

<div></div>——区域标签，层标签。用来划分网页区域，进行页布局。前后换行。 <span></span>——区域标签，层标签。前后不换行。

<ul></ul>——无序列表标签。 <ol></ol>——有序列表标签。 <li></li>——列表项标签，用来放在ol或ul里面的。

（二）常用标签： 1. 超链接 <a href="超链接的路径" target="_blank">超链接显示的内容</a> 书签：第一步：定义书签 <a name="书签名">内容</a> 第二步：定义超链接 <a href="页面名#书签名">超链接文字</a>

2.图片 <img src="路径（相对）" width="" height="" alt=""/>

3.图片超链接 <a href="超链接的路径"> <img src="图片路径"/> </a>

三、表格： <table></table> bgcolor：背景色。 align：表格在页面中的对齐方式。 width:宽像素，百分比。 border：边框宽度 cellpadding：边距 cellspacing：间距

<tr></tr> bgcolor：背景色 align：这一行中的文字的对齐方式 height:高度，一般是像素，也可设百分比。

<td></td> bgcolor:背景色 align：水平对齐 valign：竖直对齐 width:宽 height:高 colspan：列的跨度。 rowspan：行的跨度。注意：合并单元格的时候，一定要算好格好。

例1：一些简单命令的使用

<!DOCTYPE html PUBLIC"-//W3W//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd>

<html xmlns="http://www.w3.org/1999/xhtml1">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<title>网页标签</title>

</head>

<body>

<p><font color="#0066FF" face="华文新魏" size="5">字体控制</font>

  <!--注释--><br>

  <b>字体加粗</b><br>

  <i>倾斜</i><br>

  <u>下划线</u><br>

  <strong>加粗</strong><br>

  <em>倾斜</em><br>

</p>

<center>居中</center><br>

回<br>车<br>

空&nbsp;格<br>

<br>

<br>

<h1>标题1</h1>

<h2>标题2</h2>

<h6>标题6</h6>

<p>段落1</p>

<p>段落<br>

2</p>

<font>第一种<div>层标签</div></font>

<font>第二种<span>层标签</span></font>

<ol type="a">有序列表

<li>序号1</li>

<li>序号2</li>

<li>序号3</li>

</ol>

<ul type="circle">无序列表

<li>第一</li>

<li>第二</li>

<li>第三</li>

</ul>

<a href="http://www.w3school.com.cn">This is a link</a>

<a href="http://www.baidu.com">baidu</a>

<img src="123.jpg"/>

<html>

<body>

<p>&nbsp;</p>

</body>

</html>

</body>

</html>

例2:表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>HTML网页</title>

</head>

<body>

</body>

<table width="50%" border="0" cellpadding="1" bgcolor="#000000" align="center">

<tr height="10" align="center" bgcolor="#FFFFFF">

<td>代号</td>

<td>姓名</td>

<td>性别</td>

</tr>

<tr height="10" align="center" bgcolor="#FFFFFF" >

<td rowspan="2">n001</td>

<td>张三</td>

<td>男</td>

</tr>

<tr height="10" align="center" bgcolor="#FFFFFF">

<td>n002</td>

<td>男</td>

</tr>

<tr height="10" align="center" bgcolor="#FFFFFF">

<td colspan="2">n003王五</td>

<td>男</td>

</tr>

<tr height="10" align="center" bgcolor="#FFFFFF">

<td>n004</td>

<td>赵六</td>

<td>女</td>

</tr>

</table>

</html>

运行结果：

四、表单

<form id="" name="" action="" method=""></form>
1.文本类
单行文本框：<input id="" name="" type="text" value="内容"/>
多行文本框：<textarea id="" name="" rows="行数" cols="列数">内容</textarea>
密码框：<input id="" name="" type="password" value="内容"/>
隐藏域：<input id="" name="" type="hidden" value="内容"/>
2.按钮类
普通按钮：<input id="" name="" type="button" value="按钮上的文字" disabled="disabled"/> --加上disabled代表是不能选中的
提交按钮：<input id="" name="" type="submit" value="按钮上的文字"/>
重置按钮：<input id="" name="" type="reset" value="按钮上的文字"/> --使表回到最初状态
图片按钮：<input id="" name="" type="image" src="图片的路径" width="宽" height="高"/>

表单演示：

<form id="f1" name="f1" action="" method="">

<input id="" name="" type="text" value="请输入用户名"/><br>

 <input id="" name="" type="password" value="请输入用户名密码">

 <input id="" name="" type="submit" value="登陆"/><br>

 <input id="" name="" type="text" value="请输入支持的黄金圣斗士"/><br>

 <textarea id="" name="" rows=""cols="" >请输入支持的原因，字数200字以内</textarea><br>

 <input type="button" name="" id="" value="天蝎座圣斗士米罗支持率"/><br>

 <input type="button" name="" id="" value="处女座圣斗士沙加支持率"/><br>

 <input id="" name="" type="submit" value="重置"/><br>

 <input id="" name="" type="image" src="data:images/png-0035.png"/>联系我们&copy;

 </form>

3、选择输入类

（1）、单选
<input id="" name="组名" type="radio" value="运算的值" checked="checked"/> --name若相同则表示为同一组 value不显示，用来计算
（2）、复选
<input id="" name="组名" type="checkbox" value="运算的值" checked="checked"/>

（3）、文件
<input id="" name="" type="file"/>
（4）、列表
下拉列表:
<select id="" name="">
<option value="1">送餐</option>
<option value="2">取餐</option>
<option value="3">订餐</option>
<option value="4">进餐</option>
</select>

执行结果：

列表：
<select id="" name="" size="大于1的数字" multiple="multiple">
<option value="1">送餐</option>
<option value="2">取餐</option>
<option value="3">订餐</option>
<option value="4">进餐</option>
</select>
执行结果：

五、框架（分隔页面）
（一）frameset
frameset主要用来分隔浏览器窗口，它所在的页面是用<frameset></frameset>来替换<body></body>
属性：
rows="100,*,100" --rows是上下，cols是左右
cols="100,*"
frameborder="no"
子元素：
<frame name="名称" src="页面的路径" noresize="noresize" scrolling="yes|no|auto"/> --scrolling="yes"永远显示滚动条

（二）iframe
它是嵌入在body里面的。
<iframe width="300" height="400" frameborder="0" scrolling="no" src="Untitled-3.html"></iframe>

--frameborder="0"无边框如果 width、height都等于0就相当于病毒软件，例：熊猫烧香

HTML语言网页制作-----标签、表格、表单、框架的更多相关文章

HTML--绝对路径, 表格,表单, 框架
URL, URI, URN URL: 统一资源定位符: Uniform Resource Locator URN: 持久可用的资源标准名称 Uniform Resource Name , 比如邮箱 U ...
3、网页制作Dreamweaver（表单form）
表单form (虚线不显示) 1.写法: <form id="form1" name="form1" method="post" ac ...
制作Html标签以及表单、表格内容
制作Html一般用DW(......),Html全称为(Hyper Text Markup Language 超文本标记语言) 文本就是平常电脑上的文本文档,只能存储文字,而超文本文档可以存储音乐 ...
第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明：来源于网络]
第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...
Bootsrap表格表单及其使用方法
bootstrap的使用 bootstrap中的js插件依赖于jQuery 因此jQuery要在bootstrap之前引入参考官网标准引入方法和引入样式排版标题 Bootstrap和普通的HTM ...
Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
HTML表格表单综合——用户注册表
今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
css表格表单和统筹
css:表格表单和统筹学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景一.表单标签及属性高级回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...
前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)
前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型) 一丶HTML块级标签排版标签 p 标签: 段落标签,会自动在段落上下加上空白来分开 p标签 ...

随机推荐

java.io.tmpdir在哪里？
查找所在目录的方式如下: System.out.println(System.getProperty(“java.io.tmpdir”)); System.getProperty(),还可以获取更多其 ...
git子模块使用
如下项目有多个标红的子模块 1.首先进入每个子模块目录,init初始化子模块仓库,然后提交远程. 2.在每个子目录都初始化好仓库后,进入lv-qggz主目录,只初始化该仓库,然后依次添加子模块的仓库地 ...
web前端学习 roadmap
<tag attribute="value">content</tag>
JAVA初学者——逻辑运算符
Hello!大家好,我是浩宇大熊猫~ 加油~充实每一天~ java里面的逻辑运算符有与(&).或(|).异或(^).非(!) 其实这些初高中数学课都学过哈,很简单~ public class ...
计蒜客密码锁（BFS）
https://www.jisuanke.com/course/1797/121114 Description 现在一个紧急的任务是打开一个密码锁.密码由四位数字组成,每个数字从 1 到 9 进行编号 ...
pandas在指定列插入数据
import pandas as pd import numpy as np df = pd.DataFrame(np.arange(15).reshape(5, 3), columns=['a', ...
win10 python 3.7 pip install tensorflow
环境: ide:pyCharm 2018.3.2 pyhton3.7 os:win10 64bit 步骤: 1.确认你的python有没有装pip,有则直接跳2.无则cmd到python安装目录下ea ...
python pandas 对带时间序列的数据进行重采样处理
今天老板要处理一批带有时间序列的数据,源数据为1秒钟一行的csv数据,处理之后变成15分钟一行的数据. 源数据示例如下: time B00 B01 ... RollMean2.5 RollMean10 ...
懒人JS
1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...
Tarjan算法：求解无向连通图图的割点（关节点）与桥（割边）
1. 割点与连通度在无向连通图中,删除一个顶点v及其相连的边后,原图从一个连通分量变成了两个或多个连通分量,则称顶点v为割点,同时也称关节点(Articulation Point).一个没有关节点的 ...

HTML语言 网页制作-----标签、表格、表单、框架

HTML语言 网页制作-----标签、表格、表单、框架的更多相关文章

随机推荐

热门专题

HTML语言网页制作-----标签、表格、表单、框架

HTML语言网页制作-----标签、表格、表单、框架的更多相关文章