html代码的使用方法有哪些？

Posted 2023-03-31

我有格式为html的代码，要把他放到博客里，然后显示出为“图片+文字”的格式，请问要怎么弄

　一、基本框架
　　如同人一样，网页也包括了“头部”和“身体”，

　　＜head＞标记内包含着诸如网页标题、语言编码、网页描述等基本信息，而平时我们真正见到的网页内容均放在＜body＞标记内。现在先介绍一下＜head＞里的基本信息。

　　网页标题(标记格式为＜title＞＜/title＞)

　　创建网页标题文字：＜title＞标题＜/title＞ //此处书写的文字会显示在IE的标题栏上。

　　网页文档信息(标记格式为＜meta＞)

　　描述网页内容类型：＜meta http-equiv="Content-Type" content="text/html; charset=gb2312"＞ //该页面为TXT文本或HTML格式，语言编码方式为GB2312(即简体中文)。

　　描述网页的关键字信息：＜meta name="keywords" content="这里是关键字"＞

　　对网页的详细描述：＜meta name="description" content="这里是对该网页的介绍"＞

　　刷新网页：＜meta http-equiv="refresh" content="5;URL=xxx.htm"＞ //5秒种后刷新，并链接到xxx.htm。

　　二、组成要素
　　无论网页如何千变万化，构成一个网页内容的最基本要素大体只有五种，即文字、图片、表格、超链接和表单控件，所以下面将围绕着这五个要素逐一列举介绍。

　　文字(标记格式为＜font＞＜/font＞)

　　指定文字字体：＜font face="宋体"＞宋体文字＜/font＞

　　指定文字大小：＜font size="3"＞3号文字＜/font＞

　　指定文字颜色：＜font color="#FF0000"＞红色文字＜/font＞ //网页颜色采用16位编码，因此#FF0000表现为红色。大家可以查阅相关资料了解其他颜色的编码。

　　图片(标记格式为＜img＞)

　　＜img src="images/pic.jpg" width="400" height="300" border="2" align="center"＞// src指定为路径地址，width为宽度，height为高度，border为边框大小，align为横向位置。

　　表格(标记格式为＜table＞＜tr＞＜td＞＜/td＞＜/tr＞＜/table＞)

　　＜table width="400" height="300" border="1" align="center" cellpadding="2" cellspacing="2" bgcolor="#FF0000"＞＜tr＞＜td＞此处添加文字或图片等＜/td＞＜/tr＞＜/table＞// width、height、border、align与以上的例子作用一样，cellpadding为边框与单元格的间距，cellspacing为单元格之间的间距，bgcolor为表格背景色。

　　以上所介绍的元素都是只存在当前页中，而网页超链接的出现大大改变了人们的浏览习惯，可根据自己喜好，点击到相关链接查看网页信息。

　　超链接(标记格式为＜a＞＜/a＞)

　　＜a href="xxx.htm" title="提示文字"＞链接文字或图片＜/a＞ //href为被点击后的链接页，title为鼠标悬停在链接文字或图片上后出现的提示文字。

　　表单控件(标记符号为＜input＞、＜textarea＞＜/textarea＞、＜select＞＜/select＞)

　　表单控件实现了人与网页的交互，像大家常去的论坛、购物站点等都有它的“身影”。

　　文本框：＜input type="text" value="这是文本框"＞ //value为该控件的值，以下每个表单控件均可设定，不设默认为空

　　密码框：＜input type="password"＞

　　单选框：＜input type="radio"＞

　　复选框：＜input type="check"＞

　　提交按钮：＜input type="submit"＞

　　重置按钮：＜input type="reset"＞

　　隐藏区域：＜input type="hidden"＞

　　文本域：＜textarea rows="6" cols="30"＞＜/textarea＞ //rows为行数，cols为宽度

　　列表框：＜select＞＜option＞项目1＜option＞项目2＜option＞项目3＜/select＞

　　编后：学习HTML的目的不是为了要用它来编写网页，因为利用很多软件的编辑功能就可以省掉一些编程的麻烦。最重要的是本文介绍了页面里最基本的元素，了解这些知识后可以分析网页的结构，学习高手们所使用的特殊效果。当然HTML代码的内容远不止这些，想要在网页设计方面发展的朋友学好它是非常必要的。 参考技术A 博客的编辑器中有源代码这一项，先将编辑器切换到源代码这一项，然后粘贴这些带有html的代码，再发布即可。本回答被提问者采纳 参考技术B 粘贴到博客发表的HTML代码里。 参考技术C 给你一个链接http://www.w3school.com.cn/tags/tag_output.asp，可以很好的学会使用html 参考技术D 那要看你的博客支不支持自由加代码了。 第5个回答  推荐于2016-11-09 一、DIV代码语法 - TOP

DIV代码是放入小于与大于符号内，即“<div>”。
DIV是一对闭合标签，即“<div>”开始，“</div>”结束的盒子标签。
语法结构：
<div>我是内容</div>
说明：div代码有开始就要必须有闭合。
使用“<div>”开始，“</div>”闭合。
二、DIV嵌套DIV - TOP

div标签内可以嵌套无限级DIV。
<div>单独DIV</div>

<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
以上代码，单独div代码也可以，DIV内嵌套DIV也是可以的。DIV嵌套div非常普遍的布局，也是不可避免的，常见DIV+CSS布局大框架DIV里内就嵌套若干DIV盒子，若干DIV盒子再嵌套更下的DIV盒子，实现各种各样网页布局。
我们把最外层的DIV比作一个房间，而房间里有装物品各种大小盒子，大小盒子里还可以装小盒子，而这些大大小小盒子我们可以看做DIV，所以从空间想象来理解这个嵌套是允许的这样就比较好理解。
三、DIV布局结构 - TOP

一般DIV用于布局网页结构，比如上下结构、左右结构、更复杂综合的结构我们使用DIV来布局（DIVCSS5在线VIP教程也提供有基本结构布局图文教程）。除了使用DIV布局大结构，小结构而外，对应设置各种各样CSS样式即可实现各式各样漂亮美工布局。
四、div中style使用css代码 - TOP

div中可以直接写CSS样式代码，只需要DIV代码（标签）中使用style属性即可直接写CSS样式。
案例：
1、DIV代码：
<div style="color:#F00;border:1px solid #000;width:300px;height:100px">你好 DIVCSS5</div> 第6个回答  2015-11-09 这一言两语说不清楚啊，你可以先去W3CSCHOOL看看基本HTML语法。 第7个回答  2015-11-17 给你推荐个学习网站，多参考下别人的成品网站 。多看书 ，多练习。加油。
http://www.w3school.com.cn/

webpack体积怎么优化？有哪些方法？

1)去掉不必要的插件

开发环境和生产环境使用同一个webpack配置文件，导致生产环境打包的js文件包含很多没必要的插件(如：NoEmitOnErrorsPlugin)

2)提取第三方库

第三方库和源代码在一起打包体积会很大

CommonsChunkPlugin 提取代码中公共模块，然后将公共模块打包到一个独立的文件中，以便在其他的入口和模块中使用。

3)代码压缩

内置插件UglifyPlugin,加入这个插件编译速度会变慢，所以一般只在生产环境启用

4)代码分割(webpack的code split配合router)

·webpack的code spliting特性可以将代码库分割成按需加载的块(chunks)

·AMD/commmonJS指定不同的方法去做代码按需加载，他们支持代码分割并充当分割点

·不支持es6的模块系统

5)设置缓存

对于静态文件，第一次获取之后，文件内容没有改变的话直接读取缓存，但是如果缓存时间过长文件要更新的话可以打包后的文件名加入hash值。