zoukankan      html  css  js  c++  java
  • 我爱Java系列---【HTML基本标签】

    <!DOCTYPE html>
    <html>
         <head>
             <meta charset="UTF-8">
             <title>HTML基本标签</title>
         </head>
         <body>
            <!--1.水平线-->
                 <hr />
                 <hr size="200"/>
                 <hr noshade="noshade" />

             <!--2.字体-->
                 <font size="7">我很帅(size取值1-7,依次增大)</font>
                 <font color="blue">我很蓝</font>
                 <font color="#FF0000">我是红色的</font>
                 <font face="微软雅黑" color="green" size="7">微软雅黑</font>
                 <font face="华为彩云" color="green" size="7">华为彩云</font>

             <!--3.格式化标签-->
                <b>粗体</b>
                 <i>斜体</i>

             <!--4.段落标签-->
             <p>定义段落
                 插入单个<br />换行
             </p>

             <!--5.标题标签: hn
                 数字n: 取值范围1-6
                 数字越小: 字体越大  常用 h1和h3
             -->

            <h1>标题</h1>
             <h6>小标题</h6>
             <!--
                 6.图片标签: img    内部结束
                 属性:
                     src: 指定图片的路径 相对路径
                     宽度 像素     百分比: 占用浏览器窗口的比例
                     height: 高度
                     title: 图片标题,鼠标悬停提示
                     alt :图片无法显示时的替代文本
                     align:  left    把图像对齐到左边
                             right    把图像对齐到右边
                             middle    把图像与中央对齐
                             top    把图像与顶部对齐
                             bottom    把图像与底部对齐
             -->

             <img src="img/middle01.jpg" width="50%" height="30%"title="你点我" alt="加载失败">
             <img src="img/small0.jpg" width="50%" height="30%"title="你点我" alt="加载失败">
             <img src="img/middle01.jpg" width="50%" height="30%"title="你点我" alt="加载失败" align="right">
                 <!--
                 7.列表标签:
                     有序标签: ol
                         列表项标签: li
                         属性:
                             start: 起始值
                             type: 列表项前的序号的样式(1,A,a,I,i)
                            
                     无序标签: ul
                         列表项标签: li
                         属性:
                             type: 列表项前的图形的样式(disc,square,circle)
             -->

             <ol start="3" type="i">
                 <li>百度</li>
                 <li>京东</li>
             </ol>
             <ul type="square">
                 <li>百度</li>
                 <li>京东</li>
             </ul>
             <!--
                 8.表格标签: table
                     属性:
                         border: 表框 像素值
                         宽度
                         height: 高度
                         align: 显示位置  居中 center 居左 left 居右 right
                         cellpadding: 单元格内容和边框线的位置
                         cellspacing: 单元格之间的举例
                         bgcolor: 背景色
                         bordercolor: 边框颜色
                 行标签:    tr
                     属性:
                         align: 显示位置  居中 center 居左 left 居右 right
                 单元格标签: td
                    
                 单元格标题标签: th 默认居中 加粗
                
                 3行3列的表格
             -->

             <table border="2" bordercolor="red"cellpadding="12"cellspacing="0"bgcolor="chartreuse"width="201"height="80">
                 <tr >
                     <th>1-1</th>
                     <th>1-2</th>
                     <th>1-3</th>
                 </tr>
                 <tr align="center">
                     <td>2-1</td>
                     <td>2-2</td>
                     <td>2-3</td>
                 </tr>
                 <tr>
                     <td>3-1</td>
                     <td>3-2</td>
                     <td>3-3</td>
                 </tr>
                 <!--
                 8.合并单元格(都是针对单元格 td)
                     1.第一行的三个单元格合并
                     跨列操作:
                         属性:
                             colspan: 值是合并单元格的数量,跨越的列数
                     2.第二行第一个单元格和第3行第一个单元格合并
                     跨行操作:
                         属性:
                             rowspan: 值是合并单元格的数量,跨越的行数
                     3行3列的表格
                 快捷键:tr*n>td*n  然后按Tab,就可以生成n行n列的表格
             -->

             <table bordercolor="blue" border="1" cellpadding="3" cellspacing="1" width="800" height="600">
                 <tr>
                     <th colspan="2">亚瑟</th>
                     <!--<th>钟无艳</th>-->
                     <th>后羿</th>
                 </tr>
                 <tr>
                     <th rowspan="2">孙尚香</th>
                     <th>小乔</th>
                     <th>猴子</th>
                 </tr>
                 <tr>
                     <!--<th>妲己</th>-->
                     <th>甄姬</th>
                     <th>云中鹤</th>
                 </tr>
                <!--
                 9.超链接标签: 从一个页面跳转到另一个页面
                     标签: a
                         属性:
                             href: 跳转到另一个页面的地址
                             target: 新页面的显示方式
                                 _blank: 在新窗口中打开
                                 _self: 在当前窗口中打开 默认
             -->

             <a href="
    http://www.baidu.com" target="_self">百度</a>
             </table>
         </body>
    </html>

    愿你走出半生,归来仍是少年!
  • 相关阅读:
    LeetCode OJ 107. Binary Tree Level Order Traversal II
    LeetCode OJ 116. Populating Next Right Pointers in Each Node
    LeetCode OJ 108. Convert Sorted Array to Binary Search Tree
    LeetCode OJ 105. Construct Binary Tree from Preorder and Inorder Traversal
    LeetCode OJ 98. Validate Binary Search Tree
    老程序员解Bug的通用套路
    转载 四年努力,梦归阿里,和大家聊聊成长感悟
    转载面试感悟----一名3年工作经验的程序员应该具备的技能
    Web Service和Servlet的区别
    关于spring xml文件中的xmlns,xsi:schemaLocation
  • 原文地址:https://www.cnblogs.com/hujunwei/p/10858008.html
Copyright © 2011-2022 走看看