| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> 【前端】HTML、CSS、JavaScript -> 正文阅读 |
|
[JavaScript知识库]【前端】HTML、CSS、JavaScript |
目录 三者区别:HTML代码:?于搭建基础??,展示??的内容、需要显示的数据。 CSS代码:?于美化??,布局??,使显示的数据更加好看。 JavaScript代码:控制??的元素,让??有?些动态的效果。 1.HTML1.1.HTML语言特点:HTML?件不需要编译,直接使?浏览器阅读即可 HTML?件的扩展名是: *.html 或 *.htm HTML结构都是由标签组成 1.标签名预先定义好的,我们只需要了解其功能即可。 2.标签名不区分??写,建议使??写。 3.围堵标签:通常情况下标签由开始标签和结束标签组成。例如:<a></a> 4.?闭和标签:如果没有结束标签,建议以/结尾。例如:<img/> 5.标签可以嵌套。 6.在开始标签中可以定义属性。属性是由键值对构成,值需要?引号(单双都可)引起来。 HTML结构包括两部分:头head和体body 1.2.HTML常用标签<h></h>:标题标签 1~6 <hr/>:水平线 <p></p>:段落 <br/>:换行 <img/>:图片 <a>:超链接 <ul>\<ol>:列表,其中<li>用来定义列表项。是<ul>\<ol>的子标签 <table>:表格标签:html表格由<table>以及一个或多个<tr>、<th>或<td>标签组成。????????<table>是?标签,相当于整个表格的容器。????????<tr>标签?于定义?????????<td>标签?于定义表格的单元格(?个列????????)<th>标签?于定义表头。单元格内的内容默认居中、加粗,????????<caption>:表格标题,????????<thead>表示表格的头部分????????<tbody>表示表格的体部分????????<tfoot>表示表格的脚部分 <frameset>:框架标签:是多个窗???整合在?起的?个集合(框架集)。每?个??(框架)都是单独 ?档,需要使??标签来确定??的位置。<frame>:框架?标签 <form>:表单标签 <input>:表单项标签,?于获得?户输?信息。可以通过type属性值,改变元素展示的样式。 <span>:?本信息在??展示,?内标签、内联标签。 <div>:每?个div占满?整?。块级标签。 2.CSS2.1css简介、主要功能css(Cascading Style Sheets)层叠样式表,主要?于设置HTML??中的?本 内容(字体、??、对??式 等)、图?的外形(宽?、边框样式、边距等)以及版?的布局等外观显示样式。CSS可以使HTML??更好看,CSS?系的搭配可以让?户更舒服,CSS+DIV布局更加灵活,更容易绘制出?户需要的结构。 2.2.css选择器“选择器”?于指定CSS样式作?的HTML对象,花括号内是对该对象设置的具体样式。 选择器{属性1:属性值; 属性2:属性值; …} 例:
2.2.1.css选择器的引入方式:1.?内样式:通过标签的style属性来设置元素的样式。
2.内部样式:?称为内嵌式,是将CSS代码集中写在HTML?档的<head>头部标签体中,并且使 ?<style>标签定义。
3.外部样式:?称为链?式,是将所有的样式放在?个或多个以 .css 为扩展名的外部样式表?件中,通过<link>标签将样式连接到HTML?档中。
2.2.2.选择器类型1.元素选择器 ?HTML标签名称作为选择器,按标签名称分类,为??中某?类标签指定统?的CSS 样式。优点是能快速位??中同类型的标记统?样式
2.id选择器 选择具体的id属性值的元素。id名即为HTML元素的id属性值,?多数HTML元素都可以定义id属性,元素的id值是唯? 的,只能对应于?档中某?个具体的元素。 id选择器优先级?于元素选择器
?3.类选择器 类名即为HTML元素的class属性值,?多数HTML元素都可以定义class属性。类选择器最 ?的优势是可以为元素对象定义单独或相同的样式。
还有属性选择器、后代选择器等 2.3css常用属性详见w3school:https://www.w3school.com.cn/ 3.JavaScript3.1.JavaScript的组成1.核心(ECMAScript) :语法、语句 2.文档对象模型(DOM): 浏览器对象 3.浏览器对象模型(BOM):?Document Object Mode,操作?档中的元素和内容 js的引入: 1. 内嵌式,在HTML?档中,通过<script>标签引入
2.外联式,在HTML?档中,通过<script src="">标签引入.js文件
3.2基本语法3.2.1.变量在使?JavaScript时,需要遵循以下命名规范: 1.必须以字?或下划线开头,中间可以是数字、字符或下划线 2.变量名不能包含空格等符号 3.不能使?JavaScript关键字作为变量名,如:function 4.JavaScript严格区分??写 3.2.2.数据类型(ECMAScript)一.基本类型 1.Undefined,Undefined类型只有?个值,即undefined。当声明的变量未初始化时,该变 量的默认值是undefined。 2.Null,只有?个专?值null,表示空,?个占位符。值undefined实际上是从值null派?来 的,因此ECMAScript把他们定义为相等的。 3.Boolean,有两个值true和false 4.Number,表示任意数字 5.String,字符串由双引号(")或单引号(')声明的。JavaScript没有字符类型 二.引?类型 1.引?类型通常叫做类(class),也就是说,遇到引?值,所处理的就是对象。 2.JavaScript是基于对象?不是?向对象。对象类型的默认值是null。 3.JavaScript提供众多预定义引?类型(内置对象)。 3.2.3.基本操作1.alert():向??中弹出?个提示框 2.innerHTML:向??的某个元素中写?段内容,将原有的东?覆盖 3.document.write():向??中写内容 4.window.setInterval(code, millisec) :按照指定的周期(间隔)来执?函数或代码?段。clearInterval() :取消由setInterval() 设置的timeout。 5.setTimeout(code, millisec) :在指定的毫秒数后调?函数或执?代码?段。clearTimeout() :取消由setTimeout() 设置的timeout。 3.3.DOM3.3.1dom对象:img input button form 3.3.2dom属性:?src? value ?innerHTML ?innerText ?style.cssXX ?Document?? ?文档 3.4.BOM3.4.1.BOM对象:????window 3.4.2.BOM事件:onclick ?onmouseover ?onmouseout ?onsubmit ?onblur... ?弹窗 ?计时器?? ? 事件对象 |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 | -2025/1/28 12:07:32- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |