HTML_CSS_PHP_快速入门

11.23

Head 中的五个元素

<head>

</head>

标签一般成对，但也有闭合标签，如<br/> <hr/>

格式

加粗：<b></b> <strong></strong>

斜体：<i></i> <em></em>

中划线下划线：s u

上标下标：sup sub

大小字号：big small

字符

空格

< <

> >

‘ 左引号

’ 右引号

列表

List

有序列表：<ol> -> <li>

无序列表：<ul> -> <li>

属性：

Name 分组

Id：身份识别,一个页面唯一

Class：css设置

Ol Type：1 a A i I

Ul type：square disc

表格

Caption

Table

Thead:th tr td

Tbody:tb tr td

Tfoot:tf tr td

图片

超链接

<a> 行内标签

<a>

Img 图片地址

Href 链接

Target 新页面打开

Href=”#part1”锚点

11.29

表单

<Form>

Method = post/get 发送表单数据/接收数据（请求方式）

Action = index.php 数据交给php处理

Name = logintest 体现表单作用

<Input>

Type = test 单行文本框

Value = what s your name 默认值

Maxlength = 5

Type = password 密码框

Type = redio 单选框

Name = gender 分组

Checked 默认选择，值可写可不写

Type = checkbox 复选框

Name = lunch 分组

Type = button普通按钮 submit提交按钮 reset重置按钮

Type = file 文件上传

多行文本框

Row = 15

Cols = 15

Value = contentTest

下拉列表

Multiple = multiple 可以选多个

Size = 3

</select>

CSS

一、外部样式表

二、内部样式表

p{color: red}

</style>

三、行内样式表

<p style="color: red;">dddddddddddd</p>

选择器

1、元素选择器：p{color: red;} 元素（标签名）{属性:值;}

2、id选择器：#pid1{color: red}

3、class选择器：.class1{color: red}

4、后代选择器：ul li{color: red}

5、群组选择器：p,#pid1,.class1,ul li{color: red}

优先级：id > class > 元素

补充：

<p class="eng en">可以赋予多个类，空格隔开</p>

/*元素选择器*/

p{color: red;}

/*id选择器*/

#pid{color: gold;}

#p1{color: aquamarine;}

/*类选择器*/

.dd3{color: hotpink;}

/*后代选择器*/

ul li{color: burlywood;}

/*群组选择器*/

.qun,#qun,ol li{color: darkturquoise;}

样式

一、字体样式

div{

font-family: "微软雅黑";

font-size: 16px;

font-weight: bolder;

font-style: oblique;

}

二、文本样式

首行缩进 text-indent （字体大小两倍）
水平对其方式 text-align
文本上下划线 text-decoration

4、水平对齐方式 text-decoration

英文字母大小写 text-transform
行高 line-height
字词间距 word-spacing对英文单词起作用，将换行转换为空格

letter-spacing 对字母或字起作用

#text {

text-indent: 32px;

font-size: 16px; //默认16px

text-align: center;

text-decoration: overline; //上划线

text-decoration: underline; //下划线

text-transform: uppercase; //大写字母

text-transform: capitalize; //首字母大写

line-height: 20px; //默认20px

word-spacing: 30px;

letter-spacing: 30px;

}

三、边框样式

div{

border-style: solid;

border-style: dotted; //点线

border-style: dashed; //点画线

border-color: #8fe133;

border-width: 10px;

//上左右边框

border: 3px solid greenyellow;

border-bottom: none;

}

border: 2px solid deepskyblue;

border-bottom: none;

border-top-style: dashed;

border-top-color: red;

}

四、列表样式

ul{

list-style-type: circle;

list-style-type: none;

}

表格样式

tr{border: 1px solid red;}

td{border: 1px solid red;} //有优先级

table,tr,td{

border-collapse: collapse; //是否表格分离

border-spacing: 20px; //表格间隙

}

table{caption-side: bottom;} //标题位置

图片样式

body{text-align: center;} //让图片居中

#a1{text-align: left;}

#a2{text-align: center;}

#a3{text-align: right;}

img{width: 150px;height: auto; //图片大小

border: dashed green 5px;

float: right; //图片环绕

}

七、背景

background: greenyellow;

width: 50px;

height: 500px;

}

