typora-copy-imágenes-a: img
aprender preescolar
1. navegador
5 navegadores más comunes:
el navegador Internet Explorer, Google Chrome, Firefox, el navegador Opera, el navegador Safari
| 5 gran icono del navegador |
|---|
 |
Aprender un truco: 360 navegador no está navegadores convencionales, ya que 360 es el navegador con IE núcleo navegador. kernel navegador es equivalente a un motor de automóvil, es el núcleo de la existencia, que es responsable de convertir el código en los ojos de la interfaz de usuario
2. Los accesos directos
| botón | efecto |
|---|---|
| ctrl + c | copia |
| ctrl + v | palo |
| ctrl + x | cizalla |
| ctrl + f | Buscar |
| ctrl + s | almacenamiento |
| ctrl + a | seleccionar |
| ctrl + z | Deshacer |
| ctrl + y | anti revocado |
| ctrl + n | nuevo |
| F2 | El cambio de nombre |
| Win + E | Abra Mi PC (PC / este equipo) |
| Win + D | Volver al escritorio |
| Win + l | pantalla de bloqueo |
3. Nombre de archivo
Nombre de archivo y la extensión de nombre de base (sufijo) compuesto de, por ejemplo: 123.txt nombre de base 123, la extensión es txt
Extensión representa el tipo de archivo, tales como: texto txt, jpg es una imagen, documento de word doc es
extensión de archivo no se muestra:
| icono de determinación win7 |
|---|
 |
| icono de determinación win10 |
|---|
 |
conocimientos de html
Introducción: En la barra de direcciones www.itcast.com, en los octavos de final cuando se carga la página fuera, el contenido de la página no existe en mi propio ordenador, el contenido del servidor (equipo remoto) pasan por encima, entregado ¿Qué es? Es el html
| El icono del cliente y la interacción del servidor |
|---|
 |
1. Concepto
HTML (Hyper Text Markup Language Inglés siglas inglesas), HTML.
Para decirlo claramente HTML está envuelto en Soportes en ángulo de palabras en inglés, el navegador tiene una interpretación especial de este paréntesis angulares envuelto la palabra Inglés
Hipertexto: archivos de texto, además del texto básico que también contiene imágenes, audio y contenido de vídeo
Marcador: Como una marca especial de símbolos
2. Papel
Preparación de la página
3. Compruebe la página web HTML
Haga clic derecho en la página en blanco -> Ver fuente de la página:
| icono de fuente página Web |
|---|
 |
La estructura básica de 4.html
HTML tiene un formato básico fijo, al igual que las cartas que tenemos el mismo formato básico
<html>
<head>
<title>页面的标题</title>
</head>
<body>
这里写内容
</body>
</html>
| html que ilustra la estructura básica de |
|---|
 |
5. Creación de la primera página Web
Nuevo documento de texto (Bloc de notas), escribir el siguiente
<html>
<head>
<title>我的网页</title>
</head>
<body>
这是我的第一个网页，怎么样，厉害吧！
</body>
</html>
La extensión del archivo cambiado a html
Haga doble clic en el (por defecto utiliza el navegador) para abrir
| El primer efecto de la página |
|---|
 |
editor Introducción
Dreamweaver, Sublime, EditPlus (notepad ++), PhpStorm, NetBeans
| editor de iconos comunes |
|---|
 |
Dreamweaver: DW corta, para html + css desarrollo, las ventajas: mejores sugerencias para el código, Contras: lento para abrir, cargo
EditPlus: Pequeñas ventajas del editor: rápida abierta, Contras: sugerencias para el código tenga que configurar manualmente, no es muy conveniente para hacer proyectos a gran escala
Sublime: para el desarrollo de JavaScript, ventajas: rápida operación más conveniente, más rápido de abrir
PhpStorm y NetBeans desarrolladores de PHP
Dreamweaver Introducción
1. sitio
Un sitio web por una gran cantidad de páginas web, también incluye fotos y otros recursos, con el fin de facilitar la gestión, se colocarán estos recursos dentro de una carpeta, esta carpeta es el sitio
2. Crear un nuevo sitio y Dw
Crear una carpeta manualmente
cuidado de los pies: Sitio desarrollado por DW se crea realmente y la carpeta editor asociado, DW puede crear múltiples sitios, los sitios de eliminación es editor asociado y eliminar la carpeta, no se eliminará la carpeta
3. Uso DW
Nuevo archivo html
Aprender un truco: DW teclas de acceso directo F12 es una página de vista previa
4. configuración del navegador
Aprender un truco: Si no se puede agregar la configuración del navegador dw, se puede añadir desde el registro
| Añadiendo icono del navegador DW del registro |
|---|
 |
