【JavaWeb】前端基础(HTML+CSS+JavaScript

- 一、前端介绍
- - 1.Web标准
- 二、HTML和CSS
- - 1.什么是HTML、CSS
  - 2.HTML 实例
  - 3.VS Code安装使用
  - - （1）插件安装
  - 4.基础标签&样式
  - - （1）标题
    - - 1）标题排版
      - 2）标题样式
      - ①CSS引入方式：
        
        ②颜色表示形式：
        
        ③`<span>`标签
        
        ④CSS选择器：
      - 3）超链接
    - （2）正文
    - - 1）排版
      - 2）布局
    - （3）表格标签
    - （4）表单标签
- 三、JS
- - 1.什么是JavaScript?
  - 2.js引入方式
  - - （1）内部脚本：将Js代码定义在HTML页面中
    - （2）外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
  - 3.js基础语法
  - - （1）书写语法
    - （2）输出语句
    - （3）变量
    - （4）数据类型
    - （5）运算符
    - （6）类型转换
    - （7）流程控制语句
  - 4.js函数
  - 5.js对象
  - - （1）Array
    - （2）String
    - （3）JavaScript自定义对象
    - （4）JSON
    - （5）BOM
    - - 1）Window
      - 2）Location
    - （6）DOM
  - 6.JS事件监听
  - - （1）事件绑定
    - （2）常见事件

一、前端介绍

1.Web标准

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C ( World wide web Consortium，万维网联盟）负责制定。

三个组成部分：

HTML：负责网页的结构（页面元素和内容)。
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如:颜色、大小等)。
JavaScript：负责网页的行为（交互效果)。

二、HTML和CSS

1.什么是HTML、CSS

HTML ( HyperText Markup Language) ：超文本标记语言。
- 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
- 标记语言：由标签构成的语言
  - HTML标签都是预定义好的。
  - HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
  - 例如：<a>展示超链接，<img>展示图片，<video>展示视频。
CSS (Cascading Style Sheet)：层叠样式表，用于控制页面的样式（表现）。

2.HTML 实例

新建文本文件，后缀名改为.html
编写HTML结构标签
在<body>中填写内容

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Hello Word</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>

3.VS Code安装使用

Visual Studio Code（简称 VS Code )是Microsoft于2015年4月发布的一款代码编辑器。
VS Code对前端代码有非常强大的支持，同时也其他编程语言（例如:C++、Java、Python、PHP、Go等)。
VS Code提供了非常强大的插件库，大大提高了开发效率。
官网：https://code.visualstudio.com

（1）插件安装

Chinese (Simplified) Language Pack
- 适用于vsS Code 的中文（简体）语言包。
Code Spell Checker
- 拼写检查器。比如 banana单词写错成banane，会提示你是否修改成banana，也可以将banane添加至检查器的字典中。
HTML CSS Support
- 在编写样式表的时候，自动补全功能大大缩减了编写时间。
JavaScript (ES6) code snippets
- 支持ES6语法提示。
Mithril Emmet
- 一个能大幅度提高前端开发效率的一个工具，用于补全代码。
Path Intellisense
- 路径提示插件。
Vue 3 Snippets
- 快速生成Vue3代码。
VueHelper
- vscode最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码。
Auto Close Tag
- 自动闭合HTML/XML标签。
Auto Rename Tag
- 自动完成另一侧标签的同步修改。
Beautify
- 格式化html，js，css。
Bracket Pair Colorizer
- 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色。
Open in browser
- vscode不像DE一样能够直接在浏览器中打开html.而该插件支持快捷键与鼠标在键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括Firefox.，Chrome，Opera，IE以及Safari。
Vetur
- Vue多功能集成插件，包括: 语法高亮，智能提示，emmet。错误提示。格式化、自动补全。debugger。 vscode官方钦定Vue插件，Vue开发者必备。
IntelliJ IDEA Keybirlhlings
- 安装VSCode的插件Intelli] IDEA Keybindings即可在VSCode中使用IDEA的快捷键。

4.基础标签&样式

