HTML初入门1

最新推荐文章于 2024-07-22 17:27:18 发布

烤翅吐司沙拉

最新推荐文章于 2024-07-22 17:27:18 发布

阅读量162

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_45666464/article/details/118853986

版权

学习目标

学会基本HTML知识，并能制作简单的网页。

学习内容

什么是HTML
Web标准（网页标准）
HTML标签和语法规范
使用VSCode创建页面

学习时间

上午 8:30~11:30

下午 14:30~17:30

一、HTML

1、HTML指的是超文本标记语言，用于创建网页的标准标记语言。（不是编程语言）

标记语言是一套标记标签（markup tag）

2、超文本有两层含义：

超文本可以加入图片、声音、动画、多媒体等内容（超越了文本限制）
超文本还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）

3、网页其实就是一个html文件（.html）

二、Web标准

1、Web标准的构成

主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要是学的是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观形式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要是JavaScript

三、HTML标签和语法规范

1、HTML基本语法概述

HTML标签是由尖括号包围的关键词，eg. <html>；
HTML标签通常是成对出现的，eg. <html>和</html>，称为双标签；
有些特殊的标签必须是单标签，eg. <br />，称为单标签

2、标签关系

双标签关系可以分为两类：包含关系和并列关系

包含关系

并列关系

3、HTML基本的结构标签

<!--HTML的基本骨架-->

<!DOCTYPE html>  <!--根标签-->
<html lang="ch-CN">  <!--网站显示语言是中文-->
<head>  <!--文档的头部-->
    <meta charset="UTF-8"><!--编码UTF-8-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><!--网页标题-->
</head>
<body>
    <!--body标签内是页面的主要内容-->
</body>
</html>

4、HTML其他标签

文本格式化标签
语义	标签
加粗	<strong></strong> or <b></b>
倾斜	<em></em> or <i></i>
删除线	<del></del> or <s></s>
下划线	<ins></ins> or <u></u>

标题标签：<h1>—<h6>
段落标签：<p></p> ，可以把HTML文档分割为若干段落，段落与段落之间保有空隙
换行标签：<br />，强制换行
<div>和<span>标签

        <div>和<span>是没有语义的，用来装内容的。

        特点：1.<div>标签用来布局，但是现在一行只能放一个<div>

         2.<span>标签用来布局，一行上可以多个<span>。

图像标签：<img src="图片路径" alt="图像无法显示时现实的文字" title="图像显示的文字" width(宽度) height(高度) border(图像边框粗细)>

5、下载VSCode，并使用其来构建一个页面

HTML代码如下：

<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>污渍为什么是神？</title>
    <style>
        div{margin-top: 10px;}
        .divcss1-1{color: rgb(255, 0, 0);}
        .divcss1-2{text-align: center;}
        .divcss1-3{margin: 0px 0px 0px 35px;}
    </style>
    <style>
        .span1{color: rgb(79, 120, 209); background: pink;}
        .span2{color: red; background: yellow;}
        .span3{color: rgb(0, 255, 128); background: rgb(255, 126, 40);}
    </style>
