正文 

当前位置： 首页 > java > java框架

网页制作知多少

时光日记      2022-02-09     463

关键词：

网页制作

HTML

一、通用模板：

<!DOCTYPE html>

<html lang=”en”>

   <head>

       <meta  charset=”UTF-8”/>

       <title>文档标题</title>

       <link  rel="shortcut icon"  href="img\wujiaoxing.ico"/>        <!- -设置标签页图标- ->

       <link  rel=”stylesheet”   href=”url”/>        <!--外接样式表-->

   </head>

    <body>

                  <header  role=”banner”>

    <nav  role=”navigation”> 页眉  </nav>

</header>

                  <main  role=”main”> 

<article>

       <section>

<p>主要内容</p>

                             </section>

</article>

    </main>      

    <aside  role=”complementary” >附注栏的其他内容</aside>

                  <footer  role=”contentinfo”>页脚（如：版权）</footer> 

   </body>

</html>

 

二、网页三要素：

            1. 元素标签：

（1） 同行显示：

        <a> (链接标签) </a>

        <em>（斜体标签）</em>

        <strong>(粗体标签)</strong>

        <code> 标记代码</code>

（2） 换行显示：

        1. <h1> (标题1标签) </h1>

        2. <h2> (标题2标签) </h2>

        3. <article> (文章标签)</article>

        4. <p> (段落标签) </p>

                     5.<main></main>注:一个页面最多使用一次！不能放置header; footer ; aside; article中

        6. <header> </header>

        7. <footer> </footer>

        8. <hr> (分隔线标签) </hr>

        9. <div>容器标签换行是 <div> 固有的唯一格式表现</div>

        10. <section> 区块 </section>

（3） 未知：

        1.<img> (图像标签) </img>

        2.<font> (字体标签) </font>

        3.<b> (粗体标签) </b>

        4.<i> (斜体标签) </i>

        5.<u> (下划线标签) </u>

        6.<sup>(上标标签) </sup>

        7.<sub>(下标标签) </sub>

        8．<audio>   </audio>

        9.<video>    </video>

        10.<li> 列表</li>

        11.  <ol type=”a ” start=” 3”>

            <li>有序列表</li>

            <li>有序列表</li>

  <li>有序列表</li>

　　　　　　　　  </ol>

　　　　　　  12.<ul type=”disc/circle/square”>

　　　　　　　　   <li>无序列表</li>

　　　　　　　　   <li>无序列表</li>

　　　　　　　  　 <li>无序列表</li>

　　　　　　     </ul>

   　　　　   13．<ins>添加内容(表现为加下划线)</ins>

　　　　　　14.<del>删除内容（表现为加删除线）</del>

　　　　　　15.<cite>标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。

　　　　　　　</cite>

　　　　　　16. <figure>标签规定独立的流内容（图像、图表、照片、代码等等）。</figure>

　　　　2.属性:

                    <a>: href; title;

                    <img>: src; width; height; alt

        　 3. 值：

 

三、其他：

        4. 注释：

   如：<!-- 我是被注释内容，并且在浏览器中不会显示 --> 

        5.学习相关链接：

    网页转义符号HTML代码大全：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

         HTML 系列教程：http://www.w3school.com.cn/h.asp

  各类标签及其用法：http://www.w3school.com.cn/tags/tag_doctype.asp

        6．链接锚链接：链接到某一页面的特定区域。

 

CSS

   模板：

　　　　Selector(选择器){

                           Attribute(属性): value(值) ;

              }     //  各种元素。

              Color：#000000(黑色)/#ffffff(白色)

   注：单斜杆表示或者！

1.链接样式：

      a:link{

          color: blue;

      }       /*链接激活前的外观*/

      a:hover{

          color: orange;

　　　}      /*鼠标指向链接时的外观*/

      a:hover{

          color: red;

　　　}      /*激活链接后的外观*/

 

2.文本样式：

    字体：

       　   font-family: Geneva,Tahoma,sans-serif;        /*字体类型,三选一*/

    　　    　　font-style: italic/normal;              /*斜体和正体二选一*/

     　　  　　 font-weight: bolder/bold/normal/lighter;        *更粗/正常/更细/三选一*/

      　　 　　 font-size: 16px/1em;        /*字体大小，默认1em=16px*/

        　　　　line-height:16px        /*行高*/

    　 　　　  字间距：word-space:length(4px或其他);

