HTML5自学笔记上

最新推荐文章于 2024-05-18 06:08:21 发布

小张同学该努力了

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量105

点赞数

分类专栏： web开发文章标签： css javascript html5

本文链接：https://blog.csdn.net/qq_43716830/article/details/112465225

版权

web开发专栏收录该内容

10 篇文章 1 订阅

订阅专栏

资料链接如下：
课堂案例展示
 html5速查宝典
 css3速查宝典

第一个html程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个程序</title>
</head>
<body>
    <h1>Hello world</h1>
    <p>I love studying</p>
</body>
</html>

插入图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个程序</title>
</head>
<body>
<h1>Hello world</h1>
<img alt="海贼王" src="resources/background.png" width="512px" height="256px" >
<p1>I love studying</p1>
</body>
</html>

在这里插入图片描述
网页中加入超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个程序</title>
</head>
<body>
<h1>Hello world</h1>
<img alt="海贼王" src="resources/background.png" width="512px" height="256px" >
<a href="http://bbs.fishc.com">学习中遇到不会的问题请点击</a>
<p1>I love studying</p1>
</body>
</html>

在这里插入图片描述
在新页面打开链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个程序</title>
</head>
<body>
<h1>Hello world</h1>
<img alt="海贼王" src="resources/background.png" width="512px" height="256px" >
<a href="http://bbs.fishc.com"target="_blank">学习中遇到不会的问题请点击</a>
<p1>I love studying</p1>
</body>
</html>

meta的常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--    自适应屏幕大小设置文字的排版-->
    <meta name="keywords" content="富强 民主 文明 和谐">
<!--    搜索的关键词-->
    <meta name="description" content="自由 平等 公正 法制">
<!--    网页的简介描述-->
    <meta name="author" content="zyj">
<!--    网页的作者-->
    <meta http-equiv="refresh" content="5; http://baidu.com">
<!--    实现网页的自动跳转，5秒后自动跳转到http://daidu.com网页-->
    <title>第一个程序</title>
</head>
<body>
<h1>Hello world</h1>
<img alt="海贼王" src="resources/background.png" width="512px" height="256px" >
<a href="http://bbs.fishc.com"target="_blank">学习中遇到不会的问题请点击</a>
<!--加入target="_blank"之后会使网页在新页面打开-->
<p1>I love studying</p1>
</body>
</html>

style方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>海贼王，让梦想启航</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="励志">
    <meta name="description" content="希望自己2021年乘风破浪，一切顺利吧">
    <meta name="author" content="zyj">

    <style>
        body
        {
            background-image: url("resources/background.png")
        }
        h1{
            text-align: center;
            /*居中*/
            color: white;
        }
        h2{
            margin-left: 60%;
            /*设置左外边距*/
            color: white;
        }
        p{
            text-indent: 32px;
            /*缩进为32个像素*/
            font-size: 16px;
            /*设置文字大小*/
            line-height: 32px;
            /*设置行高*/
            color: white;
        }
        img{
            position: absolute;
            /*绝对路径*/
            left: 50%;
            /*位于剧左边50%*/
            margin-left: -181px;
        }

        </style>
    <style media="print">
        h1{
            color: black;
        }
        h2{
            color: black;
        }
        p{
            color: black;
        }
    </style>
<!--    给打印机设置专门的网页打印格式-->
    <style media="screen and (min-width:512px) and (max-width:1024px)">
        body{
            background-imge:url("resources/background.png");
        }
        </style>
<!--    为网页的大小设置范围-->
</head>
<body>
<h1>Hello world</h1>
<h2>fighting</h2>
<p1>I love studying</p1>
<a href="http://bbs.fishc.com"target="_blank">学习中遇到不会的问题请点击</a>
<!--加入target="_blank"之后会使网页在新页面打开-->
<img alt="海贼王" src="resources/background.png" width="512px" height="256px" >
</body>
</html>

link链接和base基址的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>海贼王，让梦想启航</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="励志">
    <meta name="description" content="希望自己2021年乘风破浪，一切顺利吧">
    <meta name="author" content="zyj">
    <link rel="stylesheet" type="text/css" href="style.css">
<!--    链接style.css的布局-->
    <link rel="stylesheet" type="text/css" media="print" href="print.css">
<!--    链接print.css的布局-->
    <link rel="stylesheet" type="text/css" media="screen and (min-width:512px) and (max-width:1024px)" href="screen 512 to 1024.css">
<!--    链接screen 512 to 1024.css的布局-->
    <link rel="icon" type="image/x-icon" href="resources/ico.ico">
<!--    设置网页的标志-->
    <base href="http://demo.fishc.com/html5/lesson4/" target="_blank">
<!--    设置基准路径-->
</head>
<body>
<h1>Hello world</h1>
<h2>fighting</h2>
<p1>I love studying</p1>
<br /><a href="test1">第一个例子</a>
<!--访问http://demo.fishc.com/html5/lesson4/test1-->
<br /><a href="test2">第二个例子</a>
<!--访问http://demo.fishc.com/html5/lesson4/test2-->
<br /><a href="test3">第三个例子</a>
<!--http://demo.fishc.com/html5/lesson4/test3-->
<br /><img alt="海贼王" src="resources/background.png" width="512px" height="256px" >
</body>
</html>

style.css
body
{
    background-image: url("resources/background.png")
}
h1{
    text-align: center;
    /*居中*/
    color: white;
}
h2{
    margin-left: 60%;
    /*设置左外边距*/
    color: white;
}
p{
    text-indent: 32px;
    /*缩进为32个像素*/
    font-size: 16px;
    /*设置文字大小*/
    line-height: 32px;
    /*设置行高*/
    color: white;
}
img{
    position: absolute;
    /*绝对路径*/
    left: 50%;
    /*位于剧左边50%*/
    margin-left: -181px;
}

在这里插入图片描述

内嵌式脚本（嵌入JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内嵌式脚本</title>
    <script type="text/javascript" src="hi.js"></script>
</head>
<body>
<p>下边</p>
</body>
</html>

document.write("上边")

用JavaScript代码替换html中的文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内嵌式脚本</title>
    <script type="text/javascript" src="hi.js" defer>
        // 调用hi.js中的JavaScript代码，defer延迟等html执行结束执行
    </script>
    <noscript>
        <p>都什么年代了，没有JavaScript</p>>
        //不支持JavaScript执行代码
    </noscript>>
</head>
<body>
<p>我是谁？</p>
<p>我从哪里来？</p>
<p>我要到哪里去？</p>
</body>
</html>

var x = document.getElementsByTagName("p");

for (var i=0;i<x.length;i++)
{
    x[i].innerText = "到此一游";
}

小张同学该努力了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5自学笔记上

资料链接如下：课堂案例展示html5速查宝典css3速查宝典第一个html程序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>第一个程序</title></head><body> <h1>Hello world</h1> <p>I love
复制链接

扫一扫