html基础知识

二次信任 提交于 2020-02-28 21:14:20

XHTML常用标记

含义 标签
段落 p
标题 h1-h6
空格 &nbsp
加粗 b,strong
倾斜 em
换行 br
水平线 hr
删除线 del
大于号/小于号 &gt大于 &lt小于
版权 &copy(圈C)

HTML列表

列表是一种规定格式的文字排列方式,用于列举内容。常用的列表分为有序列表、无序列表和自定义列表。

有序列表

<ol>
   <li>列表项1</li>
   <li>列表项2</li>
   ……</ol>

在<ol,<li 中可以使用type、start属性。

  • type属性用于设置编号的种类和格式,其取值如下:
    l:编号为数字,默认值。例如:1,2,3,……
    A:编号为大写英文字母。例如:A,B,C,……
    a:编号为小写英文字母。例如:a,b,c,……
    I:编号为大写罗马字符。例如:Ⅰ,Ⅱ,Ⅲ,……
    i:编号为小写罗马字符。例如:ⅰ,ⅱ,ⅲ,……

有序列表

<ol type="a" start="3">
    <li type="A">Java</li>
    <li>Sevlet</li>
    <li>Php</li>
    </ol>

无序列表

<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   ……</ul>

在<ul , <li 中都可以使用type属性。

  • type属性取值如下:
    disc:实心圆点,默认值。
    circle:空心圆点。
    square:实心正方形。

HTML超链接

<a href="资源地址">超链接文本及图像</a>

主要属性有:

href 指定链接地址。若是链接到网站外部,必须为URL地址;若是链接到网站内部页面,只需指明该页面的绝对路径或相对路径。
target 指定显示链接目标的窗口
alt 本意是用于指定超链接的替换文本,但在IE浏览器中可以用它来定义提示信息,当鼠标停留在此热区上时,它的值会显示在鼠标指针位置处。

target可取如下值:
_self:默认值。当前窗口
_blank:新打开、未命名的窗口
_top:清除当前窗口并在整个浏览器窗口显示
_parent:当前窗口的父窗口

HTML表格

<table>
   <tr>
       <th> 表格第一列的标题</th>
       <th> 表格第二列的标题</th></tr>
   <tr>
       <td> 表格第一行的第一个单元格内容</td>
       <td> 表格第一行的第二个单元格内容</td></tr>
   <tr>
        <td> 表格第二行的第一个单元格内容</td>
        <td> 表格第二行的第二个单元格内容</td></tr></table>

代码效果如下:

… … … …
表格第一列的标题 表格第二列的标题
表格第一行的第一个单元格内容 表格第一行的第二个单元格内容
表格第二行的第一个单元格内容 表格第二行的第二个单元格内容

table的常用属性:

border 设置表格边框的宽度,若为0表示边框不可见,单位为像素
cellspacing 设置单元格边框到表格边框的距离,单位为像素
width 设置表格宽度。其值可为整数,单位为像素,如:100表示100像素;也可以是相对页面宽度的相对值,如:20%表示表格宽度为整个页面宽度的20%。
bordercolor 设置表格边框颜色。align:设置表格在水平方向的对齐方式,其值可为left、right、center。
height 设置表格高度,取值方式与width一致。bgcolor:设置表格背景色。可以是十六进制代码,也可以是英文字母,
valign 设置表格在垂直方向的对齐方式,其值可为top、middle、baseline。

tr 常用属性

bordercolor 设置该行的外边框颜色。
bgcolor 设置该行单元格的背景颜色。
height 设置该行的高度。
align 设置该行各单元格的内容在水平方向的对齐方式,其值可为left、right、center。
valin 设置该行各单元格的内容在垂直方向的对齐方式,其值可为top、middle、bottom。

td 常用属性

colspan 设置单元格所占的列数,默认值为1。
rowspan 设置单元格所占的行数,默认值为1。
background 设置单元格背景图像。
width 设置单元格宽度。

示例代码:

<table border="1" width="80%" bordercolor="blue" cellpadding="2">
            <tr height ="50" valign="middle" bgcolor="yellow">
            <th width="33%" colspan="2">Java方向</th>
            <th width="33%" colspan="2">软件测试</th>
            <th width="34%" colspan="2">.NET方向</th>
           </tr>
         <tr align="center" bgcolor="red">
            <td width="16%">Java程序设计</td>
            <td width="16%">数据库技术</td>
            <td width="17%">Java程序设计</td>
            <td width="17%">数据库技术</td>
            <td width="17%">C#程序设计</td>
            <td width="17%">数据库技术</td>
           </tr>
         <tr align="center" bgcolor="blue">
            <td width="16%">JSP程序设计</td>
            <td width="16%">JavaEE技术</td> 
            <td width="17%">JSP程序设计</td>
            <td width="17%">软件测试理论</td>
            <td width="17%" bgcolor="white">ASP程序设计</td>
            <td width="17%">ADO.NET</td>
           </tr>  
        </table>

示例效果:

Java方向 软件测试 .NET方向
Java程序设计 数据库技术 Java程序设计 数据库技术 C#程序设计 数据库技术
JSP程序设计 JavaEE技术 JSP程序设计 软件测试理论 ASP程序设计 ADO.NET
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!