一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

从零开始的html教程(2):了解基本的标签与元素

时间:2016-12-19 编辑:简简单单 来源:一聚教程网

一、html中的标签

上一课利用dreamweaver自动生成的页面的代码为:

无标题文档

“”””像这样方括号里框着英文与符号的玩意就叫做”标签”,又叫标记标签。

Html是由一堆标签组成的超文本标记语言。以上代码一共9个标签。

标签总是成对出现的,其中第一个字符为英文字母的标签叫开始标签,在同样的英文前加了”/”斜杠符号的叫结束标签。

二、html中的元素

开始标签与结束标签的本体与之间的内容叫元素。上节课生成的代码中,“无标题文档”是一个元素,有着开始标签与结束标签,标签之间的”无标题文档”是这个元素的文本。

元素中是可以嵌套其他的元素的。比如上述例子中,””元素中嵌套了”,,,”这四个子元素,””是它们的父元素,因为它们都被包在(嵌套在)””元素中。

三、上述例子中的标签都是什么意思呢?

1.

这个比较特别,不是html的标签。是用来声明文档类型的,必须要放在标签的前面。如果不用声明的话,浏览器会用”怪异模式(quirks mode)”进行渲染。

2.

用来定义文档的开头与结尾,可以理解成之间就是一个网页。

3.

顾名思义,就是网页的头部,可以修改网页的标题、添加css样式表和加载javascript脚本。

