web前端HTML+CSS 第二课

HTML中标签一般情况下是成对出现的,中间包裹的内容是需要稀释的内容;

也有些特殊的标签自己就代表着功能,不需要修饰什么东西,这样的标签叫做单标签

咱们能够见到的单标签特别少:

<meta>

<br> (回车)

<hr> (水平线,应用场景非常的少)

 

<html>

<head>

   <meta charset=”utf-8”>

   <title></title>

</head>

<body>

 

</body>

</html>

 

编辑器里面的“ ”(空格)的语法含义是:英文单词分隔符;文本分割符,回车和空格代表的意思是一样的,都是文字分割符(换句话说不管写多少个空格都是为了分割前后两个单词)

如果想要展示空格或者回车怎么办?

有个特殊的东西:HTML编码:“&;”

空格的展示文本:&nbsp;    (这个是编程最常用的)

<的展示文本:&lt;    (<小于符号,英语是less than)

>的展示文本:&gt;    (>大于符号,英语是great than)

回车的展示文本:<br>   (一个br标签代表一个换行符)

 

<ol>

   <li></li>

   <li></li>

   <li></li>

</ol>

这个标签叫有序列表,有序列表都是成组出现的,<ol>(order list的缩写)可以包含多个<li>(list的缩写)。

<ol type=“1”> (默认type就是1;共5种:1、i、I、a、A)

这个type有五个:阿拉伯数字、大/小写罗马数字、大/小写英文字母(就5种排序方式)

<ol type=“1” reversed=”reversed”> (这个代表倒序)

 

如果我要排老二的话,就没人敢排老大了,有些人的人生排序方式比较特殊

<ol type=“1” start=”2”> (代表从第二开始排序,需要从集开始就写几)

 

<ol><li></li></ol>(基本没什么用,但是它的兄弟有大用)

 

无序列表

<ul type=”disc”>

   <li></li>

   <li></li>

   <li></li>

</ul>(unorder list的缩写)

无序列表只有一个属性可以更改:type 它的默认值是disc(discircle:实心圆)、还有两个值:square(方块)sircle(空心圆/圈)

<ul>和<li>是父子结构,有些功能正好用到了ul和li的功能,这样的父子结构很符合他们的 需求:

这一个功能有很多功能子项来组成,每一个功能子项的功能和样式基本都是相同的只不过他们的内容有点小小的差异,很多个功能子项组成了这样的一个大功能这样的东西我们最好用<ul>和<li>来展示,因为<ul>和<li>更符合它天生的结构。

简单来说就是很多歌抽屉放到一个柜子里面一样,只不过里面放的东西不一样,外面的样式、功能都是一样的。

我们变成讲求一个可维护性或者说通用性(就是你写的代码规范和我写的代码规范是一样的,这些东西就是一个不成文的规定)

 

<img src=””>

Img是image的缩写,它是一个单标签,有属性src(source的缩写:资源)所以“”里面填的就是图片资源的地址,

  1. 网上的图片url(网上百度搜索的图片地址不是源地址需要注意,图片链接另打开的地址才是图片的源地址)
  2. 本地的绝对路径(从跟目录下开始写路径地址)
  3. 本地的相对路径(如果跟网页的地址在同一文件夹下,可以直接写图片的名称)

 

Alt属性:图片站位符

<img src=”” alt=””>

如果图片地址报错的情况会显示alt里面的文本内容。

这个是基本的容错信息。

 

Title属性:图片提示符(就是鼠标指在图片上的时候显示的文本信息)

<img src=”” alt=”这是范爷” title=”这是范爷”>

 

A标签:<a></a>  :作用:1、超链接 2、锚点 3、打电话/发邮件 4、协议限定符

A标签的第一个属性:超链接

<a href=””>www.baidu.com</a>

Href属性:hypertext reference(超文本参考/引用)

<a href=”https://www.baidu.com”>www.baidu.com</a>    其中href=””的“”中要写链接一定要写全,连https://都不能省略。

 

A标签(anchor 的缩写:锚的意思)(a标签最原始的功能是作为锚点来用的)里面能放任何的东西,放个图片也可以。

点击链接在新的页面打开网页怎么实现呢?

Target标签:(target=”_blank”)(就会在空白页打开新的网页)

<a href=https://www.baidu.com  target=”_blank”> www.baidu.com </a>

 

A标签第三个功能,打电话

<a href=tel:13999999999>给老总打电话</a>

饿了吗?美团上面的打电话的功能就是这么实现的

<a href=mail:139999999@163.com>给老总发邮件</a>

发邮件这个标签并没有什么卵用。

 

A标签第四个功能,协议限定符(补充)

<a href=”JavaScript :while(1){alert(‘让你手欠’)}”>你点我试试呀!come on! 来呀!</a>

 

<form></form>标签:表单标签(可以独占标签50%的含金量)

<form method=”get”  action=””>

<p>

   Username:<input type=”text”  name=”username”>

</p>

<p>

   Password:<input type=”password”  name=”password”>

</p>

<Input type=”submit”  value=”登录”>

</form>

Form表单可以发送数据(把前端的数据发送给后端),那么在发送数据的时候会有发送方式

Method属性:(发送数据的方式)里面有两个值get/post

Action属性:发送给谁的地址,(后端的一个地址)

Input组件,里面有个属性叫type

Text组件是文本(明文)、password组件是密码(密文)

用<p>标签就是为了成段展示的,语义化好,可维护性好。

Submit(提交的意思,后面的value可以更改文本内容)

发送数据必须得有数据的名字和数据值,name里面就是名,type里面就是值,当URL当中地址变了:?username=。。。&password=。。。表示提交成功了,如果地址没有变就表示没有发送成功。

附:上网安全吗?密码框,工程师的定义是只对用户自己不可见。因为可以通过技术手段拿出来 。

其实也不是所有网站都不安全,大公司都是受国家网安局监管的,md5加密是不可逆的,所以还是值得信赖的。

 

单项选择<input type=”radio”>

例:

你们所喜欢的明星

1.贝克汉姆<input type=”radio”  name=”star”  value=”xiaobei”>

2.罗纳尔多<input type=”radio”  name=”star”  value=”xiaoluo”>

3.成龙<input type=”radio”  name=”star”  value=”handsome”>

想要实现单选在一个选择题里面的name必须是一样的

Name是名,value是值,发送数据必须要有的两个东西(再啰嗦一遍,哈哈)

 

真正的编程就只有两部分:

编程的思想

编程的工具

就是用编程工具把自己的思想量化出来的过程。

编程就是先写然后一点点修修补补慢慢接近目标的过程。任何一个工程师也不可能一下子把一个程序完完整整的写完。

80-90%的创业的人都是搞编程的人,因为他们的思维很清晰。加油朝着码农的方向进发。

 

野兔

2019.2.18

 

转载于:https://my.oschina.net/hare1925/blog/3011674

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值