一、HTML和网站基础知识

1、HTML简介

HTML(hypertext markup language,超文本标记语言):是一种用来制作超文本文档的简单标记语言。用于描述网页的格式设计（在网页上定义一个标题、文本或表格等）和它与万维网上其他页面的连接信息。

2、网页的分类

分为静态网页和动态网页

（1）静态网页：纯HTML格式网页，仅能提供浏览，无法与网站进行互动。在静态网页中，整个网页的主要结构与网页的显示控制必须利用html实现。静态页的扩展名一般问.htm、.html、.shtml、.xml。

静态网页的执行过程：

浏览器向网络中的服务器发出请求，指向某个静态网页服务器接收到请求后，传输给浏览器文本文件浏览器接收到服务器传来的文件后，解析HTML标签，将结果显示出来。

（2）动态网页：网页的内容可以根据某种条件的改变而自动改变。采用动态技术的网页。动态网页的扩展名为.asp、.jsp、.php、.perl、.cgi等扩展名，并且在动态网页网址中有一个标志性的符号“？”

3、标记

HTML用于描述功能的符号。标记在使用时必须用尖括号括起来。浏览器会对尖括号里面的标记进行解释。html常用的主要标记有、、、<body>。</p> <p>标记分为单标记和双标记：</p> <p>（1）单标记：只需在尖括号中输入标记名即可，一种单标记表示一种功能，没有范围之分。</p> <p>格式：<标记></p> <p>如换行标记：<br></p> <p>（2）双标记：标记有头有尾，前面标记与后面标识保持一致，后面标记有斜杠。</p> <p>格式：<标记>内容</标记></p> <p>如段落标记;<p> </p></p> <p>4、HTML标记构成</p> <p><html></html>里面包含头部<head>和内容体<body>。</p> <p>5、网页布局的技术</p> <p>（1）表格布局技术：表格布局在过去比较普遍，就是将各种需要的额布局文本、图像素材等放到无边框的表格中，优点是不用担心不同对象之间的影响，缺点是降低网页下载速度。</p> <p>（2）CSS（层叠样式表）技术：又称为DIV+CSS布局技术，可以精确定位文本和图片，将数据和格式分开，使网页的数据量大大减少。</p> <p>二、常用HTML标记和格式</p> <p>1、设置正文标题</p> <p>格式：<h#>主题文字</h#></p> <p>#是标题字号1-6，数字越大字号越小。</p> <p>2、设置段落</p> <p>（1）段落标记</p> <p>格式：<p>这里表示段落</p></p> <p>段落之间会空一行</p> <p>（2）段落中的空格</p> <p>格式：“ ”</p> <p>（3）强制换行</p> <p>格式：<br></p> <p>3、给代码添加注释</p> <p>格式：<!--这里放注释--></p> <p>4、文字的修饰</p> <p>粗体格式：<b>粗体，这里显示的是粗体</b></p> <p>斜体格式：<i>斜体，这里显示的是斜体</i></p> <p>下划线：<u>下划线</u></p> <p>删除线：<s>删除线</s></p> <p>上标：<sup>上标</sup></p> <p>下标：<sub>下标</sub></p> <p>三、字体标记</p> <p>1、设置字体大小</p> <p>格式：<font size="1">要放的文字</font></p> <p>关键字size用来表示大小，从1-7的任意一个数字，数字越大，字体也就越大。</p> <p>2、设置字体颜色</p> <p>格式：<font color="red">要放的文字</font></p> <p>color后可以接颜色的单词，也可以接RGB颜色值，如color="#cccccc";i</p> <p>3、字体分为逻辑字体和物理字体</p> <p>物理字体：</p> <p>逻辑字体：</p> <p>四、文字布局</p> <p>1、行的控制</p> <p>（1）换行控制</p> <p>注意换行<p>和强制换行<br>的区别</p> <p><p>换行中间会空一行，<br>不会空一行</p> <p>实例：</p> <p>文字1<p>文字2<br></p> <p>文字3<br>文字4</p> <p>测试效果：</p> <p>（2）不换行控制</p> <p>格式：<nobr>添加文字</nobr></p> <p>该标记中的文字，不会换行，在页面中一行里一直显示下去。</p> <p>2、文字对齐</p> <p>语法：align="#"</p> <p>#可以为left、right、center。</p> <p>align需要配合<p></p>等使用。</p> <p>如文字右对齐：</p> <p><p align="right">这里添加文字</p></p> <p>cener可不用align关键字，进行居中处理</p> <p><center>这里添加文字</center></p> <p>3、列表</p> <p>列表分为有序列表和无序列表。有序列表前时有序号的数字；无序列表前是圆圈。</p> <p>（1）无序列表</p> <p>语法：</p> <p><ul></p> <p><li>表项一</li></p> <p><li>表项二</li></p> <p><li>表项三</li></p> <p></ul></p> <p>(2)有序列表</p> <p><ol></p> <p><li>表项一</li></p> <p><li>表项二</li></p> <p><li>表项三</li></p> <p></ol></p> <p>4、 制作滚动文字</p> <p>（1）设置文字滚动</p> <p>默认格式：<marquee>添加文字</marquee></p> <p>默认从右到左，循环滚动。</p> <p>（2）设置文字滚动方向</p> <p>direction属性设置内容的滚动方向，属性值有left、right、up、down。</p> <p><marquee direction>添加文字</marquee></p> <p>（3）设置文字滚动的速度和形式</p> <p>五、图像和链接</p> <p>1、图像的基本语法</p> <p>（1）在网页中插入图像</p> <p>格式：<img src="cd.jpg"></p> <p>（2）图像无法显示时的提示信息</p> <p>格式：<img src="cd.jpg" alt="图片无法正常显示时显示的文字"></p> <p>（3）控制图像的大小</p> <p>格式：<img src="cd.jpg" width="400px" height="400px"></p> <p>2、图像和文字对齐</p> <p>格式：<img src="cd.jpg" align="#"></p> <p>#为图片与文字对齐的属性设置，可选top right botton left middle</p> <p>3、图像的边框</p> <p><img src="cd.jpg" border="#px"></p> <p>#为边框像素大小</p> <p>4、文字链接</p> <p>（1）简单的文字链接</p> <p>给文本上添加超链接，以达到点击文字出现跳转网页的效果。</p> <p>格式:</p> <p><a href="超链接网址">所要显示的文字</a></p> <p>如：</p> <p><a href="http://www.baidu.com">百度一下</a></p> <p>（2）超链接网址的打开方式</p> <p><a href="超链接网址" target="#">所要显示的文字</a></p> <p>#设置所链接的网页在浏览器中的打开方式</p> <p>（3）链接的注释</p> <p>当鼠标指针在文字上面，显示链接的注释</p> <p><a href="超链接网址" title="显示内容">所要显示的文字</a></p> <p>5、图片链接</p> <p>图片链接语法</p> <p><a href="超链接网址" ><img src="cd.jpg"></a></p> <p>6、锚点链接</p> <p>所谓的锚点链接，就是点击某一个超链接，它就会跳到当前页面的某一部分。</p> <p>跳转到锚点设置：</p> <p><a href="#锚点名">点击到锚点链接</a></p> <p>锚点命名格式：<a name="锚点名">文章中的文字</a></p> <p>如：</p> <p><a href="#爱好">爱好</a> <!--点击锚点链接--></p> <p><a name="爱好">我的兴趣爱好是打球</a><!--锚点链接--></p> <p>点击蓝色的“爱好”</p> <p>即可跳转到本页中锚点处</p> <p>7、邮电的地址链接</p> <p>点击邮件连接自动跳转处邮箱发送页</p> <p><a href="mailto:234333343@qq.com">本人邮箱</a></p> </p> </div> </div> </div> </div> </div> </div> </section> <!-- End single section --> <!-- footer ================================================== --> <footer class="no-footer-widgets"> <div class="container"> <div class="inner-footer"> Copyright © 2088 2023年女足世界杯_乒乓世界杯 - xzkldl.com All Rights Reserved. <div style="text-align: center;"> 友情链接 <script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node91.aizhantj.com:21233/tjjs/?k=c1aj82uodhz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script> </div> </div> </div> </footer> <!-- End footer --> </div> <!-- End Container --> <a href="#" class="trx_addons_scroll_to_top trx_addons_icon-up" title="Scroll to top"></a> <script src="/static/js/jquery.magnific-popup.min.js" id="magnific-popup-js"></script> <script src="/static/js/comment-reply.min.js" id="comment-reply-js" data-wp-strategy="async"></script> <script src="/static/js/imagesloaded.min.js" id="imagesloaded-js"></script> <script src="/static/js/masonry.min.js" id="masonry-js"></script> <script src="/static/js/jquery.isotope.min.js" id="isotope-js"></script> <script src="/static/js/bootstrap.min.js" id="bootstrap-js"></script> <script src="/static/js/jquery.flexslider.js" id="flexslider-js"></script> <script src="/static/js/script.js" id="rovlex-script-js"></script> <script src="/static/js/lazyload.js" id="rovlex-lazyload-js"></script> <script src="/static/js/__scripts.js" id="trx_addons-js"></script> </body> </html>