极客学院的前端课程（二）

最新推荐文章于 2024-08-24 11:02:04 发布

garrulousabyss

最新推荐文章于 2024-08-24 11:02:04 发布

阅读量314

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/garrulousabyss/article/details/80831025

版权

前端专栏收录该内容

45 篇文章 1 订阅

订阅专栏

2.3.1 HTML5 元素简介及使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <p>This is my web page</p>
    Hello 极客学院 <br/>
    Hello World!
</body>
</html>

2.3.2 HTML5 属性使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="#f0ffff">
    <a href="https://www.bilibili.com/video/av10298843/?p=8" target="_self">打开极客</a>
    <h1 align="center">标题h1</h1>
</body>
</html>

这里有两点要说明：

（1）bgcolor和backgroundcolor并不是同一个东西（目前了解就好）

background-color属于css样式表里面的所以这样写style="background-color:背景颜色"

bgColor属于HTML里面的所以这样写bgColor="背景颜色"

（2）a的target这个，有好几个不同选项，blank是打开一个新的，self是在原网页上直接跳转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第八课</title>
    <style type="text/css"></style>
</head>
<body bgcolor="#f0ffff">
    <a href="https://www.bilibili.com/video/av10298843/?p=8" target="_self">打开极客</a>
    <h1 align="center">标题h1</h1>
    <h2 class="h2ID">标题2</h2>
</body>
</html>

2.3.3 HTML5 格式化及使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    欢迎来到
    <b>欢迎来到jikexueyuan.com</b>
    <br/>
    <big>欢迎来到jikexueyuan.com</big>
    <br/>
    <em>欢迎来到jikexueyuan.com</em>
    <br/>
    <i>欢迎来到</i>
    <br/>
    <small>欢迎来到</small>
    <br/>
    <strong>欢迎来到</strong>
    <br/>
    上标前后<sub>必须加文字</sub>不然看不出来
    <br/>
    上标前后<sup>必须加文字</sup>不然看不出来
    <br/>
    <ins>欢迎</ins>
    <br/>
    del>欢迎来到</del>
</body>
</html>

2.4.1 HTML5 样式的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <style type="text/css">
        p{
            color: #ff2dde;
        }
    </style>
</head>
<body>
    <h1>标题h1</h1>

    <p>欢迎来到极客学院： www.jikexueyuan.com</p>
    <a href="www.jikexueyuan.com" style="color: chartreuse">点击我跳转到极客学院</a>
</body>
</html>

2.4.2 HTML5 链接属性及使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.jikexueyuan.com">点击我</a>
    <a href="http://www.jikexueyuan.com">
        <img src=".idea/xiuji.jpg" width="200px" height="200px" alt="html5 logo">
    </a>
    <br/>
    <br/>
    <a name="tips">hello</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <a href="#tips">跳转到hello</a>
</body>
</html>