menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

HTML5入门教学

武飞扬头像
Ifeng_iPhone
帮助1人

1. 概念

HTML就是静态网页

  • 你在浏览器上看到的任何东西的都是网页

官方名称：超文本标记语言

  • 超文本：可以定义图片，连接，表单，音乐

  • 标记：标签

    • 标签名定义在尖括号中，一般有开始有结束

    • 每个标签代表浏览器中一个样式

    1.  
      <html> </html>
    2.  
      <p> </p>
    3.  
      <div> </div>
    4.  
      <img>
    5.  
      <input>

2. 创建html

  • 创建一个html格式文件

  • 定义html标签

    • 所有的页面标签都必须定义在html标签中

  • 定义head标签

    • 定义页面引入的静态资源

  • 定义body标签

    • 定义所有需要显示在页面中的样式

  1.  
    <html>
  2.  
     
  3.  
    <head></head>
  4.  
  5.  
    <body>
  6.  
    this is my first html
  7.  
    </body>
  8.  
  9.  
    </html>

3. 安装IDE

编写html，选择使用HBUILDER

下载地址：HBuilderX-高效极客技巧

4. 标签

1. 结构标签

  • html

  • head

    • title

    • meta

  • body

  1.  
    <!--
  2.  
    生成一个注释： ctrl shift /
  3.  
    -->
  4.  
     
  5.  
    <!-- 定义当前html的版本为5-->
  6.  
    <!DOCTYPE html>  
  7.  
  8.  
    <!-- html标签:所有的页面标签都必须定义在html标签中，它就表示一个静态页面 -->
  9.  
    <html>
  10.  
     
  11.  
    <!--
  12.  
    头标签
  13.  
    1. 定义元数据   定义html本身一些信息，有助于浏览器解析
  14.  
    2. 定义标题头
  15.  
    3. 引入和定义的css
  16.  
    4. 引入和定义的js
  17.  
    -->
  18.  
    <head>
  19.  
    <meta charset="utf-8">
  20.  
    <title>我的第一个html</title>
  21.  
    </head>
  22.  
     
  23.  
    <!-- 定义显示在浏览器中的样式 -->
  24.  
    <body>
  25.  
     
  26.  
    <h1>这是我们的第一个html</h1>
  27.  
     
  28.  
    </body>
  29.  
    </html>
学新通

2. 块级标签

块级标签： 能够自动换行

  • h1-6

  • p

  • hr

  • br

  • div

    1.  
      <!DOCTYPE html>
    2.  
      <html>
    3.  
      <head>
    4.  
      <meta charset="utf-8">
    5.  
      <title>块级标签</title>
    6.  
      </head>
    7.  
      <body>
    8.  
       
    9.  
      <!--
    10.  
      h标签： 标题标签
    11.  
      h1- h6 越来越小
    12.  
       
    13.  
      -->
    14.  
      <h1>观沧海</h1>
    15.  
      <h2>观沧海</h2>
    16.  
      <h3>观沧海</h3>
    17.  
      <h4>观沧海</h4>
    18.  
      <h5>观沧海</h5>
    19.  
      <h6>观沧海</h6>
    20.  
       
    21.  
      <!-- 没有h7标签，写了不起任何作用 -->
    22.  
      <h7>观沧海</h7>
    23.  
       
    24.  
       
    25.  
      <!--
    26.  
      hr: 横线
    27.  
      -->
    28.  
      <hr/>
    29.  
       
    30.  
       
    31.  
      <!--
    32.  
      p : 段落标签
    33.  
      -->
    34.  
      <p>东临碣石，</p>
    35.  
      <p>以观沧海。</p>
    36.  
      <p>水何澹澹，</p>
    37.  
      <p>山岛竦峙。</p>
    38.  
       
    39.  
       
    40.  
      </body>
    41.  
      </html>
    42.  
      <!DOCTYPE html>
    43.  
      <html>
    44.  
      <head>
    45.  
      <meta charset="utf-8">
    46.  
      <title></title>
    47.  
      </head>
    48.  
      <body>
    49.  
       
    50.  
      <!--
    51.  
      br: 换行的标签
    52.  
      -->
    53.  
      金樽清酒斗十千, <br>
    54.  
      玉盘珍羞直万钱。<br>
    55.  
      停杯投箸不能食, <br>
    56.  
      拔剑四顾心茫然。<br>
    57.  
      欲渡黄河冰塞川，<br>
    58.  
      将登太行雪满山。<br>
    59.  
       
    60.  
       
    61.  
      <!--
    62.  
      div:
    63.  
      省市区
    64.  
      目的把标签内的标签看做是一个整体，可以统一的进行操作
    65.  
      -->
    66.  
       
    67.  
    68.  
      <div style="color: red;">
    69.  
      <p>东临碣石，</p>
    70.  
      <p>以观沧海。</p>
    71.  
      <p>水何澹澹，</p>
    72.  
      <p>山岛竦峙。</p>
    73.  
      </div>
    74.  
       
    75.  
       
    76.  
       
    77.  
      </body>
    78.  
      </html>
    学新通

