简单的HTML制做：

　　　　　　html超文本标记语言

　　　　　　　　　　HTML文件主体结构：

<!DOCTYPE html>
<html> <!--htlm开始标记 -->
<head> <!--HTML头信息开始标记 -->
<title>本页面标题</title> <!--网页标题标记 -->
</head> <!--头信息结束标记 -->
<body bgcolor="black" text="#ffffff"> <!--网页主体标记 -->
<center> <!--格式标记中的居中标记-->
<h1>这是第一个html实列子</h1> <!--内容标题标记-->
</center> <!--居中格式结束标记-->
<hr width=80%> <!--输出分割线标记-->
<p>本页面显示黑色背景，白色文本</p> <!--段落标记对-->
</body> <!--页面体中内容结束标志-->
</html>

　　HTML文档头部元素<head></head>　　文件的标题<title></title>元素　　<base>元素只有一个b必须放在头部，放在任何包含URL地址的语句之前（作用：当遇到相对的URL时<base>实际上是将相对的url转化为完整的绝对的URL）

　　eg：<base href="URL"target="WINDOW_NAME"/>

　　<link>元素可用于创建到css样式表的链接{描述俩个文档之间文件链接的关系}

　　eg：<link rel="stylesheet"type="text/css"href="style.css"/>

　　<meat>元素：标记属性来定义文件信息的名称、内容。在HTML的头部可以标记任意多个<meat>标记，可以建立多种多样的效果和功能。

　　eg：<meat name="某个设置值"content="对该设置的值补充具体说明信息"/>

　　eg：<meat http-equiv="某个设置值"content="对该设置值进行具体补充说明"/>

　　　　以上是头部信息的一些基本用法

　　HTML文档主体标记<body></body>

属性

描述
   
text 设置页面文字的颜色
background 设置页面背景的图像
bgcolor 设置页面背景的颜色
bgproperties 设置页面背景图像为固定，不随页面滚动而滚动
link 设定页面默认的链接颜色
alink 设定访问后链接文字的颜色设定页面的上边距
vlink 访问后链接文字的颜色
topmargin 设定页面的上边距
teftmargin 设定页面的左边距

　　id设定标签的ID　　name设定标签的名称　　class设定标签样式的类选择器　　style设定标签样式的属性

　　　　格式标签：

　　　　　　　　<br>换行标签　　<p>换行段落标签　　<center>居中对其标签　　<pre>与格式化标记，保留文字在源代码中的标记　　<li>l列表项目的标记

　　　　　　　　<ul>无序列表　　<ol>有序列表　　<hr>水平分割线标签，用于段落与段落之间的分隔。

<!DOCTYPE html>
<html>
<head>
<title>格式标记测试网络</title>
</head>
<body>
<p>一段文本</p>
<center>这行文本在网页上居中显示</center>
<pre> 上边
左边 右边
下边
</pre>
<hr>
无序顺序列表
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
有序顺序列表
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
</body>
</html>

html表格

<table>　　　　　　　　　　 <!--定义表格开始标记-->
<caption>表格名称</caption> <!--定义表格表标题的标记-->
<tr> 　　　　　　　　　      　　<!--定义一行标记，在内部建立多组单元格-->
<th>标头单元格</th>　　　　　　 <!--定义标头单元格，文字将一粗体显示-->
</tr>　　　　　　　　　　 　　 <!--行标记结束-->
<tr>
<td>单元格</td>
</tr>
</table>

文本标签

插入图片

HTML框架结构

1、划分框架

cols：用"像素"和"%"分隔左右窗口；“*”表示剩余部分；

rows：用像素和百分号表示剩余部分

frameborder：指定是否显示边框：01

border：设置边框粗细，默认值是像素5

2、子窗口<frame>标签的设定

属性：

src：指加载的URL路径

name：指框架名称，是链接标记的target所要的参数

noresize：指不能调节窗口大小，省略此项可调整

scrolling：指是否需要滚动条，aut根据需要自动出现yes表示有no表示无

frameborder：指是否要边框1显示边框0不显示