（1）标题

1）标题排版

图片标签：<img>

src：指定图像的url（绝对路径 / 相对路径)
width：图像的宽度（px：像素 / %：相对于父元素的百分比)
height：图像的高度（px：像素 / %：相对于父元素的百分比)

路径书写方式：
绝对路径：
绝对磁盘路径：<img src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png">
绝对网络路径：<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/ news_logo.png">
相对路径：
./ ：当前目录，./可以省略的
../：上一级目录

标题标签：<h1> ~ <h6>
水平线标签：<hr>

2）标题样式

①CSS引入方式：

行内样式：写在标签的style属性中（不推荐）

<h1 style="属性名:属性值;属性名:属性值;">中国新闻网</h1>

内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
```
<style>
h1{属性名:属性值;属性名:属性值;
}
</style>
```

外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）

h1{属性名:属性值;属性名:属性值;
}

<link rel="stylesheet" href="css/news.css">

CSS属性：

color: 设置文本颜色
font-size: 字体大小（单位：px）

②颜色表示形式：

注意：#红色绿色蓝色

③`<span>`标签

<span>是一个在开发网页时大量会用到的没有语义的布局标签
特点：一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

④CSS选择器：

CSS选择器：用来选取需要设置样式的元素(标签)

元素选择器：
id选择器：
类选择器：

优先级：ID>类>元素

3）超链接

标签：

<a href=" ..." target="...">哔哩哔哩</a>

属性：
href：指定资源谅问的url
target：指定在何处打开资源链接
_self：默认值，在当前页面打开
_blank：在空白页面打开
css属性：
text-decoration：规定添加到文本的修饰，none表示定义标准的文本。
color：定义文本的颜色。
```
a{color: black;text-decoration: none;
}
```

（2）正文

1）排版

视频标签：<video>
src：规定视频的url
controls：显示播放控件
width：播放器的宽度
height：播放器的高度
音频标签：<audio>
src：规定音频的url
controls:：显示播放控件
段落标签：<p>
文本加粗标签：<b> / <strong>

CSS样式：

line-height：设置行高
text-indent：定义第一个行内容的缩进
text-align：规定元素中的文本的水平对齐方式注意
在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符：&nbsp;

2）布局

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域(content)、内边距区域（padding)、边框区域(border)、外边距区域〈margin)

布局标签：实际开发网页中，会大量频繁的使用div和span 这两个没有语义的布局标签。
标签：<div> <span>

特点：

div标签：
- 一行只显示一个（独占一行)
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（( width、height )
span标签：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高( width、height)

CSS属性：

width：设置宽度height:设置高度
border：设置边框的属性，如:1px solid #eee;
padding：内边距
margin：外边距

注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如：padding-top、padding-left、padding-right …

（3）表格标签

<table>：定义表格
<tr>：定义表格中的行，一个表示一行
<th>：表示表头单元格，具有加粗居中效果
<td>：表示普通单元格

<table border="1px" cellspacing="0" width="600xp"><tr><th>序号</th><th>品牌logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>1</td><td>华为</td><td>华为</td><td>华为技术有限公司</td></tr><tr><td>2</td><td>阿里</td><td>阿里</td><td>阿里巴巴集团控股有限公司</td></tr></table>

（4）表单标签

场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。

标签：<form>

表单项：不同类型的input元素、下拉列表、文本域等。

<input>：定义表单项，通过type属性控制输入形式
<select>：定义下拉列表
<textarea>：定义文本域

属性：

action：规定当提交表单时向何处发送表单数据，URL
method：规定用于发送表单数据的方式。GET、POST
- get:表单数搪拼接在url后面，?username=java ,大小有限制
- post:表单数据在请求体中携带，大小没有限制

注意：表单项必须有name属性才可以提交

 <!-- form表单属性：action：表单提交的url，往何处提交数据，如果不指定，默认提交到当前页面method：表单的提交方式get:在url后面拼接表单数据,比如: ?username=Tom&age=12,url长度有限制,默认值post:在消息体(请求体)中传递的，参数大小无限制的--><form action="" method="get">用户名：<input type="text" name="username">年龄：<input type="text" name="age"><input type="submit" name="提交"></form>

