HTML系统学习

最新推荐文章于 2022-08-20 15:58:20 发布

chy响当当

最新推荐文章于 2022-08-20 15:58:20 发布

阅读量584

点赞数

分类专栏：大一暑期java实习的记录文章标签：学习 java html 前端

本文链接：https://blog.csdn.net/keepstrivingchy/article/details/125987050

版权

大一暑期java实习的记录专栏收录该内容

38 篇文章 0 订阅

订阅专栏

1.概念

## HTML

1. 概念：是最基础的网页开发语言

* Hyper Text Markup Language 超文本标记语言

* 超文本:

* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.

* 标记语言:

* 由标签构成的语言。<标签名称> 如 html，xml

* 标记语言不是编程语言

2.快速入门

2. 快速入门：

* 语法：

1. html文档后缀名 .html 或者 .htm

2. 标签分为

1. 围堵标签：有开始标签和结束标签。如 <html> </html>

2. 自闭和标签：开始标签和结束标签在一起。如 <br/>

3. 标签可以嵌套：

需要正确嵌套，不能你中有我，我中有你

错误：<a><b></a></b>

正确：<a><b></b></a>

4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来

5. html的标签不区分大小写，但是建议使用小写。

* 代码：

<html>

<head>

<title>title</title>

</head>

<body>

<FONT color='red'>Hello World</font><br/>

<font color='green'>Hello World</font>

</body>

</html>

3.文本标签

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</title>
</head>
<body>
    HelloWorld <br />
    <!--注释： -->
    <!--br /  或者就写br  换行-->
    白日依山尽，<br>
    黄河入海流。<br>

    <!--标题标签h1-6 自动换行-->
    <h1>唐诗</h1>
    <h2>唐诗</h2>
    <h3>唐诗</h3>
    <h4>唐诗</h4>
    <h5>唐诗</h5>
    <h6>唐诗</h6>

    <!--段落标签-->
    <p>1.阿啦啦啦拉拉阿拉拉阿拉啦啦啦啦啦啦啦</p>
    <p>2.阿啦啦啦拉拉阿拉拉阿拉啦啦啦啦啦啦啦</p>
    <p>3.阿啦啦啦拉拉阿拉拉阿拉啦啦啦啦啦啦啦</p>

    <!--hr显示一条水平线   size是高  align是对齐-->
    <hr  color="green" width="190" size="8"  align="left" />
    <hr>
<!--    加粗b-->
    <b>格机格机格机格机格机格机</b>
    <br>
<!--    斜体i-->
    <i>格机格机格机格机格机格机</i>
    <br>

<!--    过时的front-->
    <font color="yellow" size="8" face="黑体">格机格
        机格机格机格机格机</font>

</body>
</html>

PS：正常文字要换行一定要有br,你在idea敲回车，他utf8会识别为一个空格

4.特殊字符表

HTML 符号实体参考手册 | 菜鸟教程

html大小写不敏感，但是里面实体字符是敏感的。

5.图片标签

HTML <img> 标签 | 菜鸟教程

3. 图片标签：

* img：展示图片

* 属性：

* src：指定图片的位置

* 代码：



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



<img src="./image/jiangwai_1.jpg">

<img src="../image/jiangwai_1.jpg">

这里遇到一个问题，注意一下

HTML中的img标签中的src属性的路径问题：图片无法显示的原因及解决办法_作业布多的博客-CSDN博客_img src绝对路径不显示

6.列表和链接标签

4. 列表标签：

* 有序列表：

* ol:

* li:

* 无序列表：（具体的自己上菜鸟查）

* ul:

* li:

5. 链接标签：

* a:定义一个超链接

* 属性：

* href：指定访问资源的URL(统一资源定位符)

* target：指定打开资源的方式

* _self:默认值，在当前页面打开

* _blank：在空白页面打开

列表标签：

<ol type="I">
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
</ol>

链接标签：（中间的文字也可以改成图片img,用<a包起来即可）

