HTML速成

看了HTML孙鑫视频后,对HTML有了基本明确的掌握,梳理知识点对其进行一下总结。

首先我们要了解我们为什么要学习HTML,我们搞Web开发,不可避免要接触HTML。JSP也是要学习到的知识,先来简单认识一下,它是一种动态网页开发的技术。我们经常要在HTML中嵌入Java代码,作为JSP开发人员,必须掌握一些常用的HTML标记。

认识一下HTML,全称:Hypertext Markup Language,超文本标记语言。Web页面,或者说是网页,HTML就是来编写此文档的一种标记语言。

HTML速成的一些必要知识点来说一下。


一、基本

 1、 标签:有图有真相,还附赠礼物。

标签不只是这么简单。它在段落和文本中还不一样。

段落控制:

<p align ="#">

表示paragraph,创建一个段,属性align表示段的对齐方式,#可以是left、center、right、justify。

<br>

表示link break,作用:换行

<hr color ="clr">

表示horizontal rule,作用:插入一条水平线。

文本显示:

<center>...</center>

使文本居中显示

<hn align="#">...</hn>

用于指出文档的标题,n是从1到6的整数,1表示最大标题,6表示最小标题。属性align用户设置标题对齐的格式,#可以是left、center、right。

<font size=n color="clr">...</font>

用于设置字体。

<b>...</b>

使文本成为粗体

<i>...<li>

 使文本成为斜体

 2、四种形式:大道至简,总结得太好了。

(1)空元素 <br>

(2)带有属性的空元素 <hr color="blue">

(3)带有内容的元素 <title>http://www.baidu.com</title>

(4)带有内容和属性的元素 <font color="red">http://www.baidu.com</font>

这里需要注意的是,不同形式,这里标签是不一样的。

  3、框架:看完这个框架,你对HTML算是有了一个大概的认识了。图来得直接些。

 4、注释

   HTML文档一定要有注释啊,维护修改起来方便。注释展现:<!--你的注释或说明信息-->,例如<!--This is an apple-->

拓展:特殊字符,先上图,随后用到再回来查找。常用的字符实体:

二、运用

1、列表

(1)建立数字编号的列表

使用<ol>和<li>标签,在<ol>标签中使用start属性,设置起始的序号,在<li>标签中使用value属性改变列表内的编号顺序。

在<ol>和<li>标签中,使用type属性指定编号系统的类型。具体看表。

(2)建立带有项目符号的列表

使用<ul>和<li>,type属性指定符号的样式,取值如下:

(3)建立无符号的列表

使用<dl>与<dt>,使用<dd>标签替换<dt>,创建缩进的列表。

知识点总结得再好看得也是醉了,真枪实弹地来个实例。

<span style="font-size:18px;">
	<ol type="i">
		<li>《红楼梦》</li>
		<li>《西游记》</li>
		<li>《三国演义》</li>
		<li>《水浒传》</li>
	</ol>

	<ol type="I">
		<li>《红楼梦》</li>
		<li>《西游记》</li>
		<li>《三国演义》</li>
		<li>《水浒传》</li>
	</ol>

	<ol type="A">
		<li>《红楼梦》</li>
		<li>《西游记》</li>
		<li>《三国演义》</li>
		<li>《水浒传》</li>
	</ol>

	<ol type="a">
		<li>《红楼梦》</li>
		<li>《西游记》</li>
		<li>《三国演义》</li>
		<li>《水浒传》</li>
	</ol>

	<ol type="1">
		<li>《红楼梦》</li>
		<li>《西游记》</li>
		<li>《三国演义》</li>
		<li>《水浒传》</li>
	</ol>

	<ul type="disc">
		<li>《红楼梦》</li>
		<li>《西游记》</li>
		<li>《三国演义》</li>
		<li>《水浒传》</li>
	</ul>

	<ul type="square">
		<li>《红楼梦》</li>
		<li>《西游记》</li>
		<li>《三国演义》</li>
		<li>《水浒传》</li>
	</ul>

	<ul type="circle">
		<li>《红楼梦》</li>
		<li>《西游记》</li>
		<li>《三国演义》</li>
		<li>《水浒传》</li>
	</ul> 

	<dl>
		<dt>《红楼梦》</li>
		<dt>《西游记》</li>
		<dt>《三国演义》</li>
		<dt>《水浒传》</li>
	</dl> 

	<dl>
		<dd>《红楼梦》</li>
		<dd>《西游记》</li>
		<dd>《三国演义》</li>
		<dd>《水浒传》</li>
	</dl> 

    </span>

网页效果:

2、表格

<caption>...</caption>

用于定义表格的标题

<tr align="alignment" valign="alignment">...</tr>

在表格中添加一个新行,属性align用于指定这一行在水平方向上的对齐方式,alignment可以是left、center、right。属性valign用于指定这一行在垂直方向上的对齐方式,alignment可以是top、middle、bottom

<th>...</th>

用于定义表头

<td>...</td>

用于定义单元格