3.行内标签

行内标签： 这种标签不会自动换行

  • span

  • b

  • strong

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title></title>
  6.  
    </head>
  7.  
    <body>
  8.  
     
  9.  
    <!--
  10.  
    行内标签：不会自动换行
  11.  
    spqn,b,strong
  12.  
     
  13.  
    为字体添加样式
  14.  
    color 颜色
  15.  
    font-size     字体大小
  16.  
     
  17.  
    -->
  18.  
    <p>东临碣石，</p>
  19.  
    <p>以观<span style="color: red; font-size: 20px;">沧海<span>。</p>
  20.  
    <p style="font-size:20px ;">水何澹澹，</p>
  21.  
    <p>山岛竦峙。</p>
  22.  
     
  23.  
    <hr />
  24.  
     
  25.  
    <b>当你</b><strong>觉得</strong><em>为时已晚</em>，恰恰是最早的时候。
  26.  
     
  27.  
    </body>
  28.  
     
  29.  
    </html>
学新通

4. 图片标签

在html中可以使用<img> 标签展示图片

img

src：定义图片路径
width:图片宽度
height:图片高度
  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title></title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <!--
  9.  
    img：图片标签，可以展示一张图片
  10.  
    src: 定义的图片的路径
  11.  
    一提到路径，就要想到绝对路径和相对路径
  12.  
    绝对路径是以 / 开头的
  13.  
    相对路径不以 / 开头
  14.  
    width : 设置图片宽
  15.  
    height: 设置图片高
  16.  
    -->
  17.  
     
  18.  
    <!--
  19.  
    当前页面是Demo05-图片标签.html 在html01文件夹下
  20.  
    那就从html01文件夹中开始找图片的路径
  21.  
    -->
  22.  
    <img src="img/dd.jpeg" width="300px">
  23.  
     
  24.  
     
  25.  
    <!-- 绝对路径，以 /项目名/路径/文件名 -->
  26.  
    <img src="/html01/img/dd.jpeg" width="300px">
  27.  
     
  28.  
    </body>
  29.  
    </html>
学新通

5. 列表标签

  • 无序列表 ul

  • 有序列表 ol

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title></title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <!--
  9.  
    列表
  10.  
    - 无序列表
  11.  
    ul
  12.  
    type = disc
  13.  
    circle
  14.  
    square
  15.  
    - 有序列表
  16.  
      ol
  17.  
    type =
  18.  
     
  19.  
      每一项数据使用li展示
  20.  
     
  21.  
     
  22.  
     
  23.  
    -->
  24.  
     
  25.  
    手机品牌：
  26.  
    <ul type="square">
  27.  
    <li>华为
  28.  
    <ul type="square">
  29.  
    <li>mate系列</li>
  30.  
    <li>p系列</li>
  31.  
    <li>Nova系列</li>
  32.  
    </ul>
  33.  
    </li>
  34.  
    <li>小米</li>
  35.  
    <li>OPPO</li>
  36.  
    <li>VIVO</li>
  37.  
    </ul>
  38.  
     
  39.  
     
  40.  
     
  41.  
    茶叶：
  42.  
    <ol type="a">
  43.  
    <li>黄山毛峰</li>
  44.  
    <li>六安瓜片</li>
  45.  
    <li>霍山黄牙</li>
  46.  
    <li>舒城小兰花</li>
  47.  
    <li>岳西翠兰</li>
  48.  
    <li>太平猴魁</li>
  49.  
    </ol>
  50.  
     
  51.  
     
  52.  
    <!--
  53.  
    全国GDP排名前10位
  54.  
    -->
  55.  
     
  56.  
    </body>
  57.  
    </html>