border：设置边框的粗细

3、窗口的名称和链接

主窗体代码：

<!DOCTYPE html>
<html>
<head>
<title>使用框架定义后台管理系统</title>
</head>
<frameset rows="85,*" frameborder="1" border="1">
<frame src="top.html" name="top" scrolling="no" noresize/>
<frameset cols="300,*">
<frame src="menu.html" name="menu" scrolling="no" noresize/>
<frame src="main.html" name="main" noresize/>
</frameset>
</frame>
</frameset>
<body>

</body>
</html>

顶部设置大类选项窗体文件：

<!DOCTYPE html>
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<center><h2>后台管理平台</h2></center>
<p>
<a href="menu.html" target="menu">大类管理（一）</a>
<a href="menu2.html" target="menu">大类管理（二）</a>
<a href="menu3.html" target="menu">大类管理（三）</a>

</p>
</body>
</html>

左边设置菜单选项窗体文件：

<!DOCTYPE html>
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<center><h3>大类（一）菜单</h3></center>
<p>
<a href="main.html" target="main">管理选项</a>
<a href="main2" target="main">管理选项二</a>
<a href="main3" target="main">管理选项三</a>
</p>

</body>
</html>

右边设置窗体文件：

<!DOCTYPE html>
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<center><h4>大类管理一 > 管理选项2 > 内容设置</h4></center>
</body>
</html>

HTML表单设计

1、表单标签<from>

属性 描述
name 表单名称
method 定义处理程序从表中获取的信息，可取值GET和POST中的一个。省略..........
action 该属性的值是处理的程序名（如果值为空则文档的URL被使用，交表单时执行URL里面的程序）
enctype 设置表单资料的编码方式
target 该属性和链接中的同名属性类似，用来指定目标窗口
   

<form>标签中必须加action属性并且不能为空；eg：<form action="login.php" method="post">

不需要使用也需要定义这个样子：<form actio="no">

2\文本域和密码域

在<form>标签内定义的标签具有重要的地位，该标签是单个标签，没有结束标记

<input type="">标签来定义一个用户的输入；提供了9中类型的用户输入，由type属性来决定用那种类型

属性 描述
type 该属性的值为text表示为这是一个文本输入区，如果为password则表示这是密码输入区
name 定义空间名称
value 指定空件初始值，该值就是浏览器被打开时文本框中的内容
size 指定空件的宽度，表示该文本框可输入的最大字符数
maxlength 表示该用户允许用户输入的最大字符数

eg：<input type"text" name="field_name" value="field_value" maxlength="h">

eg：<input type="passworde" name="field_name" value="field_value" maxlength="h">

3、提交重置和普通按钮

在<input>标签中

当type属性值为“submit”时这是一个提交按钮

当type属性值为“reset”时这是一个重置按钮

当type属性值为“button”这是一个普通按钮

eg：<input type "submit" name="field_name" value="field_value">

4、单选按钮和复选按钮

单选按钮和复选框都有“选中”“未选中”俩种状态。同一组单选框中含有多个单选框这件相互排斥的，只允许用户选择其中的一个。

复选框和单选框的区别：复选框允许用户选中同一表中的多个或全部选项，也可以选其中一个

他么都只有在选中时数据才会被提交到服务器端，其语法格式：

eg：<input type="radio" name="field_name" value="field_value" checked>          单选按钮

eg：<input type="checkbox" name="field_name" value="field_value" checked>      复选框

单选按钮和复选按钮都可以通过checked属性设置为选中状态。

5、隐藏区域

type属性值为hidden建立一个隐藏区域name和value属性是必须的，用来隐藏域的名字和值，基本语法格式：

<input type"hidden" name="field_name" value="field_value">

6、多行文本域

在<form>标签中使用<textarea>标签制作多行文本域

eg：<textarea name="field_name" rows="value" value="field_value" >......（多行文本域设置默认值）....</textarea>

name属性指定多行文本的名称；通过rows和cols俩个属性分别指定多行文本域显示字符的行数和列数，单位是字符的个数