<!--超链接-->
<a href="https://www.baidu.com/">点我</a>
<br>
<!--在本页面打开-->
<a href="https://www.baidu.com/" target="_self">点我</a>
<br>
<!--在新页面打开-->
<a href="https://www.baidu.com/" target="_blankf">点我</a>

href 还可以访问当前页面、启动邮件，即：

6. div和span标签：

* div:每一个div占满一整行。块级标签

* span：文本信息在一行展示，行内标签内联标签（结合CSS一起使用）

7. 语义化标签：

html5中为了提高程序的可读性，提供了一些标签。默认下不改变样式，要结合css来操作。

1. <header>：页眉

2. <footer>：页脚

8. 表格标签：

* table：定义表格

* width：宽度

* border：边框

* cellpadding：定义内容和单元格的距离

* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、

* bgcolor：背景色

* align：对齐方式

* tr：定义行

* bgcolor：背景色

* align：对齐方式

* td：定义单元格

* colspan：合并列，这两个要注意一下

* rowspan：合并行

* th：定义表头单元格

* <caption>：表格标题

* <thead>：表示表格的头部分

* <tbody>：表示表格的体部分

* <tfoot>：表示表格的脚部分

没有列的概念，只有行哦

9.案例：旅游网站首页

1. 确定使用table来完成布局

2. 如果某一行只有一个单元格，则使用<tr><td></td></tr>

3. 如果某一行有多个单元格，则使用

<tr>

<td>

<table></table>

</td>

</tr>