<input>：表单项，通过type属性控制输入形式。
<select>：定义下拉列表，定义列表项。
<textarea>：文本域

三、JS

1.什么是JavaScript?

JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。
JavaScript在1995年由Brendan Eich 发明，并于1997年成为ECMA标准。
ECMAScript 6 (ES6)是最新的JavaScript 版本（发布于2015年)。

ECMA：ECMA国际（前身为欧洲计算机制造商协会)，制定了标准化的脚本程序设计语言ECMAScript，这种语言得到广泛应用。而lavaScript是遵守ECMAScript的标准的。

2.js引入方式

（1）内部脚本：将Js代码定义在HTML页面中

JavaScript代码必须位于标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本置于<body>元素的底部，可改善显示速度

<script>alert("Hello JavaScript")
</script>

（2）外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

外部]S文件中，只包含JS代码，不包含<script>标签
<script>标签不能自闭合，例如：<script src="js/demo.js"/>

<script src="js/demo.js"></script>

alert("Hello JavaScript")

3.js基础语法

（1）书写语法

区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无，建议加上
注释：
- 单行注释：//注释内容
- 多行注释：/*注释内容*/

大括号表示代码块

//判断
if(count == 3){alert(count);
}

（2）输出语句

使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台

<script>window.alert("Hello JavaScript");//浏览器弹出警告框document.write("Hello JavaScript");//写入HTML,在浏览器展示console.log("Hello JavaScript");//写入浏览器控制台
</script>

（3）变量

JavaScript中用var关键字(variable的缩写)来声明变量。
JavaScript是一门弱类型语言，变量可以存放不同类型的值。
变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线(_）或美元符号($)
- 数字不能开头
- 建议使用驼峰命名

驼峰命名法
指混合使用大小写字母来构成变量和函数的名字。当变量名或函数名是由一个或多个单词连结在一起构成的唯一识别字时，第一个单词以小写字母开始，从第二个单词开始以后的每个单词的首字母都采用大写字母，例如：myName、myAge，这样的变量名看上去就像骆驼峰一样此起彼伏，因此被称为驼峰命名法。

注意：

ECMAScript6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let 关键字所在的代码块内有效，且不允许重复声明。
ECMAScript 6新增了const 关键字，用来声明一个只读的局部常量。一旦声明，常量的值就不能改变。

（4）数据类型

JavaScript中分为：原始类型和引用类型。

原始类型：
- number: 数字（整数、小数、NaN(Not a Number))
- string:字符串，单双引皆可
- boolean:布尔。true, false
- null:对象为空
- undefined:当声明的变量未初始化时，该变量的默认值是undefined

使用typeof运算符可以获取数据类型

（5）运算符

算术运算符：+，- ，*，l，% ，++，–
赋值运算符：=，+=，-= ，*= ，/=，%=
比较运算符：>，<， >= ，<=，!=，==，===
逻辑运算符：&&，ll，!
三元运算符：条件表达式? true_value: false_value

==会进行类型转换，===不会进行类型转换

var a = 10;
alert(a == "10"); //true
alert(a === "10"); //false
alert(a == 10); //true

（6）类型转换

字符串类型转为数字：
- 将字符串字面值转为数字。如果字面值不是数字，则转为NaN。
```
alert(parseInt("12")); //12
alert(parseInt("12A45")); //12
alert(parseInt("A45"));//NaN (not a number)
```
其他类型转为boolean：
- Number：0和NaN为false，其他均转为true。
- String：空字符串为false，其他均转为true。
- Null和undefined：均转为false。

（7）流程控制语句

if…else if …else…
switch
for
while
do … while

4.js函数

介绍：函数（方法）是被设计为执行特定任务的代码块。
定义：JavaScript函数通过function关键字进行定义，语法为：

function functionName(参数1,参数2..){//要执行的代码
}

注意：
- 形式参数不需要类型，因为JavaScript是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
调用：函数名称(实际参数列表)
定义方式二：

