看了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进一步的学习。