专栏首页老雷PHP全栈开发老雷PHP全栈开发教程之常用html标签

老雷PHP全栈开发教程之常用html标签

布局标签

div p span

a

h1-h6

ul/ol li

dl dt dd

table thead tbody tr td th

label

表单元素

form

input text radio checkbox file

textarea

select option

button

媒体元素

img

audio

video

其他标签

html,body

head,title,meta,link

style

script

代码demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>常用html标签-老雷php全栈开发教程</title>
    <style>
      .table{
        width: 100%;
        border-collapse: collapse;
        
      }
      .table td,.table th{
        border: 1px solid #eee;
        padding: 5px;
      }
      .mgb-10{
        margin-bottom: 10px;
      }
</style>
  </head>
  <body>
    <div>
      <div>参考 <a href="http://www.w3school.com.cn/html/index.asp" target="_blank">http://www.w3school.com.cn/html/index.asp</a>  </div>
      <h3>布局文本</h3>
      <div>
        <div>
          最常用的布局标签div<br>
          任何页面布局都可以使用div+css实现
          <div style="font-size: 16px; color: red;"  class="这是class"  id="这是id" title="鼠标提示" data-title="这是值">属性说明</div>
          
          <div></div>
          <img />
          
        </div>
      </div>
      <p>这是一个段落p</p>
      <p>这个是会换行的</p>
      <div>
        <span>这是一个行内标签span</span>
        <span>这是不会换行的</span>
      </div>
<pre>
  这是一行 
    这是第二行
      这是第三行
</pre>
      <h3>页面切换</h3>
      <div>
        <a href="index.html?m=a">A</a>
        <a href="index.html?m=b">B</a>
        <a href="index.html?m=c">C</a>
      </div>
      <h3>html注释</h3>
      <!-- 在此处写注释 -->
      <div>
        &lt;!-- 在此处写注释 --&gt;
      </div>
      
      <h3>标题</h3>
      <div>
        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
      </div>
      <h3>列表</h3>
      <div>
        <div>无序列表</div>
        <ul>
          <li>咖啡</li>
          <li>茶</li>
          <li>牛奶</li>
        </ul>
        <div>有序列表</div>
        <ol>
          <li>咖啡</li>
          <li>牛奶</li>
          <li>茶</li>
        </ol>
        <div>定义列表</div>
        <dl>
           <dt>计算机</dt>
           <dd>用来计算的仪器 ... ...</dd>
           <dt>显示器</dt>
           <dd>以视觉方式显示信息的装置 ... ...</dd>
        </dl>
        <div>
          <div>计算机</div>
          <div style="margin-left: 60px;">用来计算的仪器 ... ...</div>
          <text></text>
        </div>
      </div>
       
      <h3>表格</h3>
      <table class="table">
        <thead>
          <tr>
            <th>这是表头</th>
            <th>这是第二列</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>这是第一列</td>
            <td>这是第二列</td>
          </tr>
        </tbody>
      </table>
      <h3>媒体</h3>
      <div>
        <img src="http://www.w3school.com.cn/i/eg_cute.gif" alt="图片不存在" />
        <audio src="http://www.w3school.com.cn/i/horse.mp3" controls="controls"></audio>
        <video controls="controls" src="http://www.w3school.com.cn/i/movie.ogg"></video>
      </div>
      <h3>表单</h3>
      <form>
        <div class="mgb-10">
          <input type="text" id="title" name="title" value="" placeholder="这是单行文本框" />
          <input type="hidden" />
        </div>
        <div class="mgb-10">
          <textarea name="title" value="" placeholder="这是文本框" >这是多行文本</textarea>  
        </div>
        <div  class="mgb-10">
          <input type="radio"  class="gender" name="gender" value="1" />男
          <input type="radio" checked name="gender" value="1" />女
        </div>
        <div  class="mgb-10">
          <input type="checkbox" name="techang[]" value="1" /> 音乐
          <input type="checkbox" checked name="techang[]" value="1" /> 美术
        </div>
        <div class="mgb-10">
          <select name="select">
            <option value="0">这是列表选择框</option>
            <option value="0" selected="selected">选项一</option>
            <option value="0">选项二</option>
          </select>
        </div>
        <div class="mgb-10">
          <input type="file" name="file" />
          这是文件上传
        </div>
        <div class="mgb-10">
          <button type="submit">提交</button>
          <button type="reset">重设</button>
          <button type="button">按钮</button>
        </div>
      </form>
      
    </div>
    <div style="height: 100px;"></div>
  </body>
</html>

本文分享自微信公众号 - 老雷PHP全栈开发(L362606856),作者:雷日锦

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-13

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 老雷PHP全栈开发教程之Vue基础教程

    Vue是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层,Vue通过数据驱动构建ui界面。

    老雷PHP全栈开发
  • jQuery基础教程之选择器

    老雷PHP全栈开发
  • css的三种写法

    老雷PHP全栈开发
  • 前端-part8-jQurey操作样式一:获取标签属性+修改标签属性

    少年包青菜
  • HTML5选择器

    czjwarrior
  • 一起学爬虫——使用xpath库爬取猫眼电

    之前分享了一篇使用requests库爬取豆瓣电影250的文章,今天继续分享使用xpath爬取猫眼电影热播口碑榜

    py3study
  • HTML规范 - 整体结构

    申霖
  • 零基础html5+div+css+js网页开发教程第006期 网页快速开发技巧

    上一节,我们学习了hbuilder的快速开发工具的简单实用,本机额,我们来介绍这个工具相关的快速开发技巧。

    刘金玉编程
  • HTML&CSS书写规范

    第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOC...

    用户1149564
  • H5页面实现原理分析

    <!doctype html> <html> <head> <style> html{overflow:hidden;} body{margin:0;} .w...

    用户1730674

扫码关注云+社区

领取腾讯云代金券