我的前端学习笔记(二) - 凉风小筑

“时间从来不说话,却回答了所有的问题”

我的前端学习笔记(二)

高级标签[aru_37]

内容很多[aru_19],花了好久才整理出来。

有序列表

<ol type="1" reversed="reversed">

<li>复联4</li>

<li>234</li>

<li>蓝鲸</li>

</ol>

以上代码效果为

  1. 复联四
  2. 234
  3. 蓝鲸

Type是一种属性,其中的1为排列开头,若为数字1则是1234开头

罗马数字中间填i 总计有5种1/a/A/i/I

红色reverse—逆着部分表示倒序

<ol type=“1” start=“1”>

<li>复联4</li>

<li>234</li>

<li>蓝鲸</li>

</ol>

属性start表示从第几个开始排序,从第几个开始排直接写数字

 

无序列表

只有一个属性 type

默认值disc(实心圈),square(方块形),circle(空心圈)

<ul type="disc">

<li>草莓</li>

<li>🍊</li>

<li>苹果</li>

</ul>

disc----discircle(实心)

代码效果

  • 草莓
  • 🍊
  • 苹果

无序列表的作用,<ul>与<li>是父子结构,一个功能有很多功能子项,这些功能子项内容上有些许不同,功能子项组成了这个大功能。这样的功能<ul><li>展示

举例:网站的导航栏,有很多菜单子项

图片标签

<img src"资源地址">

资源地址分类:

  1. 网上的url(图片网址)
  2. 本地的绝对路径
  3. 本地的相对路径

D:/A/B/ceshi.Html

D:/A/B/123.jpg

此时html与123图片称相对关系,资源地址处可直接填写123.jpg

D:/A/B/ceshi.Html

D:/A/B/C/123.jpg

此时html与123图片称绝对关系,资源地址处填写D:/A/B/C/123.jpg写全。

图片的其他属性

<img src"资源地址" alt="这是范爷">

alt----当图片地址发生错误时展示的文字信息,图片占位符

<img src"资源地址" alt="这是范爷" title="zhe shi fan ye">

title---图片提示符,鼠标移动到图片上有角标提示

a标签

a--anchor 锚  定位

<a href="http://www.3328bk.cn">凉风小筑</a>

Href是hyper text reference缩写--超文本引用的意思

A标签十分强大,里面可以放很多东西

比如点击图片跳转

<a href="http://www.3328bk.cn"  target="_blank">

<img src"资源地址">

 </a>

target=”_blank”—在新网页中打开该链接

1.超级链接

2.锚点 让网页到某个位置

3.打电话(应用场景广泛)

<a href="tel:18840915439" >给我打电话</a>

点击能直接调用手机打电话

4.发邮件

<a href=”mailto:2381548894@qq.com” >给我发邮件</a>

点击能自动调用邮箱系统发邮件

5.协议限定符

表单标签---可以发送数据

<form></form>

发送信息方式

<form method=”get/post” action=”发送数据的位置地址”>

</form>

 

中间要添加其他组件

1.输入框

<form method="get/post" action="发送数据的位置地址">

<input type="text">

<input type="password">

</form>

中间的type决定数据长什么样子,中间的text使使之变成输入框

Password使之变成密码框。(密码框会显示熟悉的小点点)

代码显示效果就是两个输入框。

1.1

登录组件

<form method="get/post" action="发送数据的位置地址">

<input type="text">

<input type="password">

<input type="submit">

</form>

发送表单数据,需要数据值和数据名,其中数据名是以用户名密码为例。

<input type="text" name="username">

<input type="password" name="password">

数据提交成功会显示网址?username=你输入的&password=你输入的。

没有数据名提交会失败。

1.2

单选框

<input type="radio" name="名字">

其中name决定选项是那道题,想做到单选,选项后面name中要加相同的名字。

单选要想发送数据,需加数据值,数据值添加用value

<input type="radio” name="" value="">

在输入框中添加value能让输入框显示提示内容比如“请输入密码”

分享