六·认识标签

作者: 饥人谷_小侯 | 来源:发表于2017-10-09 22:59 被阅读0次
  • <body>:在网页上要展示出来的页面内容一定要放在body标签中。
  • <p>:如果想在网页上显示文章,这时就需要<p>标签了,把文章的段落放到<p>标签中。<p>标签的默认样式,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来删除或改变它。语法:<p>段落文本</p>
  • <hx>:使用<hx>标签来制作文章的标题。标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减,<h1>是最高的等级。语法:
    **<hx>**标题文本</hx>。 因为h1标签在网页中比较重要,所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如:<h1>腾讯网</h1>
  • <strong>、<em>:如果想在一段话中特别强调某几个文字,这时候就可以用到<em>或<strong>标签。但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。语法:<em>需要强调的文本</em> <strong>需要强调的文本</strong> 。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。<em>的内容在浏览中显示为斜体,<strong>显示为加粗。如果不喜欢这种样式,没有关系,以后可以使用css样式去改变它。
  • <span>:标签是没有语义的,它的作用就是为了设置单独的样式用的。语法:<span>文本</span>
  • <q>:你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q>标签是你所需要的。语法:<q>引用文本</q>。注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。
  • <blockquote>:<blockquote>的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。语法:<blockquote>引用文本</blockquote>。浏览器对<blockquote>标签的解析是缩进样式。
  • <br/>:怎么可以让每一句诗词后面加入一个折行呢?那就可以用到<br />标签了,在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车。语法:xhtml1.0写法:<br />。html4.01写法:<br>。现在一般使用 xhtml1.0 的版本的写法(其它标签也是),这种版本比较规范。<br />标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有<br />、<hr />和<img />。
  • <hr>:在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。语法:html4.01版本: <hr>,xhtml1.0版本: <hr />。<hr />标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。<hr />标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改。现在一般使用 xhtml1.0 的版本(其它标签也是),这种版本比较规范。
  • <address>:一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。语法:<address>联系地址信息</address>。在浏览器上显示的样式为斜体,如果不喜欢斜体,当然可以,可以在后面的课程中使用 css 样式来修改它<address>标签的默认样式。
  • <code>:在介绍语言技术的网站中,避免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>标签了。注意:在文章中一般如果要插入多行代码时不能使用<code>标签了。语法:<code>代码语言</code>
  • <pre>:在上节中介绍加入一行代码的标签为<code>,但是在大多数情况下是需要加入大段代码的,这时候就需要标签<pre>。语法:
    <pre>语言代码段</pre>
  • <ul><li>:在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表、图片列表。这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。语法:
<ul>
    <li>信息</li>
    <li>信息</li>
    <li>信息</li>
    ......
</ul>
  • <ol><li>:如果想在网页中展示有前后顺序的信息列表,这类信息展示就可以使用<ol>标签来制作有序列表来展示。语法:
<ol>
    <li>信息</li>
    <li>信息</li>
    <li>信息</li>
    ......
</ol>

每项<li>前都自带一个序号,序号默认从1开始。

  • div在排版中的作用:在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。语法:<div>…</div>
    确定逻辑部分
    什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用<div>标签作为容器。
  • 给div命名,使逻辑更加清晰:我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为<div>提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的。语法:<div id="版块名称">…</div>
  • <table>:有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。
    创建表格的四个元素
    table、tbody、tr、th、td
    1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。
    2、<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)
    3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
    4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。
    5、<th>…</th>:表格的头部的一个单元格,表格表头。
    6、表格中列的个数,取决于一行中数据单元格的个数。
    举例
<table>
  <tbody>
    <tr>
      <th>班级</th>
      <th>学生数</th>
      <th>平均成绩</th>
    </tr>
    <tr>
      <td>一班</td>
      <td>30</td>
      <td>89</td>
    </tr>
    <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
    </tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
  </tbody>
</table>

总结
总结:
1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的。
2、表头,也就是th标签中的文本默认为粗体并且居中显示。

  • <caption>为表格添加标题和摘要
    摘要
    摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。语法:<table summary="表格简介文本">
    标题
    用以描述表格内容,标题的显示位置:表格上方。
    语法:
<table>
    <caption>标题文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