var functionName = function(参数1,参数2..){//要执行的代码
}

JS中，函数调用可以传递任意个数的参数。但是函数只接受前几个定义的参数。

//定义
function add(a , b){return a+ b;
}
//调用
var result = add(10,20);
alert(result)

5.js对象

（1）Array

JavaScript中 Array对象用于定义数组。
定义：

var变量名=new Array(元素列表);//方式一
var arr = new Array(1,2,3,4);

var变量名=[元素列表];//方式二
var arr = [1,2,3,4];

访问：

arr[索引]=值;
arr[10] = "hello";

特点：长度可变，类型可变

JavaScript 中的数组相当于Java 中集合，数组的长度是可变的，而JavaScript 是弱类型，所以可以存储任意的类型的数据。

属性：

length：设置或返回数组中元素的数量

方法：

箭头函数(ES6):是用来简化函数定义语法的。具体形式为: (…)=>{…}，如果需要给箭头函数起名字: var xox=(.)=>{…}

var arr =[ 1,2,3，4 ];
arr [10] = 50;
for (let i = 0; i < arr.length; i++){console.log (arr[i]);
}//forEach:遍历数组中有值的元素
arr.forEach (function(e){console.log (e);
})
//ES6箭头函数:(...) ->{ ...}
arr.forEach ((e) -> {
console.log (e);
})//push:添加元素到数组末尾
arr.push (7,8,9);//splice:删除元素
arr.splice (2,2) ;

（2）String

string字符串对象创建方式有两种：

var 变量名 =new String("...");//方式一
var str = new String("Hello String");

var变量名= "..." ;//方式二
var str = "Hello String";
var str = 'Hello String';

属性：

length：字符串的长度

方法：

//创建字符串对象
//var str = new string ( "Hello string" );
var str = "Hello string";
console.log (str);
//length
console.log (str.length) ;
//charAt
console.log (str.charAt(4));
//indexof
console.log (str.indexof("lo"));
//trim
var s = str.trim ();
console.log (s) ;
//substring (start, end) ---开始索引，结束索引(含头不含尾)
console.log (s.substring(0,4));

（3）JavaScript自定义对象

定义格式:

var 对象名= {
属性名1:属性值1,
属性名2:属性值2,
属性名3:属性值3,
函数名称:function(形参列表){}
};var user = {
name:"Tom",
age:20,
gender:"male",
eat:function(){alert("用膳~");}
};

调用格式:

对象名.属性名;
对象名.函数名();console.log(user.name) ;
user.eat();

（4）JSON

概念：JavaScript Object Notation, JavaScript对象标记法。
JSON是通过JavaScript对象标记法书写的文本。
key必须使用双引号。
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

{"name" : "Tom","age" :20,"oamder" : "male"
}

定义：

var变量名= '{"key1":value1,"key2":value2}';

value的数据类型为：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true或 false）
- 数组（在方括号中）
- 对象（在花括号中）
- null
示例：

var userStr = '{“name” : “erry” , “age”:18,“addr”:[ “北京”, “上海”, “西安”]};

JSON字符串转为JS对象：

var jsObject = JSON.parse(userStr);

JS对象转为JSON字符串：

var jsonStr = JSON.stringify(jsObject);

（5）BOM

概念：Browser Object Model浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。
组成：
- Window：浏览器窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location：地址栏对象

1）Window

介绍：浏览器窗口对象。
获取：直接使用window，其中 window.可以省略。

window.alert("Hello window");
alert( "Hello window");

属性：
- history：对History对象的只读引用。请参阅History对象。
- location：用于窗口或框架的 Location对象。请参阅Location对象。
- navigator：对 Navigator对象的只读引用。请参阅Navigator对象。

方法：

alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

//confirm -对话框-―确认: true ,取消: false
Var flag = confirm ("您确认删除该记录吗?");
alert (flag);

setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。

//定时器- setInterval --周期性的执行某一个函数
var i = 0;
setInterval(function(){
i++;
console.log ("定时器执行了"+i+"次");
},2000);

