前言

本阶段视频自己前后看了两遍,感觉效果还是不错的,鉴于昨天上午整理了一些笔记,对HTML的理解深刻了一些。所以在这篇博文中就不再解释关于HTML一些定义的东西,这篇博文主要记录一些常用标记,为以后Web开发起个好头。

内容

HTML元素的四种形式

<span style="font-family:KaiTi_GB2312;font-size:18px;"><br><!--空元素-->
<hr color="blue"><!--带有属性的元素-->
<title>http://www.sunxin.org</title><!--带有内容的元素-->
<font color="red">http://www.sunxin.org</font><!--带有内容和属性的元素--></span>

文档体

<span style="font-family:KaiTi_GB2312;font-size:18px;"><html><!--开始HTML文档-->

	<head><!--开始文档头部-->

		<title><!--开始文档标题-->

			name

		</title><!--结束文档标题-->

	</head><!--结束文档头部-->

	<body><!--开始文档体-->

		zhoulitong

	</body><!--结束文档体-->

</html><!--结束HTML文档--></span>

提示:

在HTML文档中:

  • 编写HTML时,在某些情况下不按照HTML框架格式,目前我们用的浏览器(例如:IE)能够很好的解析文档。
  • 标签的属性是可选的,可以不写反之也可以。
  • 标签和名字的大小写无关。
  • 给标签赋值的时候,可以加双引号,也可以不加。如下:
<span style="font-family:KaiTi_GB2312;font-size:18px;"><hr color="blue">
<hr color=blue></span>

字体、段落换行、居中的应用

举例子说明:

<span style="font-family:KaiTi_GB2312;font-size:18px;"><html>
<head><title>静夜思</title></head>
<body>
<center><!--居中显示-->
<h2><font color="red">静夜思</font></h2><!--二级标题-->
          <b>作者:李白</b><!-- 为空格-->
<hr color="blue">
<p>
<b><i><font color="green" size ="3">窗前明月光,疑是地上霜。<br><!--粗体、斜体3号字显示文本-->
举头望明月,低头思故乡。</font></i></b>
</center>
</body>
<html></span>

显示结果:

列表—建立带有项目符号的列表

  • disc   ——显示为实心的圆圈
  • square ——显示为实心的方块
  • circle ——显示为空心的圆圈

举例:

<span style="font-family:KaiTi_GB2312;font-size:18px;"><ol start="10">
<li>《红楼梦》
<li>《三国演义》
</ol> <ol type="I">
<li>《红楼梦》
<li>《三国演义》
</ol> <ol type="a">
<li>《红楼梦》
<li>《三国演义》
</ol> <ul type="disc">
<li>《红楼梦》
<li>《三国演义》
</ul> <ul type="square">
<li>《红楼梦》
<li>《三国演义》
</ul> <ul type="cricle">
<li>《红楼梦》
<li>《三国演义》
</ul></span>

一些常用按钮和表格的应用

下面的例子:

<span style="font-family:KaiTi_GB2312;font-size:18px;"><html>
<body>
<form method="get" action="reg.jsp">
<table> <tr>
<td>用户名:</td>
<td><input type="text" name="user" value="游客" size ="30"></td>
</tr> <tr>
<td>密 码:</td>
<td><input type="password" name="name"></td>
</tr> <tr>
<td>性 别:</td>
<td>
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="0">女
</td>
</tr> <tr>
<td>兴趣爱好:</td>
<td>
<input type="checkbox" name="interest" value="football">足球
<input type="checkbox" name="interest" value="basketball">篮球
<input type="checkbox" name="interest" value="volleyball">排球
<input type="checkbox" name="interest" value="swim">游泳
</td>
</tr> <tr>
<td>最高学历:</td>
<td>
<select size="1" name="education">
<option value="" selected>...</option>
<option value="高中">高中</option>
<option value="大学">大学</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
</select>
</td>
</tr> <tr>
<td>个人简历:</td>
<td><textarea name="personal" rows="5" cols="30"> 个人简历</textarea>
</td>
</tr> <tr>
<td><input type="reset" value="重写"></td>
<td><input type="submit" value="注册"></td>
</tr>
</form>
</body>
</html></span>

显示结果

小结

1、每次重复都有新的发现,学习就是不断重复的过程。

2、成功有时候贵在实践。

感谢您的宝贵时间~~~

