正式学习第二天上午——常用标签及列表 0605

今天2017.0605上午,主要学习了常用标签和列表,以下面代码为例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
  </head>
  <body>
	    <strong>strong&nbsp;语气强调加粗</strong> <br />
        <b>b&nbsp;加粗</b><br />
        <em>em&nbsp;语气强调倾斜</em> <br />
        <i>i&nbsp;倾斜</i> <br />
        <h1>h1标题</h1>
        <h3>h3标题</h3>
        <h6>h6标题</h6>
        <p>这是p标签中的文字这是p标签中的文字这是p标签中的文字这是p标签中的文字</p>
        <p>这又是p标签中的文字这又是p标签中的文字这又是p标签中的文字这又是p标签中的文字</p>
        <span>这是sapn标签中的文字</span>
        <div>这是div标签中的文字</div>
        <ol type="I">
    	      <li>这是ol标签中的第一行</li>
              <li>这是ol标签中的第二行</li>
              <li>这是ol标签中的第三行</li>
        </ol>
        <ul type="square">
    	      <li>这是ol标签中的第一行</li>
              <li>这是ol标签中的第二行</li>
              <li>这是ol标签中的第三行</li>
        </ul>
 
  </body>
</html>

首先是格式控制类标签:

<strong>标签和<b>标签都是加粗,在网页显示效果相同。

<em>标签和<i>标签都是倾斜,在网页显示效果相同。

不同的是,<strong>和<em>带有强调作用。被他们强调的内容会作为关键字被网络爬虫留意。

拓展:

网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本。另外一些不常使用的名字还有蚂蚁、自动索引、模拟程序或者蠕虫

当使用搜索引擎搜索数据的时候,搜索引擎会放出很多的爬虫从互联网上抓取信息找到需要的内容,再把搜索到的网页排列显示给用户。

另外,虽然在<strong>和<em>标签中的内会会被强调,但是因为考虑到关键字密度和网络优化,所以不能全部使用<strong>和<em>,多是还是使用普通标签。

<br>或<br />用作换行,一个标签换一行。加在标签内容中的换行并不会在网页里显示。

&nbsp;作为空格,一个标签空一格。加在标签内容中的空格,不管一个还是多个空格在网页都只会显示一个空格。

然后是内容容器:

<h1>--<h6>

   文章标题,其中h1的字体是最大的,h6字体是最小的。

  并且<h  >标题标签自动换行,并且行间距较大。

<p>

  做段落,自动换行且有一定的段落间距。可用作文章内容。

<span>

   块标签,层标签,大小和内容的大小保持一致,被用来组合文档中的行内元素,span标签可以跟其他的span标签共用一行。多放文字。

<div>

   块标签,层标签,默认占一整行。用来组合块级元素,这样就可以使用样式对它们进行格式化。可放各种图文。

网页的页面布局都依靠<span><div>组合加上样式来组成。

列表:

<ol>

  有序列表,order list。

  可用type属性控制序号显示方式,常用的有:

    1-数字,

    a-小写字母,

    A-大写字母,

    i-小写罗马数字,

    I-大写罗马数字。

需要特别注意的是,如果type属性输入了其他无法识别的内容,浏览器会显示数字排序。

<ul>

  无序列表。

  也可以tpe属性控制序号显示方式,常用的有:

    circle-空心圆,

    disc-实心圆,

    square-实心方块。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端

HTML+CSS基础

第一章 一、样式      1、行间样式,代码不可维护,不推荐      2、内联样式,不可重用,不推荐      3、外联样式,可重用,可维护,推荐     ...

7299
来自专栏IMWeb前端团队

css中如何做到容器按比例缩放

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 在说容易按比例缩放前,我们先说下图片按比例缩放。 对于图片,默认只设置图片的...

2629
来自专栏Android干货

浅谈GridLayout(网格布局)

3959
来自专栏Coco的专栏

【Web动画】SVG 线条动画入门

2072
来自专栏偏前端工程师的驿站

CSS魔法堂:重拾Border之——图片作边框

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半...

2626
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

1、H5页面(APP端)      1.1     APP端页面用HTML5制作,头部需要加适配信息:   <meta http-equiv="Content-...

3269
来自专栏Android开发小工

利用Android嵌套滑动机制轻松实现顶部布局置顶

传统的Android事件分发是子控件消费了事件,那么父控件就不能再处理这个事件了。也就是说一旦内部的滑动控件消费了滑动操作,外部的滑动控件就不能获取到这个滑动动...

1493
来自专栏TechBox

一篇文章详解iOS之AutoResizing、AutoLayout、sizeClass来龙去脉前言三大适配技术

2916
来自专栏项勇

笔记74 | 学习掌握ConstraintLayout的基本属性

2215
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

          1.2.1     重要的图片用img标签(例如头部banner等包含特定信息的内容图片),不重要的底板用背景形式显示,例如底部背景

2160

扫码关注云+社区

领取腾讯云代金券