phpstudy搭建网站输出helloworld 及html css js PHP基本语言

b3f77eae0cc74c51ab5bb3334a64a375.png

71e3aa5ecb714960a776af156595ed53.png 

58426afd8ece4147ae4d9c7e143de47b.png 

d409e7b8abb149e89549e9e83c5f41a5.png 

0413ebb74a644070bfce8f7ce83cc975.png 

 HTML简介
HTML的英文全称是 Hyper Text Markup Language

html的标签

1单标签元素与双标签元素

2、文本标签

3、DIV标签与span标签

4、水平居中标签

5、换行标签
6、水平线标签

7列表标签

8图片标签

9、超链接

10、表格标签

11Marquee滚动标签

12多媒体标签

PHP

PHP 中使用 echo 和 print 语句来输出数据。
echo 和 print 区别:
echo - 可以输出一个或多个字符串
print - 只允许输出一个字符串,返回值总为 1

PHP 支持三种注释方式:
单行注释:使用 //
单行注释:使用 # (较少使用)
多行注释:使用 /* */
<?php
// 这是一个单行注释
# 这也是一个单行注释
/*
这是一个多行注释
*/
?>
注释部分的代码不会被编译。
数据类型(变量)

变量是用于存储信息的"容器"
PHP 支持多种数据类型,包括但不限于:
字符串 (string):一系列字符。
整型 (integer):没有小数点的数字。
浮点型 (float):带有小数点的数字。
布尔型 (boolean):只有两个可能的值,true 和 false。
数组 (array):存储多个值的集合。
对象 (object):面向对象编程中的实例。
NULL:表示一个未定义的变量。

 

css一、基础认知

1.1 CSS初识

CSS写在style标签中,style标签一般写在head标签里面,title标签下面 ctrl+/ CSS注释快捷键 选择器 {css属性}
2.1 CSS引入方式

内嵌式:CSS写在style标签中 提示:style标签虽然可以写在页面任意位置,但是通常约定写在head标签中 作用:当前页面 外联式:CSS写在一个单独的.css文件中 作用:多个页面 提示:需要通过link标签在网页中引入 行内式:CSS写在标签的style属性中 写法:style="属性:属性值" ​ 作用:当前标签 ​ 提示:基础不推荐使用,之后会配合js使用
<div style="color:red;"></div>
font-size:字号大小后边加px
二、基础选择器

1.标签选择器
2.类选择器


3.id选择器


4.通配符选择器


三、字体和文本样式

1.字体

1.1字体大小

1.2字体粗细

1.3字体样式(是否倾斜)

1.4常见字体系列(了解)
无衬线字体(sans-serif) 1.特点:文字笔画粗细均匀,并且首尾无装饰 2.场景:网页中大多采用无衬线字体 3.常见该系列字体:黑体、Arial 衬线字体(serif) 1.特点:文字笔画粗细不均,并且首尾有笔锋装饰 2.场景:报刊书籍中应用广泛 3.常见该系列字体:宋体、times new roman 等宽字体(monospace) 1.特点:每个字母或文字的宽度相等 2.场景:一般用于程序代码编写,有利于代码的阅读和编写 3.常见该系列字体:consolas、firacode
1.5字体系列

1.6样式的层叠问题

1.7字体font相关属性的连写

2.文本样式

2.1 文本缩进
属性名:text-indent 浏览器默认字号:16px 取值: 数字+px 数字+em(推荐:1em = 当前标签的font-size的大小)(em:一个字的大小)
2.2文本水平对齐方式
属性名:text-align 取值: 属性值:left center right 效果:左对齐 居中对齐 右对齐 注意点: 如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置
2.3 水平居中方法总结 text-align:center
text-align:center 能让那些元素水平居中? 1.文本 2.span标签、a标签 3.input标签、img标签 注意点: 如果需要让以上元素水平居中,text-align:center 需要给以上元素的父元素设置
2.4文本修饰
属性名:text-decoration 取值: 属性值:underline line-through overline none 效果:下划线(常用) 删除线(不常用) 上划线(几乎不用) 无装饰线(常用) 注意点: 开发中会使用text-decoration:none;清楚a标签默认的下划线
2.5行高
作用:控制一行的上下行间距 属性名:line-height 取值: 数字+px 倍数(当前标签font-size的倍数) 应用: 1.让单行文本垂直居中可以设置line-height:文字父元素高度 2.网页精准布局时,会设置line-height:1 可以取消上下间距 行高与font连写的注意点: 如果同时设置了行高和font连写,注意覆盖问题 font:style weight size/line-height family 拓展: 标签水平居中方法总结 margin:0 auto 通过margin:0 auto可以实现div、p、h(大盒子)水平居中 注意点: 1.如果需要让div、p、h(大盒子)水平居中,直接给当前元素本身设置即可 2.margin: 0 auto一般针对固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度
在工作中,div用来网页布局,一个页面中可能用无数次,原则:如果使用div,尽量使用类名控制样式
选择器进阶

一、复合选择器    

1.1后代选择器


1.2子代选择器


1.3并集选择器


1.4交集选择器
1.5hover伪类选择器


1.6emmet语法

JS

JavaScript(简称Js)是当前最流行,应用最广泛的客户端(网页)脚本语言,用来在网页中添加动态效果与交互功能,在web开发中拥有举足轻重的地位.
JavaScript,HTML,CSS共同构成网页
HTML:用来定义网页内容,例如:标题,正文,图像等(HTML是网页制作的基础语言---->跳转学习:HTML);
CSS:用来修饰网页组件得外观,例如:颜色,大小,位置,背景等等(CSS是网页制作的修饰语言--->跳转学习:CSS)
JavaScript:用来实时更新网页内容,例如:从服务器中获取数据并更新到网页中,修改某些标签的样式内容,可以让网页变得生动.
脚本语言:无需编译,可以由某种解释器直接执行 (sql python html css JavaScript) 直接由某种解释器(引擎)解释执行,逐行从上到下解释执行.

JavaScript和java完全是二种不同的语言
区别
JavaScript是嵌入在网页中,对网页进行各种操作的,是一种脚本语言
java是一种后端的高级语言,是需要编译的
2.JavaScript 具有以下特点

1) 解释型脚本语言
JavaScript 是一种解释型脚本语言,与 C、C++ 等语言需要先编译再运行不同,使用 JavaScript 编写的代码不需要编译,可以直接运行。
2) 面向对象
JavaScript 是一种面向对象语言,使用 JavaScript 不仅可以创建对象,也能操作使用已有的对象。
3) 弱类型
JavaScript 是一种弱类型的编程语言,对使用的数据类型没有严格的要求,例如您可以将一个变量初始化为任意类型,也可以随时改变这个变量的类型。
4) 动态性
JavaScript 是一种采用事件驱动的脚本语言,它不需要借助 Web 服务器就可以对用户的输入做出响应,例如我们在访问一个网页时,通过鼠标在网页中进行点击或滚动窗口时,通过 JavaScript 可以直接对这些事件做出响应。
5) 跨平台
JavaScript 不依赖操作系统,在浏览器中就可以运行。因此一个 JavaScript 脚本在编写完成后可以在任意系统上运行,只需要系统上的浏览器支持 JavaScript 即可。