　　  　　　  字偶距:  letter-space:length(4px或其他);

　　　　　　  添加缩进：text-indent: length(2em或其他);

　　　　

修改文本大小写:text-transform: uppercase(大)/lowercase(小)/none; 

　　　　  　　装饰文本：text-decoration: underline/overline/through/none;  (下划线/上划线/删除线/无)

        3.元素显示方式：display: block/inline/;    (换行/行内显示)

        4.元素可见性：visibility: visible/hidden;

        5.边框：border-style :dashed/solid/dotted ;   (虚线/实线/点划线)

border -width:

border -color:

border:2px solid red;

border-radius:length;  //边框圆角半径

  6.外/内边距：margin-top/-bottom:length;

                    Padding：length;

                    Padding-top/bottom/left/right:length;

       7.元素浮动：float:left/right/none;

       8.清除浮动：clear:left/right;

       9.处理溢出：overflow: visible/hidden/scroll/auto;

  10.修改指针形状：cursor: pointer/default/crosshair/move/wait/help;

       11.列表标记：

                        list-style-type:disc/circle/square….;

                        /*  

                            disc:圆点；circle：圆圈；square：方块；decimal：数字；

                        upper-alpha：大写字母。

    */

   12.有序列表：

                    <ol start=”2”>从2开始编号</ol>

                     List-style-position: inside/outside;

 

  13.fieldset(表单):

                    表单字段(type属性值)：text/email/password/url/submit/radio(单)/checkbook（复选）

                <input type=”text” placeholder=”提示信息”>

     单选框：

                            <p>

                        <input type="radio" id="tankzx" name="school" value="T"/>

                                 <label for="tankzx" >tk</label>

                             </p>

     复选框: 

                            <p>

    <input type="checkbox" id="tank" name="学校" value="TZ"/>

                                  <label for="tank" >tk</label>

                             </p>

     列表框：

                            <p>

                <label for="state">State（国家）：</label>

                                 <select id="state" name="state" size=” ”>

                                      <optgroup label=”xx”>      /*分组列表*/

                                           <option value="ch">China</option>

                                           <option value="usa">American</option>

                                      </optgroup>

                                      <option value="en">England<option>

                                  </select>

                            </p>

        14.表格:

                  <table>

                     <tr>                      //行标记

                          <th></th>      //表头标记

                          <td></td>       //单元格标记

                     </tr>    

 

                    <tr>                      

                          <td></td>     //单元格标记 

                          <td></td>       //单元格标记

                     </tr>    

              </table>

Javascript

1. 函数调用：

    直接调用  (functionname(形参))

    事件响应调用（onclick=”check()”）

      超链接调用 (<a href=”javascript:check()”)

 

css知多少（11）——position

1.引言　　本文将用一篇文章介绍position（定位），在学习position之前，我们应该去思考一个问题：什么情况下我们需要定位？如果没有定位将无法满足我们怎样的需求？我们要知道，被人类创造出来的每一个知识，都有它的用途... 查看详情

css知多少（10）——display（转）

1.引言　　网页的所有元素，除了“块”就是“流”，而且“流”都是包含在“块”里面的（最外层的body就是一个“块”）。在本系列一开始讲《浏览器默认样式》的时候，大家也都看到了浏览器默认样式中规定了html元素哪些... 查看详情

metaverse系列二3d引擎知多少

今天聊聊BIGANT中的G。这里的G是Game，也就是3D游戏引擎的意思，简称为3D引擎。3D引擎，很多人可能并不清楚这到底什么？听到"引擎"两个字，你可能首先会想到汽车引擎，是汽车提供动力的核心部件。如果没有引擎，汽车就只能... 查看详情

九种浏览器端缓存机制知多少（转）

浏览器缓存（BrowserCaching）是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体上加速网页展示给用户。浏览器端缓存的机制种类较多... 查看详情

事件总线知多少

ImplementinganeventbuswithRabbitMQforthedevelopmentortestenvironmentAbpEventBus  查看详情