A continuación, abra en el registro HKEY_CURRENT_USER---> Software---> Adobe---> Dreamweaver CS6---> Browser Launch Menus, luego editarlo, a raíz de la figura.
| icono de registro |
|---|
 |
nota
Concepto: Cuando leemos un libro, se pueden ver las anotaciones en el libro, también tenemos que escribir el código para hacer algunas observaciones ---- navegador no las etiquetas de análisis sintáctico
Papel: los programadores hacen señal para un desarrollador o desarrolladores de entender y fácil de leer
sintaxis:<!--注释的内容-->
<html>
<head>
<title>我的网页</title>
</head>
<body>
这是我的第一个网页，怎么样，厉害吧！
<!--这是主体内容-->
</body>
</html>
| icono del comentario |
|---|
 |
marcadores comunes
| Figura Prensa |
|---|
 |
1. Título
Un título:<h1></h1>
Calificadores:<h2></h2>
...
Seis título:<h6></h6>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>第一个网页</h1>
<h2>第一个网页</h2>
<h3>第一个网页</h3>
<h4>第一个网页</h4>
<h5>第一个网页</h5>
<h6>第一个网页</h6>
这是我的第一个网页，怎么样，厉害吧！
</body>
</html>
| Los efectos de títulos |
|---|
 |
cuidado de los pies:
1. El título está en negrita, cuanto mayor sea el número, menor es el tipo de letra, el mayor número de 6
2. En el DW teclas de atajo Ctrl + digital puede crear etiquetas directamente del título
3. Etiqueta del título en SEO peso del motor de búsqueda es relativamente grande
Aprender un truco:
SEO: (Search Engine Optimization): La traducción para el motor de búsqueda de optimización
Buscamos algo en un motor de búsqueda, va a salir un montón de páginas, estamos acostumbrados a vínculos superiores de clic, esto significa que una vez que la clasificación de una página, además de aumentar la cantidad de usuarios, el sitio valioso, y pega en la página y el flujo es todo. ¿Cómo puedo obtener la graduación de la página es? Es para complacer a los motores de búsqueda. Clasificación de la página en los motores de búsqueda es la optimización de motores de búsqueda.
Cómo optimizar:
1, dinero (PPC) Palabra compra rápida, caro (tráfico de compra, el número no será el punto final de la parte delantera)
2, para hacer la página más estandarizada, semántica clara (en el lugar correcto utilizar la etiqueta apropiada), los motores de búsqueda prefieren
enlaces 3, fuera de la cadena, en el bar, foros y otros sitios de desarrollo local
2. marca de composición tipográfica
a) marca de párrafo:<p></p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>2019年全国两会来了。回顾2013-2018年全国两会，习大大先后36次“下团组”，和代表委员亲切交流、共商国是，讲话涉及科技创新、脱贫攻坚、深化改革、作风建设等。</p>
<p>十三届全国人大二次会议3月4日（星期一）上午11时15分在人民大会堂新闻发布厅举行新闻发布会，由大会发言人就大会议程和人大工作相关的问题回答中外记者提问。</p>
</body>
</html>
| representaciones marca de párrafo |
|---|
 |
b) horizontal:<hr>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
2019年全国两会来了。回顾2013-2018年全国两会，习大大先后36次“下团组”，和代表委员亲切交流、共商国是，讲话涉及科技创新、脱贫攻坚、深化改革、作风建设等。
<hr />
十三届全国人大二次会议3月4日（星期一）上午11时15分在人民大会堂新闻发布厅举行新闻发布会，由大会发言人就大会议程和人大工作相关的问题回答中外记者提问。
</body>
</html>
| representaciones de líneas horizontales |
|---|
 |
c) envolver:<br>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
今天<br />明天<br />后天
</body>
</html>
| Envoltura mapa de etiquetas |
|---|
 |
3. etiqueta de fuente
a) En negrita:<b></b>
b) cursiva:<i></i>
c) subrayado:<u></u>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<b>加粗的字</b>
<i>倾斜的字</i>
<u>带有下划线的字</u>
</body>
</html>
| Fuente etiquetas representaciones |
|---|
 |