再回首HTML的更多相关文章

  1. 再回首,Java温故知新——开篇说明

    不知不觉在IT界从业2年了,两年时间足够一个人成长很多,当然也会改变很多事.在这两年时间里,随着对技术的深入了解,知识面的拓展以及工作难度的增大,渐渐的感觉自己技术方面根基不稳,多数问题也只是做到知其 ...

  2. JAVA基础再回首(二十五)——Lock锁的使用、死锁问题、多线程生产者和消费者、线程池、匿名内部类使用多线程、定时器、面试题

    JAVA基础再回首(二十五)--Lock锁的使用.死锁问题.多线程生产者和消费者.线程池.匿名内部类使用多线程.定时器.面试题 版权声明:转载必须注明本文转自程序猿杜鹏程的博客:http://blog ...

  3. 再回首UML之下篇

    接着我们上篇博客再回首UML之上篇说,在类图中有四种关系,关联.依赖.泛化.实现,接下来,我们来看看依赖,依赖--描述的是一种使用关系,她说明一个事物的规格说明的变化可能影响到他使用的另一个事物,反之 ...

  4. 再回首UML之上篇

    UML,统一建模语言,是一种用来对真实世界物体进行建模的标准标记,这个建模的过程是开发面向对象设计方法的第一步,UML不是一种方法学,不需要任何正式的工作产品. UML提供多种类型的模型描述图,当在某 ...

  5. UML——再回首

    概述     在画图的过程中,发现自己还是有好多不懂的地方,对于四大关系理解的不是特别透彻,所以画图的过程中总是"剪不断,理还乱!"再一次整理四大关系,再回首必然丰收~~~ 1.实 ...

  6. 再回首,Java温故知新(一):Java概述

    Java发展历程 Java的发展要追溯到1991年,Patrick Naughton(帕特里克·诺顿)和James Gosling(詹姆斯·高斯林)带领Sun公司的工程师打算为有线电视转换盒之类的消费 ...

  7. 再回首,Java温故知新(八):Java基础之字符串

    字符串是Java中使用频率最高的类,但是它却不属于基本类型,而是预定义了String类来表示.从String类的源码可以看到,String是基于char[]实现的,而且Java中的String是不可变 ...

  8. 再回首,Java温故知新(七):Java基础之运算符

    常规算数运算符 包括+.-.*./.%分别对应着加.减.乘.除.取余,算数运算符所处理的两个数字必须为同种类型,如果是不同类型且无法进行自动类型转换的话必须进行强制类型转换,不过强制类型转换可能会丢失 ...

  9. [二十六]JavaIO之再回首恍然(如梦? 大悟?)

    流分类回顾 本文是JavaIO告一段落的总结帖 希望对JavaIO做一个基础性的总结(不涉及NIO) 从实现的角度进行简单的介绍 下面的这两个表格,之前出现过 数据源形式 InputStream Ou ...

  10. MySQL数据库再回首

    前言: 数据库是程序员的数据源泉,加上近期 要开发DB可视化.性能分析的功能 重新回顾一下MySQL知识,以下是笔记: MySQL架构 MySQL基础理论 1.什么是关系型数据库? 关系型数据库,这个 ...

随机推荐

  1. string(未完待续)

    1.string字符串的长度     可以用   a.length()  来测,或者是a.size() 来测 不可以用strlen(a)来求其长度, sizeof(a)是固定值16, 求的是strin ...

  2. flex 和bison的安装和使用

    1.在ubutu上安装 yacc的命令: sudo apt-get install flex bison flex:词法分析器 flex是一个词法分析器.用来将一个.l文件生成一个.c程序文件.即生成 ...

  3. python中zip()函数基本用法

    zip()函数接受一系列可迭代对象作为参数,将不同对象中相对应的元素打包成一个元组(tuple),返回由这些元组组成的list列表,如果传入的参数的长度不等,则返回的list列表的长度和传入参数中 ...

  4. [: xxxx: Unexpected operator

    /*************************************************************************** * [: xxxx: Unexpected o ...

  5. 转 Django根据现有数据库,自动生成models模型文件

    Django引入外部数据库还是比较方便的,步骤如下 : 创建一个项目,修改seting文件,在setting里面设置你要连接的数据库类型和连接名称,地址之类,和创建新项目的时候一致 运行下面代码可以自 ...

  6. Maven(5)-优化和重构POM

    本文主要介绍如何优化pom,杜绝重复(DRY). 1)模块重复依赖: 2)坐标版本号重复: 3)兄弟依赖 一.项目骨架 上图说明: multi-module-project是一个有多个模块构成的项目, ...

  7. bzoj 1941 [Sdoi2010]Hide and Seek——KDtree

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1941 第二道KDtree! 枚举每个点,求出距离它的最远和最近距离.O( n * logn ...

  8. 机器学习:k-NN算法(也叫k近邻算法)

    一.kNN算法基础 # kNN:k-Nearest Neighboors # 多用于解决分裂问题 1)特点: 是机器学习中唯一一个不需要训练过程的算法,可以别认为是没有模型的算法,也可以认为训练数据集 ...

  9. 人物-IT-张志东:张志东

    ylbtech-人物-IT-张志东:张志东 张志东,广东东莞人,腾讯创办人之一,腾讯高级副总裁兼科技总裁,于1993年取得深圳大学理学学士学位,并于1996年取得华南理工大学计算机应用及系统架构硕士学 ...

  10. 【转】深刻理解render 和 redirect_to

    由于最近老是在表单提交后出现没有反应的现象,发现是在action中的使用render 和 redirect_to的原因,于是就想搞清楚他两真正的区别在哪里,上一遍的blog也谈到了这二者的区别,但是有 ...