html[初级]

王小小鸭

已于 2023-05-29 08:53:32 修改

阅读量255

点赞数

分类专栏： html web 前端文章标签： html 学习前端

于 2022-11-03 16:37:26 首次发布

本文链接：https://blog.csdn.net/clover_oreo/article/details/127653007

版权

web 前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

* JavaWeb：

* 使用Java语言开发基于互联网的项目

* 软件架构：

1. C/S: Client/Server 客户端/服务器端

* 在用户本地有一个客户端程序，在远程有一个服务器端程序
       * 如：QQ，迅雷...
       * 优点：
           1. 用户体验好
       * 缺点：
           1. 开发、安装，部署，维护麻烦

2. B/S: Browser/Server 浏览器/服务器端

* 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
       * 优点：
           1. 开发、安装，部署，维护简单
       * 缺点：
           1. 如果应用过大，用户的体验可能会受到影响
           2. 对硬件要求过高

* B/S架构详解

* 资源分类：
       1. 静态资源：
           * 使用静态网页开发技术发布的资源。
           * 特点：
               * 所有用户访问，得到的结果是一样的。
               * 如：文本，图片，音频、视频, HTML,CSS,JavaScript
               * 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
       2. 动态资源：
           * 使用动态网页及时发布的资源。
           * 特点：
               * 所有用户访问，得到的结果可能不一样。
               * 如：jsp/servlet,php,asp...
               * 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

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

动态资源
使用动态网页技术发布的资源
如：jsp/servlet, php, asp...
* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

区别
静态资源:是指系统进入时，一次加载完成。
动态资源:每次使用的时候，都会进行加载（需要消耗更多资源）
但是动态资源更灵活，如资源中的颜色，在Style里，发生改变，再需要动态资源。

HTML

1. 概念：是最基础的网页开发语言
   * Hyper Text Markup Language 超文本标记语言
       * 超文本:
           * 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
       * 标记语言:
           * 由标签构成的语言。<标签名称> 如 html，xml
           * 标记语言不是编程语言

2. 快速入门：
   * 语法：
       1. html文档后缀名 .html 或者 .htm
       2. 标签分为
           1. 围堵标签：有开始标签和结束标签。如 <html> </html>

3. 标签学习：
   1. 文件标签：构成html最基本的标签
       * html:html文档的根标签
       * head：头标签。用于指定html文档的一些属性。引入外部的资源
       * title：标题标签。
       * body：体标签
       * <!DOCTYPE html>：html5中定义该文档是html文档
   2. 文本标签：和文本有关的标签
       * 注释：
       * <h1> to <h6>：标题标签
           * h1~h6:字体大小逐渐递减
       * <p>：段落标签
       * <br>：换行标签
       * <hr>：展示一条水平线
           * 属性：
               * color：颜色
               * width：宽度
               * size：高度
               * align：对其方式
                   * center：居中
                   * left：左对齐
                   * right：右对齐
       * <b>：字体加粗
       * <i>：字体斜体
       * <font>:字体标签
       * <center>:文本居中
           * 属性：
               * color：颜色
               * size：大小
               * face：字体

       * 属性定义：
           * color：
               1. 英文单词：red,green,blue
               2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
               3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
           * width：
               1. 数值：width='20' ,数值的单位，默认是 px(像素)
               2. 数值%：占比相对于父元素的比例

代码运行结果：
代码：

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>这是文本标签</title>
</head>
<body>
<!-- <br/>换行标签 -->
醉后不知天在水, <br>
满船清梦压星河。<br>

<!-- <h1> ~ <h6> 标题标签 -->
<h1>这是一场试炼</h1>
<h2>这是一场试炼</h2>
<h3>这是一场试炼</h3>
<h4>这是一场试炼</h4>
<h5>这是一场试炼</h5>
<h6>这是一场试炼</h6>

