<!DOCTYPE html>

<!--#浏览器的兼容模式-->

<html lang="en">

    <head>

        <!--head标签包含的子标签-->

        <meta charset="utf-8">

        <!--meta标签 name属性主要用于描述网页，与子对应的值为content，content中的主要内容是便于搜索引擎

        查找信息和分类信息用的-->

        <meta name="keywords" content="关键词seo">

        <meta name="description" content="描述词">

        <!--Refresh 页面定时刷新  http-equiv:相当于http文件头作用，他可以向浏览器传回一些

        有用的信息，以帮助正确和精确的显示网页内容，与之相对应得属性为content，内容其实是各个参数的变量值-->

        <!--<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">-->

        <!--<meta http-equiv="content-type" charset="utf-8">-->

        <!--link标签 引入资源-->

        <link rel="icon" href="http://www.jd.com/favicon.ico">

        <link rel="stylesheet" href="css.css">

        <script src="xxx"></script>

        <title>test</title>

    </head>

<body>

<input name="pwd" type="text" readonly>

<p id="abc">顶部</p>

换行<br>

<strike>加线</strike>

<strong>加粗1</strong>

<h1 style="color:red"><p>xxwdwewefwfr</p>hello</h1>

<div>hello</div>

<span style="color:green;">hello span</span>

水平线<hr>

<!--块级标签:<p> <h1> <table> <ol> <ul> <form> <div> 和内联便签: <a> <input> <img> <sub> <span> <texttra>-->

块级标签（block）：独占一行，总是在新行上面开始，宽度缺省是他容器的100%，除非设定一个宽度，他可以容纳内联元素和其他快元素

内联标签：不独占一行,和其他元素都在一行上，宽度就是他文字或者图片的高度，不可改变，内联元素只能容纳文本和其他内联元素

特殊字符：&nbsp。。。。

xxx&nbsp;&nbsp;111

<ul>

   <li>无序列表</li>

</ul>

<ol>

    <li>有序列表</li>

</ol>

<dl>

    <dt>自定义列表</dt>

    <dd></dd>

</dl>

<a href="#abc" target="_blank">返回顶部</a>

</body>

<script>alert(widows.top.document.compatMode)</script>

</html>

<!--超文本:就是指页面内可以包含图片，链接，甚至音乐，程序等非文字元素-->

<!--标记语言：标记<标签>构成的语言-->

<!--标签的属性

1.通常都是以键值对的方式出现 2.属性只能出现在开始标签和自闭和标签 3.属性名全部小写，如果属性名和属性值完全一样，直接写

属性名即可-->
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<h1>注册页面表单</h1>

<form action="1.php" method="post" enctype="multipart/form-data">

    <p>用户名<input type="text" name="username" placeholder="请输入用户名" disabled></p>

    <p>密码<input type="password" name="pwd"></p>

    <p>爱好  音乐<input type="checkbox" name="hooby" value="音乐" checked> 看书<input type="checkbox" value="看书"></p>

    <!--radio单选按钮取决于属性name-- value：选框对应的值-->

    <p>性别  男<input type="radio" name="gender" value="boy" > 女<input type="radio" name="gender" value="girl"></p>

    省份<select name="provie" multiple size="2">

    <!--mutiple多选 size设置显示个数 selected默认选中-->

        <option value="sichuang" selected>四川</option>

        <option value="dong">广东</option>

        <option value="xi">山西</option>

    </select>

    <!--<select name="provie" multiple size="2">-->

    <!--&lt;!&ndash;mutiple多选 size设置显示个数 selected默认选中&ndash;&gt;-->

        <!--<option value="sichuang" selected>四川</option>-->

        <!--<option value="dong">广东</option>-->

        <!--<option value="xi">山西</option>-->

    <!--</select>-->

    简介<textarea name="desc" cols="10" rows="5"></textarea>

    <label for="www">姓名</label>

    <input type="text" id="www">

    <input type="submit" value="注册" >

    <input type="button" value="按钮">

    <br>

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

   只读 <input type="text" readonly><br>

    文件上传<input type="file" name="putfile">

    <!--file提交文件，from表单上必须要加上属性enctype=“multipart/form-data”-->

    <!--name：表单提交项的键，注意和id的区别：name属性是和服务器通信时使用的名称，而id属性是浏览器使用的名称，该属性主要方便客户端

    而在css和javascript中使用 value:表单提交项的值，对于不同的输入类型，value属性的用法也不同-->

</form>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表格</title>

</head>

<body>

<table border="1px solid" cellpadding="50px" cellspacing="5px" >

    <thead>

        <tr>

            <th>1</th>

            <th>2</th>

            <th>3</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>xxx</td>

            <td colspan="2">xxxx</td>

        </tr>

    </tbody>

