<!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. 3.并发编程-ReentrantLock 细节说明

    并发编程-ReentrantLock 细节说明 ---title: 并发编程-ReentrantLock 细节说明date: 2018-07-05 09:06:57categories: - 并发编程 ...

  2. HBuilder使用逍遥Android模拟器

    Microvirt HBuilder使用逍遥Android模拟器 1.逍遥模拟器安装 地址: 点我下载 2.连接注意事项 a. 复制adb等文件 HBuilder安装目录中tools文件夹下的三个文件 ...

  3. node.js npm 操作 模块化开发 cnpm镜像安装

    模块(包) 传统引入 js 的缺点 整个网页,我们写了一个 js 文件,所有的特效都在里面 耦合度太高,代码之间关联性太强,不便于后期维护 变量容易 全局污染 如果将 复杂的 js 文件,拆成多个功能 ...

  4. Python中的self用法之面向对象

    class Student(object): def __init__(self, name, score): self.__name = name self.__score = score def ...

  5. 十、Springboot之thymeleaf与jsp共存

    : pom.xml添加依赖 <!--thymeleaf整合JSP需要用到下面的依赖--> <dependency> <groupId>org.thymeleaf&l ...

  6. 【2】通过Ajax方式上传文件(图片)，使用FormData进行Ajax请求

    HTML: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

  7. msyql 计划任务 备份数据库

    用计划任务备份数据库 把exam库备份到家(home)目录下 [root@izuf66j5nlb2arg99viiuwz /]# mysqldump -u root -p exam > ~/ex ...

  8. Selenium学习之==>18种定位方式的使用

    Selenium的定位方式一共有18种,单数8种,复数8种,最后两种是前面这16种的底层封装 单数形式8种 # 1.id定位 al = driver.find_element_by_id('i1') ...

  9. 2d平台怪物逻辑

    2d来回巡逻 遇到坑会自动转向 可配置单次方向行走的时间,转向等待时间等 using System; using System.Collections; using System.Collection ...

  10. Pytorch搭建卷积神经网络用于MNIST分类

    import torch from torch.utils.data import DataLoader from torchvision import datasets from torchvisi ...