<!--<p>：段落标签-->
<p>
《论语》（lún yǔ），是春秋时期思想家、教育家孔子的弟子及再传弟子记录孔子及其弟子言行而编成的语录文集，成书于战国前期。全书共20篇492章，以语录体为主，叙事体为辅，较为集中地体现了孔子及儒家学派的政治主张、伦理思想、道德观念、教育原则等。作品多为语录，但辞约义富，有些语句、篇章形象生动，其主要特点是语言简练，浅近易懂，而用意深远，有一种雍容和顺、纡徐含蓄的风格，能在简单的对话和行动中展示人物形象。
</p>
<!--<hr>：展示一条水平线
* 属性：
	* color：颜色
	* width：宽度
	* size：高度
	* align：对其方式
	* center：居中
	* left：左对齐
	* right：右对齐-->
<hr color="grenn" width="200" size="10" align="left"/>
<p>
    《论语》是孔门弟子集体智慧的结晶。早在春秋后期孔子设坛讲学时期，《论语》主体内容就已初始创成；孔子去世以后，他的弟子和再传弟子代代传授他的言论，并逐渐将这些口头记诵的语录言行记录下来，因此称为“论”；《论语》主要记载孔子及其弟子的言行，因此称为“语”。清朝赵翼解释说：“语者，圣人之语言，论者，诸儒之讨论也。”其实，“论”又有纂的意思，所谓《论语》，是指将孔子及其弟子的言行记载下来编纂成书。其编纂者主要是仲弓、子游、子夏、子贡，他们忧虑师道失传，首先商量起草以纪念老师。然后和少数留在鲁国的弟子及再传弟子完成。
</p>

<!--<b>：字体加粗-->
<b>君埋泉下泥销骨，我寄人间雪满头</b><br>

<!-- <i>：字体斜体-->
<i>山河日月皆入梦,故人踏星似归来</i><br>

<!--<font>:字体标签-->
<font color="blue" size="6" face="楷体"><center>春夜喜雨</center></font>
<font color="aqua" size="5" face="楷体">好雨知时节</font><br>
<font color="rgb(123,222,235)" size="5" face="楷体">当春乃发生</font><br>
<font color="#2343F1" size="5" face="楷体">随风潜入夜</font><br>
<font color="#2e8b57" size="5" face="楷体">润物细无声</font><br>

</body>
</html>

3. 图片标签：
       * img：展示图片
           * 属性：
               * src：指定图片的位置

* 代码：

<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>

       <!--
       相对路径
       * 以.开头的路径
       * ./：代表当前目录 ./image/1.jpg
       * ../:代表上一级目录

注意：

复制图片路径时“D:\我的文档鸭\图片素材\痒痒鼠\织风结1.jpg”是反斜杠“/”，是错误的

在html代码里:

错误文件路径:

windows 只使用一个 \ 是不识别的, 例如src='D:\个人\图片\2.jpg'

unix和linux 只使用两个 / 是不识别的,例如 src='//home/zjr/Desktop/img/2.jpg

正确文件路径:

除了以上情况, 在使用本地路径的情况下: 随便使用 / 和 \ 组合都不会错

注意：

“成龙，还有一件事~” （老爹发言）图片必须放在模块同一文件夹下以相对路径显示，否则会无法显示

代码运行结果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是图片标签</title>
</head>
<body>
<img src="../img/织风结1.jpg" width="100%" align="center" alt="绘世花鸟卷1">

</body>
</html>

4. 列表标签：

li 标签定义列表项目
       * 有序列表：
           * ol
           * li
       * 无序列表：
           * ul
           * li

运行结果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是列表标签</title>
</head>
<body>
<!--有序列表ol-->
<ol type="1">
    <font face="楷体" size="6">早上起床</font><br>
    <li>睁开眼睛</li>
    <li>离开被窝</li>
    <li>穿衣洗漱</li>
    <li>搽护肤品</li>
    <li>带上手机出发</li>
    <li>打卡</li>
    <li>学习</li>
</ol>

<!--无序列表ul-->
<ul type="disc">  <!--disc 圆点-->
    <font face="楷体" size="6">我的饮品</font><br>
    <li>咖啡</li>
    <li>牛奶</li>
    <li>茶</li>
    <li>奶茶</li>
    <li>橙汁</li>
    <li>酸奶</li>
