整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「HTML4」HTML入门

  1. 标签:又称元素,是HTML的基本组成单位双标签(绝大多数都是双标签):<标签名>标签体</标签名>第一个标签叫起始标签,第二个标签叫结束标签例:<marquee>尚硅谷,让天下没有难学的技术!</marquee>单标签:<标签名/>/可以省略例:<input>
  2. 标签名不区分大小写,但推荐小写,因为小写更规范
  3. 标签之间的关系:并列关系、嵌套关系,可以使用 tab 键进行缩进
  4. 1
    2
    3
    4
    5
    <marquee>
    尚硅谷,让天下没有难学的技术!
    <input>
    </marquee>
    <input>

标签属性

  1. 用于给标签提供附加信息
  2. 可以写在起始标签或单标签中,形式如下:<标签名 属性名="属性值" 属性名="属性值">
  3. 1
    2
    <marquee loop="1" bgcolor="orange">尚硅谷,让天下没有难学的技术!</marquee>
    <input type="password">
  4. 有些特殊的属性,没有属性名,只有属性值,如:<input disabled>

不同的标签,有不同的属性;也有一些通用属性(在任何标签内都能写)属性名、属性值不能乱写,都是W3C规定好的属性名、属性值,都不区分大小写,但推荐小写双引号,也可以写成单引号,甚至不写,但推荐写双引号标签中不要出现同名属性,否则后写的会失效,例如:<input type="text" type="password">

基本结构

  1. 想要呈现在网页中的内容写在body标签中
  2. head标签中的内容不会出现在网页中
  3. head标签中的title标签可以指定网页的标题
  4. 1
    2
    3
    4
    5
    6
    7
    8
    <html>
    <head>
    <title>网页标题</title>
    </head>
    <body>
    ......
    </body>
    </html>

注释

  1. 特点:注释的内容会被浏览器所忽略,不会呈现到页面中,但源代码中依然可见
  2. 作用:对代码进行解释和说明
  3. 写法
  4. 1
    2
    3
    4
    <!-- 下面的文字只能滚动一次 -->
    <marquee loop="1">尚硅谷</marquee>
    <!-- 下面的文字可以无限滚动 -->
    <marquee>尚硅谷123</marquee>
  5. 注释不可以嵌套

文档声明

  1. 作用:告诉浏览器当前网页的版本
  2. 写法
    1. 旧写法:要依网页所用的HTML版本而定,写法有很多参考:W3C QA - 可在 Web 文档中使用的 Doctype 声明的推荐列表
    2. 新写法:W3C 推荐使用 HTML 5 的写法
    3. 1
      2
      3
      4
      5
      <!DOCTYPE html>

      <!DOCTYPE HTML>

      <!doctype html>
  3. 文档声明必须在网页的第一行,且在html标签的外侧

字符编码

  1. 计算机对数据的操作存储时,对数据进行:编码读取时,对数据进行:解码
  2. 编码、解码,会遵循一定的规范 —— 字符集
  3. 常见的字符集ASCII:大写字母、小写字母、数字、一些符号,共计128个ISO 8859-1:在 ASCII 基础上,扩充了一些希腊字符等,共计是256个GB2312:继续扩充,收录了 6763 个常用汉字、682个字符GBK:收录了的汉字和符号达到 20000+ ,支持繁体中文UTF-8 :包含世界上所有文字与符号
  4. 为了让浏览器在渲染html文件时,不犯错误,可以通过meta标签配合charset属性指定字符编码
  5. 1
    2
    3
    <head>
    <meta charset="UTF-8"/>
    </head>

设置语言

  1. 主要作用让浏览器显示对应的翻译提示有利于搜索引擎优化
  2. 具体写法:<html lang="zh-CN">
  3. lang属性的编写规则语言-国家/地区zh-CN :中文-中国大陆(简体中文)zh-TW :中文-中国台湾(繁体中文)zh :中文en-US :英语-美国en-GB :英语-英国语言—具体种类(已不推荐使用)zh-Hans :中文—简体zh-Hant :中文—繁体W3School 上的说明:《语言代码参考手册》 、《国家/地区代码参考手册》 W3C官网上的说明:《Language tags in HTML》

标准结构

  1. HTML标准结构如下
  2. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html lang="zh-CN">

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>

    <body>

    </body>

    </html>

VSCode 删除行快捷键:Ctrl+Shift+K

  1. 输入!,随后回车即可快速生成标准结构
  2. 配置VScode 的内置插件 emmet ,可以对生成结构的属性进行定制
  3. 在存放代码的文件夹中,存放一个 favicon.ico 图片,可配置网站图标

览在线网站的体验并不总是流畅的。


曾经有一段时间,你在网上冲浪时,可能会听到你不愿意听的音乐,并在配色奇怪的网页上浏览用呆板字体(通常是 Times New Roman)写成的文字。


在 2000 年代,在 Squarespace 和社交媒体出现之前,网站是个性的体现,完全由对代码有一定了解并渴望上网的用户使用 HTML 从零开始构建。