…
</table>
  • <a>:
    使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。语法:<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
    title属性:title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)。
    在新建浏览器窗口中打开链接:<a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。如下代码:<a href="目标网址" target="_blank">click here!</a>
    使用mailto在网页中链接Email地址:<a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解,请看详细图示:

    注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。点击链接会打开电子邮件应用,并自动填写收件人等设置好的信息。
  • <img>:在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img>标签来插入图片。语法:![](图片地址)
    详解
    讲解:
    (1)src:标识图像的位置;
    (2)alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
    (3)title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
    (4)图像可以是GIF,PNG,JPEG格式的图像文件。

相关文章

  • 六·认识标签

    :在网页上要展示出来的页面内容一定要放在body标签中。 :如果想在网页上显示文章,这时就需要 标签了,把文章的段...

  • Python小白学习进行时---HTML标签(2018-7-09

    一、认识网页开发 二、文本标签 三、列表标签 四、图片和超链接 五、表格标签 六、复杂的表格 ==========...

  • day_021 web基础2

    一、input 二、表单标签 三、空白标签 四、认识css 五、css选择器 六、伪类选择器

  • day22-HTML和CSS

    一、标杆标签 二、下拉菜单 三、空白标签 四、认识CSS 五、CSS选择器 六、伪类选择器

  • 认识Head标签

    下面这些标签可用在 head 部分: 标签:在 和 标签之间的文字内容是网页的标题信息,它会出现在...</p></li><li id="r6"><a href="/user/jefiuttx.html"><img src="https://img.haomeiwen.com/is6733282/4a90da67e341b61c.png" width="80"></a><h3><a href="/subject/uxcnfftx.html">认识body标签</a></h3><p>文章标题标签<hx> 标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四...</p></li><li id="r7"><a href="/user/kywfrttx.html"><img src="https://img.haomeiwen.com/ud/5-33d2da32c552b8be9a0548c7a4576607.jpg" width="80"></a><h3><a href="/subject/bfcepttx.html">认识Meta标签</a></h3><p>1. meta标签的组成 meta标签共有两个属性,它们分别是http-equiv属性和name属性 1. nam...</p></li><li id="r8"><a href="/user/omqdettx.html"><img src="https://img.haomeiwen.com/ud/3-9a2bcc21a5d89e21dafc73b39dc5f582.jpg" width="80"></a><h3><a href="/subject/dpzhxxtx.html">认识head标签</a></h3><p>首先,我先讲明head标签常见内容 ... ... ... 其次各标签不同用法 1.title用于显示网页的...</p></li><li id="r9"><a href="/user/hkhfcttx.html"><img src="https://img.haomeiwen.com/is1866597/c9e19afbf0742edb.jpg" width="80"></a><h3><a href="/subject/ybamdttx.html">认识html标签</a></h3><p>让我们通过一个网页的学习,来对html标签有一个初步理解。平常大家说的上网就是浏览各种各式各样的网页,这些网页都是...</p></li><li id="r10"><a href="/user/hkhfcttx.html"><img src="https://img.haomeiwen.com/ud/7-0993d41a595d6ab6ef17b19496eb2f21.jpg" width="80"></a><h3><a href="/subject/kzamdttx.html">认识head标签</a></h3><p>文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 ...</p></li></ul></div></div><div id="comments"><h2>网友评论</h2><ul></ul></div><ul><li><a href="/c/owtytttx.html">饥人谷技术博客</a></li></ul><div class="article_by"><div class="bytitle"><p>本文标题:<font color="#666">六·认识标签</font></p><p>本文链接:<font color="#666">https://www.haomeiwen.com/subject/cpihyxtx.html</font></p></div></div></div><div class="meiwen-left fl mb"><div class="title ht"><h3>延伸阅读</h3><div class="share fr" id="bdshare"></div><i class="lt"></i><i class="rt"></i></div><div class="related"><ul class="related-list"><li><a class="meiwen" href="/mw/lbyctttx.html">那年盛夏诗歌</a></li><li><a class="meiwen" href="/sy/kbyctttx.html">环境监察队工作总结范文</a></li><li><a class="meiwen" href="/sy/hbyctttx.html">优秀教师学习心得范文</a></li><li><a class="meiwen" href="/sy/cbyctttx.html">华胥引的读后感300字</a></li><li><a class="meiwen" href="/yw/qbyctttx.html">《Its red》教学反思范文</a></li><li><a class="meiwen" href="/sy/fbyctttx.html">农资购销的合同范本</a></li><li><a class="meiwen" href="/sy/xbyctttx.html">竞选中队委优秀演讲稿</a></li><li><a class="meiwen" href="/yw/tbyctttx.html">辞金蹈海的成语解释</a></li><li><a class="meiwen" href="/ja/zvyctttx.html">《世纪宝鼎》公开课教案设计</a></li></ul></div><div class="picture" ><ul class="picture-list"><li><a class="meiwen" href="/article/69641.html"><img class="lazy" data-original="/uploads/allimg/1611/1-1611292156350-L.jpg" width="150" height="120" alt="因为爱你,所以牵挂"/><span>因为爱你,所以牵挂</span></a></li><li><a class="meiwen" href="/article/84632.html"><img class="lazy" data-original="/uploads/userup/2800/14V4C648-O08.jpg" width="150" height="120" alt="今生今世红尘醉——美到心碎的古诗词"/><span>今生今世红尘醉——美到</span></a></li><li><a class="meiwen" href="/article/53482.html"><img class="lazy" data-original="/uploads/allimg/1609/1-160ZPU1030-L.jpg" width="150" height="120" alt="一个90后的内心独白"/><span>一个90后的内心独白</span></a></li><li><a class="meiwen" href="/article/3639.html"><img class="lazy" data-original="/uploads/userup/1159/1432YGR-9294.jpg" width="150" height="120" alt="致已逝去的高中年华"/><span>致已逝去的高中年华</span></a></li></ul></div></div><div class="meiwen-left fl mb"><div id="pinglun"><div id="SOHUCS"></div></div></div><div class="meiwen-left fl"><div class="title ht"><h3>深度阅读</h3><ul class="list"><li><font color="#A2B088">您也可以注册成为美文阅读网的作者,发表您的原创作品、分享您的心情!</font></li></ul><i class="lt"></i><i class="rt"></i></div><ul class="tags"><li><a class="meiwen" href="/huati/qingrenjie/">情人节</a></li><li><a class="meiwen" href="/huati/muqinjie/">母亲节</a></li><li><a class="meiwen" href="/huati/chongyangjie/">重阳节</a></li><li><a class="meiwen" href="/huati/qingmingjie/">清明节</a></li><li><a class="meiwen" href="/huati/duanwujie/">端午节</a></li><li><a class="meiwen" href="/huati/zhishujie/">植树节</a></li><li><a class="meiwen" href="/huati/yuanxiaojie/">元宵节</a></li><li><a class="meiwen" href="/huati/funvjie/">妇女节</a></li><li><a class="meiwen" href="/huati/yurenjie/">愚人节</a></li><li><a class="meiwen" href="/huati/shengdanjie/">圣诞节</a></li><li><a class="meiwen" href="/huati/fuqinjie/">父亲节</a></li><li><a class="meiwen" href="/huati/jiaoshijie/">教师节</a></li><li><a class="meiwen" href="/huati/ertongjie/">儿童节</a></li><li><a class="meiwen" href="/huati/laodongjie/">劳动节</a></li><li><a class="meiwen" href="/huati/qingnianjie/">青年节</a></li><li><a class="meiwen" href="/huati/jianjunjie/">建军节</a></li><li><a class="meiwen" href="/huati/wanshengjie/">万圣节</a></li><li><a class="meiwen" href="/huati/pinganye/">平安夜</a></li><li><a class="meiwen" href="/huati/guanggunjie/">光棍节</a></li><li><a class="meiwen" href="/huati/zhongqiujie/">中秋节</a></li><li><a class="meiwen" href="/huati/guoqingjie/">国庆节</a></li><li><a class="meiwen" href="/huati/ganenjie/">感恩节</a></li><li><a class="meiwen" href="/huati/labajie/">腊八节</a></li><li><a class="meiwen" href="/huati/">更多话题</a></li></ul></div><div class="cl"></div></div><div class="article-right"><div class="meiwen-right fr mb"><dt class="title hd"><h3>栏目导航</h3><i class="lt"></i><i class="rt"></i></dt><ul class="list-nav"><a class="meiwen" href="/c/owtytttx.html">饥人谷技术博客</a><a class="meiwen" href="/c/hqtttttx.html">摄影</a><a class="meiwen" href="/c/vqtttttx.html">故事</a><a class="meiwen" href="/c/uttttttx.html">互联网</a><a class="meiwen" href="/c/cttttttx.html">读书</a><a class="meiwen" href="/c/yttttttx.html">旅行</a></ul></div></div><div class="meiwen-right fr mb"><div class="title hd"><h3>热点阅读</h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/eyihyxtx.html">花语说爱你(2)</a></li><li><a class="meiwen" href="/subject/dyihyxtx.html">这么多年,你是否活成自己的模样?</a></li><li><a class="meiwen" href="/subject/cyihyxtx.html">被自己的发明杀死了,是一种什么样的体验?</a></li><li><a class="meiwen" href="/subject/fyihyxtx.html">跳宝超会玩</a></li><li><a class="meiwen" href="/subject/zeihyxtx.html">2017-10-05</a></li><li><a class="meiwen" href="/subject/beihyxtx.html">吃一个月饼等于喝掉三勺油?!想要健康就应该这样吃!</a></li><li><a class="meiwen" href="/subject/meihyxtx.html">阿里巴巴门口雕像:不管自己多牛逼 都要低头看看吊样</a></li><li><a class="meiwen" href="/subject/yeihyxtx.html">我们家不需要性教育</a></li><li><a class="meiwen" href="/subject/eeihyxtx.html">10月4号咖啡冥想</a></li><li><a class="meiwen" href="/subject/jeihyxtx.html">行d201 20171003</a></li></ul></div><div class="meiwen-right fr mb"><div class="title hd"><h3><a href="/c/owtytttx.html">饥人谷技术博客</a></h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/bwvitttx.html">vim 使用介绍</a></li><li><a class="meiwen" href="/subject/zrdtxttx.html">任务2-web 相关知识了解</a></li><li><a class="meiwen" href="/subject/lptnxttx.html">在本地使用Git创建仓库的方法</a></li><li><a class="meiwen" href="/subject/zlrnxttx.html">HTTPS 是如何保证安全的?</a></li><li><a class="meiwen" href="/subject/xixmqttx.html">#1 课堂笔记-产品流程,前端工作</a></li><li><a class="meiwen" href="/subject/undqcttx.html">我的前端入门笔记(1)--html</a></li><li><a class="meiwen" href="/subject/zzchhttx.html">前端第一篇:入行感受</a></li><li><a class="meiwen" href="/subject/meelhttx.html">Markdown学习笔记</a></li><li><a class="meiwen" href="/subject/vpulhttx.html">前端(1)-块级元素与内联元素</a></li><li><a class="meiwen" href="/subject/smulhttx.html">HTML学习总结-1</a></li></ul></div></div></div></div><div class="footer"><p class="p_1"><a href="/about/aboutus.html">关于我们</a>|<a href="/about/service.html">服务条款</a>|<a href="/about/contact.html">联系我们</a>|<a href="/subject/cpihyxtx.html">六·认识标签</a>|<a href="/about/tougao.html">投稿指南</a>|<a href="/sitemap.html">网站地图</a>|<a href="/rssmap.html">RSS订阅</a>|<a href="/about/paiban.html">排版工具</a>|<a href="javascript:vod(0);" onclick="Mobileurl()">手机版</a></p><p class="p_2">提供<a href="/meiwen/zhaichao/">经典美文摘抄</a>,<a href="/sanwen/">优美散文欣赏</a>,<a href="/shige/xiandai/">现代诗歌精选</a>,<a href="/xiaoshuo/">短篇小说</a>,<a href="/diary/suibi/">心情随笔</a>,<a href="/qingshu/">表白情书</a><a href="/fanwen/">范文</a>,<a href="/gushi/">故事会在线阅读</a>欣赏</p><p class="p_2">Copyright © 2014-2023 <a href="/">Haomeiwen.com</a> All Rights Reserved. <a href="/">好美文阅读网</a> 版权所有</p><p class="p_2">备案信息:<i></i>桂公网安备 45052102000051号 · 桂ICP备13007215号-3</p><div class="footer_service"><p class="p_2">本站所收录作品、热点评论等信息部分来源互联网,目的只是为了系统归纳学习和传递资讯</p><p class="p_2">所有作品版权归原创作者所有,与本站立场无关,如不慎侵犯了你的权益,请联系我们告知,我们将做删除处理!</p></div></div><script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="https://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script><script type="text/javascript">$("img.lazy").lazyload({effect : "fadeIn"});</script><script type="text/javascript" src="/img/jquery.meiwen.min.js"></script></body></html>