4. Destaca marcan
a) la marca más destacado, por hacer hincapié en negrita:<strong></strong>
b) Tomar nota de lo más destacado, para enfatizar a través cursiva:<em></em>
c) Tomar nota de lo más destacado, subrayando destacar:<ins></ins>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<strong>加粗的字</strong>
<em>倾斜的字</em>
<ins>带有下划线的字</ins>
</body>
</html>
| representaciones de la marca más destacado |
|---|
 |
cuidado de los pies:
- etiquetas de fuente y signo culminante pueden lograr efectos visuales, pero el significado es diferente, haciendo hincapié en la marca de ángulo en SEO (search engine optimization), el mayor peso
- Hizo hincapié en que la etiqueta tiene semántica web, semántica más por el buen SEO como, ranking en los motores de búsqueda que estarán más cerca de la parte superior
Pequeño caso:
| representaciones pequeña de casos |
|---|
 |
análisis:
1. Un titular
2. Un subtítulo
3. Una línea divisoria
4. Los tres párrafos
código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>中央气象台发暴雨蓝色预警 东北局部地区有大暴雨</h1>
<h6>2018-08-23 06:07:00 来源：中国新闻网（北京）</h6>
<hr />
<p>(原标题：中央气象台发布暴雨蓝色预警 东北局部地区有大暴雨)</p>
<p>中新网8月23日电 中央气象台8月23日06时发布暴雨蓝色预警：</p>
<p>预计8月23日08时至24日08时，黑龙江东北部、吉林中东部、辽宁东部、云南西南部、贵州中部、重庆南部、福建西北部和东南部以及台湾岛等地的部分地区有大到暴雨，其中，吉林东南部、辽宁东部、贵州中部以及台湾岛东部局地有大暴雨或特大暴雨(250~300毫米)；上述部分地区伴有短时强降水(小时雨量20~50毫米，最大可达60毫米以上)，局地有雷暴大风等强对流天气。</p>
</body>
</html>
Propiedad de la etiqueta
1. etiqueta de clasificación
Dual Etiquetas: etiquetas aparecen en pares llamados de doble sello, el contenido escrito en el medio de la etiqueta -----><p>段落</p>
una sola etiqueta: Una etiqueta única se llama una sola etiqueta, no sólo el atributo de contenido -----><hr>
2. Propiedades
- Cada etiqueta tiene sus propias propiedades (atributos) y ----- sola etiqueta tiene los atributos de etiquetas dobles
- Una etiqueta puede tener varios atributos
- Cada atributo tiene un valor que corresponde al valor entre comillas (comillas simples y dobles pueden ser)
- Separados por espacios entre la propiedad
- No hay pedido propiedad
3. Uso de la propiedad
sintaxis:<标签名 属性1="值1" 属性="值2"></标签名>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<font size="7" face="叶根友毛笔行书2.0版" color="red">字体标签</font>普通文字
</body>
</html>
efecto
Las fuentes pueden ser reconocidos es decir,
lista
1. lista desordenada
| Lista desordenada icono |
|---|
 |
| 标签名称 | 无序列表标签 |
|---|---|
| 标签 |
|
| 属 性 | Type 设置列表项目符号样式 circle - 空心圆 square - 正方形 disc - 实心圆（默认） |
| 描 述 | 注意： 1. 列表项里面至少有一个li标签（至少1一个，可以写N个） 2. 写无序列表必须写ul 3. 内容必须写在li标签内 说明： 列表项目结构中没有先后顺序的列表，称之为：无序列表 |
ul：代表标签的模块，范围
li：代表列表的每一项
<ul>
<li>丹麦国家队暂时"解散"！足协征召业余球员组队参赛 </li>
<li>世界足坛最惨之人出炉!只有他欣赏不了梅西的演出</li>
<li>当卢卡库的"大笨钟"晃过门将时，真以为是大罗来了 </li>
<li>C罗又美黑!甲板上拥翘臀女友入眠 他如今是CR5.5?</li>
<li>揭C罗不坐尤文大巴之谜 葡总理:他是全国的荣耀! </li>
<li>巴萨官推:梅西就是最佳 真坑!1月要赴美踢西甲</li>
</ul>
| 效果图 |
|---|
 |
注意：ul标签的直接子元素必须是li标签，li标签是放置列表的容器，可以放任何东西
2.有序列表
| 有序列表图示 |
|---|
 |
