zoukankan      html  css  js  c++  java
  • html----02----html基础

    什么是html?

    HTML 是用来描述网页的一种语言。

    • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
    • HTML 不是一种编程语言,而是一种标记语言 (markup language)
    • 标记语言是一套标记标签 (markup tag)
    • HTML 使用标记标签来描述网页

    HTML 标签

    HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

      1.HTML 标签是由尖括号包围的关键词,比如 <html>

      2.HTML 标签通常是成对出现的,比如 <b> 和 </b>

      3.标签对中的第一个标签是开始标签,第二个标签是结束标签

      4.开始和结束标签也被称为开放标签和闭合标签

    建立html文件:

    1. test.html   

    2. test.xhtml  严格html格式

    3. test.htm   ..由于一些老的服务器只支持3位后缀名,l省略了

    html格式、标签

    1.<!DOCTYPE html>-----定义文件为html类型

    2.<html></html>-------根标签

    3.<head></head>--------文档头,定义关于文档的信息,存放文件属性相关内容,不会显示在页面上

    4.<title></title>---------标题

    5.<meta http-equiv="content" content="text/html" charset="utf-8"/>-----------设置网页编码集
    6.<meta name="keyWords" content="xx,xx">---------描述网页的关键词,网页优化互联网爬虫/机器人会抓取关键词
    7.<meta name="description" content="xxxxxxx">--------网站内容描述
    8.<meta http-equiv="refresh" content="3,http://www.baidu.com">-----------3秒后刷新网页,跳转到百度

    9.<body></body>-------定义内容。

    10.<!--这是注释-->--------注释,不会显示在页面上

    11.定义正文标题:

    <h1>标题一</h1>~<h6>标题六</h6>--------有六个级别,<h1>字体最大,标题也会被网络爬虫抓取,权重比keyWords小

    <h1 align="center">标题一</h1>----------标题居中

    12.段落标签:

    <p>段落</p>------文字结束会自动换行

    13.换行:

    </br>

    14.水平线:

    <hr/>

    15.引用文本块

    <blockquote></blockquote>-----文本前后会自动空两格

    16.无序列表组合:

    <ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
    </ul>

    17.有序列表组合:

    <ol>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
    </ol>

    18.定义列表:

    <dl>
    <dt><img src="x/xx.jpg"> </dt>-------内容
    <dd>狗狗</dd>--------描述<dt>内容
    </dl>

    19.预编排模式:

    <pre>
        12
      +  21
       --------
        33

    </pre>

    20.符号:

      1.&nbsp;  空格    2.&copy;  版权符号©    3.&it;  左尖括号,<    4.&gt;  右尖括号>

      5.&amp;  and符号&  6.&#151;  破折号- 

    21.按钮

    <button>点我</button>

    22.超链接

    <a href="http://www.baidu.com">百度</a>-------代码显示为“百度”,点击后会进入百度主页

    23.锚连接:

    点击后页面会显示id="t1"的附近

    <a href="#t1">鞋子</a>

    ....

    <p id="t1">这里卖鞋子</p>

    24.字体加粗:<b>粗</b>

    25.tabindex----------tab键切换

    <b tabindex="1">A</b>

    <b tabindex="2">B</b>

    26.图片:

    <img src="xx/xx.jpg"   alt="美女"   title="花姑娘">

    --------src URL地址,相对路径。如果图片没有出现,就会显示alt的内容,当把鼠标放在图片上,会显示title内容

    27.视频:

    <video src="xx.mp4"  controls="controls"  autoplay="autoplay"  loop="loop"></video>

    ----视频url地址,控制器,自动播放,循环播放

    或者:

    <video controls="controls" autoplay="autoplay" loop="loop">
    <source src="xx.mp4" >
    </video>

    28.音频:

    <audio controls="controls">
      <source src="song.ogg" type="audio/ogg">
      <source src="song.mp3" type="audio/mpeg">
      Your browser does not support the audio tag.
    </audio>

    29.表格:

    <table border="1" cellspacing="0">------边框像素值为1,边框变粗

      <th>------标题,表头

        <tr>------一行

          <td>1</td>-------一列

          <td>2</td>-------一列

        </tr>

      </th>

    跨行:

    <th>

        <tr>

          <td rowspan="3"></td>------一列跨3行

        </tr>

    </th>

    跨列:

    <th>

        <tr>

          <td  colaspan="3"></td>------一行跨3列

        </tr>

    </th>

    30.在一个网页嵌套另一个网页

    <iframe src="http://www.souhu.com"   width="200"   height="300"  scrolling="yes">搜狐</iframe>

    -------宽度200,高度300,显示滚动条,scrolling="yes"或者"no"或者"auto"-默认

  • 相关阅读:
    团队冲刺2---个人工作总结八(6.1)
    团队冲刺2---个人工作总结七(5.31)
    opencv2 用imwrite 抽取并保存视频图像帧
    VMware 虚拟机CentOS 7 网路连接配置 无eth0简单解决办法
    个人总结
    人月神话阅读笔记03
    个人冲刺10
    人月神话阅读笔记02
    第十六周学习进度情况
    个人冲刺09
  • 原文地址:https://www.cnblogs.com/JackieADBM/p/5544485.html
Copyright © 2011-2022 走看看