</table>

</body>

</html>

html常见标签及用法整理的更多相关文章

  1. 1、前端--HTML简介、head内常见标签、body内常见标签（特殊符号、div、span、a、img、列表、表格table、表单form）、标签两大属性

    今日内容 HTML简介 HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成 HTML:超文本标记语言 # 不是一门编程语言 没有任何的逻辑 只有固定的标记功能 &q ...

  2. linux学习：特殊符号，数学运算，图像与数组与部分终端命令用法整理

    指令:let.expr.array.convert.tput.date.read.md5.ln.apt.系统信息 一:特殊符号用法整理 系统变量 $# 是传给脚本的参数个数 $0 是脚本本身的名字 $ ...

  3. #ifndef#define#endif的用法(整理)

    [转] #ifndef#define#endif的用法(整理)    原作者:icwk  文件中的#ifndef 头件的中的#ifndef,这是一个很关键的东西.比如你有两个C文件,这两个C文件都in ...

  4. JSTL之C标签的用法

    转自:https://my.oschina.net/zimingforever/blog/78980 最近开始整理以前的onenote,居然有200多篇,大致翻了下,很多内容都是在大学的时候学习的时候 ...

  5. 第五节：表单标签的用法——value绑定和修饰符

    1.表单标签的用法--value绑定和修饰符 value绑定的写法:v-bind:value 或者简写 :value 修饰符: lazy , Number , trim . 用法如:  v-model ...

  6. HTML ---滚动条样式代码及<marquee>标签的用法;

    html中滚动条属性设置 scrollbar属性.样式详解 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)    overflow-x水平方向内容溢出时的设置    overfl ...

  7. html部分---a标签的用法、放置图片与表格；

    a标签的用法: 1.加链接  herf <a href="http://www.baidu.com">百度一下</a> 2.加载本地文件 <a hre ...

  8. label 和 legend标签的用法

    label 和 legend标签的用法 label标准用法: 一般浏览器都支持 一般而言,label标签位于表单元素的前面或者后面,为控件提供说明文字 <label for="user ...

  9. 9.mybatis动态SQL标签的用法

    mybatis动态SQL标签的用法   动态 SQL MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或其他类似框架的经验,你就能体会到根据不同条件拼接 SQL 语句有多么 ...

随机推荐

  1. （转载）Kaggle_Titanic生存预测 -- 详细流程吐血梳理

    Kaggle_Titanic生存预测 -- 详细流程吐血梳理 https://blog.csdn.net/Koala_Tree/article/details/78725881 Kaggle中Tita ...

  2. 运行Spark官方提供的例子

    去spark官网把spark下载下来: https://spark.apache.org/downloads.html 解压,可以看下目录: 其中examples目录下提供了java,scala,py ...

  3. 在xml文件中使用该控件

    <yf.changsha.com.view.MyTextView android:layout_width="match_parent" android:layout_hei ...

  4. 20165218 《网络对抗技术》Exp6 信息收集与漏洞扫描

    Exp6 信息收集与漏洞扫描 实践过程记录 一.各种搜索技巧的应用 1_搜索网址目录结构 dir_scanner use auxiliary/scanner/http/dir_scanner This ...

  5. Arthas随笔

    目录 Arthas 安装Java 安装 Arthas Arthas 命令及示例 源码分析 Arthas 安装Java 下载jdk 注意 下载的JDK版本要与linux操作系统相匹配,否则汇报No su ...

  6. C++获取寄存器eip的值

    程序中需要打印当前代码段位置 如下 #include <stdio.h> #include <stdlib.h> #include <math.h> #ifdef ...

  7. 二进制方式安装mysql

    下载官方打包好的rpm的集合 https://downloads.mysql.com/archives/get/file/mysql-5.7.20-1.el7.x86_64.rpm-bundle.ta ...

  8. 关于加快INSERT语句执行速度和HINT /*+ append */及/*+ append nologging */的使用

    (非归档模式下)创建表T01: SQL> create table t01 as select * from dba_objects where 1=2; Table created. (非归档 ...

  9. 阶段3 1.Mybatis_09.Mybatis的多表操作_8 mybatis多对多操作-查询角色获取角色下所属用户信息

    一个角色对应多个用户 生成getter和setter 查看两个表的数据 中间表定义了谁有角色,谁没有角色 根据中间表的关系,最终查询出来的列表的数据样子.这需要两个左外链接才能实现功能. 第一个左外链 ...

  10. Python学习之==>操作Redis

    一.redis简介 1.非关系型数据库 2.数据全部是存在内存里面 3.性能非常好,每秒支持30w次读写 4.可以通过备份数据库,把数据存到磁盘上来实现数据的持久化 二.操作redis 1.strin ...