javaWeb-day01-HTML

最新推荐文章于 2025-05-24 10:11:26 发布

grilla1024

最新推荐文章于 2025-05-24 10:11:26 发布

阅读量193

点赞数

分类专栏： javaWeb 文章标签： html

本文链接：https://blog.youkuaiyun.com/xingxing_LM/article/details/112470118

版权

javaWeb 专栏收录该内容

11 篇文章

订阅专栏

文本标签

<!DOCTYPE html>
<html lang="ch" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>

<!-- 注释 -->
<!-- br 换行 -->
奥力给，<br/>
的猛<br/>


<!-- 标题标签 h1-h6 -->
<h1>河马旅游</h1>
<h2>河马旅游</h2>
<h3>河马旅游</h3>
<h4>河马旅游</h4>
<h5>河马旅游</h5>
<h6>河马旅游</h6>


<!-- 段落标签 -->
  <p>河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊</p>
  <p>河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊河马啊</p>


<!-- hr 显示一条水平线 width长度 size宽度 left左对齐-->
 <hr color="red" width="200" size="10" align="left"/>
 <hr color="red" width=50% size="10" align="left"/>

## <!-- 加粗 --> <b>aaaaa</b> <br> <!-- 斜体 --> <i>aaaaaaaaa</i> <br><br><br><br> <!-- 字体标签color 1.单词 2.rgb(1,2,3)0-255 3.#123 00-FF之间 --> <font color="red" size="10" face="楷体">奥力给的猛</font> <br> <font color=rgb(244,3,55) size="10" face="楷体">奥力给的猛</font> <br> <font color="#FF00FF" size=10 face="楷体">奥力给的猛</font> <br>

<center><font color="#FF00FF" size=10 face="楷体">奥力给的猛</font></center>
<br>
<br>


</body>
</html>

2案例-公司简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<header><h1>公司简介</h1></header>
<hr color="ffd700">
<p><font color="red">"中关村黑马程序员训练营"</font>是由<i><b>传智播客</b></i>联合中关村软件园、优快云， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
<p>黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。</p>
<p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。<p>
<p>一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。</p>
<hr color="ffd700"/>

<footer><center><font color="gray" size="2">江苏传智播客教育科技股份有限公司<br>
    版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882</font></center></footer>

</body>
</html>

3图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--图片标签 src用来指定图片的位置，相对路径./,,, ../上一级目录-->
<img src="./image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
</body>
</html>

4列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 有序列表 ol-->
做菜步骤
<ol type="A" start="2">
    <li>择菜</li>
    <li>洗菜</li>
    <li>切菜</li>
    <li>炒菜</li>
</ol>


<!-- 无序列表 l-->
做菜步骤
<ul type="">
    <li>择菜</li>
    <li>洗菜</li>
    <li>切菜</li>
    <li>炒菜</li>
</ul>
做菜步骤
<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>
</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--超链接 a属性href指定访问资源的url（统一资源定位符）-->
<!--target 打开资源的方式-->
<a href = "http://www.baidu.com" target="_self">点啊本页面打开网页</a>
<br>
<a href = "http://www.baidu.com" target="_blank">点啊新页面打开网页</a>
<br>
<a href="4列表标签.html">列表标签</a>
<br>
<a href="maito:859916875@qq.com">联系我的邮件，自动打开邮件应用</a>
<br>
<!--图片链接-->
<a href="http://www.baidu.com"><img src="image/jiangwai_1.jpg"></a>
</body>
</html>

5链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--超链接 a属性href指定访问资源的url（统一资源定位符）-->
<!--target 打开资源的方式-->
<a href = "http://www.baidu.com" target="_self">点啊本页面打开网页</a>
<br>
<a href = "http://www.baidu.com" target="_blank">点啊新页面打开网页</a>
<br>
<a href="4列表标签.html">列表标签</a>
<br>
<a href="maito:859916875@qq.com">联系我的邮件，自动打开邮件应用</a>
<br>
<!--图片链接-->
<a href="http://www.baidu.com"><img src="image/jiangwai_1.jpg"></a>
</body>
</html>

6块标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--结合css使用
div:每一个标签占满一行，块级标签
span：文本信息在一行展示 ，行内标签 内联标签
-->
<span>河马程序</span>
<span>河马程序</span>
<br>
<div>hehehe</div>
<div>hehehe</div>
</body>
</html>

7表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--border边框  width长度 cellpadding内容和单元格的距离   cellspacing 定义为0，线和为一条  align对其方式-->
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faeeff" align="center">
<!--tr 行 th表头  td列-->
    <tr>
    <th>编号</th>
    <th>姓名</th>
    <th>成绩</th>
</tr>

    <tr bgcolor="aqua" align="center">
        <td>1</td>
        <td>zhang</td>
        <td>111</td>
    </tr>

    <tr>
        <td>2</td>
        <td>李四</td>
        <td>222</td>
    </tr>


</table>
<hr>


<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faeeff" align="center">
    <thead>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>1</td>
        <td>zhang</td>
        <td>111</td>
    </tr>

    <tr>
        <td>2</td>
        <td>李四</td>
        <td>222</td>
    </tr>
    </tbody>


    <tfoot>

    </tfoot>



</table>
<br>
<hr>


<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faeeff" align="center">
    <tr>
        <th rowspan="2">编号</th> <!--合并行-->
        <th>姓名</th>
        <th>成绩</th>
    </tr>

    <tr>
        <td>1</td>
        <td>zhang</td>

    </tr>

    <tr>
        <td>2</td>
        <td colspan="2">李四</td><!---合并列-->

    </tr>


</table>
</body>
</html>

8旅游网站首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--border边框  width长度 cellpadding内容和单元格的距离   cellspacing 定义为0，线和为一条  align对其方式-->
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faeeff" align="center">
<!--tr 行 th表头  td列-->
    <tr>
    <th>编号</th>
    <th>姓名</th>
    <th>成绩</th>
</tr>

    <tr bgcolor="aqua" align="center">
        <td>1</td>
        <td>zhang</td>
        <td>111</td>
    </tr>

    <tr>
        <td>2</td>
        <td>李四</td>
        <td>222</td>
    </tr>


</table>
<hr>


<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faeeff" align="center">
    <thead>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>1</td>
        <td>zhang</td>
        <td>111</td>
    </tr>

    <tr>
        <td>2</td>
        <td>李四</td>
        <td>222</td>
    </tr>
    </tbody>


    <tfoot>

    </tfoot>



</table>
<br>
<hr>


<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faeeff" align="center">
    <tr>
        <th rowspan="2">编号</th> <!--合并行-->
        <th>姓名</th>
        <th>成绩</th>
    </tr>

    <tr>
        <td>1</td>
        <td>zhang</td>

    </tr>

    <tr>
        <td>2</td>
        <td colspan="2">李四</td><!---合并列-->

    </tr>


</table>
</body>
</html>