Front-end HTML&CSS study notes 2 (based on Shang Silicon Valley teaching video)

Eleven episodes (image tags)

1.使用img自结束标签向网页中引入外部图片
2.src 设置一个外部图片的路径
3.alt 在图片不能显示时，设置对图片的描述，而且搜索引擎可以通过alt属性来识别不同图片，如果不写alt属性，则搜索引擎不会对该图片进行收录
4.width 设置宽度，一般以px为单位
5.height 设置高度，一般以px为单位
6.宽度和高度如果只设置一个，另一个也会等比例调整大小

Episode 12 (relative path)

1.src 中的路径指的是相对路径（相对当前源文件的路径）
2.如果要引用的图片和源文件在同一目录中则可以直接写图片名称
3.如果不在同一级目录中，可以使用../ 来返回上一级目录，返回几级，就写几个../

Thirteen episodes (picture format)

1.JPEG（JPG）：JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明，(一般用来保存照片等颜色丰富的图片)
2.GIF：支持的颜色少只支持简单的透明，支持动态图（当图片比较单一或是动态图时可以使用gif）
3.png：支持颜色多，并且支持复杂透明（可以用来显示颜色复杂的透明图片）

图片使用原则：效果不一致，使用效果好的，效果一致，使用小的

Fourteen episodes (meta tag)

1.使用<meta />来设置网页关键字，例如<meta name="keywords" content="html5,java" />
2.使用<meta />来指定页面描述，例如<meta name="descriptions" content="发布h5等前端信息" />
3.使用<meta />来做请求的重定向，例如<meta http-equiv="refresh" content="5;url="https://www.baidu.com" />  <meta http-equiv="refresh" content="秒数;url="目标路径" />

Episode 15 (XHTML Grammar Specification)

1.html不区分大小写，但是一般使用小写
2.注释不能嵌套
3.标签要完整
4.浏览器会尽量帮忙修正语法错误
5.html标签可以嵌套，但不能交叉嵌套
6.标签中属性必须有值，且值必须用引号

Episode 16 (iframe)

1.使用内联框架可以引入一个外部页面，用标签<iframe></iframe>来创建一个内联框架
2.在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎检索

属性
1.src：指定外部页面的路径
例如：<iframe src="demo02.html" name="tom"></iframe>

Seventeen episodes (hyperlink)

1.使用超链接可以让我们从一个页面跳转到另一个页面，利用标签<a></a>
2.可以利用标签<center></center>让页面中的内容居中显示（但不推荐使用，最好到css中去设置）

属性
1.href：指向链接跳转的目标地址，可以是相对路径也可以是绝对路径
例如<a href="https://www.baidu.com"> 这是一个超链接 </a>
2.target：可以用来指定打开链接的位置
可选值：
_self 在当前窗口中打开链接
_blank 在新的窗口中打开链接
也可以将其值设为内联框架的name值，链接将会在指定的内联框架中打开（例如：<a href="https://www.baidu.com" target="tom"> 这是一个超链接 </a>  <iframe src="demo02.html" name="tom"></iframe>）

Eighteen episodes (hyperlink 2)

练习模仿写一个小网页，注意点：
1.创建超链接时，如果地址不确定，可以暂时用一个#作为占位符
2.地址不确定，以#作为占位符时，点击超链接，会自动跳转到当前页面的顶部
3.id属性，每一个元素都可以设置，该属性可以作为标签的唯一标识，id属性不能重复，且命名不能以数字开头

1.可以利用上面的注意点2来设置网页的回到顶部功能 例如：<a href="#">回到顶部</a>
2.可以利用注意点2和3设置定位，例如：在网页开头写上<a href="#bottom">这是一个超链接</a>，然后在网页其他位置写上<a id="bottom">这里是bottom所在位置</a>,这样点击前面那个超链接时就可以跳转到后面超链接的位置。

思路：点击联系我们的超链接，则会自动打开电脑中默认的邮件客户端，并且收件人就是代码中的邮件地址
实现代码如下：<a href="mailto:邮件地址">联系我们</a>
思路二：可以直接放一个联系人二维码

Episode 19 (Introduction to CSS)

1.层叠样式表，css可以用来为网页创建样式表，通过样式表装饰网页，所谓层叠可以将网页想象成一层一层的结构，层次高的将会覆盖层次低的，而css可以为网页各个层次设计样式。

inline styles

2.可以将css直接编写到元素的style属性中，这种样式我们称为内联样式，内联样式只对当前元素中的内容起作用。（例如：<p style="color:red;font-size:30px">锄禾日当午</p>）
3.但是内联样式属于结构与表现耦合，不便于维护，所以不推荐使用。

Internal style sheet (can only affect the current page)

4.也可以将css编写到head中的style标签里，然后通过css选择器选中指定元素，就可以同时为这些元素一起设置样式，便于复用与维护，如下写法：
<style type="text/css">
   p{
    color:red;
    font-size:30px;
    }
</style>

Twenty episodes (external style sheet)

External style sheet (recommended)

1.还可以将样式表编写到外部的css文件中，然后通过link标签来将外部的css文件引用到当前网页中。
2.将css样式统一编写到外部样式表中，使结构与表现完全分离，且使得样式表可以在不同的页面被引用，便于复用。
3.将样式统一写在css文件中，然后在html中通过<link />标签引用，可以利用浏览器的缓存加快用户访问速度。代码如下：
<link rel="stylesheet" type="text/css" href="style.css"/>（这里假设style.css文件和demo.html文件在同一目录下，href写的是相对路径）

Front-end HTML&CSS study notes 2 (based on Shang Silicon Valley teaching video)

Guess you like