body{

background: blanchedalmond;

background-image: url(img/little.png);

background-repeat: no-repeat; //背景图片不重复

color: cornflowerblue; //字体颜色全部设置

background-position: bottom; //背景图片位置

background-position: 200px 500px; //左边距右边距

background-attachment: scroll; // 就在最下面

background-attachment: fixed; //广告页面滑动我不动

}

超链接（伪类）

a:link{color: black;text-decoration: none;} //超链接点之前

a:visited{color: green;} //超链接点之后

a:hover{color: blue;} //放在超链接上

a:active{color: pink;} //超链接点击时

p:hover{cursor: text;} //I

p:hover{cursor: pointer;} //手

p:hover{cursor: default;} //光标

PHP学习

变量$
数据类型输出

Echo单引号原样输出

Echo双引号输出变量的值

$name = "lh";

$age = 18;

$height = 190.8;

$gender = true;

echo $height,$name,$age,$gender;

echo var_dump($gender);

//有数值相加正常，无法正常相加直接忽略，不报错，输出后者结果

$text = $name + $height;

$text = $height + $age;

$text = $height + $gender;

$text = $name + $gender;

echo var_dump($text);

字符串的处理

多个字符串的连接（字符串的并置）

用.连接

echo "我叫" .$name.","."今年".$age."岁了"."。";

echo "我叫" ,$name.",","今年".$age."岁了","。";

echo "我叫$name,今年 $age 岁了。";//双引号输出变量的值

ASCII和字符串的转换等

$asciiOrd = 97;

$stringTest = " abcd abcd efg hi abcd";

ASCII和字符串的转换

echo chr($asciiOrd); //a

echo ord('v'); //118

echo strlen($stringTest); //获取字符串长度

echo trim($stringTest); //去除空格trim ltrim rtrim

echo strtoupper($stringTest); //全部转成大写

echo strtolower($stringTest); //全部转成小写

echo strpos($stringTest,'Bc',5);//从第6（索引）个开始检索bc在第几位

echo stripos($stringTest,'Bc'); //i 不区分大小写检索

echo str_replace("bc","xy",$stringTest,$i); //(被替换的字符串，要替换的字符串，目标要替换的字符串，替换的次数)

echo $i;

echo str_ireplace("bc","xy",$stringTest,$i); //i不区分大小写

echo $i;

$stringTest = "This is <b>bolder</b> text."; //将特殊符号如<> ‘ “ & 转换成html实体

echo $stringTest;

echo htmlspecialchars($stringTest)

$stringTest = "I love & 'php'!"; //&->&(在源代码中)

echo $stringTest;

echo htmlspecialchars($stringTest)

运算

echo (3<5 or 1==1 and 5>7); //or运算生效，忽略and

echo (35 == "35"); //只有值相等

echo (35 === "35"); //值相等类型也相等

echo var_dump(35 === '35');

$num = "10";

$num .= "234";

echo $num; //num = num . “234”

二、结构语法

1.If

$age = rand(1,100);

echo $age;

echo "<br>";

if($age < 16){

echo "未成年人";

}

else if($age > 16){

echo "成年人";

}

else{

echo "大成年人";

}

2.for

$sum = 0;

$flag =0;

for($i=1;$i<10;$i+=2){

echo $i;

echo" ";

if($flag == 0){

$sum += $i;

$flag =1;

}

else{

$sum -= $i;

$flag = 0;

}

echo $sum;

echo "<br>";

}

3.While

$sum = 0;

$i = 0;

while($i<9){

$i+=2;

echo $i,' ';

$sum += $i;

echo $sum;

echo "<br>";

}

4.数组array

// 数组(array)

$indexArray = array('lh',19,3>5);

echo var_dump($indexArray).'<br>';

// 关联数组

$colArray = array(

"name" => "lh",

"age" => 18,

);

echo var_dump($colArray).'<br>';

// 数组元素访问

echo $indexArray[0].'<br>';

// 数组元素个数

echo count($indexArray).'<br>';

// 数组的遍历

for($i=0;$i<count($indexArray);$i++){

echo $indexArray[$i].'<br>';

}

MysqlTask汇总

<?php

$dbhost = "127.0.0.1:3306";

$username = "root";

$password = "";

