revisión del día 16
Notas de estudio del día 17 de Java
día 17
1. Conocimientos básicos
1.1 Página web
包含文字、图片、音乐、视频、超链接等内容。网页都是存放在网络中的某一台电脑上的（一般被我们称为服务器）
1.2 Navegador
作用是解析一个网页，然后进行相应的渲染，用户可以通过浏览器看到渲染之后的内容
Segundo, HTML
HTML (lenguaje de marcado de hipertexto) Lenguaje de marcado de hipertexto.
El hipertexto puede almacenar texto, imágenes, videos, música, etc., porque excede el rango que puede cargar el texto ordinario, se llama hipertexto.
Un lenguaje de marcado no es estrictamente un lenguaje de programación.
Nota: el sufijo de los archivos HTML es generalmente htm o html
2.1 La primera página HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个HTML</title>
</head>
<body>
Hello HTML！
</body>
</html>
2.2 Especificaciones comunes
1. html文件的后缀为htm或html
2. 一个html文件是由head和body两大部分组成
3. 标签大小写都可以，一般都是小写的
4. 一个标签都有一个开始标签和一个结束标签，如果标签中没有内容的话，那么省略结束标签
也就是说分为两种：
第一种：<p> 内容 </p>
第二种：<hr>。
5. 标签之间是可以进行嵌套的
2.3 Atributos de etiqueta
标签--->lol中的英雄
属性--->英雄买的装备
属性值--->装备的功能
注意事项：
1. 标签中的属性是为了给标签扩展功能的
2. 格式：属性=属性值
3. 属性一般是放在标签的开始标签中
4. 属性和标签名中间使用一个空格
5. 属性值可以用单引号也可以用双引号，也可以什么都不加（但是建议加上引号）
2.4 Etiquetas comunes
-
Etiqueta de párrafo
<p>内容</p> 注意：默认带有一个换行效果 -
Etiqueta divisoria
<hr> -
Etiqueta de nueva línea
<br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-常见标签</title>
</head>
<body>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
<!--
注释的快捷键：CTRL + SHIFT + /
hr 分割线
br 换行
p 段落
-->
<hr />
<p>鹅鹅鹅</p>
<p>曲项向天歌</p>
<p>白毛浮绿水</p>
<p>红掌拨清波</p>
<hr>
锄禾日当午 <br>
汗滴禾下土 <br>
谁知盘中餐 <br>
粒粒皆辛苦 <br>
</body>
</html>
-
Etiqueta de título
<hn></hn> n可以为1-6 -
Etiqueta de fuente
<font></font> 常见属性： color：设置字体颜色 size： 设置字体大小 范围为1-7 逐级增大 -
Negrita
<b></b> <strong></strong> -
inclinación
<i></i> <em></em>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-常见标签</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
醉里<strong>挑灯</strong>看<b>剑</b> <br>
梦回吹角连营 <br>
<font color="red" size="6">八百里</font>分麾下炙 <br>
<em>五十弦</em>翻<i>塞外声</i> <br>
</body>
</html>
练习：故都的秋排版
http://www.millionbook.com/mj/y/yudafu/ydfz/007.htm
-
Etiqueta de imagen [importante]
<img src=""> 必须属性： src：指定图片的路径（相对路径、绝对路径） 常见属性： alt：当图片不存在的时候，进行提示 title：当鼠标悬浮在图片上方的时候，进行提示 width：设置图片的宽 height：设置图片的高绝对路径：从盘符开始或者从http等开始路径获取的图片 相对路径：相对于目前的html文件而言的（也就说哪个html文件调用图片，那么图片就相当于哪个html文件） 如果图片在html的上一级 ../a.jpg 如果图片在html的下一级 /a.jpg 如果图片和html同级 a.jpg或 ./a.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-常见标签</title>
</head>
<body>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3795757253,2048194183&fm=26&gp=0.jpg">
<!--
直接从本地获取图片的话，图片无法显示并报无法加载本地资源的错误
<img src="G:\picture\beauty.jpg" alt="">
-->
<img src="../img/bb.jpg" alt="找不到此图片！" title="这是一个狗熊头图片">
</body>
</html>
-
Etiqueta de lista
-
Lista desordenada ul
<ul> <li></li> <li></li> <li></li> </ul> ul中常见属性： type：控制无序列表的样式 默认 实心圆 circle 空心圆 square 实心方块 -
Lista ordenada ol
<ol> <li></li> <li></li> <li></li> </ol> ol中常见属性： type：控制有序列表的样式 默认 从阿拉伯数字1开始升序 A 从大写字母A开始升序 a 从小写字母a开始升序 I 从罗马数字I开始升序 i 从罗马数字i开始升序总结：li为列表项，必须依附于ol或者ul而存在<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06-列表标签</title> </head> <body> <ul type="square"> <li>淘宝</li> <li>京东</li> <li>拼多多</li> </ul> <ol type="I"> <li>百度</li> <li>谷歌</li> <li>必应</li> </ol> </body> </html>
-
-
Etiqueta de hipervínculo
<a href=""> 必须属性： href：放的为访问的目标地址，这个地址要写全（加上协议如：https） 常见属性： target: 从旧页面跳转到新页面的方式 默认 本页跳转 _self 本页跳转 _blank 新页面<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07-超链接标签</title> </head> <body> <a href="https://www.baidu.com" target="_blank">百度一下，你就知道</a> <br> <a href="./05-常见标签.html">跳转到很高端的界面</a> </body> </html>
练习：友情链接
1. 用图片超链接
2. 在新页面打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-练习</title>
</head>
<body>
<a href="https://www.taobao.com" target="_blank">
<img src="../img/tb.jpg" alt="">
</a> <br>
<a href="https://www.jd.com" target="_blank">
<img src="../img/jd.jpg" alt="">
</a> <br>
<a href="https://www.mi.com" target="_blank">
<img src="../img/mi.png" alt="">
</a> <br>
</body>
</html>