4.</strong></p><p> 用来定义网页的标题。</p><p><a href="https://img.111com.net/get_pic/upload/image/20161219202527.png" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111com.net/get_pic/upload/image/20161219202527.png" alt="" /></a></p><p> 网页上的标题就是的内容。</p><p><strong>5.<body></strong></p><p> 网页的主题,网页上用户可视的内容基本都是在这里添加修改。大家想在网页里添加一段文字的话,就得写在里。</p><p><strong>6.<meta></strong></p><p> 这里定义了网页使用UTF-8编码,用在元素里。(标签现在了解就够了)</p><p><span style="color:#E53333;font-size:14px;"><strong>四、如何在自己的网页里加入几段文字呢?</strong></span></p><p> 在这里介绍一个新的标签――<p>标签。</p><p> <P>是段落标签,每个<P>元素为一个段落,即使<p>元素中出现转行,浏览器中也只会显示出空格。</p><p> 不同的<P>元素之间自动空行。</p><p><strong>举个例子:</strong></p><p><strong>1.中间空了一个字符</strong></p><p><a href="https://img.111com.net/get_pic/upload/image/20161219201510.png" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111com.net/get_pic/upload/image/20161219201510.png" alt="" /></a></p><p><strong>2.第一个后面回车键转行</strong></p><p><a href="https://img.111com.net/get_pic/upload/image/20161219201518.png" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111com.net/get_pic/upload/image/20161219201518.png" alt="" /></a></p><p><strong>3.将“段落”放入新的</strong><strong>标签</strong></p><p><a href="https://img.111com.net/get_pic/upload/image/20161219201526.png" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111com.net/get_pic/upload/image/20161219201526.png" alt="" /></a></p><p> <p>元素内不管输入多少空格或者转行,显示出来的结果都始终在同一行里;而将想要另起一行的文字标上<p>标签就会实现自动转行。</p><p><span style="font-size:14px;color:#E53333;"><strong>五、试着随便编辑几段文字并预览一下网站的效果吧!</strong></span></p><p> 点击软件右下角的图片上标记的图标可以实时预览网页的效果。</p><p><a href="https://img.111com.net/get_pic/upload/image/20161219201615.png" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111com.net/get_pic/upload/image/20161219201615.png" alt="" /></a></p><p> 以上就是本次教程的内容了,简单介绍了下html里基本的定义和标签,并且能做出有简单文字的网页了。下次教程将教大家几个常用的标签来充实网站的内容!</p> </div> <div class="pages art-detail"> </div> <ul class="TurnPage"> <li class="TurnPage-left"> <p> <span>上一个:</span> <a href="https://www.111com.net/wy/96/125553.htm" class="maxWidth">从零开始的html教程(1):html是什么?怎么编辑一个网页呢?</a> </p> </li> <li class="TurnPage-right"> <p> <span>下一个:</span> <a href="https://www.111com.net/wy/96/125645.htm" class="maxWidth">从零开始的html教程(3):自定义网页的风格、认识属性</a> </p> </li> </ul> <div class="articles"> <div class="tit02"> <h4>相关文章</h4> </div> <ul> <li> <a target="_blank" href="https://www.111com.net/wy/228472.htm">HTML简单购物数量小程序代码展示</a> <span>10-31</span> </li> <li> <a target="_blank" href="https://www.111com.net/wy/228464.htm">html canvas实现弹幕功能</a> <span>10-31</span> </li> <li> <a target="_blank" href="https://www.111com.net/wy/228463.htm">HTML中空格表示的意义</a> <span>10-31</span> </li> <li> <a target="_blank" href="https://www.111com.net/wy/228462.htm">html area标签解读</a> <span>10-31</span> </li> <li> <a target="_blank" href="https://www.111com.net/wy/228461.htm">html使用表单标签实现注册页面代码展示</a> <span>10-31</span> </li> <li> <a target="_blank" href="https://www.111com.net/wy/228460.htm">使用HTML截图并保存为本地图片的代码展示</a> <span>10-31</span> </li> </ul> </div> </div> </div> </div> </div> <div class="hot-column"> <div class="cont"> <div class="tit"> <h4>热门栏目</h4> </div> <ul class="clearfix"> <li> <h6><a href="https://www.111com.net/phper/php.html" target="_blank">php教程</a></h6> <a href="https://www.111com.net/list-45/" target="_blank">php入门</a> <a href="https://www.111com.net/list-46/" target="_blank">php安全</a> <a href="https://www.111com.net/list-47/" target="_blank">php安装</a> <a href="https://www.111com.net/list-48/" target="_blank">php常用代码</a> <a href="https://www.111com.net/list-49/" target="_blank">php高级应用</a> </li> <li> <h6><a href="https://www.111com.net/net/net.html" target="_blank">asp.net教程</a></h6> <a href="https://www.111com.net/list-78/" target="_blank">基础入门</a> <a href="https://www.111com.net/list-79/" target="_blank">.Net开发</a> <a href="https://www.111com.net/list-80/" target="_blank">C语言</a> <a href="https://www.111com.net/list-81/" target="_blank">VB.Net语言</a> <a href="https://www.111com.net/list-82/" target="_blank">WebService</a> </li> <li> <h6><a href="https://www.111com.net/sj/index.html" target="_blank">手机开发</a></h6> <a href="https://www.111com.net/list-208/" target="_blank">安卓教程</a> <a href="https://www.111com.net/list-209/" target="_blank">ios7教程</a> <a href="https://www.111com.net/list-210/" target="_blank">Windows Phone</a> <a href="https://www.111com.net/list-211/" target="_blank">Windows Mobile</a> <a href="https://www.111com.net/list-212/" target="_blank">手机常见问题</a> </li> <li> <h6><a href="https://www.111com.net/cssdiv/css.html" target="_blank">css教程</a></h6> <a href="https://www.111com.net/list-99/" target="_blank">CSS入门</a> <a href="https://www.111com.net/list-100/" target="_blank">常用代码</a> <a href="https://www.111com.net/list-101/" target="_blank">经典案例</a> <a href="https://www.111com.net/list-102/" target="_blank">样式布局</a> <a href="https://www.111com.net/list-103/" target="_blank">高级应用</a> </li> <li> <h6><a href="https://www.111com.net/wy/yw.html" target="_blank">网页制作</a></h6> <a href="https://www.111com.net/list-136/" target="_blank">设计基础</a> <a href="https://www.111com.net/list-137/" target="_blank">Dreamweaver</a> <a href="https://www.111com.net/list-138/" target="_blank">Frontpage</a> <a href="https://www.111com.net/list-139/" target="_blank">js教程</a> <a href="https://www.111com.net/list-140/" target="_blank">XNL/XSLT</a> </li> <li> <h6><a href="https://www.111com.net/office/index.html" target="_blank">办公数码</a></h6> <a href="https://www.111com.net/list-236/" target="_blank">word</a> <a href="https://www.111com.net/list-237/" target="_blank">excel</a> <a href="https://www.111com.net/list-238/" target="_blank">powerpoint</a> <a href="https://www.111com.net/list-239/" target="_blank">金山WPS</a> <a href="https://www.111com.net/list-240/" target="_blank">电脑新手</a> </li> <li> <h6><a href="https://www.111com.net/jsp/jsp.html" target="_blank">jsp教程</a></h6> <a href="https://www.111com.net/list-68/" target="_blank">Application与Applet</a> <a href="https://www.111com.net/list-69/" target="_blank">J2EE/EJB/服务器</a> <a href="https://www.111com.net/list-70/" target="_blank">J2ME开发</a> <a href="https://www.111com.net/list-71/" target="_blank">Java基础</a> <a href="https://www.111com.net/list-72/" target="_blank">Java技巧及代码</a> </li> </ul> </div> </div> <div class="footer"> <div class="cont"> <p> <a href="https://www.111com.net/" target="_self">一聚教程网</a>| <a href="https://www.111com.net/us/us.html" class="about" target="_self">关于我们</a>| <a href="https://www.111com.net/us/me.html" class="contact" target="_self">联系我们</a>| <a href="https://www.111com.net/us/ads.html" class="gg_contact" target="_self">广告合作</a>| <a href="https://www.111com.net/us/link.html" class="friend_link" target="_self">友情链接</a>| <a href="https://www.111com.net/us/bcinfo.html" class="copyright_notice" target="_self">版权声明</a> </p> <p> <span>copyRight@2007-2024 www.111COM.NET AII Right Reserved <a href="https://beian.miit.gov.cn/" target="_blank" class="beian">苏ICP备17065847号-2</a> </span> </p> <p> <span> 网站内容来自网络整理或网友投稿如有侵权行为请邮件:yijucomnet@163.com 我们24小时内处理 </span> </p> </div> </div> <script src="https://assets.111com.net/js/stat.js?v=2024022101"></script> <script src="https://api.111com.net/api/stat/hits?type=article&id=125588"></script> </body> </html>