Video de aprendizaje, [Dios loco habla Java] HTML5
Primero, conozca HTML
1. ¿Qué es HTML?
1 、 HTML
-
Lenguaje de marcado de hipertexto
El hipertexto incluye: texto, imágenes, audio, video, animación, etc.
2. Ventajas de HTML5
- Compatibilidad con HTML5 de fabricantes de navegadores de renombre mundial
- Microsoft
- manzana
- Ópera
- Mozilla
- Demanda de mercado
- Multiplataforma
3. Estándar W3C
- W3C
- Consorcio Mundial de la red
- Establecida en 1994, la organización de estándares técnicos neutrales internacionales más autorizada e influyente en el campo de la tecnología web.
- http://www.w3.org/
- http://www.chinaw3c.org/
- Los estándares del W3C incluyen
- Lenguaje estándar estructurado (HTML, XML)
- Lenguaje estándar de rendimiento (CSS)
- Estándares de comportamiento (DOM, ECMAScript)
4. IDE común
- computadora portátil
- Dreamweaver
- IDEA
- WebStorm
- ……
5. Estructura básica de HTML
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>
Los pares de etiquetas se denominan etiquetas abiertas y etiquetas cerradas. Etiquetas de cierre automático: etiquetas separadas (elementos vacíos), como
; Significa usar ** / ** para cerrar elementos vacíos
6. Notas
<!-- 注释 -->
<!-- DOCTYPE:告诉浏览器，我们要用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
<!--meta描述性标签，它用来描述网站的一些信息-->
<!--meta一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="keywords相当于网站的关键词描述">
<meta name="description" content="description描述来这个地方干啥">
<!--title网页标题-->
<title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello,World!
</body>
</html>
En segundo lugar, las etiquetas básicas de la página web.
1. Bloquear elementos
- Independientemente del contenido, el elemento está en su propia línea.
- （P ， h1-h6…）
2, elementos en la línea
- El ancho del contenido se estira, y la izquierda y la derecha son todos los elementos en línea que se pueden organizar en una fila.
- （A ， strong ， em ...）
No sé cómo categorizar las etiquetas específicas.
- Etiqueta de título
- Etiqueta de párrafo
- Etiqueta de nueva línea
- Etiqueta de línea horizontal
- Etiqueta de estilo de fuente
- Notas y símbolos especiales
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签 <h1></h>-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签 <p></p>-->
<p>我爱得忘乎所以，</p>
<p>高歌敞开心扉。</p>
<p>像大地一样忠诚，</p>
<p>像天空一样爱人。</p>
<p>我把自己甩掉，</p>
<p>我把自己忘了。</p>
<p>心灵只要</p>
<p>我情人的爱情。</p>
<!--水平线标签-->
<hr/>
<!--换行标签：<br/>，
换行标签的本质上还是一个段落，只不过换行了，每一行显得紧凑
不像<p></p>段落标签显得每一行中间有间隙-->
我爱得忘乎所以，<br/>
高歌敞开心扉。<br/>
像大地一样忠诚，<br/>
像天空一样爱人。<br/>
我把自己甩掉，<br/>
我把自己忘了。<br/>
心灵只要<br/>
我情人的爱情。<br/>
<!--字体样式标签：粗体，斜体-->
<h1>字体样式标签</h1>
粗体：<strong>这是粗体</strong>
斜体：<em>这是斜体</em>
<br/>
<!--特殊符号
&转义字符
空格：
大于：>
小于：<
版权符号：©
-->
空 格 <br/>
空 格 <br/>
大于符号：> <br/>
小于符号：< <br/>
版权符号：© <br/>
</body>
</html>
3. Imágenes, hipervínculos, diseño de páginas web
1. Etiqueta de imagen
<img src="path" alt="text" title="text" width="x" height="y" />
<!--
src：图像的地址
alt：图像的替代文字
title：鼠标悬停提示文字
width：图像宽度
height：图像高度
-->
- Formatos de imagen comunes
- JPG
- GIF
- PNG
- BMP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--
src：图片地址
相对地址：../resources/images/戴拿的肯定.jpg
绝对地址：F:\代码\HTML\resources\images\戴拿的肯定.jpg
../ 上一级目录
alt：图像的替代文字(必填)
title：鼠标悬停提示文字
width：图像宽度
height：图像高度
-->
<img src="../resources/images/戴拿的肯定.jpg" alt="戴拿的肯定" title="鼠标放在图片上就显示文字" width="300" height="300"><br/>
<img src="../resources/images/迪迦.jpg" alt="迪迦的肯定" title="鼠标放在图片上就显示文字" width="300" height="300">
</body>
</html>
2. Etiqueta de enlace
- Hipervínculo de texto
- Enlace de hipervínculo de imagen entre páginas
1), enlace de una página a otra
<a href="path" target="目标窗口位置">链接文本或图像</a>
<!--
href="path"：链接路径
target="表示窗口在哪里打开"：链接在哪个窗口打开，目标窗口位置常用值_self、_blank
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--
herf：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开
_blank 在新标签中打开
_self 在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">跳转到页面一</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br/>
<a href="1.我的第一个网页.html">
<img src="../resources/images/戴拿的肯定.jpg" alt="戴拿的肯定" title="鼠标放在图片上就显示文字" width="300" height="300"><br/>
</a>
</body>
</html>
2), enlace de anclaje
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚链接</title>
</head>
<body>
<!--锚链接
1.需要一个锚标记
2.跳转到标记
用井号#
-->
<!--使用name作为标记-->
<h3>
<a name="top">天真的预言</a>
</h3>
<p>从一粒细沙中窥探世界</p>
<p>在一朵野花里寻觅天堂</p>
<p>掌中握无限</p>
<p>霎那成永恒</p>
<p>当真理被恶意利用时</p>
<p>比一切臆造的谎言狰狞</p>
<p>现实本来就这样</p>
<p>人生来就要面对快乐和悲惨</p>
<p>只要能明了这一点</p>
<p>我们就不会再受伤害</p>
<p>将快乐和忧伤编织</p>
<p>披在我神圣的心上</p>
<p>穷人手里的一个铜板</p>
<p>抵得上非洲海岸的所有黄金</p>
<p>从劳动者手里砸取的一丁点钱</p>
<p>能买的下守财奴的所有土地</p>
<p>如果得到上帝的庇护</p>
<p>甚至可以买卖国土的全部</p>
<p>谁曾嘲笑纯真的信念</p>
<p>他将被岁月和死亡讥讽</p>
<p>谁要动摇纯真的信念</p>
<p>他将永远被埋葬在陈腐的墓穴中</p>
<p>谁能尊重纯真的信念</p>
<p>他将战胜地狱和死亡</p>
<p>如果不相信自己的眼睛</p>
<p>将永远不懂得去信任，请随心而行</p>
<p>如果太阳和月亮心存猜疑</p>
<p>它们将会转瞬消失</p>
<p>被激情围绕就能拥有美好</p>
<p>情欲攻心则会迷失自我</p>
<p>每一个夜晚，每一个清晨</p>
<p>有人生来就为不幸伤神</p>
<p>每一个清晨，每一个夜晚</p>
<p>有人生来就被幸福拥抱</p>
<p>有人生来就被幸福拥抱</p>
<p>有人生来就被长夜围绕</p>
<p>如果不是亲眼所见</p>
<p>我们就会相信谎言</p>
<p>谎言在黑夜里生灭</p>
<p>灵魂在光芒中休眠</p>
<p>对挣扎在黑暗中的人</p>
<p>上帝散发出光明</p>
<p>对生活在白昼的人</p>
<p>上帝幻化为人性</p>
<a href="#top">回到诗的标题</a>
<br/>
<a name="down">诗的末尾</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用锚链接跳转到另一个页面的指定位置</title>
</head>
<body>
<a href="4.1.锚链接.html#down">跳转到天真的语言诗的末尾</a>
</body>
</html>
Nota:
- Ya sea una imagen o una página web, asegúrese de prestar atención a su dirección
3), enlaces funcionales
... Por determinar, todavía no he pensado en qué escribir
Cuatro, listas, tablas, elementos multimedia
Todavía aprendiendo, por determinar ...
Cinco, formularios y aplicaciones de formularios.
Todavía aprendiendo, por determinar ...
Seis, forma de verificación primaria
Todavía aprendiendo, por determinar ...