一、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基本语法骨架:
<html>
<head>
<meta charset="{CHARSET}">
<title>title>
head>
<body>
body>
html>
4、常见的HTML标签
标签:HTML发明者定义好的一些“单词”,HTML代码块就是由标签组成。
(1)标题标签(双标签)
<hi>hi>
在HTML中,认为定义了6种标签,h1~h6,均为双标签,但一个网页中只允许出现一个标题标签。
(2)段落标签(双标签)
<p>p>
注意:不可手动换行
(3)换行标签(单标签)
<br/>
(4)图片标签(单标签)
该标签的作用是:在网页中插入图片
<img src=""/>
其中,img为标签名,src为该标签的一个属性,(标签名与标签属性之间用空格隔开,当标签属性为数字时,引号可以省略)
图片标签常见属性:
<1>.src (见上句代码)
<2>.图片宽度
<img src="" width=""/>
<3>.图片高度
<img src="" height=""/>
<4>.带标题的图片
<img src="" title=""/>
<5>.alt属性
<img src="" 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>
08、重置按钮
<input type="reset"/>
作用:将当前表单中的所有状态还原为默认状态。
09、普通按钮(可用于跳转)
<input type="button" value="点击(自定义)"/>