WEB前端学习笔记--HEAD相关标签应用

*发表于 2022-5-2 13:00:35* · 发表于 2022-5-2 13:00:35

1.缩略图的显示问题，不要以为缩略图是设置了宽高的，是缩略图。比如一张300kb 500*500的原图，用户请求web服务器后，只需要100*100的缩略图就可以显示在页面上。但是还是会下载500*500的原图，加载速度会很慢。正确的做法是使用图像处理技术将图像压缩成100*100的大小后显示。

2.图片格式转换，不要以为简单的把.bmp图片改成.jpg图片就是改变图片格式。例如，如果将一张大小为330kb的bmp格式的图片后缀名改成.jpg，实际上改变后的图片大小也是330kb。微软操作系统会识别图片是什么格式，如果只是改变一个后缀名，微软操作系统会智能识别图片是什么格式。正确的做法是：将此图片另存为***格式

3.引入一个非常喜欢的页面分组属性fieldset，将控件划分为一个区域。代码如下，效果如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Refresh" content="6;url=meta1.htm" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Content-Type" content="charset=utf-8" />
</head>
<body>
<fieldset>
         <legend>你懂的网站链接跳转</legend>
         还有<b id='second' style='color:Red'>6</b>秒将跳转到激情四射的网站
</fieldset>
</body>
</html>
<script type="text/javascript">
function JsetTimeOut() {
      var i = document.getElementById('second').innerHTML;
      i--;
      document.getElementById('second').innerHTML = i;
}
setInterval('JsetTimeOut()', 1000);
</script>

　效果：

4.根据以上代码，说说里面的head头信息的meta标签。

l<meta>标签，<meta>有指定name和指定http-equiv两种用法，<meta name="名字" content="值" />、<meta http-equiv="名字" content="值" />两种用法。
?<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />指定网页编码
?<meta http-equiv="Refresh" content="3" /> 三秒钟后刷新此网页。
?<meta http-equiv="Refresh" content="3;url=http://www.rupeng.com" /> 三秒钟后重定向到新网页。发帖成功后提示“发帖成功，即将转向帖子查看页面”。
<meta http-equiv="Cache-Control" content="no-cache" /> 禁止浏览器缓存页面

5.说说层内文字连续英文不换行的问题，用css里这个属性：word-break:break-all

好了，就说这些啦。

(1. There is a problem with the display of thumbnails. Don't think that the thumbnails are set with width and height. They are thumbnails. For example, for a 300KB 500 * 500 original image, after the user requests the web server, only 100 * 100 thumbnails can be displayed on the page. However, the original image of 500 * 500 will still be downloaded, and the loading speed will be very slow. The correct way is to use image processing technology to compress the image into a size of 100 * 100 and display it.
2. Don't think it's easy to convert the image format Bmp picture changed to Jpg image is to change the image format. For example, if you change the suffix of a 330KB BMP image to Jpg, in fact, the changed picture size is also 330KB. The Microsoft operating system will recognize the format of the picture. If only a suffix is changed, the Microsoft operating system will intelligently recognize the format of the picture. The correct way is to save this picture as * * * format
3. Introduce a favorite page grouping property fieldset to divide the control into a region. The code is as follows, and the effect is as follows.
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<title></title>
<meta http-equiv="Refresh" content="6;url=meta1.htm" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Content-Type" content="charset=utf-8" />
</head>
<body>
<fieldset>
< legend > website links you know jump to < / legend >
There are also < B id ='second 'style ='color: Red' > 6 < / b > seconds to jump to passionate websites
</fieldset>
</body>
</html>
<script type="text/javascript">
function JsetTimeOut() {
var i = document. getElementById('second'). innerHTML;
i--;
document. getElementById('second'). innerHTML = i;
}
setInterval('JsetTimeOut()', 1000);
</script>
effect:
4. According to the above code, talk about the meta tag of head header information.
L < meta > tag, < meta > can be used to specify name and HTTP equiv, < meta name = "name" content = "value" / >, < meta http equiv = "name" content = "value" / >.
?< Meta http equiv = "content type" content = "text / HTML; charset = UTF-8" / > specify page code
?< Meta http equiv = "Refresh" content = "3" / > refresh this page in three seconds.
?< meta http-equiv="Refresh" content="3;url= http://www.rupeng.com "/ > redirect to the new web page in three seconds. After posting successfully, you will be prompted with" posting successfully, about to turn to the post view page ".
< meta http equiv = "cache control" content = "no cache" / > prohibit the browser from caching pages
5. Let's talk about the problem of continuous English line breaking in the layer. Use the attribute in CSS: word break: break all
Well, that's all.
)

[软件设计/软件工程] WEB前端学习笔记--HEAD相关标签应用