setTimeout()：在指定的毫秒数后调用函数或计算表达式。

//定时器- setTimeout --延迟指定时间执行一次
setTimeout(function(){
alert("JS");
},3000);

2）Location

介绍：地址栏对象。
获取：使用window.location获取，其中window.可以省略。

window.location.属性;
location.属性;

属性：
- href：设置或返回完整的URL。

location.href = "https://www.baidu.com";

（6）DOM

概念：Document Object Model ,文档对象模型。
将标记语言的各个组成部分封装为对应的对象：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
JavaScript 通过DOM，就能够对HTML进行操作：
- 改变HTML元素的内容
- 改变HTML元素的样式（CSS）
- 对HTML DOM事件作出反应
- 添加和删除HTML元素
DOM是 W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：
1. Core DOM——所有文档类型的标准模型
  - Document：整个文档对象
  - Element：元素对象
  - Attribute：属性对象
  - Text：文本对象
  - Comment：注释对象
2. XML DOM——XML文档的标准模型
3. HTML DOM——HTML文档的标准模型
  - Image： <img>
  - Button ： <input type='button'>
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
Document对象中提供了以下获取Element元素对象的函数：
1. 根据id属性值获取，返回单个Element对象
```
var h1 = document.getElementById('h1');
```
1. 根据标签名称获取，返回Element对象数组
```
var divs = document.getElementsByTagName('div');
```
1. 根据name属性值获取，返回Element对象数组
```
var hobbys = document.getElementsByName('hobby');
```
1. 根据class属性值获取，返回Element对象数组
```
var clss = document.getElementsByclassName('cls');
```

6.JS事件监听

事件：HTML事件是发生在HTML元素上的“事情”。比如：
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
事件监听：JavaScript可以在事件被侦测到时执行代码。

（1）事件绑定

方式一：通过HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">
<script>
function on(){
alert('我被点击了!');
}
</script>

方式二：通过DOM元素属性绑定

<input type="button" id="btn" value="按钮2">
<script>
document.getElementById( ' btn' ).onclick=function(){
alert('我被点击了!');
}
</script>

（2）常见事件

查看全文

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.dgrt.cn/a/2181697.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

【JavaWeb】前端基础(HTML+CSS+JavaScript)

目录一、前端介绍1.Web标准二、HTML和CSS1.什么是HTML、CSS2.HTML 实例3.VS Code安装使用（1）插件安装4.基础标签&样式（1）标题1）标题排版2）标题样式①CSS引入方式：②颜色表示形式&#xff1a……

编程日记2023/4/4 12:59:50

网站建设的详细过程

如何建设网站?企业网站建设都有哪些流程?多长时间能把网站建设好?这都是企业做网站关注的问题。下面石家庄网站建设分享网站建设的详细过程。 1、规划定好网站主题、想好网站名称、选好网站域名网站类型一般分为：新闻媒体、企业站点，商城站点&#x……

编程日记2023/4/4 12:59:42

网页设计怎么激发灵感

网页设计是很需要灵感的，灵感能激发设计师的想象力，把一些抽象的文字、图片、想法，设计成有具体表达含义的实图。网页设计的时候，常见的是参考一些同行的网站，但这还停留在模仿的阶段，想要设计出更优秀的网……

编程日记2023/4/4 12:59:42

网站制作过程中要检查的细节

网站在上线之前，有许多细节要测试检查，以便让网站以更完美的状态呈现给用户。网站制作的过程中，有许多细节要注意，一是防止出现错误，二是为了让用户获得更好的用户体验。网站从一开的域名购买到页面设计、程序开发、测……

编程日记2023/4/4 12:59:41

网站建设提高实用性的几个建议

网站是服务于广大用户的，面向的用户群体不一样，也就意味着网站类型、网站风格、页面布局、网站栏目会有所不同，但有一个根本的原则就是围绕用户建站，这一点是不会变的。网站建设的时候，要注意提高实用性，也……

编程日记2023/4/4 12:59:40

