Développement et finition du langage PHP
Le développement de sites Web utilise principalement trois langages: HTML, CSS et JavaScript.
···· HTML pour l'épine dorsale de la page, styles de présentation du contenu CSS, écriture dynamique de présentation JavaScript ·····
Cadre d'édition HTML : head, body, footer
html
head …… / head
body …… / body
footer …… / footer
/ html
-
Voici l'en-
tête de la balise html (l'en-tête)
utilisant la définition de balise h1 - h6 , de grande taille à un petit ordre de 1 à 6
&: <en utilisant h1> Ceci est un en-tête </ h1 de balises avec>
-
paragraphe
p, <mettre ici>
&: <P> Ceci est un paragraphe </ P>.
-
lien
utilisant une définition d'étiquette, et un attribut href , un lien vers l'adresse spécifiée.
&: <a href="http://www.xxx.com "> Ceci est un lien </ a>
- L'
image est définie
par la balise img ,
&: <img src = "xx.jpg" width = " 104 ”height =" 142 "/>
-Le
lien est
défini à l'aide d'une balise,
&: <p> Ceci est un titre </ p>
classification:
Classe d' élément de niveau bloc : définissez le style CSS de la classe de l'élément.
Utilisez la définition d'élément <div class = ""> , qui est utilisée comme conteneur pour les éléments HTML. Début et fin
: Après avoir défini le style par <style>, appelez la classe dans l'élément de bloc pour définir le style de l'élément de bloc.
&:
<style>
.cities { background-color: black; color: white; margin: 20px; padding: 20px; } </ style> <body> <div class = "cities"> // style d'appel <h2> Londres </ H2> </ div> </ body> - éléments en ligne utilisés ** élément <span> ** définit, pour un conteneur de texte. Début et fin <style> span.red {color: red;} </style> <body> <h1> Mon <span class = "red">
Site Web adaptatif?
RWD fait référence à Responsive Web Design (Responsive Web Design)
: livraison de taille variable des pages Web
: elle est nécessaire pour les tablettes et les appareils mobiles.
Ajouter à la section principale:·· Il y a 6 étiquettes fixes ··
<titre> 、 <meta> 、 <lien> 、 <base> 、 <script> 、 <style>。
balise title: définit le titre du document . est obligatoire
balise de base: spécifiez l'adresse par défaut (cible)
<head>
<base href="http://www.xxx.com.cn/images/" />
<base target="_blank" />
</head>
Balise de lien: définit la relation entre le document et les ressources externes .
balise meta: fournit des métadonnées sur le document HTML. Les métadonnées ne seront pas affichées sur la page, il s'agit d' informations lues pour la machine .
C'est-à-dire définir les mots-clés de la page; le moteur de recherche utilisera le nom et les attributs de contenu du méta-élément pour indexer la page.
<meta name="keywords" content="HTML, CSS, XML" />
balise de script: définir des scripts côté client, tels que JavaScript
balise de style: utilisée pour définir les informations de style des documents HTML .
注意：
<!DOCTYPE> 声明：必须是 HTML 文档的第一行，位于 <html> 标签之前。
：：它是指示 web 浏览器，正确获知页面的文档类型。即能知道使用哪个 HTML 版本来编写页面类型的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。
：：DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
<footer> 标签：定义文档或节的页脚
：：页脚通常包含>文档的作者、版权信息、使用条款链接、联系信息<。
：：可在一个文档中使用多个 <footer> 元素。
：：注释：Internet Explorer 8 以及更早的版本不支持 <footer> 标签。
Syntaxe CSS
Règle: se compose de deux parties: sélecteur et déclaration (1 ou plus)
例：：selector {declaration1; declaration2; ... declarationN }
Sélecteur: est l'élément HTML dont le style doit être changé;
déclaration :: se compose de 1 attribut et 1 valeur
Contexte : les deux sont définis par l'élément body
Contexte local Ajoutez, les attributs pertinents de l'arrière-plan peuvent être appliqués à n'importe quel élément.
如：为段落元素添加：：：p.flower {background-image: url(/i/eg_bg_03.gif);}
如：为行内元素添加：：：：a.radio {background-image: url(/i/eg_bg_07.gif);}
Image d'
arrière-plan SET background Image-
utiliser les valeurs de propriété définies ** image **
:: l'image d'arrière-plan de la page est en mosaïque SET
::. 3 types de valeurs: répéter-x image répétition horizontale
----- répéter-y l'image est répétée verticalement
- ——— La non-répétition ne permet pas aux images d'être carrelées
-
jeu de répétition d'
arrière-plan background-repeat
utilise la valeur d'attribut ** repeat ** Définition
:: si l'image d'arrière-plan de la page est en mosaïque set
:: 3 valeurs: repeat-x l'image est répétée horizontalement
- ———— Repeat-y l'image est répétée verticalement
————— no-repeat ne permet pas à l'image d'être carrelée
- le
positionnement de l'
arrière-plan est défini propriété background-position
Utilisez la valeur d'attribut ** position ** pour définir,
:: Utilisez des mots-clés: haut, bas, gauche, droite, centre; Vous pouvez également utiliser la valeur de longueur de 100px, la valeur en pourcentage est de 50%;
：： 50% 50% (aligné au centre), 0% 0% est placé dans le coin supérieur gauche de la zone de marge intérieure de l'élément
-
ensemble d'associations d'arrière - plan
background -attachment attribut
Utilisez la valeur d'attribut ** pièce jointe ** pour définir, définir si l'image d'arrière-plan défile avec la page
: : Utilisez des mots-clés:
——Fixe fixe, non affecté par le défilement——
défilement défilement, il défilera avec le document. Est la valeur par défaut
-
sélecteur d'identifiant
：为标有 id 的 HTML 元素,指定特定的样式。
：以 "#" 来定义。
：ID 选择器：不引用 class 属性的值；要引用 id 属性中的值。
：ID 选择器：在文档中使用一次
：常用于建立派生选择器== sidebar 。
：：在文档中只出现1次;
：：#sidebar p {font-style: italic;}
：：以上是 用于出现在 id 是 sidebar 的元素内的段落。
与类class选择器区别：：
：在文档中只使用一次
：可独立用于 某元素的样式需求。
：：即在css中给定一个 ID 值为 自定义变量名 的元素；元素根据需要来调用ID值样式。
如：：#mostImportant {color:red; background:yellow;}
：：：<h1 id="mostImportant">This is important!</h1>
html appel règles de fichier css / js
js l'
id utilisé #pour appeler un ·point de classe à ajuster; élément HTML sans symbole de modulation
comme :: # bigBox .inputBox .inputText input {}
<div id="bigBox">
<div class="inputBox">
<div class="inputText">
<input type="text" />
</div>
</div>
</div>
Vite
HTML中
写多行, 用 *数量 可创建多个div盒子
li：div.col-md-1*12
<div class="col-md-1"></div>
：：md是尺寸
css中
重复代码，采用 多元素器来优化代码。用逗号隔开。
conventionnel
container盒子 一般做容器装内容
-
div栅格计算：即屏幕划分格数，要计算每份占有宽度
：屏幕的宽度不能用像素，因为屏幕会不能自由伸缩；只能用百分比。
：可在网页打开检查代码窗口，在console控制台中去计算：
：：如划分12份，每份宽度
：：(1/12)
：：(1/12).toFixed(8) --保留小数位数。
：：(1/12*100).toFixed(8) --计算百分数后的宽度。
JavaScript
== js用于改变HTML内容样式 ==
// 输出
js文件中编写输出内容：格式3种
1. alert('写内容') ---- 弹窗模式显示，通过HTML文件中使用<script src='' ''>调用来输出内容。
2. document.write("写内容") ----可直接显示在网页body中。
3. console.log("写内容") -----是显示在console控制台中，在网页中通过浏览器的‘检查’-console中来查看输出。
//输入
用：prompt("写提示内容") ---目的将用户输入内容显示出来。
&& var num = prompt("请输入内容")
alert( num)
//函数
函数具有一定功能的代码块；用function 来封装；
固定格式：function 函数名(){ 函数代码块 }
如何调用输出？用：函数名()
&&
function fn(){
>>功能是：弹出两次
alert(10)
alert(10)
}
fn();
//事件绑定
固定格式： 对象.onclick = function () { 业务逻辑代码块 }
//获取和设置html元素的内容：用 innerHTML 。
innerText 和 innerHTML区别：前者可解析html代码标签；后者只能解析获取纯文本，即不解析纯文本中的代码标签，直接获取。
//获取input的内容
input格式：<input type="text" id="ipt" value="写内容">
1 value是输入的提示内容（即获取和设置input值用value）；2 input语句没有结束语。
js 的function封装中 编写逻辑代码块：弹出alert(oIpt.vlaue) ; 更改oIpt.value ="更改的内容"；
//js结构：
找到对象：
var oBtn = document.getElementById("btn")
设置点击事件并绑定处理：
oBtn.onclick = function () { 业务逻辑代码块 }
注：js中代码变动主要是 function中的代码块，其他都是固定结构。