<!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. [CSP-S模拟测试]:bird（线段树优化DP）

    题目传送门(内部题89) 输入格式 第一行两个数$n$和$k$,分别表示小鸟的只数和$R$装弹时间.接下来$n$行,每行两个数$l,r$表示$n$只小鸟初始时的头和尾的$x$坐标. 输出格式 输出一个 ...

  2. [LeetCode]-algorithms-Longest Substring Without Repeating Characters

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  3. selenium安装环境

    selenium自动化环境:selenium+python+chromedriver 驱动/ ie驱动/火狐驱动 1.selenium和python安装   cmd命令里输入:pip install ...

  4. laravel中model类中好用的方法

    public function field() { return $this->belongsTo(HrmAuthFieldsModel::class, 'filed_id', 'id'); } ...

  5. a = a + b 与 a += b 的区别

    1.对于同样类型的a,b来说 两个式子执行的结果确实没有什么区别.但是从编译的角度看吧(武让说的),a+=b;执行的时候效率高. 2.对于不同类型的a,b来说 2.1    不同类型的两个变量在进行运 ...

  6. leetcode-mid-math-172. Factorial Trailing Zeroes-NO-？？？？

    mycode 问题:为甚在小于200的时候,答案ok,大于等于200的时候,就少一个1??? class Solution(object): def trailingZeroes(self, n): ...

  7. Oracle数据库用户的密码过期问题处理

    SQL> select username, user_id, account_status,expiry_date, profile from dba_users where username ...

  8. Unity Ray 射线

    射线:射线是3D世界一个向一个方向发射的一条无终点的线,在发射轨迹中与其他物体发生碰撞时,它将停止发射. 用途:射线范围比较广,多用于碰撞检测(如:子弹飞行是否击中目标).角色移动等. Ray是一个结 ...

  9. 中国MOOC_零基础学Java语言_期末考试的编程题_1二进制的前导的零

    期末考试的编程题 返回   这是期末考试的编程题,在60分钟内,你可以多次提交,直到正确为止. 温馨提示: 1.本次考试属于Online Judge题目,提交后由系统即时判分. 2.学生可以在考试截止 ...

  10. 【ABAP系列】SAP ABAP MRKO增强

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP MRKO增强 ...