现在,分散在网络上的程序员社区,正在努力恢复这种看似过时的东西。这场运动来源于艺术家劳蕾尔·施伍斯特(Laurel Schwulst)和埃利奥特·科斯特(Elliott Cost)创造的“HTML 能量”概念,绝不是对复古美学的肤浅致敬。


它专注于 HTML 编码的“触觉”过程,探索语言如何实现自我表达,并使个人能够在互联网中占据一席之地。


HTML 能量运动在小型 Discord 频道和数字杂志等领域形成,旨在庆祝数字体验中的“人性触摸”。


(来源:AI 生成)


如今,大多数互联网都针对社交、电子商务和流媒体进行了优化。大多数互联网流量集中在少数几个网站上,这些网站又都归少数几家公司所有。从冗长的广告到咄咄逼人的 cookie 设置,一些小障碍和麻烦层出不穷。


用户不断被提醒,他们访问互联网的条件是让少数人从中获利。X(原推特)的情况完美地概括了互联网所有权的这种状态,只需要一位高管就可以引发大量用户逃离该平台,并将其长期存在的社区割裂开来。


然而,尽管大型科技公司垄断了市场,但一个基本现实仍然能够证明互联网的民主:任何人都可以用 HTML 免费发布网站。


从技术上讲,互联网为每个人都提供了空间,因此不存在无处容身的问题。真正的问题是流量。


当我与 HTML 能量社区的不同成员交谈时,所有人都一致地传达着一个基本信息:网络上的一切最终都是 HTML。HTML 是任何网站的主干。


这是网站运行所需的唯一东西。虽然当今流行的 web 开发语言使用 abridged 命令,通过所谓的数据抽象来隐藏技术复杂性,但 HTML 是细粒度的,编程经验也不是先决条件。


正如科斯特所解释的,正是 HTML 的包容性给了渴望在网络上发布自我的人机会。使用 HTML,即使缺少一行代码,网站仍将加载。HTML 能量运动包含了这些可能性:欢迎通过试错学习,鼓励创造性实验。


随着主流数字体验趋向于同质的视觉语言,人类的触觉在许多抽象层中迷失了。网站创建者离他们的网站越来越远,网络也变得更具交易性。


但 HTML 能量运动呼吁人们重新审视我们与技术的关系,使用 HTML 制作网站可以让程序员探索网站的本质。


与公司不同,人们自己创建网站无需向股东负责。他们没有创造有利可图的体验的压力,所以他们的创作可以采取各种各样的形式。


常见类型的 HTML 能量网站包括数字花园,其中的元素随着季节的变化而变化;交互式诗歌生成器,用户的输入会创造新的意义;以及分享创作者生活细节的个人网站。


在一个消费主义至上的互联网中,HTML 能量的网站温和地提醒人们,网站可以带来冥想一样的体验。


HTML 能量社区提倡理解 HTML 的字面含义,它就是一种语言。它赞美了这种语言的基本特征对用户意图的要求。


作为微小和复杂创意决策的融合,仅使用 HTML 构建的网站是一种自我表达形式。


查看网站的源代码与浏览界面一样重要。代码中经常隐藏着彩蛋,比如来自其他 HTML 网站的消息或引用。


在很多方面,HTML 网站都“记录着”创作者的身份:这个人选择了构建什么?如何构建?


这种对 HTML 不同应用的迷恋,也出现在被称为“freewrites”的物理社区聚会中,社区成员常聚在一起编写代码。


Sunday Sites 和 Fruitful School 是组织这些集会的网站之一,它们经常将教育元素融入活动中,以增强更多人加入该社区的能力。


与此同时,像 HTML 评论这样的网站以文学杂志的形式展示了它的一些产品。


(来源:资料图)


项目 1:多景剧场


吉·金(Ji Kim)的“多景剧场”拼贴了一部旧 iPhone 的多个片段。当访问者浏览网站时,图像会重叠,并播放嵌入的音频片段。


当用户点击任何图像时,都会出现一个关于拍摄时间和地点的小描述,以及更多额外的媒体内容。


金的网站旨在模仿记忆的零散性和层次性。这是一种有意分散的数字体验,就像试图回忆几年前的一次家庭旅行一样。


(来源:资料图)


项目 2:有窗户的房间


谢尔比·威尔逊(Shelby Wilson)的带窗户的房间,是一个只允许一种互动的网站:打开和关闭一组窗帘。


该网站有意将物理空间和数字空间混合在一起。威尔逊将浏览器视为通往有物理边界和边缘的地方的门户,但也保留了超现实主义元素(百叶窗关闭时房间不会变暗)和随机元素(每次访问时房间的颜色都会变化),以突出数字形式。


(来源:资料图)


项目 3:HTML 花园


史宾赛·张(Spencer Chang)的网站设想了一个花园在互联网上的样子。


一些由原生 HTML 元素组成的“植物”在生长,每次访问你都会注意到时间的流逝:季节的变化、植物的发芽和开花。没有明确的行为,你所需要做的只是观察。


