简单的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. 洛谷 P2090 数字对

    发现如果给定两个数(a,b),可以用类似辗转相除法在logn的时间内计算出(反向)变到(1,1)的最小步数. 然而并不知道另一个数是多少? 暴力嘛,枚举一下另一个数,反正1000000的nlogn不虚 ...

  2. 如何删除sublime目录

    左侧栏的sublime目录一直删不掉,删除列直接变成了灰色. 今天才发现应该选择文件夹右击选择工程——从工程中删除文件夹. 这个设计真的很醉,删除这么常用的键还放进了第二层……

  3. Python之Pandas中Series、DataFrame实践

    Python之Pandas中Series.DataFrame实践 1. pandas的数据结构Series 1.1 Series是一种类似于一维数组的对象,它由一组数据(各种NumPy数据类型)以及一 ...

  4. android中用Intent传数据，如果用传递的是一个类，就将类实现Parcelable接口

    Parcelable,内存单位,跨进程使用,或者intent传递对象的时候使用.android中用Intent传数据,如果用传递的是一个对象,就将对象实现Parcelable接口,而不是将对象序列化. ...

  5. redis源码(一):为redis添加自己的列表类型

    本文档分为三大部分: 环境介绍与效果演示 redis接收命令到返回数据的执行逻辑 代码实现 文档的重点和难点在第三部分,完全阅读本文档需要读者具备基本的c语言和数据结构知识. 环境介绍和效果演示环境介 ...

  6. JMeter在linux上分布式压测环境配置（一）

    环境配置 一.在Linux服务器先安装SDK 1.先从官网下载jdk1.8.0_131.tar.gz,l(linux版本,32位,64位根据系统来判断) 2.在/usr/目录下创建java文件夹,(当 ...

  7. day20-面向对象基础

    目录 面向对象基础 面向过程编程与面向对象编程 面向过程编程 面向对象编程 类与对象 类 对象 定义类和对象 定制对象独有特征 对象属性查找顺序 类与对象的绑定方法 类与数据类型 对象的高度整合 面向 ...

  8. luogu P4172 [WC2006]水管局长 LCT维护动态MST + 离线

    Code: #include<bits/stdc++.h> #define maxn 1200000 #define N 120000 using namespace std; char ...

  9. 关于DOS-BOX的使用方法

    将MASM文件夹里的全部文件拷贝到一个目录下,比如E:\masm下,然后将这个目录挂着为DOSBox的一个盘符下,挂载命令为 Mount c e:\masm 切换到E盘 然后编译,运行

  10. TFRecordReader "OutOfRangeError (see above for traceback): RandomShuffleQueue '_1_shuffle_batch/random_shuffle_queue' is closed and has insufficient elements (requested 1, current size 0)" 问题原因总结；

    1. tf.decode_raw(features['image_raw'],tf.uint8) 解码时,数据类型有没有错?tf.float32 和tf.uint8有没有弄混??? 2. tf.tra ...