来吧,理论实践相结合,上实例吧。

html文档:

<span style="font-size:18px;"><html>
	<head><title>表格的例子</title></head>
	<body>
		   <table border="1" align="center" bgcolor="red">
		   	      <caption>2015年度上半年期末考试成绩单</caption>
		   	      <tr align="center" valign="middle">
		   	      	<th>姓名</th>
		   	      	<th>语文</th>
		   	      	<th>数学</th>
		   	      	<th>英语</th>
		   	      </tr>
		   	      <tr align="center" valign="middle">
		   	      	<td>张三</td>
		   	      	<td>100</td>
		   	      	<td>98</td>
		   	      	<td>80</td>
		   	      </tr>
		   	      <tr align="center" valign="middle">
		   	      	<td>李四</td>
		   	      	<td>100</td>
		   	      	<td>98</td>
		   	      	<td>80</td>
		   	      </tr>
		   	      <tr align="center" valign="middle">
		   	      	<td>王五</td>
		   	      	<td>100</td>
		   	      	<td>98</td>
		   	      	<td>80</td>
		   	      </tr>

		   	</table>
		</body>
	</html></span>

网页展示效果:

3、表单

表单创建<form method="get or post" action ="URL">...</form>

method用于指向服务器发送表单数据时所使用的HTTP方法。get是缺省的方法,当采用get方法提交表单时,提交的数据被附加到URL(在属性aciton中指定)的末端,作为URL的一部分发送到 服务器端。post方法是将表单中的信息作为一个数据块发送到服务器端。属性action指定对表单进行处理的脚本的地址。

其中我们要用到<input>元素。

<input type="type" name="name" size="size" value="value">

属性type用来指定要创建的控件的类型。name属性在表单中并不显示。属性size用来指定表单中控件的初始宽度。属性value指定控件的初始值。

收藏一下<input>元素。

用户填写注册信息的时候,输入个人简历,单行的文本输入控件不适合,怎么接受多行输入信息,我们可以使用多行文本输入控件。

<textarea name="name" rows="number of rows" cols="number of columns">...</textarea>

属性rows用于指定文本输入控件可视区域显示的宽度。在开始标签和结束标签之间出现的文本,将作为文本输入控件中的初始文本而显示。

赶紧来实例验证一下。

html文档:

<span style="font-size:18px;"><html>
	<head><title>表单的例子</title></head>
	<body>
		<form method="get" action="reg.jsp">
			<table>
				<tr>
					<td>用户名:</td>
					<td>
						<input type="text" name="user" size="30" value="我">
					</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td>
						<input type="password" name="pwd">
					</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="basketball">篮球
						<input type="checkbox" name="interest" value="football">足球
						<input type="checkbox" name="interest" value="volleyball">排球
						<input type="checkbox" name="interest" value="badminton ">羽毛球
					</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 valign="top">个人简介:</td>
					<td>
						<textarea name="personal" rows="5" cols="30">个人简介</textarea>
					</td>
				</tr>
				<tr>
					<td>
						<input type="reset" value="重写">
						<input type="submit" value="注册">
					</td>
				</tr>
			</table>
		</form>
	</body>
</html></span>

网页效果:

福利: 超链接

HTML文本之所以被称为超文本,就是因为它具有普通文本不具有的超链接功能。能够通过点击关键字来实现页面的跳转。

建立链接:<a href="URL">...</a>

属性href用于指定链接的目标,目标地址由URL定位,在开始标签<a>和结束标签</a>之间输入的文本将作为浏览器中显示的链接文本。

网页可以嵌入图像,基本语法为:

<img src="URL" width=n height=n>

属性src指定图像资源的位置,属性width和height用于指定图片的尺寸。

要想理解透彻,还得看一下例子。

<span style="font-size:18px;"><html>
	<head><title>链接的例子</title></head>
	<body>
		<a href="form.html">表单的例子</a><br>
		<a href="../form.html">表单的例子</a><br>
		<a href="E:\提高班\进行中\form.html">表单的例子</a><br>
		<a href="http://www.baidu.com">百度</a><p>
		<img src="1.jpg" width="20" height="40">晓晓</a>
	</body>
</html></span>

网页效果:

效果可不是这么简单,点击任何一个关键字,它都能跳转到相应的页面。

HTML也就这么些东西,不过细节的东西还有很多,无足大碍,以上内容有兴趣可以尝试编写一下,真正感受一下 html的魅力之所在。要想编写出更好的网页结构,还需要对html进一步的学习。

时间: 2024-11-13 09:33:25

HTML速成的相关文章

从零开始的Python爬虫速成指南

http://python.jobbole.com/87284/ 从零开始的Python爬虫速成指南 2017/01/22 · 实践项目 · 1 评论 · 爬虫 分享到: 11 原文出处: 舞鹤 序 本文主要内容:以最短的时间写一个最简单的爬虫,可以抓取论坛的帖子标题和帖子内容. 本文受众:没写过爬虫的萌新. 入门 0.准备工作 需要准备的东西: Python.scrapy.一个IDE或者随便什么文本编辑工具. 1.技术部已经研究决定了,你来写爬虫. 随便建一个工作目录,然后用命令行建立一个工程

