基础再巩固——HTML

最新推荐文章于 2020-10-22 20:24:43 发布

~sky

最新推荐文章于 2020-10-22 20:24:43 发布

阅读量552

点赞数

分类专栏：吾日三省吾身文章标签：前端

本文链接：https://blog.csdn.net/qq_38605328/article/details/100529641

版权

吾日三省吾身专栏收录该内容

41 篇文章 0 订阅

订阅专栏

拿着蓝皮书，对着敲了一遍样例又，发现常用的标签自己太久不用了还是会忘：

<!DOCTYPE html>
<head>
    <title>index</title>
</head>
<body>
    <a href ="#test">定位到锚点test（锚点的使用）</a>
    <h1>疯狂Java讲义</h1>
    <h2>疯狂安卓讲义</h2>
    <h3>轻量级JavaEE企业应用实战</h3>
    <h4>疯狂XML讲义</h4>
    <h5>疯狂前端开发讲义</h5>
    <h6>经典JavaEE企业应用实战</h6>

    <hr />
    <span>Tomcat</span><span>Jetty</span><span>Resin</span>
    <br>
    <div>Tomcat</div><div>Jetty</div><div>Resin</div>
    <p>Tomcat<p>Jetty<p>Resin
    <input type="button" value="Running Man" onclick="paobu()" />

    <br />
    <span><b>加粗文本</b></span><br />
    <span><i>斜体文本</i></span><br />
    <span><b><i>粗斜体文本<i/></b></span><br />
    <span><em>被强调的文本</em></span><br />
    <p><strong>加粗文本</p></strong><br />
    <small><span>小号字体文本</span></small><br />
    <div>普通文本<sup>上标文本</sup></div><br />
    <span>普通文本<strong><sub>下标加粗文本</sub></strong></span><br />
    <bdo dir="ltr">从左向右排列的文本</bdo><br />
    <bdo dir="rtl">从右向左排列的文本</bdo><br />
    <a href="http://www.crazyit.org"><b>疯狂java联盟</b></a><br />
    <a href="下载test.pptx"><b>下载（同级目录PPT文件，TXT可直接打开）</b></a><br />
    <a name ="test">锚点test</a>
</body>
<script type = "text/javascript">
    function paobu(){
        alert("自律使我自由！");
    }
</script>
</html>

页面间跳转——同级目录、进入目录和返回父目录

index页面代码：
<a href ="text.html">跳转到test页面</a>

test页面代码
<a href ="myr.html#test">定位到锚点test</a>
<a href ="mk/mk1.html">进入mk文件夹mk1页面</a>

mk目录下mk1页面代码
<a href ="../text.html">返回上一级页面</a>

div布局：

<div style = "height:50px;width:100%;background-color:blue">
    <div style = "height:50px;width:6%;background-color:#555;float:left;margin-left:30%;text-align:center;line-height:50px">新闻</div>
    <div style = "height:50px;width:6%;background-color:#666;float:left;text-align:center;line-height:50px">博客</div>
    <div style = "height:50px;width:6%;background-color:#777;float:left;text-align:center;line-height:50px">视频</div>
    <div style = "height:50px;width:6%;background-color:#888;float:left;text-align:center;line-height:50px">日志</div>
    <div style = "clear:both"></div><!--float会对后边产生影响，用完float必须clear-->
    <div style = "height:50px;width:6%;background-color:#999;text-align:center;line-height:50px">留言</div>
</div>
<div style = "height:300px;width:100%;background-color:#9999;margin-top:50px">
    <div style = "height:50px;width:6%;background-color:#999;float:left;margin-left:30%;margin-top:50px;text-align:center;line-height:50px">helloworld!</div>
</div>
<div style = "height:50px;width:100%;background-color:#1999;margin-top:20px"></div>

效果图：（只为回顾练习，勿喷）

~sky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基础再巩固——HTML

拿着蓝皮书，对着敲了一遍样例又，发现常用的标签自己太久不用了还是会忘：<!DOCTYPE html><head> <title>index</title></head><body> <a href ="#test">定位到锚点test（锚点的使用）</a> &l...
复制链接

扫一扫

专栏目录