HTML基础入门-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36450449/article/details/119964562

这篇博客介绍了Web的概念，包括C/S和B/S架构的优缺点，并详细讲解了HTML的基础知识，如HTML的定义、特点、常用标签以及如何快速入门。重点讲述了HTML的各种标签的用法，如标题、段落、图像、链接、列表、表格等，旨在帮助初学者理解HTML并搭建基础网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一天内容
   1.web概念概述
   2.HTML


1.web概念概述
   Javaweb：
       使用Java语言开发基于互联网的项目

   软件架构：
       C/S:客户端/服务器
           需要本地有一个客户端，然后是远程有一个服务器端程序
               优点：
                   1.用户体验好
               缺点：
                   1.开发，安装，部署，维护麻烦
       B/S:浏览器/服务器
           只要一个浏览器，然后通过不同的url就可以访问不同的服务器程序
               优点：
                   1.简单
               缺点：
                   1.如果程序比较大，那么用户体验差
                   2.对硬件要求高
   B/S架构：
       资源分类：
           1.静态资源
               使用静态网页开发技术发布的资源
               特点：
                   每个用户访问的结果都一样
                   包括：文本，图片，音频，视频，HTML,CSS,JavaScript
                   如果用户访问的是静态网页资源的话，那么服务器就会直接把资源发给浏览器，浏览器内置解析引擎，然后展示静态资源
           2.动态资源
               使用静态网页开发技术发布的资源
               特点：
                   每个用户访问的结果都不一样
                   包括：jsp/sevelet,php...
                   如果用户访问的是动态网页资源的话，那么服务器就会执行动态资源，转化为静态，然后发给浏览器

   静态资源：
       HTML:搭建基础网页，展示网页内容
       CSS:美化界面，布局页面
       JavaScript:控制页面元素，让页面具有动态的效果

   HTML:最基础的网页开发语言
       (Hyper Text Markup Language):超文本标记语言
           超文本：
               超文本是采用超链接的方式，可以将不同形式的信息放在一起
           标记语言：
               由标签构成

       2.快速入门：
           1.文件后缀名应该为.html或.html或
           2.标签分为：
               围堵标签：就是得有一对：<head></head>
               自闭和标签：自己就是一个单独的标签：<br/>
           3.标签里面可以写标签，但是必须得成对出现，而且里面的就是里面的
           4.标签不区分大小写，但是最好是小写的

       3.常用的标签：
           1.文件标签：
               <html> 定义一个 HTML 文档
               <title> 为文档定义一个标题
               <body> 定义文档的主体
               <!DOCTYPE>? 定义文档类型。
           2.文本标签：
               注释：
               <h1> to <h6> 定义 HTML 标题 :从1到6字体是减小的，还有文字会加粗
               <p> 定义一个段落 :
               <br> 定义简单的折行。
               <hr> 定义水平线。
                   align :规定 <hr> 元素的对齐方式
                       left
                       center
                       right
                   color:颜色
                   width :宽度，可以百分比定义
                   size :高度。
               <b> 定义粗体文本。
               <font>:字体标签
               <center>:文本居中
                   属性：
                       color：颜色
                       size：大小
                       face：字体
               属性的定义：
                   color：#FFFFFF
                   width:
                       1.width = '20'
                       2.width = '20%',相当于占据父元素的比例
           3.图像标签
               <img> 定义图像。
                   src： URL 规定显示图像的 URL。
                   alt： text 规定图像的替代文本。
           4.链接标签
               <a> 定义一个链接。
                   href： URL 规定链接的目标 URL。
                   target：规定在何处打开目标 URL。仅在 href 属性存在时使用。
                           _blank：新开一页
                           _self：在本页打开
           5.列表标签：
               <ul> 定义一个无序列表
               <ol> 定义一个有序列表
               <li> 定义一个列表项
           6.div和span
               div:每一个div占满一整行。块级标签
               span：文本信息在一行显示，行内标签，内联标签
           7.语义化标签：就是为了代码有很好的可读性
               <header>:页眉
               <footer>:页脚
           8.表格标签：
               <table> 定义一个表格
                   border ：规定表格单元是否拥有边框。
                   width：规定表格的宽度。
                   bgcolor：规定表格的背景颜色。
                   cellpadding：规定单元边沿与其内容之间的空白。
                   cellspacing：规定单元格之间的空白。
               <th> 定义表格中的表头单元格。
               <tr> 定义表格中的行。
                   align：定义表格行的内容对齐方式。
                   bgcolor：规定表格行的背景颜色。
               <td> 定义表格中的单元。
                   colspan：规定单元格可横跨的列数。
                   rowspan：设置单元格可横跨的行数。
               <caption> 定义表格标题。
               <thead> 定义表格中的表头内容。
               <tbody> 定义表格中的主体内容。
               <tfoot> 定义表格中的表注内容（脚注）。
   案例：黑马旅游网首页
       1.使用table完成布局
       2如果一行只有一列时：使用<tr><td></td></tr>
       3.如果一行有很多列时：使用
           <tr>
               <td>
                   <table>
                   </table>
               </td>
           </tr>

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>黑马旅游网</title>
</head>
<body>
        <!--采用table完成布局-->
    <table width="100%" align="center">
        <!--第一行-->
        <tr>
            <td>
                <img src="./image/top_banner.jpg" alt="" width="100%">
            </td>
        </tr>
        <!--第二行-->
        <tr>
            <td>
                <table width="100%" align="center">
                    <tr>
                        <td><img src="./image/logo.jpg" alt=""></td>
                        <td><img src="./image/search.png" alt=""></td>
                        <td><img src="./image/hotel_tel.png" alt=""></td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--第3行-->
        <tr height = "45" >
            <td>
                <table width="100%" align=" center" bgcolor="#ffd700" >
                    <tr align=" center">
                        <td>
                            <a href="www.itcast">首页</a>
                        </td>
                        <td>
                            门票
                        </td>
                        <td>
                            门票
                        </td>
                        <td>
                            门票
                        </td>
                        <td>
                            门票
                        </td>
                        <td>
                            门票
                        </td>
                        <td>
                            门票
                        </td>
                        <td>
                            门票
                        </td>
                        <td>
                            门票
                        </td>
                        <td>
                            门票
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--第4行-->
        <tr>
            <td>
                <img src="image/banner_3.jpg" align="center" width="100%">
            </td>
        </tr>
        <!--第5行-->
        <tr>
            <td>
                <img src="image/icon_5.jpg"> 黑马精选
                <hr color="gold">
            </td>
        </tr>
        <!--第6行-->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td><img src="image/jiangxuan_1.jpg" alt="">
                        <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;699</font></td>
                        <td><img src="image/jiangxuan_1.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font></td>
                        <td><img src="image/jiangxuan_1.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font></td>
                        <td><img src="image/jiangxuan_1.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font></td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--第7行-->
        <tr>
            <td>
                <img src="image/icon_6.jpg"> 国内游
                <hr color="gold">
            </td>
        </tr>
        <!--第8行-->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td rowspan="2"><img src="image/guonei_1.jpg" alt="" height="488">
                            <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font></td>
                        <td><img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font></td>
                        <td><img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font></td>
                        <td><img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font></td>
                    </tr>
                        <tr>
                            <td><img src="image/jiangxuan_2.jpg" alt="">
                                <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                                <font color="red">&yen;699</font></td>
                            <td><img src="image/jiangxuan_2.jpg" alt="">
                                <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                                <font color="red">&yen;699</font></td>
                            <td><img src="image/jiangxuan_2.jpg" alt="">
                                <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                                <font color="red">&yen;699</font></td>
                        </tr>
                </table>
            </td>
        </tr>
        <!--第9行-->
        <tr>
            <td>
                <img src="image/icon_7.jpg"> 境外游
                <hr color="gold">
            </td>
        </tr>
        <!--第10行-->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td rowspan="2"><img src="image/jiangwai_1.jpg" alt="" height="488">
                            <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font></td>
                        <td><img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font></td>
                        <td><img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font></td>
                        <td><img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font></td>
                    </tr>
                    <tr>
                        <td><img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font></td>
                        <td><img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font></td>
                        <td><img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font></td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--第11行-->
        <tr>
            <td  >
                <img src="./image/footer_service.png" alt="" align="center" width="100%">
            </td>
        </tr>
        <!--第12行-->
        <tr bgcolor="#ffd700">
            <td align=" center" height="40">
                <font color="gray" size="2"  >江苏传智播客教育科技股份有限公司
                    版权所有Copyright&copy; 2006-2018, All Rights Reserved 苏ICP备16007882</font>
            </td>
        </tr>
    </table>

</body>
</html>