Web开发

Web前端开发

1.Web是什么

Web是全球广域网，也叫万维网(www,3w,World Wide Web)，是能够通过浏览器访问的网站。

2.Web网站的工作流程

3.Web 前端技术

万维网联盟(World Wide Web Consortium)，主要工作是对web进行标准化。

HTML:结构
CSS:样式
JavaScript:行为

4.HTML

4.1HTML是什么

HTML(HyperText Markup Language)：超文本标记语言

1.超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

2.标记语言：由标签构成的语言。

4.2HTML语言的特点

1.HTML标签都是预定义好的。
例如：

<a>标签用于展示超链接
<img>用于展示图片
<video>用于展示视频

2.HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

4.3编写HTML文件的步骤

1.新建文本文件，后缀名改为.html

2.编写HTML结构标签

3.在中填写内容

4.4小结

1.HTML文件以.html或.html为扩展名

2.HTML结构标签

3.HTML标签支持使用属性描述细节

4.HTML标签不区分大小写

5.HTML语法最终会被浏览器解析

4.5基础标签

4.5.1基础文本标签

1.<h1>
	align
2.<hr>
	color	width
3.<br>	<p>
4.<i>	<b>	  <u>
5.<center>
6.<font>
	face size color

4.5.2超链接

<a>：定义超链接，用于链接到另一个资源

<a>超链接标签常见属性：
	href：指定访问资源的URL，支持绝对路径和相对路径两种写法
	target：_self，默认值，在当前页面打开；
			_blank，在空白页面打开

总结：<a>:

href：用于指定超链接的跳转地址

	绝对地址：https://www.baidu.com/
	相对地址：	./		当前文件所在目录
				../		当前文件上层目录 

target：用于指定页面打开方式

	_self 在当前页签打开目标页面(默认)
	_blank 在新页签打开目标页面

4.5.3图片、音频、视频标签

<img>
	src
	alt
	width

<audio>、<video>
	src
	controls

4.6布局标签

列表
	ul
	ol
容器
	div
	span
表格
	table tr td

4.7表单标签

4.8表单标签——表单项

表单项分为三大类：（name代表的是key,作用是作为key让后台接收）
1)input 输入框（使用type来区分具体细节不同）
	text:普通文本框
	password:密码框，效果是不直接显示输入的内容，显示的是***
	date:日期
	radio:单选框，value需要提前写好，相同name的为一组，一组只能选中一个值 默认选项用checked实现
	checkbox:多选框，value需要提前写好，相同name的为一组，一组可以选中多个值 默认选项用checked实现
	file：文件选择框
	submit：提交按钮，没有name，value的作用就是指的显示的文字  作用是，点击的时候将当前表单中的数据提交到服务器
	reset:重置按钮，作用是将当前表单的所有选项归为默认值
	button：普通按钮，暂时没有啥作用，需要与后期的js的事件联合使用
	hidden:页面不显示，作用是偷偷地向后台提交内容
2)select 下拉框
	name需要定义在select的属性上
	value需要定义在option的属性上
	select还支持一个multiple属性，表示可以在下拉框选中多个值
3)textarea 文本域

5.CSS

5.1css是什么

CSS(Cascading Style Sheet)：层叠样式表

5.2css的特点

1.css是层叠样式表，用于控制页面的样式(表现)。

2.层叠样式表指对同一个HTML标签添加多种不同的样式(字号、字体、颜色等等)，所有样式会叠加到一起展示出效果。

5.3CSS引入方式

1.行内样式：

在标签内部，使用style属性，属性值就是css属性键值对。

```css
<div style="color: red; font-size: 50px; "> Hello CSS </div>

2.内部样式：

定义<style>标签，在标签内部定义css样式

```css
<style>
	div {
		color: red;
		font-size:50px;
	}
</style>

3.外部样式：

定义<link>标签，引入外部的css文件

```css
<link rel="stylesheet" herf="css/demo.css">

div	{
	color:red;
	font-size:50px;
}

CSS样式使用优先级：行内样式 > 内部和外部样式(内部和外部样式，后面覆盖前面的)

5.3CSS选择器

5.3.1CSS选择器的概念

1.概念：选择器是选取需设置样式的元素(标签)

div {
	color: red;
}

5.3.2分类

5.3.2.1元素选择器

元素名称 {
	color: red;
}

如：
div {
	color: red;
}

<div> Hello CSS </div>

5.3.2.2id选择器

#id属性值 {
	color: red;
}

如：
#name {
	color: red;
}

<div id="name"> CSS id Selector</div>

5.3.2.3类选择器

.class属性值 {
	color: red;
}

如：
.cls {
	color: red;
}

<div class="cls">CSS class Selector</div>

5.4CSS属性(样式)

5.5总结

1.CSS的作用：美化页面

2.引入方式：行内、内部、外部

3.选择器：id、class、标签

4.样式