02.HTML基础标签

  • HTML标题:

    1. 标题在body内,是以标签<h1>-<h6>构成(依次减小)
    2. 默认情况,HTML会自动在块级元素下加一个空行,比如标题,段落等
    3. 标题不只是简单的字体加粗,搜索引擎通过标题编制索引,用户通过标题快速浏览网页,标题的重要度自H1到H6依次降低
    <!DOCTYPE html>
    <html>
      <head>
          <meta charset="UTF-8">
          <title>heading</title>
      </head>
      <body>
          <h1>h1标题</h1>
          <h2>h2标题</h2>
          <h3>h3标题</h3>
          <h4>h4标题</h4>
          <h5>h5标题</h5>
          <h6>h6标题</h6>
      </body>
    </html>
    
    image.png

  • HTML段落:

    1. 段落是以标签<p>构成
    2. <p>为块元素,在元素结束后,会默认添加一列空行
    <!DOCTYPE html>
    <html>
      <head>
          <meta charset="UTF-8">
          <title>paragraph</title>
      </head>
      <body>
          <p>段落p</p>
      </body>
    </html>
    
    image.png

  • HTML链接:

    1. 链接是通过标签<a>构成,href="xxx"是属性,属性值的表达方式
    2. 属性在网页中是非展示的内容,标签中间内容为网页展示内容
    3. a与img嵌套,可实现点击图片跳转
    4. a标签常用属性:
      href:设置链接跳转的路径(可以是超链接,也可以时网址)
      target:设置链接点击后,新网页的打开方式(_blank即新窗口打开)
      name:设置锚点,id有同样作用
    5. 通过name或id属性设置锚点,通过#name或#id直接调账到锚点所在目录或文档位置

    超链接 超文本 (hyper text)
    ▶ 超文本的基本特征就是可以超链接文档
    ▶ 通过设置锚点将链接与存于某处的文档关联起来
    ▶ 实现当点击链接时跳转到相应文档的功能
    ▶ 此文档可存于网络或本地,但和链接锚点有相同的锚点存在于文档中
    ▶ 通常称提供热点和超链接的锚点为链接,而标记文档部分的锚为

    <!DOCTYPE html>
    <html>
      <head>
          <meta charset="UTF-8">
          <title>paragraph</title>
      </head>
    
      <body>
          <a href="http://www.jianshu.com/" target="_blank">
              <img src="img/jianshu.png" />
          </a>
          <br /><br />
          <a href="#dest">跳转</a>
          <p id="dest">跳转到这里</p>
          <br /><br /><br /><br /><br /><br />
          <br /><br /><br /><br /><br /><br />
          <br /><br /><br /><br /><br /><br />
          <br /><br /><br /><br /><br /><br />
          <br /><br /><br /><br /><br /><br />
      </body>
    </html>
    
    test07.gif

  • HTML图片:

    1. 图片是以标签<img>构成
    2. 和<body background="图片地址">使用,可用作背景图片
    3. img标签常用属性:
      ▷ src:指定获取图片的位置
      ▷ alt:当图片无法显示时,需要展示的内容(推荐使用)
      ▷ title:当鼠标放在图片上时,弹出要显示的内容(说明)
      ▷ width:图片的显示宽度
      ▷ height:图片的显示高度
    <!DOCTYPE html>
    <html>
      <head>
          <meta charset="UTF-8">
          <title>paragraph</title>
      </head>
    
      <body>
          <img src="img/big.png" alt="笑脸" title="原图片" />
          <img src="img/big.png" width="100px" height="100px" title="自定义尺寸" />
      </body>
    </html>
    
    test08.gif

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,997评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,603评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,359评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,309评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,346评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,258评论 1 300
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,122评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,970评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,403评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,596评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,769评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,464评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,075评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,705评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,848评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,831评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,678评论 2 354

推荐阅读更多精彩内容