day16复习
day17
一、基础知识
1.1 网页
包含文字、图片、音乐、视频、超链接等内容。网页都是存放在网络中的某一台电脑上的（一般被我们称为服务器）
1.2 浏览器
作用是解析一个网页，然后进行相应的渲染，用户可以通过浏览器看到渲染之后的内容
二、HTML
HTML（Hyper Text Markup Language） 超文本标记语言。
超文本可以存放文字、图片、视频、音乐等，因为超过了普通文本能装载的范围，所以叫做超文本。
标记语言严格来说并不是一门编程语言。
注意：HTML文件的后缀一般为htm或者html
2.1 第一个HTML网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个HTML</title>
</head>
<body>
Hello HTML！
</body>
</html>
2.2 常见规范
1. html文件的后缀为htm或html
2. 一个html文件是由head和body两大部分组成
3. 标签大小写都可以，一般都是小写的
4. 一个标签都有一个开始标签和一个结束标签，如果标签中没有内容的话，那么省略结束标签
也就是说分为两种：
第一种：<p> 内容 </p>
第二种：<hr>。
5. 标签之间是可以进行嵌套的
2.3 标签的属性
标签--->lol中的英雄
属性--->英雄买的装备
属性值--->装备的功能
注意事项：
1. 标签中的属性是为了给标签扩展功能的
2. 格式：属性=属性值
3. 属性一般是放在标签的开始标签中
4. 属性和标签名中间使用一个空格
5. 属性值可以用单引号也可以用双引号，也可以什么都不加（但是建议加上引号）
2.4 常见标签
-
段落标签
扫描二维码关注公众号，回复： 12369188 查看本文章
<p>内容</p> 注意：默认带有一个换行效果 -
分割线标签
<hr> -
换行标签
<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>
-
标题标签
<hn></hn> n可以为1-6 -
字体标签
<font></font> 常见属性： color：设置字体颜色 size： 设置字体大小 范围为1-7 逐级增大 -
加粗
<b></b> <strong></strong> -
倾斜
<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
-
图片标签 【重要】
<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>
-
列表标签
-
无序列表 ul
<ul> <li></li> <li></li> <li></li> </ul> ul中常见属性： type：控制无序列表的样式 默认 实心圆 circle 空心圆 square 实心方块 -
有序列表 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>
-
-
超链接标签
<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>
