html速成项目,HTML速成

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

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

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

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

7e5ab0799e606277b570c64b09d37685.png

一、基本

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

a2c4bdfd7aeb2b6a968c345c7b460464.png

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

段落控制:

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

表示link break,作用:换行

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

文本显示:

...

使文本居中显示

...

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

...

用于设置字体。

...

使文本成为粗体

...

使文本成为斜体

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

(1)空元素

(2)带有属性的空元素

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

(4)带有内容和属性的元素 http://www.baidu.com

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

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

6946e709a57dea08e9db49b6fd81d3a3.png

4、注释

HTML文档一定要有注释啊,维护修改起来方便。注释展现:,例如

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

bff867a871aeb28ba5d2719d3d7f2902.png

二、运用

1、列表

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

使用和

标签,在标签中使用start属性,设置起始的序号,在

标签中使用value属性改变列表内的编号顺序。

在和

标签中,使用type属性指定编号系统的类型。具体看表。

48055e75fb3c1d6b8ccabdd466794c00.png

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

使用和

,type属性指定符号的样式,取值如下:

e7ed7cb3018dfb58868c8b729f2d915d.png

(3)建立无符号的列表

使用与,使用标签替换,创建缩进的列表。

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

《红楼梦》

《西游记》

《三国演义》

《水浒传》

《红楼梦》

《西游记》

《三国演义》

《水浒传》

《红楼梦》

《西游记》

《三国演义》

《水浒传》

《红楼梦》

《西游记》

《三国演义》

《水浒传》

《红楼梦》

《西游记》

《三国演义》

《水浒传》

《红楼梦》

《西游记》

《三国演义》

《水浒传》

《红楼梦》

《西游记》

《三国演义》

《水浒传》

《红楼梦》

《西游记》

《三国演义》

《水浒传》

《红楼梦》

《西游记》

《三国演义》

《水浒传》

《红楼梦》

《西游记》

《三国演义》

《水浒传》

网页效果:

bc98e667bcfb5944a9dc79e245421c12.png

2、表格

...

用于定义表格的标题

...

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

...

用于定义表头

...

用于定义单元格

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

html文档:

表格的例子

2015年度上半年期末考试成绩单

姓名

语文

数学

英语

张三

100

98

80

李四

100

98

80

王五

100

98

80

网页展示效果:

125dbb86927e66798fd84b96c905a9fc.png

3、表单

表单创建...

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

其中我们要用到元素。

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

收藏一下元素。

9c75f1232da68984ca566b66bd2c3e61.png

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

...

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

赶紧来实例验证一下。

html文档:

表单的例子

用户名:

密码:

性别:

兴趣爱好:

篮球

足球

排球

羽毛球

最高学历:

...

博士

硕士

学士

高中

个人简介:

个人简介

网页效果:

b89a9a35269748c0eae395c1a4c591c0.png

福利: 超链接

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

建立链接:...

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

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

URL

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

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

网页效果:

61f2e7dbe5a141f179d9bff45e15feb1.png

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

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值