(来源:资料图)


项目 4:散文剧


凯瑟琳·杨(Katherine Yang)的散文游戏是一首互动诗,鼓励用户在预设的句子结构中输入不同的单词。


该网站以单词为变量,探索互联网的互动性。它把“作者之死”的文学理论,即“文本的意义不是由作者的本意决定的,而是由读者的解释决定的”放在了代码的语境中。


(来源:资料图)


项目 5:Erich Friedman


埃里希·弗里德曼(Erich Friedman)的网站是他生活的个人百科全书,里面有从电影评级到佛罗里达州中部迷你高尔夫球场评论的各种档案。该网站分为数学类、益智类、个人类和专业类,结构比较简单。


它使用基本的 HTML 来展示弗里德曼在过去十年中不拘一格的兴趣,包括从 0 到 9999 的每个数字的有趣事实列表,以及数学和琐事问题的集合。


该网站不需要任何特定操作。它只是对埃里希·弗里德曼的详尽、坦率的描述,在庞大的互联网中占据了一小部分。


(来源:资料图)


项目 6:屏幕博物馆


图卢·图穆(Toulou TouMou)的屏幕博物馆,是一个存放由游戏爱好者创建的浏览器游戏的网站。为了与展示的游戏互动,用户必须在数字空间中导航,就像用 ASCII 图形可视化的物理博物馆一样。


这个网站有实际的参观时间,还会随机选择一个“休息日”。


图穆的博物馆是为了在 Flash 游戏时代给予业余开发者应有的荣誉而创建的,旨在强调承认作者身份和独立游戏丰富历史的重要性。


HTML 能量的网站没有集中的来源,偶然发现让他们觉得自己很特别,就像发现停车场的一幅街头艺术作品一样。它们不是为被发现而设计的,也不是为任何特定操作而优化的。


他们只是按照访客的条件与访客互动,描绘出创作者的风格。如果像谷歌或脸书这样的网站是你购买必需品的超市和购物中心,那么 HTML 能量的网站就像你偶然发现的隐藏花园,在任何地图上都找不到。


支持:Ren

高兴铁铁们能来看html网页设计第二期~~~~撒花~~~~~

哎呀呀~实在是抱歉备注标签我记错了QAQ

<!--内容打这里-->这个才是备注标签不是//

首先我们先来学习上节课留下的剧透,分别是:

1.标题标签h1~h6

有人就说了标题标签上次剧透不就只有h1标签吗?

嘿嘿,其实他还有兄弟姐妹啦~

看图,代码是从上往下从左往右执行的请记住这个顺序哦~

还有,左边是代码右边是网页上面的效果哦~


源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>页面标题</title>

</head>

<body>

<!--标题标签是h1~h6-->

<h1>1</h1><!--最大-->

<h2>2</h2>

<h3>3</h3>

<h4>4</h4>

<h5>5</h5>

<h6>6</h6><!--最小-->

</body>

</html>

如图所示,h1标签是最大的,h6标签是最小的

是不是很简单呀,现在已经学会了一个知识点了哦~


2.段落标签 p标签

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<!--千万要记住内容是写在标签里面的哦~-->

<!--段落标签是独占一条的哦-->

<p>第一条p标签</p>

<p>第二条p标签</p>

<p>第三条p标签</p>

</body>

</html>

3.链接标签 a标签

链接标签是什么?顾名思义就是一个链接看代码:

<a href="https://www.baidu.com">百度</a>

href是什么东西啊?是a标签的属性啦~里面用来输入你需要跳转到的网页的链接

属性里面的东西是不会出现在网页上面的出现的只有在a标签里面的内容哦

当我点击百度这两个字后就给我跳转到了我们href属性里面的https://www.baidu.com

当然我们也可以跳转到我们自己制作的网页上面但要求是同一个项目下面的网页

是不是很有趣~

看视频:

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

视频中我们点击链接后就跳转到了山这个网页出现了一张山的图片,是不是有点小意思~


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<a href="new_file3.html">跳转到山的网页</a><!--只有同一个项目下面的网页才能相互跳转-->

</body>

</html>


4.图像标签 img标签

图像标签标签如其意,就是用来上传图像的一个标签~~

我们这里介绍一下img的两个属性:

<img src="img/OIP-C.jpg" alt="山"/>

src就是用来放图片的地址的,他会根据地址去找图片然后把图片放到网页上面。

alt有什么用啊就是当图片显示失败的时候就会显示alt里面的文字

看视频:

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

我们把图片的地址破坏后,就会显示一个图片错误的图标和alt里面的内容

怎么拖图片到img文件下,老师~~~我不知道

看视频

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

嘿嘿就直接把文件拖进来就ok了是不是很简单~

okk,好快啊怎么一下就学完了今天的知识点~~~

嘻嘻今天可是有作业的~

请根据下面的网页仿写一下:

完成后作业发再评论区哦,有什么不懂的可以留言包回答的。

加油呀,每天学一点争取做出属于自己的一个网页~

上一期