学新通

6. 超链接标签

我们可以一个页面上通过超链接标签发起一个新的路径请求

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title></title>
  6.  
    </head>
  7.  
    <body>
  8.  
     
  9.  
    <!--
  10.  
    a : 超链接标签   浏览器重新请求一个页面地址
  11.  
     
  12.  
     
  13.  
    href : 请求的路径
  14.  
    - 相对路径
  15.  
    相对于当前页面的路径
  16.  
    - 绝对路径
  17.  
    以 /、http、https
  18.  
     
  19.  
    target: 请求的目标窗口
  20.  
    - _self : 在当前窗口，会覆盖当前窗口
  21.  
    - _blank : 会开启一个新窗口发起请求
  22.  
    -->
  23.  
    <a href="http://百度.com">百度</a>
  24.  
    <a href="http://qq.com" target="_self">qq</a>
  25.  
     
  26.  
     
  27.  
    <a href="Demo05-图片标签.html">demo06</a>
  28.  
     
  29.  
    <!--
  30.  
    我最喜欢的历史人物：
  31.  
    - 曹操
  32.  
    - 郭嘉
  33.  
    - 刘备
  34.  
    -->
  35.  
    </body>
  36.  
    </html>
学新通

7. 表格标签

  • table

  • tr

  • td

  • thead

  • tbody

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title></title>
  6.  
    </head>
  7.  
    <body>
  8.  
     
  9.  
    <!--
  10.  
    table： 表格
  11.  
    tr : 行标签
  12.  
    td : 列标签
  13.  
     
  14.  
    -->
  15.  
     
  16.  
    <!-- 展示科目信息
  17.  
     
  18.  
    1. 展示哪些信息
  19.  
    姓名   性别   家乡   身份证号
  20.  
    2. 添加信息
  21.  
     
  22.  
     
  23.  
    1. 一个table就是一个表格
  24.  
    2. 一个tr就是一行
  25.  
    3. 一个td就是一列
  26.  
     
  27.  
    border :边框
  28.  
    width: 宽度
  29.  
    -->
  30.  
     
  31.  
     
  32.  
    <table border="1px" width="200px">
  33.  
    <thead>
  34.  
    <tr>
  35.  
    <td>id</td>
  36.  
    <td>name</td>
  37.  
    <td>teacher_id</td>
  38.  
    </tr>
  39.  
    </thead>
  40.  
     
  41.  
    <tbody>
  42.  
    <tr>
  43.  
    <td>1</td>
  44.  
    <td>java</td>
  45.  
    <td>1</td>
  46.  
    </tr>
  47.  
     
  48.  
    <tr>
  49.  
    <td>2</td>
  50.  
    <td>军事</td>
  51.  
    <td>3</td>
  52.  
    </tr>
  53.  
     
  54.  
    <tr>
  55.  
    <td>3</td>
  56.  
    <td>心学</td>
  57.  
    <td>3</td>
  58.  
    </tr>
  59.  
    </tbody>
  60.  
     
  61.  
    </table>
  62.  
    </body>
  63.  
    </html>
