HTML基础

掌握应用目标：

网站信息页面案例(字体标签、排版标签)
网站图片信息页面案例(图片标签)
网站友情链接页面案例(列表标签)
网站首页案例(表格标签)
网站注册页面案例(表单标签)
网站后台页面案例(框架)

案例一：网站信息显示页面

1.什么是HTML？(Hyper Text Markup Language:超文本标记语言)

超文本：功能比普通文本更加强大

标记语言：使用一组标签对内容进行描述的一门语言(它不是编程语言)

2.为什么要学习HTML？

　　HTML的学习我想没有人可以否认他的用处我们现在看到的网页几乎全都是html页面构成的所以HTML的学习不能跳过

3.语法和规范？

HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。

HTML文件分为头部分(<head></head>)和体部分(<body></body>)

HTML标签都是由开始标签和结束标签组成。(<hr />)

HTML标签不区分大小写，建议使用小写。

4.HTML相关标签学习（这个是最基础的标签我们现在就是在学标签）

标题标签<hn />

水平线标签 <hr />

段落标签

字体标签

属性：size:指定内容的大小

color：指定内容的颜色

face：指定内容的字体

加粗：

斜体：

下划线：

5.步骤分析（我们以建立一个我们的电商网站为最终目标一步一步学习设计）

对了还说一下这里我学习采用的设计前端界面的IDE是Hbuilder X很好用能够很快地进行调试。大家自己百度下一个就好了

目标一：我们想设计一个网站信息显示页面

①创建一个html文件

②创建一个标题标签显示电商网站简介简介

③创建一条水平线标签

④创建四个段落标签

代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>网站信息显示页面</title>
    </head>

    <body>
        <!--1.创建一个标题标签-->
        <h2>网站简介</h2>
        <!--2.创建一条水平线标签-->
        <hr />
        <!--3.分别创建3个段落标签-->
        <p><font color="red">“HTML学习”</font>是由<b>LeoLRH</b>联合SCU、<i>在博客园</i>，段落一 </p>

        <P>段落二</P>

        <p>段落三</p>

    </body>

</html>

代码运行如上图这个显得未免有点太难看了但是我们还能在继续完善

目标二：网站图片显示页面

图片标签

<img />

属性：

src:指的是图片显示的路径(位置)

绝对路径：E:\BaiduNetdiskDownload\JavaEE\基础（1-25天）\WEB01_HTML\WEB01_HTML\WEB01_HTML\资料\WEB01\image（像这样的成为绝对路径）

相对路径：

①同一级：直接写文件名称或者./文件名称

②上一级：../文件名称

③下一级：写上目录名称/文件名称

width:指定图片的宽度，取值可以是像素值，也可以是百分比

height：指定图片的高度，取值可以是像素值，也可以是百分比

alt：当图片无法正常显示的时候给出的提示信息(该属性的显示效果与浏览器以及浏览器版本有关)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片标签</title>
    </head>
    <body>
        <img src="../../img/logo2.png" width="150px" height="30px" alt="logo图片"/>
    </body>
</html>

代码运行效果如下：

目标三：网站友情链接显示页

列表标签

有序列表：

</ol>

无序列表：

</ul>

　　2.超链接标签

href:指定跳转的位置

target：指定跳转页面显示的位置(取值：_self 、_blank)这里面特地说一下target这个属性，_self是当前页面跳转，_blank是打开新的窗口跳转，_top是用来跳出框架的跳转（这里具体简单的例子见W3Cschool帮助手册，我会传到博客上来供大家免费下载）

通常将这两个标签结合来用结合起来用

这个跳转链接标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>超链接标签</title>
    </head>
    <body>
        <a href="../列表标签/02_有序列表.html" target="_blank">点我有惊喜！</a>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>无序列表</title>
    </head>
    <body>
        <ul type="square">
            <li>CSDN</li>
            <li>百度</li>
            <li>京东</li>
        </ul>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>有序列表</title>
    </head>
    <body>
        <ol start="4" reversed="reversed" type="a">
            <li>CSDN</li>
            <li>百度</li>
            <li>京东</li>
        </ol>
    </body>
</html>

目标四：网站首页显示页面

表格标签格式
跨行跨列操作

跨行：rowspan

跨列：colspan

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格标签</title>
    </head>
    <body>
        <!--cellspacing:设置边框与边框的间距，cellpadding:设置的是边框与内容的间距-->
        <table border="1px" width="450px" height="150px" align="center" bgcolor="pink" cellspacing="0px" cellpadding="0px">
            <tr height="100px" bgcolor="gold">
                <td>11</td>
                <td>12</td>
                <td>13</td>
            </tr>
            
            <tr>
                <td>21</td>
                <td>22</td>
                <td>23</td>
            </tr>
            
            <tr>
                <td>31</td>
                <td>32</td>
                <td>33</td>
            </tr>
        </table>
    </body>
</html>

代码运行结果如下：

跨行的示例篇幅限制不具体写了，可以看参考手册

案例五：网站后台系统页面

框架集标签：

</frameset>

他都是由好几个html页面一起构成的所以不一一展示代码了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>网站后台系统显示页面</title>
    </head>
    <frameset rows="20%,*">
        <frame src="top.html" />
        <frameset cols="20%,*">
            <frame src="left.html" />
            <frame name="right" />
        </frameset>
    </frameset>
</html>

代码运行结果可看

posted @ 2019-01-23 13:38 LeoLRH 阅读(163) 评论(0) 收藏举报

刷新页面返回顶部

LeoLRH