事件总线知多少

ImplementinganeventbuswithRabbitMQforthedevelopmentortestenvironmentAbpEventBus  查看详情

unitofwork知多少(代码片段)

原文链接：https://www.cnblogs.com/sheng-jie/p/7416302.html1.引言Maintainsalistofobjectsaffectedbyabusinesstransactionandcoordinatesthewritingoutofchangesandtheresolutionofconcurrencyproblems.UnitofWork  查看详情

overflow知多少

本文地址: http://www.hicss.net/some-overflow-knowledge/最近在研究OOCSS，当打开template.css阅读第一行时，震惊了，第一眼居然没看懂。。。。。。以下就是OOCSS下的template.css第一行代码：12.body{overflow:hidden;_overflow:visible;_zoom:1;}.main{overflo 查看详情

产品开发知多少一

为什么要进行产品开发？1.市场需求使然，获取商业价值；2.公司战略需要，为公司的战略目标打基础；3.技术发展需求，做公司核心技术积累；开发产品依据？1.企业目标2.战略部署3.技术积累4.市场需求组织中谁来进行产品开发... 查看详情

ffmpeg知多少~~~

一、ffmpeg安装：​​https://jingyan.baidu.com/article/f7ff0bfcd64cea2e26bb1334.html​​ 二、ffmpeg视频处理（包括各种视频流处理~）：三、ffmpeg推流步骤：1）通过ffmpeg截取指定长度的视频流：ffmpeg-t10-irtsp://xxx:xxxxx1234@172.20.xx.xxx:55410s_out 查看详情

__attribute__你知多少(代码片段)

__ATTRIBUTE__你知多少？GNUC 的一大特色就是__attribute__ 机制。__attribute__ 可以设置函数属性（FunctionAttribute ）、变量属性（VariableAttribute ）和类型属性（TypeAttribute ）。__attribute__ 书写特征是：__attribu 查看详情

typeof知多少

昨天同事给我看了一道代码题，是关于typeof的，感觉挺有意思的，在这里分享给大家，顺便自己再对typeof总结总结。如有不对，请给予指出，共同进步。代码是这样的：<!DOCTYPEhtml><head><title>typeof</title><metahttp-... 查看详情

射频&天线设计-db知多少

《射频&天线设计-dB知多少》在调试射频输出功率时经常听到“相差多少dB”，刚入门的话听得一脸懵逼，当然这种通俗单位别人也懒得跟你解释。分贝（dB）是一个对数单位（logarithmicunit），最初用... 查看详情

射频&天线设计-db知多少

《射频&天线设计-dB知多少》在调试射频输出功率时经常听到“相差多少dB”，刚入门的话听得一脸懵逼，当然这种通俗单位别人也懒得跟你解释。分贝（dB）是一个对数单位（logarithmicunit），最初用... 查看详情

玩转springboot原理篇（核心注解知多少）(代码片段)

type=FilterType.CUSTOM,classes=TypeExcludeFilter.classtype=FilterType.CUSTOM,classes=AutoConfigurationExcludeFilter.classSpringBootApplicationSpringBootConfigurationComponentScanEnableAutoConfiguratio 查看详情

电磁屏蔽知多少？

原文来自公众号：工程师看海不管什么电子产品，EMC始终是其需要面对的问题，EMC全拼是ElectromagneticCompatibility即电磁兼容性，EMC分为EMS（electromagneticsusceptibility）电磁抗扰度和EMI（Electromagneticinterfere 查看详情

overflow知多少（转）

最近在研究OOCSS，当打开template.css阅读第一行时，震惊了，第一眼居然没看懂。。。。。。以下就是OOCSS下的template.css第一行代码：12.bodyoverflow:hidden;_overflow:visible;_zoom:1;.mainoverflow:hidden;_overflow:visible;_zoo 查看详情

css知多少——选择器的优先级（转）

1.引言　　上一节《css知多少（5）——选择器》最后提到，选择器类型过多将导致一些问题，是什么问题呢？咱们直接举例子说明。　　　　上图中，css中的两个选择器都是针对<span>的，而且两个设置的颜色不一样，这里的... 查看详情