Desarrollo y finalización del lenguaje PHP
El desarrollo de sitios web utiliza principalmente tres lenguajes: HTML, CSS y JavaScript.
···· HTML para la columna vertebral de la página, estilos de presentación de contenido CSS, escritura dinámica de presentación JavaScript ·····
Marco de edición HTML : head, body, footer
html
head …… / head
body …… / body
footer …… / footer
/ html
-
Aquí está el
encabezado de la etiqueta html (el Encabezado)
usando la definición de la etiqueta h1 - h6 , tamaño grande a un orden pequeño de 1-6
&: <usando h1> Este es un encabezado </ h1 de con>
- etiquetas definidas por p de
párrafo
, <poner aquí>
&: <P> Este es un párrafo </ P>.
-
enlace
usando una definición de etiqueta y atributo href , un enlace a la dirección especificada.
&: <a href="http://www.xxx.com "> Este es un enlace </ a>
- La
imagen está definida
por la etiqueta img ,
&: <img src = “xx.jpg” width = “ 104 ”height =" 142 "/>
-El
enlace se
define mediante una etiqueta,
&: <p> Este es un encabezado </ p>
clasificación:
Clase de elemento a nivel de bloque : defina el estilo CSS para la clase del elemento.
Utilice la definición de elemento <div class = ""> , que se utiliza como contenedor para elementos HTML. Inicio y fin
: después de definir el estilo por <style>, llame a la clase en el elemento de bloque para definir el estilo del elemento de bloque.
&:
<style>
.cities { background-color: black; color: white; margin: 20px; padding: 20px; } </ style> <body> <div class = "cities"> // call style <h2> Londres </ H2> </ div> </ body> - elementos en línea utilizados ** <span> ** define el elemento, para un contenedor de texto. Inicio y final <style> span.red {color: red;} </style> <body> <h1> Mi <span class = "red">
¿Diseño web adaptable?
RWD se refiere a Responsive Web Design (Responsive Web Design)
: entrega de páginas web de tamaño variable
: es necesario para tabletas y dispositivos móviles.
Agregue a la sección de la cabeza:·· Hay 6 etiquetas fijas ··
<título> 、 <meta> 、 <enlace> 、 <base> 、 <script> 、 <estilo>。
etiqueta de título: define el título del documento . es obligatorio
etiqueta base: especifique la dirección predeterminada (destino)
<head>
<base href="http://www.xxx.com.cn/images/" />
<base target="_blank" />
</head>
etiqueta de enlace: define la relación entre el documento y los recursos externos .
metaetiqueta: proporciona metadatos sobre el documento HTML. Los metadatos no se mostrarán en la página, es información leída por la máquina .
Eso es para definir las palabras clave de la página; el motor de búsqueda usará el nombre y los atributos de contenido del meta elemento para indexar la página.
<meta name="keywords" content="HTML, CSS, XML" />
etiqueta de secuencia de comandos: define secuencias de comandos del lado del cliente, como JavaScript
etiqueta de estilo: se utiliza para definir información de estilo para documentos HTML .
注意：
<!DOCTYPE> 声明：必须是 HTML 文档的第一行，位于 <html> 标签之前。
：：它是指示 web 浏览器，正确获知页面的文档类型。即能知道使用哪个 HTML 版本来编写页面类型的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。
：：DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
<footer> 标签：定义文档或节的页脚
：：页脚通常包含>文档的作者、版权信息、使用条款链接、联系信息<。
：：可在一个文档中使用多个 <footer> 元素。
：：注释：Internet Explorer 8 以及更早的版本不支持 <footer> 标签。
Sintaxis CSS
Regla: consta de dos partes: selector y declaración (1 o más)
例：：selector {declaration1; declaration2; ... declarationN }
Selector: es el elemento HTML cuyo estilo se va a cambiar;
declaración :: consta de 1 atributo y 1 valor
Fondo : ambos están definidos por el elemento del cuerpo
Trasfondo local Agregue, los atributos relevantes del fondo se pueden aplicar a cualquier elemento.
如：为段落元素添加：：：p.flower {background-image: url(/i/eg_bg_03.gif);}
如：为行内元素添加：：：：a.radio {background-image: url(/i/eg_bg_07.gif);}
Imagen de
fondo SET background Image-
usar valores de propiedad definidos ** imagen **
:: la imagen de fondo de la página está en mosaico SET
::. 3 tipos de valores: repeat-x image repetición horizontal
----- repeat-y image se repite verticalmente
- ——— Sin repetición no permite que las imágenes se coloquen en mosaico
-
fondo repetir conjunto
background-repeat
utiliza el valor de atributo ** repetir ** Definición
:: si la imagen de fondo de la página está en mosaico conjunto
:: 3 valores: repetición-x la imagen se repite horizontalmente
- ———— Repeat-y la imagen se repite verticalmente
————— sin repetición no permite que la imagen sea en mosaico
-
posición de
fondo establecer propiedad de posición de fondo
Utilice el valor de atributo ** posición ** para definir,
:: Use palabras clave: arriba, abajo, izquierda, derecha, centro; También puede usar el valor de longitud de 100px, el valor porcentual es 50%;
：: 50% 50% (alineado al centro), 0% 0% se coloca en la esquina superior izquierda del área del margen interior del elemento
-
conjunto de asociación de
fondo fondo - atributo de adjunto
Use el valor de atributo ** adjunto ** para definir, establezca si la imagen de fondo se desplaza con la página
: : Utilice palabras clave:
——Arreglado fijo, no se ve afectado por el desplazamiento——
desplazamiento de desplazamiento, se desplazará con el documento. Es el valor predeterminado
-
selector de id
：为标有 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>
reglas de archivo css / js de llamada html
js la
identificación utilizada #para llamar a un ·punto de clase para ajustar; elemento HTML sin símbolo de modulación
como :: # bigBox .inputBox .inputText input {}
<div id="bigBox">
<div class="inputBox">
<div class="inputText">
<input type="text" />
</div>
</div>
</div>
Rápido
HTML中
写多行, 用 *数量 可创建多个div盒子
li：div.col-md-1*12
<div class="col-md-1"></div>
：：md是尺寸
css中
重复代码，采用 多元素器来优化代码。用逗号隔开。
convencional
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中的代码块，其他都是固定结构。