FEJ21-Html-Css-Js
【HTML基础知识】 HTML(HyperText Markup Language)是用于创建网页的标准标记语言,是Web开发的基础。HTML5是当前广泛使用的版本,它增强了网页的交互性和多媒体支持。 1. HTML结构:HTML文档通常由头部(`<head>`)、主体(`<body>`)两部分组成。头部包含元数据,如标题、字符集设定等;主体则包含实际的网页内容,如文本、图片、链接等。 2. HTML标签:HTML通过一系列标签来定义页面元素,如`<p>`代表段落,`<a>`表示超链接,`<img>`用于插入图像,`<h1>`至`<h6>`表示不同级别的标题。 3. HTML5新增特性:包括离线存储(`<applicationCache>`),音频/视频元素(`<audio>`和`<video>`),canvas画布,SVG矢量图,Geolocation定位,Web Workers和Web Storage等。 4. DOCTYPE声明:HTML5的DOCTYPE声明为`<!DOCTYPE html>`,简单且不区分大小写,用于告诉浏览器使用哪个HTML版本进行解析。 5. 表单控件:HTML中的表单元素如`<form>`,`<input>`(可设置不同类型如text、checkbox、radio、submit等),`<textarea>`,`<select>`,`<option>`等,用于用户输入和数据提交。 【CSS基础知识】 Cascading Style Sheets (CSS)用于描述HTML或XML(包括SVG、XHTML等)文档的外观和格式。CSS3是当前主流,引入了更多布局方式、动画效果和选择器。 1. 选择器:CSS选择器如标签选择器(如`p {color: red;}`),类选择器(`.myClass {property: value;}`),ID选择器(`#myID {property: value;}`),以及更复杂的选择器如后代选择器、伪类等。 2. 层叠与继承:CSS的层叠规则决定了哪些样式生效,而继承则允许子元素从父元素继承某些样式,但并非所有属性都可继承。 3. 盒模型:CSS盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin),影响元素的总尺寸。在CSS3中,有两种盒模型:W3C盒模型(content-box)和IE盒模型(border-box)。 4. CSS3新特性:包括Flexbox(弹性盒子布局),Grid(网格布局),多列布局(column-count),渐变(linear-gradient和radial-gradient),阴影(box-shadow和text-shadow),边框圆角(border-radius)等。 【JavaScript基础】 JavaScript是一种轻量级的解释型编程语言,主要用于客户端的网页交互,实现动态效果和用户交互。 1. 变量与数据类型:JavaScript支持基本数据类型(如字符串、数字、布尔值)和引用数据类型(对象、数组)。变量声明使用`var`,`let`或`const`。 2. 控制流:包括条件语句(if...else,switch...case)和循环(for,while,do...while)。 3. 函数:函数是可重复使用的代码块,使用`function`关键字定义。JavaScript也支持箭头函数(`() => {}`)。 4. DOM操作:JavaScript可以通过DOM(Document Object Model)接口操作HTML元素,如获取元素(`document.getElementById`,`querySelector`),修改元素属性,添加或删除元素等。 5. 事件处理:JavaScript可以监听并响应用户的交互,如点击按钮、鼠标移动等,通过`addEventListener`添加事件监听器。 6. AJAX:异步JavaScript和XML,用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。现在更常使用fetch API。 这些是HTML、CSS和JavaScript的基础知识,它们共同构建了网页的结构、样式和交互性。理解并熟练运用这些概念是成为前端开发者的关键。通过不断的实践和学习,你可以创造出功能丰富、交互性强的网页应用。
- 1
- 粉丝: 45
- 资源: 4591
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助