7、下拉列表域

在<form>标签中使用<slect>标签创建一个菜单的下拉列表域，该标签具有multiple、name和size属性，multiple属性不用赋值直接加入标签就可以使用；

size：设置列表的高度默认值为1，若没有设置multiple属性，显示的将是一个下拉式的列表域。name属性定一此表框的名称哈哈：

<select name="name" size="value"mulitiple>

<option value="value" selected>选项</option>

<option value="value">选项</option>

............

</select>

option标签是用来指定列表中的而一个选项，需要凡在<select></select>标签成对之间。此标签具有selected和value属性，selected属性用来指定默认像value用来给<option>标签指定的哪一个选项赋值，

　　综合实列：

<!DOCTYPE html>
<html>
<head>
<title>LAMP学员基本信息</title>
</head>
<body>
<table align="server" width="500" border="0" cellpadding="2" cellspacing="0">
<caption align="center"><h2>学员基本信息</h2></caption>
<form action="server.php" method="post">
<tr>
<th>姓名：</th>
<td><input type="text" name="usrname" size="20"></td>
</tr>
<tr>
<th>性别：</th>
<td>
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="2" checked>女
<input type="radio" name="sex" value="0" checked>保密
</td>
</tr>
<tr>
<th>学历：</th>
<td>
<select name="edu">
<option>--请选择--</option>
<option value="1">高中</option>
<option value="2">大专</option>
<option value="3">本科</option>
<option value="4">研究生</option>
<option value="2">其他</option>
</select>
</td>

</tr>
<tr>
<th>选修课程</th><!--使用复选框定义选修输入框 -->
<td>
<input type="checkbox" name="course[]" value="4">Linux
<input type="checkbox" name="course[]" value="5">Apache
<input type="checkbox" name="course[]" value="6">MySQL
<input type="checkbox" name="course[]" value="7">PHP
</td>
</tr>
<tr> <!--使用多行文本输入框定义自我评价输入框 -->
<th>自我评价</th>
<td><textarea name="eval" rows="4" cols="40"></textarea></td>
</tr>
<tr><!--定义哦提交和重置俩个按钮-->
<td colspan="2" align="center">
<input type="submit" name="submit" value="提交">
<input type="reset" name="reset" value="重置">
</td>
</tr>
</form>
</table>
</body>
</html>

在浏览器可以浏览得到；

　　　　　　小结：html语言的全部语法，文档的主体结构，头部中个元素的作用和使用意义，全部格式标签属性，文本标签及其属性，图像标签的应用，表格，框架表单项的应用。

、