链接：https://help.aliyun.com/document_detail/59210.html?spm=a2c4g.11174283.6.546.7c9f2c42lW17FQ
| 标签名称 | 有序列表标签 |
|---|---|
| 标签格式 |
|
| 属 性 | Type 设置列表项目编号样式： A,a - 设置项目编号为大小写英文字母 I,i - 设置项目编号为大小写罗马数字 1 - 设置项目编号为阿拉伯数字（默认） |
| 描 述 | 注意： 1. 至少有一个li标签 2. 内容必须写在li标签里 3. 写有序列表必须写ol标签 4. 设置项目编号样式为英文字母，超过26个字母，会以aa,ab,ac这样的规律递增 说明： 列表结构中有先后顺序并且可以设置项目编号为（1,2,3或者a、b、c）的列表，称之为：有序列表 |
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
| 效果图 |
|---|
 |
3.自定义列表
| 自定义列表图示 |
|---|
 |
| 标签名称 | 定义列表标签 |
|---|---|
| 标签格式 |
|
| 属 性 | |
| 描 述 | 注意： 1. 必须写一个dt但是可以不写dd;dt也可以写多个 2. Dd是针对于前面最近的一个dt的表述 3. 内容必须写在dt或者dd里面 说明： 不仅仅是一列项目，还是项目标题和项目描述/注释的组合 |
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<dl>
<dt>特色服务</dt>
<dd>F 码通道</dd>
<dd>礼物码</dd>
<dd>防伪查询</dd>
</dl>
</body>
</html>
| 效果图 |
|---|
 |
Nota: dl es una lista de módulos, dt es el título de la lista, dd es el título del suplemento, dl y dd son etiqueta yuxtapuesta
hipervínculos
marcar:<a></a>
objetivo (atributo de destino):
_blank: una nueva ventana para saltar a la página
_self: se abre una nueva página en la ventana de la página original
Título: Cuando el ratón para la articulación de suspensión cuando el valor de atributo de visualización en el título
<a href="#" title="锄禾日当午，汗滴禾下土。">锄禾日当午</a>
| efecto |
|---|
 |
1. Enlaces Internos
Un salto en la misma habitación ------- salto de página dentro del sitio en su propio ordenador local
| Ejemplo de la figura. |
|---|
 |
Salto entre el archivo local
2. Enlaces externos
Saltar a enlaces a otros sitios
| Ejemplo de la figura. |
|---|
 |
Nota: Si la superficie exterior de salto de página, tales como: Baidu, Sina y así sucesivamente, hay que añadir http: // ----- acuerdo
3. Los enlaces de descarga
Cuando los enlaces para saltar a un navegador no puede abrir el archivo, aparecerá automáticamente descarga interfaz
<a href="科比.pptx">打开ppt</a>
| Haga clic efecto |
|---|
 |
4. vínculo de anclaje
| Ejemplo de la figura. |
|---|
 |
Enlaces: https://baike.baidu.com/item/ Andy / 114923 fr = Aladdin?
sintaxis:
<a href="#目标名">去目标地点</a>
<标签名 id="目标名">目标地点</标签名>
Añadir un salto ancla en donde sea necesario
| Ejemplo de la figura. |
|---|
 |
Haga clic en un hipervínculo para saltar a un punto específico de anclaje (id)
| Ejemplo de la figura. |
|---|
 |
camino
1. ruta relativa
En relación con la dirección del archivo actual, se puso a buscar el objetivo desde el archivo actual
archivos actuales y de destino en el mismo sitio
| Ejemplo de la figura. |
|---|
 |
archivos actuales y de destino de directorio en el mismo nivel
| Ejemplo de la figura. |
|---|
 |
./ delante omitido, en nombre de la carpeta de archivo actual
| Ejemplo de la figura. |
|---|
 |
Las páginas de archivos y directorios actuales padre objeto en el mismo nivel
| Ejemplo de la figura. |
|---|
 |
../ en nombre del directorio padre del archivo actual con
| Ejemplo de la figura. |
|---|
 |
2. Ruta absoluta
c: \ face.txt, comenzando con la letra, se puso a buscar el objetivo de la computadora
| Ejemplo de la figura. |
|---|
 |
etiquetas de las imágenes
sintaxis:<img src='图片的源' alt='' title='' width='' height='' />
src: Fotos de dirección
alt: Cuando la imagen no se puede visualizar detrás del texto alternativo aparece en lugar de la imagen
Título: Cuando el ratón en la posición de la imagen muestra un recordatorio del texto.
<img src="1.png" title="这是卡哇伊" />
<img src="2.png" alt="这是猫咪" />
| representaciones |
|---|
 |
otro
etiqueta pre
etiquetas pre-Presentación:<pre></pre>
<pre>
上
左 右
下
</pre>
| representaciones |
|---|
 |