创意网页设计的技巧分享

网站那么多，漂亮的网站会比较受用户喜欢。网页设计的时候，在遵循网页标准的同时，还要增加一些创意，让网页看起来精致、与众不同，让网站更有特色，用户也能更能记住。网页设计如何增加创意呢?有什么设计技巧……

编程日记2023/4/4 12:59:40

websocket 原理及ios下的应用

文章目录一、websocket是什么？二、websocket有哪些应用场景？三、websocket底层原理3.1 握手阶段3.2 传输阶段四、websocket 在ios中的相关框架五、websocket在ios中的简单应用 (SocketRocket 为例)六、参考一、websocket是什么？
百度百科定义： WebSocket 是独立的、创建在……

编程日记2023/4/4 12:59:40

企业网站制作需要注意哪些流程

企业做网站的时候，大多数情况下都是找网站制作公司来建站，把自己的想法、要求等告诉建站公司，其中，少不了企业与建站公司的沟通，然后建站公司技术人员去策划设计网页、网页制作、程序搭建，而企业需要做的是……

编程日记2023/4/4 12:59:40

分享简约风格网页设计的技巧

网页设计的风格多样，其中简约风格是许多用户都喜欢的，一是界面干净，方便用户找到想要的信息，提高网页打开速度，二是页面看起来高大上，讨用户喜欢。近几年，网页设计的核心是内容，简洁……

编程日记2023/4/4 12:59:39

网页导航栏设计方法和技巧

每一个网页都有导航，告知用户当前位置，同时也告知用户网站上有哪些页面，方便用户点击跳转到直接想去的页面。网页导航栏如何设计?网页导航放置在哪个位置?如何设计网页导航图标?这些都是需要考虑的。下面金色方向石家庄网页设计分享网页导……

编程日记2023/4/4 12:59:39

【面试题高逼格利用类实现加法】编写代码, 实现多线程数组求和.

