一、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="点击（自定义）"/>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