好处是不需要考虑是否需要合并，因为这里外层的table只有这一行一格，里面的格子在内层的table写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小陈旅游网</title>
</head>
<body>
    <!--采取table来完成布局-->
    <!--最外层的table用于整个页面的布局-->
    <table width="100%"  align="center" cellspacing="0" cellpadding="0">
        <!--第1行-->
        <tr>
            <td>
                <img src="resource/image/top_banner.jpg" width="100%" align="left">
            </td>
        </tr>
        <!--第2行-->
        <tr>
            <td>
                <table  width="100%" align="center" >
                    <tr>
                        <td>
                            <img src="resource/image/logo.jpg" width="100%"  align="left" alt="">
                        </td>
                        <td>
                            <img src="resource/image/search.png" alt="">
                        </td>
                        <td>
                            <img src="resource/image/hotel_tel.png" alt="">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--第3行-->
        <tr>
            <td>
                <table width="100%" align="center" cellspacing="0" cellpadding="0">
                    <!--这里暂时只有第一个有超链接-->
                    <tr bgcolor="#ffd700" align="center" height="40">
                        <td>
                            <a href="www.baidu.com">首页</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="resource/image/banner_3.jpg" alt="" width="100%">
            </td>
        </tr>
        <!--第5行-->
        <tr>
            <td>
                <img src="resource/image/icon_5.jpg" alt="" >
                小陈精选
                <hr color="ffd700" >
            </td>
        </tr>
        <!--第6行-->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td>
                            <img src="resource/image/jiangxuan_1.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游+四星级酒店+接送机）
                            </p>
                            <font color="red">
                                &yen;999
                            </font>
                        </td>
                        <td>
                            <img src="resource/image/jiangxuan_1.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游+四星级酒店+接送机）
                            </p>
                            <font color="red">
                                &yen;999
                            </font>
                        </td>
                        <td>
                            <img src="resource/image/jiangxuan_1.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游+四星级酒店+接送机）
                            </p>
                            <font color="red">
                                &yen;999
                            </font>
                        </td>
                        <td>
                            <img src="resource/image/jiangxuan_1.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚自由行（春节销售+亲子/蜜月/休闲游+四星级酒店+接送机）
                            </p>
                            <font color="red">
                                &yen;999
                            </font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--第7行-->
        <tr>
            <td>
                <img src="resource/image/icon_6.jpg" alt="" >
                国内游
                <hr color="ffd700" >
            </td>
        </tr>
        <!--第8行-->
        <tr>
            <td>
                <table align="center" >
                    <tr>
                        <td rowspan="2">
                            <img src="resource/image/guonei_1.jpg" alt="" height="95%">
                            <p>
                                延边深度旅游，体验南韩北韩料理，感受边境民族风俗，值得一去！
                            </p>
                            <font color="red">
                                &yen;999
                            </font>
                        </td>
                        <td>
                            <img src="resource/image/jiangxuan_2.jpg" alt="">
                            <p>
                                青岛精品旅游（五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观）
                            </p>
                            <font color="red">
                                &yen;699
                            </font>
                        </td>
                        <td>
                            <img src="resource/image/jiangxuan_2.jpg" alt="">
                            <p>
                                青岛精品旅游（五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观）
                            </p>
                            <font color="red">
                                &yen;699
                            </font>
                        </td>
                        <td>
                            <img src="resource/image/jiangxuan_2.jpg" alt="">
                            <p>
                                青岛精品旅游（五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观）
                            </p>
                            <font color="red">
                                &yen;699
                            </font>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="resource/image/jiangxuan_2.jpg" alt="">
                            <p>
                                青岛精品旅游（五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观）
                            </p>
                            <font color="red">
                                &yen;699
                            </font>
                        </td>
                        <td>
                            <img src="resource/image/jiangxuan_2.jpg" alt="">
                            <p>
                                青岛精品旅游（五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观）
                            </p>
                            <font color="red">
                                &yen;699
                            </font>
                        </td>
                        <td>
                            <img src="resource/image/jiangxuan_2.jpg" alt="">
                            <p>
                                青岛精品旅游（五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观）
                            </p>
                            <font color="red">
                                &yen;699
                            </font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--第9行-->
        <tr>
            <td>
                <img src="resource/image/icon_7.jpg" alt="" >
                境外游
                <hr color="ffd700" >
            </td>
        </tr>
        <!--第10行-->
        <tr>
            <td>
                <table align="center" >
                    <tr>
                        <td rowspan="2">
                            <img src="resource/image/jiangwai_1.jpg" alt="" height="95%">
                            <p>
                                境外旅游低价促销，机票通通报销，还在等什么，快去体验国外风景人文吧！
                            </p>
                            <font color="red">
                                &yen;6666
                            </font>
                        </td>
                        <td>
                            <img src="resource/image/jiangxuan_3.jpg" alt="">
                            <p>
                                越南精品旅游（五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观）
                            </p>
                            <font color="red">
                                &yen;6666
                            </font>
                        </td>
                        <td>
                            <img src="resource/image/jiangxuan_3.jpg" alt="">
                            <p>
                                越南精品旅游（五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观）
                            </p>
                            <font color="red">
                                &yen;6666
                            </font>
                        </td>
                        <td>
                            <img src="resource/image/jiangxuan_3.jpg" alt="">
                            <p>
                                越南精品旅游（五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观）
                            </p>
                            <font color="red">
                                &yen;6666
                            </font>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="resource/image/jiangxuan_3.jpg" alt="">
                            <p>
                                越南精品旅游（五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观）
                            </p>
                            <font color="red">
                                &yen;6666
                            </font>
                        </td>
                        <td>
                            <img src="resource/image/jiangxuan_3.jpg" alt="">
                            <p>
                                越南精品旅游（五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观）
                            </p>
                            <font color="red">
                                &yen;6666
                            </font>
                        </td>
                        <td>
                            <img src="resource/image/jiangxuan_3.jpg" alt="">
                            <p>
                               越南精品旅游（五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观）
                            </p>
                            <font color="red">
                                &yen;6666
                            </font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--第11行-->
        <tr>
            <td>
                <img src="resource/image/footer_service.png" alt="" width="100%">
            </td>
        </tr>
        <!--第12行-->
        <tr>
            <td align="center" bgcolor="ffd700">
                <font color="gray"  size="4">
                    这里是最后一行哦
                    没有版权Copyright哦
                </font>

            </td>
        </tr>

    </table>

</body>
</html>

学习课程为b站黑马程序员的javaweb课程