</head>
<body>
    <h1 style="text-indent:2em"><div class = "divcss1-1" style="text-align: center;">ad之七宗罪</div></h1>
    <div class="divcss1-2"><img src="image/qizongzui.jpg" alt="七宗罪" title="七宗罪"/></div>

    <h4 style="text-indent:2em">首先是犯下<span class="span1">傲慢</span>之罪的piglet</h4>
    <div class="divcss1-3"><img src="image/aoman.PNG" title="傲慢滴piglet" width="300"/></div>
    <div><p style="text-indent:2em">走位躲个酒桶大就露出不屑的笑，这种傲慢的ad注定走不长远。事实也是如此，靠着一个阴险的穿兵Q赢了神之后一直在走下坡路，最终泯然众人。与之相比神就很谦卑，s6的烬，s7的霞都是神留给凡人的慈悲，神不是不会，只是不想通过太完美的表现让对手绝望所以故意不用，可笑有些人不理解神的良苦用心，竟然还用这些事来讥讽神，我劝你们好自为之。</p></div>

    <h4 style="text-indent:2em">然后是犯下<span class="span2">愤怒</span>之罪的Imp</h4>
    <div class="divcss1-3"><img src="image/fennu.PNG" title="控制不住情绪的愤怒imp" width="300"/></div>
    <p style="text-indent:2em">因为隔壁桌韩国人说中国的不好就跟人家打架，排位有人提到神的名字就怒气冲冲地打出自己的id，违背了神在《新约》中的一句话：“我觉得选手就是要能很好的控制自己的情绪吧。”于是神降下了他的惩罚，Imp后宫起火，老婆抢走银行卡扣押护照，更染上烟瘾一蹶不振。</p>

    <h4 style="text-indent:2em">接着是犯下<span class="span3">懒惰</span>之罪的Bang</h4>
    <div class="divcss1-3"><img src="image/landuo.PNG" title="冥想训练的懒惰bang" width="300"/></div>
    <p style="text-indent:2em">自以为拿下两个S赛冠军就了不起了，自创冥想训练法。另外大家有所不知，其实在s7半决赛前，Bang闭上眼睛做冥想的时候，其脑海中看见的画面，正是站在光芒之中的乌兹，那时神告诉他：“你只可到这里，不可越过。”然而，神的劝说不但没有让Bang迷途知返，竟然还敢在半决赛伙同LCK头号魔头正面挑战神的威严，于是神降下了他的惩罚，Bang在决赛身败名裂，两届s赛冠军没人记得，从此成为了众人口中的推推棒。</p>

    <h4 style="text-indent:2em">再然后是犯下了<span class="span1">嫉妒</span>之罪Ruler</h4>
    <div class="divcss1-3"><img src="image/jidu.PNG" title="嫉妒神的ruler" width="300"/></div>
    <p style="text-indent:2em">屡次被神击败，但口服心不负的Ruler，暗中嫉妒着神，甚至胆敢当众说出如果好好准备地话，感觉自己会更强这种话。于是，在含金量最高的LOL比赛，即亚运会上，Ruler被神正面击溃。不过，念在尺弟最终皈依了神的教，并且践行神的意志讨伐了屡次以下犯上的Bang后，神应许了他在三星的一切。</p>

    <h4 style="text-indent:2em">犯下<span class="span3">贪婪</span>之罪的Jackeylove</h4>
    <div class="divcss1-3"><img src="image/tanlan.PNG" title="大头的贪婪神子接Q辣舞" width="300"/></div>
    <p style="text-indent:2em">只是初出茅庐，JKL就夺得了s赛冠军，而这，自然是因为神的应允。神本来钦定他为自己在人间的代言人，在自己退役之后替自己继续讨伐LCK的魔头，为此甚至不惜亲自为JKL铺路，在8强赛主动输掉比赛，将一切荣耀都归给他，甚至应允他可以带走自己最爱的卡莎。但最后Jackeylove却被利益蒙蔽了双眼，不再以践行神的理想为自己的理想，也不再聆听神的教诲，甚至自以荣光已经超过了神，竟允许粉丝P出“我十七岁就夺冠了，你呢”这种亵渎神尊严的图片，于是神降下了惩罚，Jackeylove从此不再长高并且拥有一颗醒目的大头，而他的上单将再也不能独自carry，他的中单再也不能强势压制对手，他的辅助将再也不能开团，他的打野也再不能替他揽下大锅，吸收火力。</p>

    <h4 style="text-indent:2em">犯下<span class="span2">暴食</span>之罪的Lwx</h4>
    <div class="divcss1-3"><img src="image/baoshi.PNG" title="暴食lwx" width="300"/></div>
    <p style="text-indent:2em">在神子Jackeylove堕落之后，神开始寻找下一个代言人，这一次，他选中了LWX。相较于神，Lwx无疑是不完美的，他没有神足以让对手窒息的对线压制力，也没有神深不见底的英雄池，舍我其谁的胆气，敏锐的收割嗅觉，无懈可击的操作，但神将自己最虔诚，同时也是实力最强大的两位婢女（VN卡莎）暂时交给了他，并复刻了s8的铺路操作，但由于s8的事，神认为或许是自己给的压力过大才导致了神子的堕落，于是这一次神选择了在小组赛离开，减少Lwx的心理负担，最终，Lwx成功了。然而，夺冠后的Lwx不但冒大不韪在VN小姐的身上刻下了自己的名字，更妄图染指神力，只是他错误地认为神的力量来源于吃三路和四保一，最终他也因此犯下了暴食之罪，并在s10无缘世界赛。</p>

    <h4 style="text-indent:2em">最后，犯下<span class="span1">淫欲</span>之罪的Huanfeng</h4>
    <div class="divcss1-3"><img src="image/yinyu.PNG" title="海边淫欲少年huanfeng" width="300"/></div>
    <p style="text-indent:2em">s9之后，神已经非常虚弱了，邪神奥咪咪用黑洞吸走了神的精气，神已经无力再惩罚Lwx，只有信徒依旧在维护神的威严而已。此刻已经决心退隐的神在最后依然心系LPL，于是他选中了第三位神子——huanfeng。作为第三任神子，Huanfeng很好地维护了神的威严，但在接连击溃两代堕落的神子后，Huangfeng遇到了淫魔荔枝姐，被吸走了神赋予自己的力量，于是在决赛中连连失误，最终葬送比赛，彻底身败名裂。</p>
</body>
</html>

页面显示如下：

烤翅吐司沙拉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML初入门1

学习目标学会基本HTML知识，并能制作简单的网页。学习内容什么是HTML Web标准（网页标准） HTML标签和语法规范使用VSCode创建页面学习时间上午 8:30~11:30 下午 14:30~17:30一、HTML1、HTML指的是超文本标记语言，用于创建网页的标准标记语言。（不是编程语言）标记语言是一套标记标签（markup tag）2、超文本有两层含义：超文本可以加入图片、声音、动画、多媒体等内容（超越了文本...
复制链接

扫一扫