学PHP也要懂得HTML的更多相关文章

  1. 一篇关于学C++的感想（拿来与大家分享）

    学计算机的如果你有耐心看下去,我敢保证这绝对是一种收获 期待爱 大师提醒: 计算机专业不是学编程,而是懂得计算机的工作原理,以及和计算机相关的学科技术.一个高手不必懂得编程,coder是最底层的人物, ...

  2. 关于ACM的总结

    看了不少大神的退役帖,今天终于要本弱装一波逼祭奠一下我关于ACM的回忆. 从大二上开始接触到大三下结束,接近两年的时间,对于大神们来说两年的确算不上时间,然而对于本弱来说就是大学的一半时光.大一的懵懂 ...

  3. 20145236 《Java程序设计》课程总结

    20145236 <Java程序设计>课程总结 一.每周读书笔记链接汇总 第一周读书笔记 第二周读书笔记 第三周读书笔记 第四周读书笔记 第五周读书笔记 第六周读书笔记 第七周读书笔记 第 ...

  4. ImageMagick的安装及使用

    近期在使用ImageMagick处理酒店团购图片,写篇博客小小的总结下它的安装及使用方法.ImageMagick是一套功能强大且免费的图片处理开发包,能够用来读,写和处理多种格式的图片文件,总之非常强 ...

  5. 2017战略No.1：坚定不移地走全产业链发展路线

    编者按:2016年9月9日,首次公开表达"我想走全产业链发展路线"的想法. 这几个月,认真思考了下这个决定背后的原因.目的和价值. 付出常人5倍以上的努力,先抓住"技术研 ...

  6. 人工智能AI芯片与Maker创意接轨 （上）

    近几年来人工智能(Artificial Intelligence, AI)喴的震天价响,吃也要AI,穿也要AI,连上个厕所也要来个AI智能健康分析,生活周遭食衣住行育乐几乎无处不AI,彷佛已经来到科幻 ...

  7. Windows平台上Caffe的训练与学习方法（以数据库CIFAR-10为例）

    Windows平台上Caffe的训练与学习方法(以数据库CIFAR-10为例) 在完成winodws平台上的caffe环境的搭建之后,亟待掌握的就是如何在caffe中进行训练与学习,下面将进行简单的介 ...

  8. ASP.NET动态网站制作（0）

    前言:一直想系统地学习一下网站建设的相关内容,看过相关的书籍,也跟着视频学过,但总觉得效率不高,学过的东西印象不深刻,或许还是自己动手实践的少.无意中免费听了一堂讲ASP.NET网站建设的课,觉得性价 ...

  9. Serlvet、JSP和JSTL的联系

    没有无缘无故的爱和恨,没有无缘无故的编程 前言: 想这世间,没有无缘无故的爱,也没有无缘无故的恨,一切都有有原因的,我想编程亦是如此,技术时常更新,程序员时常学习,随着时间的推移,程序员发际线的增高, ...

随机推荐

  1. C/C++自实现的函数(memset, memcpy, atoi)

    函数原型: void * memset ( void * buffer, int c, size_t num ); 关于void * 因为任何类型的指针都可以传入memset函数,这也真是体现了内存操 ...

  2. SQL数据库语言基础

    表的创建: 1.创建列(字段):列名+类型 2.设置主键列:能够唯一标识一条数据 3.设置唯一:内容不能重复 4.外键关系: 一张表(从表)其中的某列引用自另外一张表(主表)中的主键列 设计表: 数据 ...

  3. javascirpt中的数字在计算机内存储为多少Byte

    JavaScript内部,所有数字都是以64位浮点数形式储存,即使整数也是如此 8 Byte = 64bit Javascript中,由于其变量内容不同,变量被分为基本数据类型变量和引用数据类型变量. ...

  4. 如何取消android studio启动时自动打开上次关闭的项目

    Androidstudio默认每次android studio启动就会自动打开上次关闭的项目,如果想要取消并让它显示此界面 只需要  

  5. 人人都能读懂的css3 3d小demo

    css3 3d案例总结 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家.就把最近做的比较好的给大家分享下 1.旋转拼图 首先看下效果 代码主要由HTML和CSS3组成,应该说还是比较简 ...

  6. Android PopupWindow使用时注意

    项目中使用PopupWindown出现的坑 1.部分设备,PopWindow在Android4.0后版本,出现NullPointerException调用以下方法可解决, fixPopupWindow ...

  7. 梦想CAD控件COM接口文字样式

    增加文字样式 用户可以增加文字样式到数据库,并设置其字体等属性,具体实现c#代码如下: private void CreateText() { MxDrawApplication app = new ...

  8. 打造个人的vimIDE

    环境说明 系统版本:centos7.Ubuntu16 vim版本:7.4 安装git工具 整体说明:本文的vim配置是针对Linux的单个系统用户,python的自动补全使用的是 jedi-vim 插 ...

  9. Linux（Centos7）下搭建SVN服务器（新手上路）

    以前都是别人直接给地址在svn上,下载或者上传东西,如今要自己建一个版本库用来存放东西.1.安装svnyum install -y subversion 2.查看svn安装位置还有哪些文件rpm -q ...

  10. TWaver MONO模板库新鲜出炉 精彩纷呈

    MONO Design在线3D建模平台网站, www.mono-design.cn,开发组的成员们已经开始紧锣密鼓的对这个平台进行内测.在之前的文章里,我们提到用户可以获得多种多样的TWaver官方模 ...