学新通

  • colspan

  • rowspan

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title></title>
  6.  
    </head>
  7.  
    <body>
  8.  
     
  9.  
    <!--
  10.  
    合并行，合并列
  11.  
    colspan ： 合并列
  12.  
    一列占几列
  13.  
    rowspan ： 合并行
  14.  
    一列占几行
  15.  
     
  16.  
     
  17.  
    align: 表格居中
  18.  
    text-align ： 文本居中
  19.  
     
  20.  
    -->
  21.  
     
  22.  
    <table border="1px" width="300px"
  23.  
    height="200px" align="center" style="text-align:center ;">
  24.  
    <tr>
  25.  
    <td colspan="3">
  26.  
    <b>课程表</b>
  27.  
    </td>
  28.  
    <!--
  29.  
    <td></td>
  30.  
    <td></td>
  31.  
    -->
  32.  
    </tr>
  33.  
     
  34.  
    <tr>
  35.  
    <td rowspan="3"> 周一</td>
  36.  
    <td>上午</td>
  37.  
    <td>语文</td>
  38.  
    </tr>
  39.  
     
  40.  
    <tr>
  41.  
    <!-- <td></td> -->
  42.  
    <td>下午</td>
  43.  
    <td>java</td>
  44.  
    </tr>
  45.  
     
  46.  
    <tr>
  47.  
    <!-- <td></td> -->
  48.  
    <td>晚上</td>
  49.  
    <td>mysql</td>
  50.  
    </tr>
  51.  
     
  52.  
    <tr>
  53.  
    <td rowspan="3"> 周二</td>
  54.  
    <td>上午</td>
  55.  
    <td>语文</td>
  56.  
    </tr>
  57.  
     
  58.  
    <tr>
  59.  
    <!-- <td></td> -->
  60.  
    <td>下午</td>
  61.  
    <td>语文</td>
  62.  
    </tr>
  63.  
     
  64.  
    <tr>
  65.  
    <!-- <td></td> -->
  66.  
    <td>晚上</td>
  67.  
    <td>语文</td>
  68.  
    </tr>
  69.  
     
  70.  
    </table>
  71.  
     
  72.  
     
  73.  
    </body>
  74.  
    </html>
学新通

8. 表单

  • form

    • action

    • method

  • input

    • text

    • pasword

    • radio

    • checkbox

  • select

    • option

  • textarea

    • rows

    • cols

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title></title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <!--
  9.  
    form : 表单，用来提交数据
  10.  
    1. action属性   提交表单的路径
  11.  
    2. method属性   提交表单的形式
  12.  
    - get (默认)
  13.  
    - post （只要是form，一定都是post）
  14.  
     
  15.  
     
  16.  
    提交数据的形式
  17.  
    1. 输入文本   能看到
  18.  
    2. 输入密码   看不到
  19.  
    3. 不准输入   只能选择
  20.  
    单选，多选，下拉
  21.  
     
  22.  
    -->
  23.  
     
  24.  
    <form action="xxx" method="post">
  25.  
     
  26.  
    <!-- 文本-->
  27.  
    用户名：<input type="text" />      <br>
  28.  
     
  29.  
    <!-- 密码-->
  30.  
    密码： <input type="password" />   <br>
  31.  
     
  32.  
     
  33.  
    出生日期：<input type="date" />    <br>
  34.  
     
  35.  
    <!--
  36.  
    radio表示单选
  37.  
    一伙的只能选择一个，他们的name属性一定一样
  38.  
    一定要定义value属性，选择某一个单选框获取的就是该输入框的value属性值
  39.  
    -->
  40.  
    性别 ：<input type="radio" name="x" value="1"/>男
  41.  
      <input type="radio" name="x" value="0"/>女     <br>
  42.  
     
  43.  
    <!--
  44.  
    checkbox 表示多选
  45.  
    一定要定义value属性，选择某一个单选框获取的就是该输入框的value属性值
  46.  
    -->
  47.  
        爱好 ：<input type="checkbox" value="yy"/>游泳
  48.  
      <input type="checkbox" value="jj"/>击剑  
  49.  
      <input type="checkbox" value="qq"/>铅球   <br>
  50.  
     
  51.  
     
  52.  
      <!-- select : 下拉框
  53.  
    option定义每一个选项的值
  54.  
    定义value属性值
  55.  
      -->
  56.  
    家乡：
  57.  
    <select>
  58.  
    <option value="">请选择</option>
  59.  
    <option value="ah">安徽省</option>
  60.  
    <option value="bj">北京市</option>
  61.  
    <option value="sh">上海市</option>
  62.  
    <option value="cq">重庆市</option>
  63.  
    </select> <br>
  64.  
     
  65.  
    <!--
  66.  
    textarea : 文本域
  67.  
    rows ： 高
  68.  
    cols ： 宽
  69.  
     
  70.  
    -->
  71.  
    自我介绍:
  72.  
    <textarea rows="5" cols="20"></textarea> <br>
  73.  
     
  74.  
    <!-- 普通按钮-->
  75.  
    <input type="button" value="这是一个按钮"/>
  76.  
    <!-- 提交按钮 -->
  77.  
    <input type="submit" value="这是一个按钮,提交按钮"/>
  78.  
    </form>
  79.  
     
  80.  
    </body>
  81.  
    </html>
学新通

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhhjeaeh
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群