您的位置：首页 > Web前端 > HTML

HTML速成

2015-06-02 10:28 453 查看
             看了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进一步的学习。

            

            

        

           

          

                     

                
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html web开发
相关文章推荐
新的分享
章节导航