<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>常用HTML块级标签</title>

     </head>

     <body>

         <!--块级元素标签-->

             <!--标题标签-->

                    <!--块级元素，独占一行，有默认样式-->

                    <h1>一级标题</h1>

                    <h2>二级标题</h2>

                    <h3>三级标题</h3>

                    <h4>四级标题</h4>

                    <h5>五级标题</h5>

                    <h6>六级标题</h6>

             <!--段落标签-->

                    <!--块级元素，独占一行，有默认样式-->

                    <p>块级元素，独占一行，有默认样式</p>

             <!--换行标签-->

                    <!--强制换行，单标签-->

                    <br />

             <!--列表标签-->

                 <!--有默认样式，独占一行-->

                 <!--type属性用于设置列表项序列样式-->

                    <!--无序列表-->

                    <ul type="square">

                        <li>列表项一</li>

                        <li>列表项二</li>

                        <li>列表项三</li>

                    </ul>

                    <!--有序列表-->

                    <!--start属性用于设置列表项从第几个标记开始-->

                    <ol type="A" start="2">

                        <li>列表项</li>

                        <li>列表项</li>

                        <li>列表项</li>

                    </ol>

                    <!--自定义列表-->

                    <dl>

                        <dt>标题</dt>

                        <dd>列表项一</dd>

                        <dd>列表项二</dd>

                    </dl>

             <!--表格标签-->

                 <!--border边框属性-->

                 <!--cellpadding内容距离表框的距离-->

                 <!--cellspacing单元格间的距离-->

                 <!--rowspan垂直合并,设置单元格占用的竖直方向的单元格数量-->

                 <!--colspan水平合并,设置单元格占用的水平方向的单元格数量-->

                 <!--align内容水平对齐方式-->

                 <!--valign内容垂直对齐方式-->

                 <table border="5px" cellspacing="0" cellpadding="20px" width="500px" height="350px" ><!--声明表格-->

                     <tr><!--行-->

                         <th colspan="4">Header</th><!--表头-->

                     </tr>

                     <tr align="center">

                         <td rowspan="2">Datatitle</td><!--列-->

                         <td>Data</td><!--列-->

                         <td>Data</td><!--列-->

                         <td  align="right" valign="top">Data</td><!--列-->

                     </tr>

                     <tr align="center">

                         <td align="left" valign="bottom">Data</td><!--列-->

                         <td>Data</td><!--列-->

                         <td>Data</td><!--列-->

                     </tr>

                 </table>

             <!--水平分割线标签-->

                 <hr />

             <!--div 区块标签，没有默认样式-->

             <div>这是div标签，一般配合CSS使用，划定一块区域，很常用的标签</div>

         <!--行内元素标签-->

             <!--链接标签-->

                 <!--herf属性用于填写跳转目标页面的网址-->

                 <!--target属性设置新打开页面跳转方式-->

                 <!--路径问题-->

                     <!--相对路径-->

                         <!--./--><!--表示当前目录-->

                         <!--../--><!--表示上一级目录-->

                     <!--绝对路径-->

                         <!--C:\users\admin\Desktop\html常用标签.html-->

                 <a href="https://www.baidu.com" target="_blank">链接a标签</a>

                 <br />

             <!--图片标签-->

                 <!--单标签-->

                 <!--src属性用于填写图片地址-->

                 <!--alt属性用于图片加载失败时的替代文字-->

                 <!--title属性用于鼠标移动到图片上时的显示解释文字-->

                 <!--width、height设置图片宽度和高度，一般只给图片设置一个量，因为这样能保持图片的原比例-->

                 <img src="http://t-1.tuzhan.com/cad992696923/c-1/l/2012/12/12/07/457ae21d310a43149dab684aa1557b85.jpg" alt="这是一张图片" title="纸箱人" width="300px" height="200px"/>

                 <br />

             <!--文本标签-->

                 <b>b标签加粗</b><br />

                 <i>i标签倾斜</i><br />

                 <strong>strong标签加粗</strong><br />

                 <em>em倾斜</em><br />

                 <span style="color: darkgreen;">span标签为无语义的行内元素，一般和css配合使用，来设置文本中的一部分内容</span>

             <!--表单标签-->

                 <form action="" method="" enctype="multipart/form-data">

                     <!--action为提交地址-->

                          <!--get提交：通过url地址方式提交，不安全，能在url地址中看得见，传输数据有大小限制，是默认提交方式-->

                          <!--post提交：在url地址中是看不到的，相对安全，数据传输没有具体的大小限制，建议提交方式-->

                     <!--method为提交方式-->

                     <!--enctype属性用于表单中有文件上传必须添加这个属性，属性值为"multipart/form-data"，用于转码-->

                     <!--表单控件

                         type:指定文本框类型，（普通文本，密码框，单选框，多选框）

                     必须填写name属性作为数据的键-->

                     <!--name:1234-->

                     <!--普通文本输入框-->

                     用户名：<input type="text" name="username" value="" placeholder="请输入用户名"/><br />

                     <!--密码输入框-->

                     密码：<input type="password" name="password"/><br />

                     <!--单选框-->

                     <!--name属性必须相同-->

                     性别：<input type="radio" name="sex" value="1" />男

                           <input type="radio" name="sex" value="0" />女<br />

                     <!--多选框-->

                     <!--name属性必须相同-->

                     <!--value属性不同-->

                     爱好：<input type="checkbox" name="love[]" value="1"/>篮球

                           <input type="checkbox" name="love[]" value="2"/>足球

                           <input type="checkbox" name="love[]" value="3" checked/>乒乓球<br />

                     <!--下拉框-->

                     学历：<select name="xl">

                            <option value ="0">小学</option>

                            <option value ="1">初中</option>

                            <option value ="2">高中</option>

                     </select><br />

                     <!--文件上传选框-->

                     请选择上传文件：<input type="file" name="file"/><br />

                     <!--文本域-->

                     <span >请输入个人信息：</span><textarea name="" id="" cols="30" rows="5" readonly=""></textarea><br />

                     <!--按钮-->

                     <input type="submit" value="确定"/>

                     <button>确定</button>

                     <input type="reset" value="重置" disabled=""/>

                     <!--隐藏域-->

                     <!--不需要用户查看和填写的信息-->

                     <input type="hidden" name="" id="" value="" />

                 </form>

     </body>

 </html>