编写代码, 实现多线程数组求和.关键1. 数组的初始化关键2. 奇偶的相加import java.util.Random;public class Thread_2533 {public static void main(String[] args) throws InterruptedException {// 记录开始时间long start System.currentTimeMillis();// 1. 给定一个很长的……

编程日记2023/4/16 14:56:10

一个python训练

美国:28:麻省理工学院,斯坦福大学,哈佛大学,加州理工学院,芝加哥大学,普林斯顿大学,宾夕法尼亚大学,耶鲁大学,康奈尔大学,哥伦比亚大学,密歇根大学安娜堡分校,约翰霍普金斯大学,西北大学,加州大学伯克利分校,纽约大学,加州大学洛杉矶分校,杜克大学,卡内基梅隆大学,加州大学圣地……

编程日记2023/4/16 14:55:59

Mybatis03学习笔记

目录使用注解开发
设置事务自动提交
mybatis运行原理
注解CRUD
lombok使用（偷懒神器，大神都不建议使用）
复杂查询环境（多对一）
复杂查询环境（一对多）
动态sql环境搭建
动态sql常用标签……

编程日记2023/4/16 14:55:50

设置或取得c# NumericUpDown 编辑框值的方法,(注意：不是Value值)

本人在C#开发中使用到了NumericUpDown控件，但是发现该控件不能直接控制显示值，经研究得到下面的解决办法
NumericUpDown由于是由多个控件组合而来的控件，其中包含一个类似TextBox的控件，若想取得或改变其中的值要使用如下方法
N……

编程日记2023/4/16 14:55:46

使用NPOI 技术的SetColumnWidth 精确控制列宽不能成功的解决办法（C#）

在使用NPOI技术开发自动操作EXCEL软件时遇到不能精确设置列宽的问题。
如
ISheet sheet1 hssfworkbook.CreateSheet("Sheet1");
sheet1.SetColumnWidth(0, 50 * 256); // 在EXCEL文档中实际列宽为49.29
sheet1.SetColumnWidth(1, 100 * 256); // 在EXCEL文……

编程日记2023/4/16 14:55:46

Mysql 数据库zip版安装时basedir datadir 路径设置问题，避免转义符的影响

本人在开发Mysql数据库自动安装程序时遇到个很奇怪的问题，其中my.ini的basedir 的路径设置是下面这样的：
basedir d:\测试\test\mysql
但是在使用mysqld安装mysql服务时老是启动不了，报1067错误，后来查看window事件发现一个独特……

编程日记2023/4/16 14:55:45

java stream sorted排序考虑null值

项目里使用到排序, java里没有像C# 里的linq，只有stream,查找stream.sorted源码看到有个
Comparator.nullsLast
然后看了一下实现，果然是能够处理null值的排序，如：minPriceList.stream().sorted(Comparator.comparing(l -> l.g……

编程日记2023/4/16 14:55:45

spring @EnableConfigurationProperties 实现原理

查看DataSourceAutoConfiguration源码，发现如下代码： Configuration ConditionalOnClass({ DataSource.class, EmbeddedDatabaseType.class }) EnableConfigurationProperties(DataSourceProperties.class) Import({ DataSourcePoolMetadataProvidersCon……

编程日记2023/4/16 14:55:44

postman请求https网址没有响应，但是用浏览器有响应，解决办法

遇到个问题：同一个get请求的url，postman请求https网址没有响应，但是用浏览器有响应
url是https开头的，查看错误描述里有一个SSL的选项：然后根据描述关掉这个选项：然后就没问题了，能正常请求及……

编程日记2023/4/16 14:55:44

java @Inherited注解的作用

看到很多注解都被Inherited进行了修饰，但是这个Inherited有什么作用呢？
查看Inherited代码描述：
Indicates that an annotation type is automatically inherited. If an Inherited meta-annotation is present on an annotation type decl……

编程日记2023/4/16 14:55:43

目录

一、前端介绍

1.Web标准

二、HTML和CSS

1.什么是HTML、CSS

2.HTML 实例

3.VS Code安装使用

（1）插件安装

4.基础标签&样式

（1）标题

1）标题排版

2）标题样式

①CSS引入方式：

②颜色表示形式：

③<span>标签

④CSS选择器：

3）超链接

（2）正文

1）排版

2）布局

（3）表格标签

（4）表单标签

三、JS

1.什么是JavaScript?

2.js引入方式

（1）内部脚本：将Js代码定义在HTML页面中

（2）外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

3.js基础语法

（1）书写语法

（2）输出语句

（3）变量

（4）数据类型

（5）运算符

（6）类型转换

（7）流程控制语句

4.js函数

5.js对象

（1）Array

（2）String

（3）JavaScript自定义对象

（4）JSON

（5）BOM

1）Window

2）Location

（6）DOM

6.JS事件监听

（1）事件绑定

（2）常见事件

相关文章：

【JavaWeb】前端基础(HTML+CSS+JavaScript)

网站建设的详细过程

网页设计怎么激发灵感

网站制作过程中要检查的细节

网站建设提高实用性的几个建议

创意网页设计的技巧分享

websocket 原理及ios下的应用

企业网站制作需要注意哪些流程

分享简约风格网页设计的技巧

网页导航栏设计方法和技巧

【面试题 高逼格利用 类实现加法】编写代码, 实现多线程数组求和.

一个python训练

Mybatis03学习笔记

设置或取得c# NumericUpDown 编辑框值的方法,(注意：不是Value值)

使用NPOI 技术 的SetColumnWidth 精确控制列宽不能成功的解决办法（C#）

Mysql 数据库zip版安装时basedir datadir 路径设置问题，避免转义符的影响

java stream sorted排序 考虑null值

spring @EnableConfigurationProperties 实现原理

postman请求https网址没有响应，但是用浏览器有响应，解决办法

java @Inherited注解的作用

Published by

风君子

发表回复 取消回复

③`<span>`标签

【面试题高逼格利用类实现加法】编写代码, 实现多线程数组求和.

使用NPOI 技术的SetColumnWidth 精确控制列宽不能成功的解决办法（C#）

java stream sorted排序考虑null值

发表回复取消回复