</ul>

<ul type="square">  <!--square 方框-->
    <font face="楷体" size="6">我的饮品</font><br>
    <li>咖啡</li>
    <li>牛奶</li>
    <li>茶</li>
    <li>奶茶</li>
    <li>橙汁</li>
    <li>酸奶</li>
</ul>



<ul type="circle">  <!--circle 圆圈-->
    <font face="楷体" size="6">我的饮品</font><br>
    <li>咖啡</li>
    <li>牛奶</li>
    <li>茶</li>
    <li>奶茶</li>
    <li>橙汁</li>
    <li>酸奶</li>
</ul>
</body>
</html>

   5. 链接标签：
       * a:定义一个超链接
           * 属性：
               * href：指定访问资源的URL(统一资源定位符)
               * target：指定打开资源的方式
                   * _self:默认值，在当前页面打开
                   * _blank：在空白页面打开

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是链接标签</title>
</head>
<body>
<!--超链接  a-->
<!--  * href：指定访问资源的URL(统一资源定位符)-->
<a href="http://www.baidu.com">点击一下，你就知道</a><br>

<!-- * target：指定打开资源的方式
* _self:默认值，在当前页面打开
 * _blank：在空白页面打开-->
<a href="http://www.baidu.com" target="_self">点击一下，你就知道</a><br>
<a href="http://www.baidu.com" target="_blank">点击一下，你就知道</a><br>

<!--可以跳转当前项目内部网页-->
<a href="4_列表标签.html" target="_blank">列表标签</a><br>

<!--跳转邮箱-->
<a href="wangxiaoxiaosad@163.com" target="_blank">联系我~</a><br>

<!--用图片实现跳转-->
<a href="http://www.baidu.com" target="_blank"><img src="../img/百度一下.jpg"></a><br>
</body>
</html>

   6. div和span：（以后会和CSS结合使用）
       * div:每一个div占满一整行。块级标签
   * span：文本信息在一行展示，行内标签内联标签

   7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。
       1. <header>：页眉
       2. <footer>：页脚

8. 表格标签：
       * table：定义表格
           * width：宽度
           * border：边框
           * cellpadding：定义内容和单元格的距离
           * cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
           * bgcolor：背景色
           * align：对齐方式
       * tr：定义行
           * bgcolor：背景色
           * align：对齐方式
       * td：定义单元格
           * colspan：合并列
           * rowspan：合并行
       * th：定义表头单元格
       * <caption>：表格标题
       * <thead>：表示表格的头部分
       * <tbody>：表示表格的体部分
       * <tfoot>：表示表格的脚部分

运行结果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是表格标签</title>
</head>
<body>
<table width="50%" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>1</td>
        <td>海山了</td>
        <td>96</td>
    </tr>
    <tr>
        <td>2</td>
        <td>高皓光</td>
        <td>98</td>
    </tr>
    <tr>
        <td>3</td>
        <td>虎大绳</td>
        <td>61</td>
    </tr>
</table>


</body>
</html>

综合练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是综合案例：黑马旅游网01</title>
</head>
<body>
<table width="100%" align="center">
    <!--第1行-->
    <tr>
        <td width="100%" align="center"><img src="../img/旅游网1/top_banner.jpg" alt="同程亲子周边旅游节"></td>
    </tr>

    <!--第2行-->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <td><img src="../img/旅游网1/logo.jpg" alt="logo"></td>
                    <td><img src="../img/旅游网1/search.png" alt="搜索框"></td>
                    <td><img src="../img/旅游网1/hotel_tel.png" alt="客服热线"></td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第3行  超链接-->
    <tr>
        <td>
            <table width="100%" align="center" bgcolor="#ffd700">
                <tr>
                    <td><a href="">首页</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 width="100%" align="center"><img src="../img/旅游网1/banner_3.jpg" alt="玉龙雪山"></td>
    </tr>

    <!--第5行  黑马精选-->
    <tr>
        <td width="100%" align="left"><img src="../img/旅游网1/icon_5.jpg" alt="小星星">黑马精选
            <hr color="#ffd700">
        </td>
    </tr>

    <!--第6行 -->
    <tr>
        <td>
            <table width="95%" align="center">
                <tr>
                    <td><img src="../img/旅游网1/jiangxuan_1.jpg">
                        <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <p><font color="red">&yen;899</font></p>
                    </td>

                    <td><img src="../img/旅游网1/jiangxuan_1.jpg">
                        <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <p><font color="red">&yen;899</font></p>
                    </td>

                    <td><img src="../img/旅游网1/jiangxuan_1.jpg">
                        <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <p><font color="red">&yen;899</font></p>
                    </td>

                    <td><img src="../img/旅游网1/jiangxuan_1.jpg">
                        <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <p><font color="red">&yen;899</font></p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第7行 国内游-->
    <tr>
        <td width="100%" align="left"><img src="../img/旅游网1/icon_6.jpg" alt="摩天轮">国内游
            <hr color="#ffd700">
        </td>
    </tr>

    <!--第8行 -->
    <tr>
        <td>
            <table width="95%" align="center">
                <tr>
                    <td rowspan="2"><img src="../img/旅游网1/guonei_1.jpg">
                    </td>

                    <td><img src="../img/旅游网1/jiangxuan_2.jpg">
                        <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <p><font color="red">&yen;699</font></p>
                    </td>

                    <td><img src="../img/旅游网1/jiangxuan_2.jpg">
                        <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <p><font color="red">&yen;699</font></p>
                    </td>

                    <td><img src="../img/旅游网1/jiangxuan_2.jpg">
                        <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <p><font color="red">&yen;699</font></p>
                    </td>
                </tr>
                <tr>
                    <td><img src="../img/旅游网1/jiangxuan_2.jpg">
                        <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <p><font color="red">&yen;699</font></p>
                    </td>

                    <td><img src="../img/旅游网1/jiangxuan_2.jpg">
                        <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <p><font color="red">&yen;699</font></p>
                    </td>

                    <td><img src="../img/旅游网1/jiangxuan_2.jpg">
                        <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <p><font color="red">&yen;699</font></p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第9行  境外游-->
    <tr>
        <td width="100%" align="left"><img src="../img/旅游网1/icon_7.jpg" alt="定位">境外游
            <hr color="#ffd700">
        </td>
    </tr>

    <!--第10行-->
    <tr>
        <td>
            <table width="95%" align="center">
                <tr>
                    <td rowspan="2"><img src="../img/旅游网1/jiangwai_1.jpg">
                    </td>

                    <td><img src="../img/旅游网1/jiangxuan_3.jpg">
                        <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <p><font color="red">&yen;699</font></p>
                    </td>

                    <td><img src="../img/旅游网1/jiangxuan_3.jpg">
                        <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <p><font color="red">&yen;699</font></p>
                    </td>

                    <td><img src="../img/旅游网1/jiangxuan_3.jpg">
                        <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <p><font color="red">&yen;699</font></p>
                    </td>
                </tr>
                <tr>
                    <td><img src="../img/旅游网1/jiangxuan_3.jpg">
                        <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <p><font color="red">&yen;699</font></p>
                    </td>

                    <td><img src="../img/旅游网1/jiangxuan_3.jpg">
                        <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <p><font color="red">&yen;699</font></p>
                    </td>

                    <td><img src="../img/旅游网1/jiangxuan_3.jpg">
                        <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                        <p><font color="red">&yen;699</font></p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>


    <!--第11行-->
    <tr>
        <td><img src="../img/旅游网1/footer_service.png" width="100%" align="center"></td>
    </tr>

    <!--第12行-->
    <tr>
        <td bgcolor="#ffd700" width="100%" align="center" height="50">
            <font color="gray">江苏传智播客教育科技股份有限公司&nbsp;版权所有Copyright&nbsp;2006-2018,&nbsp;All&nbsp;Rights&nbsp;Reserved&nbsp;苏ICP备&nbsp;16007882
            </font>
        </td>
    </tr>

</table>

</body>
</html>