HTML-02-常用标签演示的更多相关文章

  1. web开发 - 从零开始 - 02 - 常用标签

    1.a  : href 属性为id,即为锚点:文件路径,则为下载链接: 新窗口打开文件,target = "_blank";当前窗口打开,target="_self&qu ...

  2. WP主题制作常用标签代码

    WordPress模板结构 style.css : CSS文件index.php : 主页模板archive.php : Archive/Category模板404.php : Not Found 错 ...

  3. dedecms 常用标签调用

    /*------------------单个ip调用-------------------*/ {dede:type typeid="12"} <a title=" ...

  4. HTML之一天学会html(常用标签+网页架构)

    1.  网页文件的创建 新建一个文本文件,将其命名为xxx.html或者xxx.htm(注意后缀名) 2.  简单的html页面的编写 在网页中都是通过标签来指定相应的显示内容,所有的页面内容都必须在 ...

  5. html常用标签有哪些

    html看似复杂,其实常用的标签并不多,这里总共介绍一些html的常用标签 文字处理: ①标题:<h1> to <h6> ②段落:<p>文字段落</p> ...

  6. html常用标签有哪些？

    html看似复杂,其实常用的标签并不多,这里总共介绍一些html的常用标签 文字处理: ①标题:<h1> to <h6> ②段落:<p>文字段落</p> ...

  7. html常用标签整理

    html文档结构 <!DOCTYPE html> <html lang="zh-CN"> #这个lang表示语言,zh-CN中文的意思,整个文档的内容以中文 ...

  8. 4-[HTML]-body常用标签1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. HTML基础-常用标签及图片

    标记/标签{元素} 双标签: <标签>内容</标签> <html></html>    网页 页面的根元素 <head></head& ...

  10. 实用掌中宝--HTML&CSS常用标签速查手册 PDF扫描版

    实用掌中宝--HTML&CSS常用标签速查手册 内容推荐: 本书第一篇以语法和实例相结合的形式,详细讲解了HTML语言中各个元素及其属性的作用.语法和显示效果:第二篇从CSS基本概念开始,分别 ...

随机推荐

  1. 基于vs2015 SignalR开发的微信小程序使用websocket实现聊天功能

    一)前言 在微信小程上实现聊天功能,大致有三种方式:1)小程序云开发 2)购买第三方IM服务 3)使用自己的服务器自己开发. 这里重要讲使用自己的服务器自己开发,并且是基于vs的开发. 网上提供的解决 ...

  2. 开篇 | 揭秘 Flink 1.9 新架构，Blink Planner 你会用了吗？

    本文为 Apache Flink 新版本重大功能特性解读之 Flink SQL 系列文章的开篇,Flink SQL 系列文章由其核心贡献者们分享,涵盖基础知识.实践.调优.内部实现等各个方面,带你由浅 ...

  3. 驳“C语言已经死了”

    http://blog.csdn.net/xushiweizh/article/details/1476422

  4. 聊聊多线程哪一些事儿（task）之 二 延续操作

    hello,又见面啦,昨天我们简单的介绍了如何去创建和运行一个task.如何实现task的同步执行.如何阻塞等待task集合的执行完毕等待,昨天讲的是task的最基本的知识点,如果你没有看昨天的博客, ...

  5. 为你写诗：3 步搭建 Serverless AI 应用

    作者 | 杜万(倚贤) 阿里巴巴技术专家 本文整理自 1 月 2 日社群分享,每月 2 场高质量分享,点击加入社群. 关注"阿里巴巴云原生"公众号,回复关键词 0102 即可下载本 ...

  6. $loj10156/$洛谷$2016$ 战略游戏 树形$DP$

    洛谷loj Desription Bob 喜欢玩电脑游戏,特别是战略游戏.但是他经常无法找到快速玩过游戏的方法.现在他有个问题. 现在他有座古城堡,古城堡的路形成一棵树.他要在这棵树的节点上放置最少数 ...

  7. elasticsearch定时删除索引第二版

    该版本对于上一个版本做了升级.兼容性更好了. #!/bin/bash ####################################################### # $Name: ...

  8. 1055 集体照 (25 分)C语言

    拍集体照时队形很重要,这里对给定的 N 个人 K 排的队形设计排队规则如下: 每排人数为 N/K(向下取整),多出来的人全部站在最后一排: 后排所有人的个子都不比前排任何人矮: 每排中最高者站中间(中 ...

  9. WTM 3.1发布，完美支持.netcore 3.1

    在过去的2019年,承蒙各位的厚爱,WTM从零开始一年的时间在GitHub上收获了将近1600星,nuget上的下载量累计超过10万. WTM所坚持的低码开发,快速实现的理念受到了越来越多.netco ...

  10. 小小知识点（二十四）什么是5G

    转自 https://www.ifanr.com/1149419 一个简单且神奇的公式 今天的故事,从一个公式开始讲起.这是一个既简单又神奇的公式.说它简单,是因为它一共只有 3 个字母.而说它神奇, ...