Java速成手册

记得当初从Pascal转C的时候看了matrix67大神写的C语言速成手册.虽然内容很基础(只包括应付NOIP的东西:基本语句.数据类型.运算符等等,不包括面向对象部分),但是很适合已经熟练掌握过一门编程语言的人快速入门新语言.感觉这种速成手册的意义就在于能使读者先快速上手一门陌生的编程语言,其他的东西完全可以在实践当中继续学习. 寒假要做一个小project,感觉用Java可能会更加简洁一些.不过目前还没找到一本类似的Java速成手册(市面上的大部分都是给码农用的大部头),于是打算自己自制一个

AFNetworking速成教程

AFNetworking速成教程 网络 — 你的程序离开了它就不能生存下去!苹果的Foundation framework中的NSURLConnection又非常难以理解, 不过这里有一个可以使用的替代品:AFNetworking. AFNetworking 非常受开发者欢迎 – 它赢得了我们读者的青睐:2012年最佳的iOS Library奖(2012 Best iOS Library Award.) 所以现在我就写这篇文章来向你介绍如何在程序中有效的使用它. AFNetworking 包括了

全面剖析Activiti-全集,高手速成原来这么简单

成都传智播客--全面剖析Activity全集: 课程介绍: Activiti是Tom Baeyens团队离开JBoss之后,加入Alfresco公司的全新产品.Activiti的前身是JBPM4,继承了jbpm4的所有优点,同时将其发扬光大.Activiti底层的API与Jbpm4的API相似程序也达60%以上,特别是service提供的接口,都是在Jbpm4上提供扩展,这样使得熟悉jbpm4的开发人员很容易上手.作为一个遵从 Apache 许可的工作流和业务流程管理开源平台,完全兼容了BPMN

Html Css Javascripe jQuery 速成经验 support by Mr song &lt;根据自己所掌握的会修改更新&gt; 第五周作业

我是学软件工程的一名本科学子,最近开始接触网页设计制作.由于时间限制我不得不在较短的时间内,掌握这一体系的主体核心部分. 其中老师(20年的编程经验)给予的速成教学让我受益匪浅.这里我再献丑再总结部分个人心得,希望对大家有所帮助. 第一点:Html Css Javascripe jQuery这4种语言是写在同一个文本里面,并不是要分成几个模块.他们都是共同为了网页视图的呈现和功能的实现: 第二点: 1.Html:网页编程的主干框架,承担着网页上的几乎所有数据的载入:    通过标签的形式,输入不

一个简单的html5页面在线速成工具!(当然本文主要说下他的成果的结构)

分享一个好玩的web app页面速成工具 当然主要是让大家看下他的原理 看着他的结构大家就该猜到这个了.这个是利用换页之后给当前div加了一个active,然后利用css控制效果 这个毫无疑问是采用最大宽度640的布局方式 类似的js框架我曾经分享过2个如fullPage.js,slip.js大家可以从我之前的博客中找到,里面我详细的写了使用方法http://www.cnblogs.com/LoveOrHate/category/677610.html 下面是demo地址:http://eqxi

Android高手速成--第一部分 个性化控件(View)

第一部分 个性化控件(View) 主要介绍那些不错个性化的View,包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.ProgressBar.TextView.ScrollView.TimeView.TipView.FlipView.ColorPickView.GraphView.UI Style等等..其他 一.ListView android-pulltorefresh一个强大的拉动刷新开源项目,支持各种控件下拉刷新

Android高手速成--第四部分 开发工具及测试工具

第四部分 开发工具及测试工具 主要介绍和Android开发工具和测试工具相关的开源项目. 一.开发效率工具 Json2Java根据JSon数据自动生成对应的Java实体类,还支持Parcel.Gson Annotations对应代码自动生成.期待后续的提取父类以及多url构建整个工程的功能项目地址:https://github.com/jonfhancock/JsonToJava在线演示:http://jsontojava.appspot.com/ IntelliJ Plugin for And

Android高手速成--第三部分 优秀项目

主要介绍那些Android还不错的完整项目,目前包含的项目主要依据是项目有意思或项目分层规范比较好.Linux项目地址:https://github.com/torvalds/linuxAndroid项目地址:https://android.googlesource.com/ 或 https://github.com/android以上两个项目,不解释 (1) ZXing二维码扫描工具项目地址:https://github.com/zxing/zxing 或 https://code.googl

Android高手速成--第二部分 工具库

主要包括那些不错的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多媒体相关及其他. 一.依赖注入DI 通过依赖注入减少View.服务.资源简化初始化,事件绑定等重复繁琐工作 AndroidAnnotations(Code Diet)android快速开发框架项目地址:https://github.com/excilys/androidannotations文档介绍:https://github.com/excilys/a