WEB学习笔记(一)

一、web基本介绍
全称:world wide web(全球广域网),俗称:www。web 前端的工作:负责网站中前台网页里的内容,网页是由前端工程师使用HTML语言编写的一种语言,其中包括:文字、图片、超链接、声音、视频等内容。
二、web标准(w3c组织制定)
    web标准是用来衡量当前网页书写是否规范的一系列标准。
    web标准的具体要求:结构、样式、行为三者相分离
    结构是由HTML标签单肩的网页框架;样式是指通过CSS语言对HTML网页框架进行的美化工作;行为指的是通过JavaScript(js)语言让网页可以理解用户的一些操作,从而用户与网页之间产生交互。
三、HTML
1、全称:超文本标记语言(Hypertext markup language)
2、HTML学习思维导图
在这里插入图片描述
3、HTML基本语法骨架:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
	</head>
	<body>
	</body>
</html>

4、常见的HTML标签
    标签:HTML发明者定义好的一些“单词”,HTML代码块就是由标签组成。
(1)标题标签(双标签)

<hi></hi>
<!--i=1~6-->

    在HTML中,认为定义了6种标签,h1~h6,均为双标签,但一个网页中只允许出现一个标题标签
(2)段落标签(双标签)

<p></p>

注意:不可手动换行
(3)换行标签(单标签)

<br/>

(4)图片标签(单标签)
    该标签的作用是:在网页中插入图片

<img src=""/>
<!--属性值为当前图片的存放路径-->

其中,img为标签名,src为该标签的一个属性,(标签名与标签属性之间用空格隔开,当标签属性为数字时,引号可以省略)
图片标签常见属性:
<1>.src (见上句代码)
<2>.图片宽度

<img src="" width=""/>
<!--src属性值为当前图片的存放路径-->
<!--width属性值为当前图片的宽度,单位为像素px-->

<3>.图片高度

<img src="" height=""/>
<!--src属性值为当前图片的存放路径-->
<!--height属性值为当前图片的高度,单位为像素px-->

<4>.带标题的图片

<img src="" title=""/>
<!--src属性值为当前图片的存放路径-->
<!--title属性值用于给图片设置标题,当鼠标悬停在html页面上时,将显示图片标题-->

<5>.alt属性

<img src="" alt="(自定义内容)"/>
<!--src属性值为当前图片的存放路径-->
<!--当图片在HTML页面中无法显示时,将显示alt的属性值-->

(5)超链接标签(双标签)
    标签名称:a
    作用:实现从当前页面向其他页面的跳转

<a href=""></a>
<!--属性值为目标网页的地址-->

例如:

<a href="http:www.baidu.com"></a>
<!--实现从当前网页向百度首页的跳转-->

当href属性值为#时,将存在一个空链接,目的是为将来要跳转的网页预留一个位置,此时不清楚将跳转的网页的网址。

<a href="#"></a>

target属性
当target属性值为_blank时,实现目标网址在新窗口的打开

<a href="http:www.baidu.com" target="_blank"></a>
<!--实现从当前网页向百度首页的跳转,并在新窗口打开百度网页-->

四、form表单
    form表单也是一个html标签,标签名:form,为双标签。称form表单为表单域,用于声明当前结构是表单,若想收集用户信息,则必须准备一些供用户输入框,这些框被称为表单元素。

<form action="" method=""></form>

   &ensp**;form标签的属性:**
属性1:action,属性值为当前表单数据将要提交到的位置(开发阶段一般不写属性值,或属性值为#)
属性2:method,定义当前表单中的数据将以何种方式提交到网站后台,两种最常见的方式:get/post。
**常见的表单标签名为input,通过type属性值对标签进行区分。**表单元素的数据通过写在form标签对中进行提交到后台。
01、文本输入框

<input type="text"/>

02、密码输入框

<input type="password"/>

03、提交按钮

<input type="submit"/>

04、单选框

<input type="radio"/>

通过为input标签添加属性checked,可以设置默认选中的元素。

<input type="radio" checked/><input type="radio" /><!--将默认选中男-->

05、复选框

<input type="checkbox"/>

checked属性也适用于复选框。
06、文本域

<textarea name="" rows="" cols=""></taxtarea>

name属性:用于为标签起名字;rows用于固定行数:cols用于固定列数。
07、下拉菜单

<select name="">
      <option value="">自定义内容</option>
</select>
<!--select标签对用于定义下拉模块,当选中自定义的某一个内容时,将为后台提供相应的value值-->

08、重置按钮

<input type="reset"/>

作用:将当前表单中的所有状态还原为默认状态。
09、普通按钮(可用于跳转)

<input type="button" value="点击(自定义)"/>
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值