$conn = new mysqli($dbhost,$username,$password);

//测试连接

if($conn -> connect_error){echo "fail connect";}

else{echo "success connect！";}

//创建库

$sql = "CREATE DATABASE if not exists lh01 ";

$addDb = $conn -> query($sql);

if($addDb == true){echo "success db";}

else{echo "fail db!".$conn -> error;}

//设置库名

$dbhost = "127.0.0.1:3306";

$username = "root";

$password = "";

$dbname = "lh01";

$conn = new mysqli($dbhost,$username,$password,$dbname);

if($conn -> connect_error){echo "fail name!";}

else{echo "success name！";}

//创建表

$sql = "CREATE TABLE if not exists lhInfo(

id INT(3) AUTO_INCREMENT PRIMARY KEY,

name VARCHAR(10) NOT NULL,

age INT(3) NOT NULL,

gender VARCHAR(5) NOT NULL

)";

$addTable = $conn -> query($sql);

if($addTable == true){echo "success table！";}

else{echo "fail table！";}

//插入数据

$sql = "insert into lh01.lhInfo(name,age,gender) values ('ymh','9','female')";

$insertData = $conn -> query($sql);

if($insertData == true){echo "success insert!".'<br>';}

else{echo "fail insert!";}

//获取数据

$sql = "select * from lhInfo";

$result = $conn -> query($sql);

// echo $result;

if($result ->num_rows>=1){

while($row = $result -> fetch_array()){

echo "your name is:".$row["name"]."your age is:".$row["age"]."your gender :".$row["gender"];

}

else{echo "no data!";}

HTML_CSS_PHP_快速入门相关推荐

Shiro第一个程序:官方快速入门程序Qucickstart详解教程
目录一.下载解压二.第一个Shiro程序 1. 导入依赖 2. 配置shiro配置文件 3. Quickstart.java 4. 启动测试三.shiro.ini分析四.Quickstart. ...
计算机入门新人必学,异世修真人怎么玩？新手快速入门必备技巧
异世修真人怎么快速入门?最近新出来的一款文字修仙游戏,很多萌新不知道怎么玩?进小编给大家带来了游戏新手快速入门技巧攻略,希望可以帮到大家. 新手快速入门攻略 1.开局出来往下找婆婆,交互给点钱,旁边有 ...
Spring Boot 2 快速教程：WebFlux 快速入门（二）
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘 ...
Apache Hive 快速入门 (CentOS 7.3 + Hadoop-2.8 + Hive-2.1.1)
2019独角兽企业重金招聘Python工程师标准>>> 本文节选自<Netkiller Database 手札> 第 63 章 Apache Hive 目录 63.1. ...
《iOS9开发快速入门》——导读
本节书摘来自异步社区<iOS9开发快速入门>一书中的目录,作者刘丽霞 , 邱晓华,更多章节内容可以访问云栖社区"异步社区"公众号查看目录前言第1章 iOS ...
BIML 101 - ETL数据清洗系列 - BIML 快速入门教程 - 序
BIML 101 - BIML 快速入门教程做大数据的项目,最花时间的就是数据清洗. 没有一个相对可靠的数据,数据分析就是无木之舟,无水之源. 如果你已经进了ETL这个坑,而且预算有限,并且有大量的 ...
python scrapy菜鸟教程_scrapy学习笔记（一）快速入门
安装Scrapy Scrapy是一个高级的Python爬虫框架,它不仅包含了爬虫的特性,还可以方便的将爬虫数据保存到csv.json等文件中. 首先我们安装Scrapy. pip install sc ...
OpenStack快速入门
OpenStack云计算快速入门(1) 该教程基于Ubuntu12.04版,它将帮助读者建立起一份OpenStack最小化安装.我是五岳之巅,翻译中多采用意译法,所以个别词与原版有出入,请大家谅解.我 ...
Expression Blend实例中文教程(2) - 界面快速入门
上一篇主要介绍Expression系列产品,另外概述了Blend的强大功能,本篇将用Blend 3创建一个新Silverlight项目,通过创建的过程,对Blend进行快速入门学习. 在开始使用Ble ...

HTML_CSS_PHP_快速入门

HTML_CSS_PHP_快速入门相关推荐

最新文章

热门文章