前端day1-2

一、什么是前端

1.什么是前端

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。

b/s:浏览器/服务器

c/s:客户端/服务器端

前端就是应用程序的用户界面，这个界面是基于html,css,is实现的网页，运行在浏览器中。

2.前端可以做什么

实现网页、实现小程序、支持跨端开发、基于nodejs从事后端开发，从事桌面应用开发。

3.前端学习路径和存在的困难

w3c组织发布规范，是由浏览器厂商实现的

二、前端的工作原理

1.域名解析

2.发送请求

3.浏览器解析

4.渲染

三、前端开发环境搭建

1.常用开发工具介绍

所有的纯文本编辑器都可以，现在比较流行的vscode

1.安装

2.打开目录

• 先打开vscode，然后选择目录 
• 先选择目录，再在目录中右键选择vscode
• 在vscode里新建html文件，注意扩展名为html
• 在插件里安装live server
• 右键html文档预览

2.浏览器介绍

ie,firefox,opera,safari,chrome,

360:chrome,ie

四、HTML标签学习

前端开发网页使用三剑客：html,css,js。html用来定义页面==元素==，css定义元素==外观==，js实现用户和==元素==间的交互。

元素是使用html标签来定义的，html标签是浏览器厂商预定义的，开发人员只能按规范来使用标签。

html是超文本标记语言

页面是元素构成的，元素是有特定类型的，每种类型的元素是用特定的标签来定义的。

1.通用标签

• html

html 文档有唯一一个根标签元素html

• head

head元素和body元素是html的子元素，html元素有且只有这两个子元素

head元素里设置文档的元数据，比如：标题、字符集和seo有关的数据、和移动页面有关的设置、样式、js

head子元素有：title,meta,link,style,script 

每个标签的子元素是有规定的

• body

2.常用显示数据标签

h1-h6 标题标签

p 段落标签

img 图片标签

3.列表标签

如果需要呈现单列多行的数据，可以使用列表标签

列表标签的分类

• 有序列表：强调列表项的顺序

       ol>li

• 无序列表：不强调列表项的顺序

       ul>li

• 自定义列表

       dl>dt + dd

 

 

4.表格标签

表格标签是用来呈现多行多列的==数据==

不要使用表格做布局，样式问题不要用标签来解决

table    

       thead(table head)

              tr(table row)

                   th(table head column)

       tbody(table body)

              tr(table row)

                   td(table data)

 

 

5.超链接

5.1 超链接的常用用法

a标签通过href属性定制要跳转的文档路径，a标签的内容是用户用来点击的

1.为什么要使用超链接：如果需要从一个资源跳转到另一个资源，就需要使用超链接

2.超链接的两个要素：

• 内容：用户点击的对象，可以是各种元素
• href属性：用来设置跳转的资源路径

               1.外部资源：一定要以http开头

               2.内部资源：相对路径

                        1.相对当前文档路径(./ ../)

                        2.相对服务器目录(/)

5.2 使用a标签的name属性创建命名锚记

超链接的常用用法是跳转到页面的开头，如果需要直接跳转到页面的某一个位置，需要使用命名锚记。

可以使用a标签的name属性来创建命名锚记。

6.接受用户输入的标签

6.1 表单标签：form

传统的html里，要接受用户输入，会使用form容器

6.2 input标签

多数接受用户输入都是使用input标签，input标签的type属性根据html的版本不同，它的值不同，在h5里新增加很多属性

常用的输入有：单行文本、密码、隐藏域、日期、电话、数字、单选、多选总有20多个

6.3 select，option标签

如果要是有下拉列表选择，需要使用select和他的子元素option配合使用

6.4 textarea标签

接收多行文本输入