web开发 简单的html

于 2021-08-01 08:53:27 发布
阅读量368 收藏
点赞数
分类专栏： web 文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sermisry/article/details/119234946
版权

文章目录


第一个html 

<!DOCTYPE html>
<html>
	<head>
		<title>第一个程序</title>
	</head>
	<body>
		<h1>七里香</h1>
		<!--h1是大标题，还有h2h3h4h5h6-->
		<h6>哈哈哈</h6>
		<p>是一种鸡屁股</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<title>七里香-周杰伦</title>
		<meta charset="utf-8">
		<!--一般写在head里面-->
	</head>
	<body>
		<h1>七里香</h1>
		<img alt="Amma" src="fff.jpg" width="390px" height="256px">
		<a href="https://baike.baidu.com/item/%E4%B8%83%E9%87%8C%E9%A6%99/12009481?fr=aladdin" target="_blank">七里香</a>
		<!--target="_blank"表示在新标签中打开-->
		<p>窗外的麻雀，在电线杆上多嘴</p>
		<p>你说这一句，很有夏天的感觉</p>
		<p>手中的铅笔，在纸上来来回回</p>
		<p>我用几行字来形容你是我的谁</p>
		<p>秋刀鱼的滋味，猫跟你都想了解</p>
		<p>初恋的香味就这样被我们寻回</p>
		<p>那温暖的阳光，像刚摘的鲜艳草莓</p>
		<p>你说你舍不得吃掉这一种感觉</p>
	</body>
</html>

鱼C中查询HTML用法

meta

<!DOCTYPE html>
<html>
    <head>
        <title>meta的用法</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--实现自适应-->
        <meta http-equiv="refresh" content="5; http://man.fishc.com/html5"
    </head>
    <body>
        <h1>"自适应"演示</h1>
        <p>请分别在手机和PC上=打开</p>
        <img id="target" src="fff.jpg" alt="amma" width="390px" height="256px" />
        <p>《哈利·波特》（Harry Potter）是英国作家J.K.罗琳（J. K. Rowling）于1997～2007年所著的魔幻文学系列小说，共7部。其中前六部以霍格沃茨魔法学校（Hogwarts School of Witchcraft and Wizardry）为主要舞台，描写的是主人公——年轻的巫师学生哈利·波特在霍格沃茨前后六年的学习生活和冒险故事；第七本描写的是哈利·波特在第二次魔法界大战中在外寻找魂器并消灭伏地魔的故事。</p>
    </body>
</html>

style

style后面如果是空的那么就没有指定，有什么内容说明指定了什么内容
style media="screen and (min-width:512px) and (max-width:1024px)"表示符合media后面的条件就用另一张图片作为背景

<html>
<head>
    <meta charset="utf-8" />
    <title>异灵术老师</title>
    <style type="text/css">
        body{
            background-image: url("../image/异灵术老师.png")
        }
        h1{
            text-align: center;
            color: red;
        }
        h2{
            margin-left: 60%;
            color:aqua;
        }
        p{
            color: deeppink;
            text-indent: 32px;
            font-size: 16px;
            line-height: 32px;
        }
        a{
            color: yellow;
            background: black;
            font-size: 55px;
        }
    </style>
    <style media="print">
        h1{
            color: black;
        }
        h2{
            color: aqua;
        }
        p{
            color:deeppink;
        }
    </style>
    <style media="screen and (min-width:512px) and (max-width:1024px)">
        body{
            background-image: url("image/fff.jpg");
        }
    </style>
</head>
<body>
    <h1>铲车人，集合！</h1>
    <h2>异灵术老师</h2>
    <p>老师退出直播圈时，整个炉石界都沸腾了，人们纷纷在问：“谁是戴佳伟？”</p>
    <p>有人说老师越来越菜了，在这里我澄清一下，老师一直都那么菜。</p>
    <p>有人说戴佳伟是世界第一术士， 我查了一下，是老师自己说的。</p>
    <p>新来的观众可能没见过老师厉害的时候，这里说明一下，老观众也没有。</p>
    <p>有谣言说老师是彩笔，我澄清一下，这不是谣言。</p>
    <p>直播间一半的弹幕都在说老师菜逼，我非常不解，另外一半弹幕干嘛去了。</p>
    <p>戴佳伟问大师自己术士玩的怎么样，大师指着旁边烧开的水壶低头不语，戴佳伟问大师：“大师是说我术士的造诣已经炉火纯情？”大师说：“铁沸物。”</p>
    <p>戴佳伟问大师自己猎人玩得和术士相比如何，大师指了指旁边的一副印象派油画和写实派水彩画，戴佳伟欣喜若狂：“您是说我的造诣就像这水彩画，比起油画来不可谓不细致？”大师闷哼一声：“油变彩了。”</p>
    <p>听说叔叔要删游戏退游了，我当场就哭了，这样我心爱的老师不就是全炉石最菜的了吗</p>
    <p>我在直播间看到你们编段子对老师大放厥词我都要急哭了，我怎么就想不出来这些段子呢。</p>
    <a href="https://www.douyu.com/93589" target="_blank">老师在看着你哦~</a>
</body>
</html>

css

把style里面的文件拿出来，可以让html文件看起来简洁

<html>
<head>
    <meta charset="utf-8" />
    <title>异灵术老师</title>

    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" type="text/css" media="print" href="print.css" />
    <link rel="stylesheet" type="text/css" media="screen and (min-width:512px) and (max-width:1024px)" href="screen512to1024.css"/>
    <link rel="icon" type="image/x-icon" href="../image/favicon.ico" />
</head>

下面是.css文件

body {
    background-image: url("../image/异灵术老师.png")
}

h1 {
    text-align: center;
    color: red;
}

h2 {
    margin-left: 60%;
    color: aqua;
}

p {
    color: deeppink;
    text-indent: 32px;
    font-size: 16px;
    line-height: 32px;
}

a {
    color: yellow;
    background: black;
    font-size: 45px;
}

<link rel="icon" type="image/x-icon" href="../image/favicon.ico" />这句话用来设置页面左上角标记

base

<html>
<head>
    <meta charset="utf-8" />
    <title>异灵术老师</title>

    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" type="text/css" media="print" href="print.css" />
    <link rel="stylesheet" type="text/css" media="screen and (min-width:512px) and (max-width:1024px)" href="screen512to1024.css" />
    <base href="https://www.douyu.com" target="_blank" />
    <link rel="icon" type="image/x-icon" href="../image/favicon.ico" />
</head>
<body>
    <a href="93589">老师</a>
    <a href="93590">test2</a>
    <a href="93591">test3</a>
    <!--这里相当于是打开了绝对路径是https://www.douyu.com/93589和https://www.douyu.com/93590等的网址-->
</body>
</html>

script

<!DOCTYPE html>
<html>
<head>
    <title>定义文档内嵌脚本</title>
    <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="Sermiscry" />
    <script type="text/javascript" src="patch.js" defer></script>
    <noscript>
        <p>浏览器不支持JavaScript会显示这个</p>
    </noscript>
</head>
<body>
    <!--defer属性，延迟执行脚本只能用于外部脚本文件-->
    <!--async属性，异步执行脚本-->
    <p>狗贼嘘嘘</p>
    <p>是一个人</p>
    <p>啊</p>
</body>
</html>

.js文件内容：

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

for(var i = 0; i < x.length; i++)
{
	x[i].innerText = "萌萌哒的鸡蛋饼到此一游";
}

注释

html5

<!--注释的内容在这里-->

css

/* 注释的内容 */

javascript

//单行注释
/*
 多行
 的注释
*/
Sermiscry
关注
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值