Bigdata Development Web_Study_01(HTML)

最新推荐文章于 2024-07-18 15:09:01 发布

Mr_ShuaiShuai_

最新推荐文章于 2024-07-18 15:09:01 发布

阅读量264

点赞数

分类专栏： web 文章标签： html css web

本文链接：https://blog.csdn.net/qq_38797840/article/details/77200818

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

网页中可以包含3种语言
HTML：负责网页展示的内容
CSS：负责网页的展示效果
Javascript（JSP）：负责和用户进行交互

HTML


<!-- HTML 中的注释格式 -->
<!-- alt + / 选择第一个 comment，自动生成 -->

<!-- 说明这个文档的内容是一段 HTML 代码 -->
<!DOCTYPE html>

<!-- html 是网页的根标签，所有内容都要包含在 html 标签中 -->
<!-- 
    html 标签中可以包含两部分内容：
        head 标签：设置网页的头部信息
        body 标签：设置网页的正文信息
 -->
<html>
<head>
<!-- meta 设置编码方式 -->
<meta charset="UTF-8">

<!-- 设置标题文字 -->
<title>hello, world</title>
</head>

<body>
    <!-- 
        右键 -- open with -- web browser 在浏览器中查看网页
        更新代码后，ctrl + s 保存，去浏览器中刷新更新页面

        排版：ctrl + shift + f 在 win10 下会和简繁体切换冲突
        使用两个操作代替：ctrl + a 全选 ctrl + i 对选中的内容排版

        html 中默认排版会取消标签的缩进
    -->

    <!-- 
        body中标签分两种
            行标签：多个行标签挤在一行内
                <span></span>
                <a></a>超链接标签，点击后跳转相应的网页
                    通过href属性设置跳转后网页的URL
                <img></img>
                    通过src设置要显示的图片的位置
                        绝对路径：从盘符开始算
                        相对路径：从当前网页开始算
                        URL：http://www.XXX.com
            块标签：每个块标签独占一行
                <div></div>
                <p></p>段落标签，表示一个段落的文字，和上下内容之间有空行间隔
                <h1></h1>标题标签。

    文字不使用任何标签包裹，就是行标签，挤在一行展示，回车不会生效。

    <br>回车，换行标签
    <hr>分割线
    &nbsp;英文空格
    &emsp;中文空格
     -->

    <h1>静夜思</h1>

    <hr>

        作&nbsp;&nbsp;者：<a href="http://www.zhiyou100.com">李&emsp;&emsp;白</a>

    <div>
        床前明月光，
    </div>

    <p>
        疑是地上霜。
    </p>

    举头望明月，
    <br><br><br>
    低头思故乡。

    <br>

    <!-- 
        相对路径绝对不要以 / 起始，加了以后就称为绝对路径了
    -->
    <img src="#"></img>

</body>
</html>

CSS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>名片</title>
    <!--
    使用link标签绑定css文件和html文件

    CSS层叠样式表
    HTML负责搭建网页框架和要展示的数据
    CSS用来装修和美化

-->
    <link rel = "stylesheet" href="css/index.css">
</head>
<body>
    <div class="main" id = "button">
        <a href="https://www.baidu.com" id=zhiyou><img
            src="image/zhiyou.png"></img></a>

        <h1>姓名：翟帅帅</h1>

        <p>职位：学生</p>

        <p>邮箱：pfo817@163.com</p>

        <p>qq：920028180</p>

        <div class="head"></div>
    </div>

    <script type = "text/javascript">
    //js当中的备注。
    var button = document.getElementById("button");

    button.onclick = function(){

        alert("嘿嘿嘿嘿");
    }


</body>
</html>

/*
CSSz中使用这种方式进行注释

CSS设置样式效果是作用在标签上的
我们需要针对标签设置展示效果
针对外层标签设置的效果，内层标签也会生效

*/

html {
    height: 100%;
}

body {
    height: 100%;

    background-image: url(../image/bg.jpg);

}

.main{

    background:white;

    /*标签宽度*/
    width:500px;

    /*设置标签和其他标签的间距，外间距*/
    margin: 0 auto;

    margin-top:200px;

    /*50像素的圆角*/
    border-radius: 50px;

    /*
    内间距，标签中内容和边框的间距。
    */
    padding-left: 35px;



}

.head{
    width: 160px;

    height: 160px;

    background-image: url(../image/libai.jpg);

    background-position: center;

    border-radius: 100px;

        /*白色不覆盖*/
    float:right;

    margin-top: -190px;

    margin-right: 50px;
}


.main:HOVER{

    transform: rotate(360deg);

    transition: transform 2s ease-in;
}

Mr_ShuaiShuai_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bigdata Development Web_Study_01(HTML)

网页中可以包含3种语言HTML：负责网页展示的内容CSS：负责网页的展示效果Javascript（JSP）：负责和用户进行交互HTML<!DOCTYPE html><!-- html 是网页的根标签，所有内容都要包含在
复制链接

扫一扫