美文网首页
【前端基础】基本HTML语句(一)

【前端基础】基本HTML语句(一)

作者: FLYNNNOTES | 来源:发表于2018-09-18 22:28 被阅读0次

临时工作需要搭建一个web的展示页面,找了本教程和几个模版依葫芦画瓢,虽然搭的丑但勉强能看。在遗忘前梳理下基本用法。

TIPS

  • 用谷歌浏览器打开网站,【F12】用其自带功能可查看整个web界面是如何搭建起来的。
  • 编辑软件用的是Sublime Text 3,带高亮,自动补充等功能。
    OK, Let's Go!

<!DOCTYPE html>
<html>
<head>
    <title>title部分是web界面的标题栏</title>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">   <! 我是注释!此行代码解决中文乱码问题。>
</head>
<body>
    body部分是web界面的内容。
    <h1 align="center">标题并居中</h1>
    <p align="right">文字内容右对齐并换行</p>
    <hr width="300" size="5" color="770000" align="left" title="分割线,鼠标点中此线,显示title">
    &nbsp;&nbsp; 实现缩进功能。
    <br> <! 实现换行功能>
    <font color="#006600" size="2" face="黑体">设置字体颜色、字体大小等</font><br>
    <font color="00dddd" size="5" face="隶书"> 蓝色字体--隶书</font>
    <br>
    <i>斜体</i>  <u>下划线</u>  <b>加粗</b><br> <strike>删除线</strike>
    <p><i><u><b><font color="0066dd" size="5" face="隶书"> 各种嵌套</font></b></u></i></p>
    <h3 align="left">列表</h3>
    <ul>
        <li>我是无序列表第1行</li>
        <li>我是无序列表第2行</li>
    </ul>

    <ol>
        <li>我是有序列表第1行</li>
        <li>我是有序列表第2行</li>    
    </ol>

    <h3>公式</h3>
    2<sup>3</sup>=?<br>
    log<sub>3</sub>81=?<br>

    <h3>滚动特效</h3>
    <font size="4" color="#cc0000">
    <marquee direction="left">注意!将从右边滚动!</marquee>
    <marquee direction="up" scrollamount="10" behavior="slide" loop=10 speed=2 
    bgcolor="#CCFF66" width="250" height="55">
        let's go!!
    </marquee>
    </font>
    <h2>链接</h2>
    <h4>网页链接</h4>
    <a href="anotherweb.html" target="_blank" 
    title="点击这个链接你将访问另一个网页.">
        访问另一个网页
    </a>
    <h4>页面内的链接</h4>
    <a name="top"><i>从这里开始</i></a><br>
    <a href="#1">第一个链接</a><br>
    <a href="#2">第二个链接</a><br>
    <a href="#3">第三个链接</a><br>
    
    <p><b>链接的内容:</b></p>
    First:<a name="1">第一部分内容</a><br>
    Second:<a name="2">第二部分内容</a><br>
    Third:<a name="3">第三部分内容</a><br>
    

    <h2>图片管理</h2>
    <p>
        <img src="images/fa.png" border="3" title="google translation" height="55">
        <br><br>
        <p>如果图片不存在,请显示wrong标记!</p>
        <img src="images/fv.jpg" alt="wrong" align="absmiddle" border="4">
    </p>
    <b>图片链接</b><br>
    <a href="anotherweb.html"><img src="images/fa.png" border="2"></a>
    <br>
    <b>图片滚动设置</b><br>
    <marquee direction="down" scrollamount="10" loop="10" width="300" 
    height="300"><img src="images/fa.png"></marquee>
    <br>
<h3>表格</h3>
    <table width="500" height="100" align="center" border="2" bordercolor="#000000">
        <caption><font color="#cc0000"><b>表格标题</b></font></caption>
        <thead>
            <th></th>
            <th colspan="2" align="center">列名1</th>
            <th bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee">列名2</th>
            <th>列名3</th>
        </thead>
        <tfoot>
            <tr><td>
            さいこう! 标注!</td></tr>
        </tfoot>
        <tbody>
            <tr>
                <th>行名1</th>
                <td background="images/fa.png">No.1</td>
                <td>No.2</td>
                <td>No.3</td>
                <td>No.4</td>
            </tr>
        </tbody>       
    </table>
    <br>

</body>
</html>

相关文章

网友评论

      本文标题:【前端基础】基本HTML语句(一)

      本文链接:https://www.haomeiwen.com/subject/dtlcwftx.html