• 周六. 10月 8th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

认识HTML语言(CodePen)

admin

11月 28, 2021

1.一个网页的加载过程

一定要在电脑前实践操作
在这里插入图片描述
PC和手机通过服务器和Internet交互。访问时把服务器的资源下载到浏览器里,并通过浏览器渲染。

2.Web技术全览

在这里插入图片描述
HTTP把前端和Java通信起来
WebSocket:网页版的即时通信
图像:Canvas:2D平面图;WebGL:3D图
多媒体:音频和视频

有趣的例子(codepen需要科学上网skip wall)
骑自行车的黑人女孩: https://codepen.io/dmaristem/pen/RLeXXK
在这里插入图片描述
可以加泡沫的咖啡杯:https://codepen.io/ispal/pen/vgyBGX
在这里插入图片描述
星空:https://codepen.io/WillemCrnlssn/pen/JgFGs

可以加泡沫的咖啡杯:https://codepen.io/whomanbean/full/JWxJEe图中有太阳、地球、月球

扎克伯格哈佛大学演讲:https://www.youtube.com/watch?v=BmYv8XGI-YU

推荐教材:HTML5与CSS3权威指南【第3版】一定要长这个样子
在这里插入图片描述

学技术的不需要买书也能解决:
官方的讲前端技术的网站MDN web docs:https://developer.mozilla.org/zh-CN/docs/Web
最新的在MDN中。以后查资料都可以来这里查。
当前W3school已经过时,无人维护,最新的WEB的API在W3school都查不到
有广告的东西都不是很好,专业的技术都不搞广告,流量自然而然很多。

建议用chrome浏览器打开,兼容很多(本人经验,Microsoft Edge有很多不兼容),谷歌浏览器翻墙谷歌去下载
CodePen:https://codepen.io
sign up注册;log in登陆;Create——New Pen

3.HTML语法

在这里插入图片描述

HTML语法(一):标签

在这里插入图片描述
规范:开头+内容+结束

<h1>大家好</h1>这是一级标题

快捷方式:输入h1,按Tab键

在这里插入图片描述
关于h1的详细介绍可以到Web技术文档去看:https://developer.mozilla.org/zh-CN/docs/Web
搜索h1—-点击第三个

(<h1>-<h6>)

很多HTML语法不会,去搜就可以

但在MDN中一定要找格式的

在这里插入图片描述
注释的写法:<!-- 内容 -->
嵌套:可以层层嵌套,但要注意封闭性(<>要搭配</>)

<!-- 学习H标签便签 -->
<h1>
  一级标题
  <h2>
    二级标题
    <h3>三级标题</h3>
  </h2>
</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>

成果:
在这里插入图片描述
右上角Tidy HTML,自动化格式化,不需要一行一行去调(如果以后你用的IDE没有这种功能,就应该放弃了)比如vc6.0(什么功能都没有)

HTML语法(四):网页结构

chrome可以右键“检查”,选中标题可以看到heat body;
否则其他浏览器看不到检查;
在这里插入图片描述

4.HTML常用元素

  • 块级元素:
    • 在页面中以块的形式展现,一个元素会独占一行
    • div、ol、ul、li、p、h1
  • 内联元素:
    • 内联元素不会导致文本换行(可以并排)
    • span、label、a、strong

展示元素

(1)块级元素div

输入:

<div>hello world</div>
<div>Hello Bmatch</div>
<ul>  大家好</ul>
<h1>123</h1>

输出(独占一行):

hello world
Hello Bmatch
大家好
123

(2)内联元素span与div配合使用

输入:

<div>
    <span>Hello</span>      
    <span>World</span>
</div>
<div>
    <span>Hello</span>     
    <span>Bmatch</span>
</div>

输出:

Hello World
Hello Bmatch

启示:

div的作用是:用来分隔你的元素,并把你的元素组成不同的框架,是container(容器)

(3)文本元素p

<p>时间静安寺积极多好多好多好</p>
时间静安寺积极多好多好多好

(4)列表元素ul和ol

输入:

<ul>
  <li>todo1</li>
  <li>todo2</li>
</ul>

<ol>
  <li>todo1</li>
  <li>todo2</li>
</ol>

输出:
无序列表:

  • todo1
  • todo2

有序列表:

  1. todo1
  2. todo2

注意:ul、ol后面都要加li,这是规定,成对出现

(4)加粗元素strong和span对比

<strong>Bmatch</strong>
<span>Bmatch</span>

加粗:
Bmatch
Bmatch

(5)labal标签元素

描述一个输入框

<label for="">bmatch</label>

输出:
“”里我暂时不知道干嘛用

(6)a超链接标签

输入

<a href=""></a>
<a href="http://www.baidu.com">baidu</a>

输出:baidu

(7)划线del

<del>原价999999</del>

输出:原价999999

表单元素

(1)多样化的input

<input type="text">

没有结束符,设计者希望不要用结束标签来写,可以去找找当时的故事

  1. input
    .输入框:<input type=“text”>
    .多选:<input type=“checkbox”>
    .单选:<input type=“radio”>
    .日期:<input type=“date”>
  2. textarea
  3. button
    其他类型去MDN搜索<input>

(2)大文本textarea

<textarea name="" id="" cols="50" rows="5"></textarea>
<button>submit</button>

50列(cols)5行(rows)的大文本输入框+submit提交按钮

(3)实践:用户名密码提交(input id ; label for)

<div>
  <div>
    <label for="account">用户名:</label>
    <input id="account" type="text">
    <!--每个标签默认会有个属性叫id,这里声明了input的唯一识别法叫account,那上面又有个label,
    label的for声明作用于那个标签(此处是input)-->
  </div>
  <div>
    <label for="">密码:</label>
    <input type="text">
  </div>
  <div>
    <button>submit</button>
  </div>
</div>

//最外层放一个div,表示我们要写在这块了。

submit

每个标签默认会有个属性叫 id ,这里声明了 input 的唯一识别法叫 account ,那上面又有个 label ,label 的 for 声明作用于那个标签(此处是input)。
总结:label 的 for=“account”,指向了后面 id=“account” 的 input 输入框
此处点击用户名三个字,就会跳到后面的输入框中,起提示功能。

5.作业:欢迎注册QQ

在这里插入图片描述
https://ssl.zc.qq.com/v3/index-chs.html

6.QQ:827155369

发表回复

您的电子邮箱地址不会被公开。