<!DOCTYPE html>

<html>

  <head>

    <title>标题</title>

    <meta charset="UTF-8"/>

  </head>

  <body>

    显示空格&nbsp空格内容<br>换行<br> <!--圆角情况下的空格可用-->

    <a href="http://www.baidu.com" title="光标选择展示标题" target="_blank">百度一下</a> <!--超链接，属性：可自定义（data-....）target="_blank":打开新窗口-->

    <!--div标签可以看成一个可以存放标签的容器-->

    <div>我是div元素</div>    <!--换行-->    <!--块级元素，占据整行-->

    <!--使用span标签来组合内联元素，以便通过css来美化它-->

    <span>我是span元素</span>  <!--不换行-->  <!--内联元素-->

    <hr /> <!--划线，单标签-->

    <h1>主题内容标签，块级元素，双标签</h1>

    <h2>主题内容标签，块级元素，双标签</h2>

    <h5>主题内容标签，块级元素，双标签</h5>

    <h6>主题内容标签，块级元素，双标签</h6>

    <p>段落，块级元素，双标签</p>

    <ul>

      <li>无序列表标签</li>

      <li>无序列表标签</li>

      <li>无序列表标签</li>

    </ul>

    <ol>

      <li>有序列表标签</li>

      <li>有序列表标签</li>

      <li>有序列表标签</li>

    </ol>

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

      <dt>标题</dt>

      <dd>

        详情......

      </dd>

    </dl>

    <img src="C:\Users\liuguan\Desktop\微微吗.png" alt="说明信息" width="100" height="100" /> <!--加载图片“./：当前目录；../：上一级目录”-->

    <img src="C:\Users\liuguan\Desktop\微微吗.png" alt="说明信息" width="30%" height="30%" />  <!--百分比：相对于body页面的比例，自由缩放-->

    <!--对图片的某个区域加超链接，也可以整体加链接<a href=""><img str="" /></a>-->

    <img src="C:\Users\liuguan\Desktop\微微吗.png" usemap="#image" /> <!--被加链接的图片，被map标签所作用的图片 usemap="#id名称"-->

    <map id="image" name="image"> <!--id:保持唯一性；name:保持兼容性-->

      <area shape="rect" coords="100,100,177,177" href="http://www.baidu.com" alt="链接说明信息" target="_blank" />  <!--shape：定义连接的形状，常用值（rect,circle）;coords：确定区域坐标位置（左上角右下角的相对坐标）；href：链接地址；alt：说明信息-->

    </map>

  </body>

</html>

HTML表格

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>标题</title>

    </head>

    <body>

        <table border="1"><!--表格：tr行，td列，th表头单元格（加粗）属性：cellpadding（单元格大小）cellspacing（单元格间距大小）-->

            <tr><th>姓名</th><th>性别</th><th>年龄</th><th>部门</th></tr>

            <tr><th>刘冠</th><td> 男 </td><td> 23 </td><td>信心中心</td></tr>

            <tr><th>刘冠</th><td> 男 </td><td> 23 </td><td>信心中心</td></tr>

        </table>    <!--td属性：colspan（规定单元格可横跨的列数，向后顶）rowspan（规定单元格可横跨的行数，向下顶）-->

    </body>

</html>

HTML表单

<!DOCTYPE html>

<html>

    <head>

        <title>页面标题</title>

        <meta charset="UTF-8">

    </head>

    <body>

        <h3>登录界面</h3>

        <form action="表单提交地址" name="表单名字" target="_blank" method="get" ><!--method:get/post-->

            用户名：<input type="text" /><br/><br/>

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

            头像：<input type="file" /><br/><br/>

            性别：<input type="radio" name="sex"/>男  <!--通过name属性的一致来实现单选-->

                  <input type="radio" name="sex" id="boy" /><label for="boy">男</label> <!--这种方式增强用户体验（直接点击文字即可选中）-->

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

            爱好：<input type="checkbox" />足球  <!--复选框-->

                  <input type="checkbox" checked="checked" />篮球<br/><br/>   <!--在单/复选框中checked="checked" 写到哪默认那个被选中-->

            自我介绍：<textarea cols="20" rows="3">多行输入框</textarea><br/><br/> <!--cols:粗略的每行可输入字符个数,rows:行数-->

            下拉菜单：<select> <!--multiple="multiple"选择列表展开，并且可以多选-->

                            <optgroup label="必修课"><!--optgroup分组-->

                                <option value="集成电路">集成电路</option>

                                <option value="数字信号处理">数字信号处理</option>

                                <option value="信号与系统">信号与系统</option>

                            </optgroup>

                            <optgroup label="选修课">

                                <option value="初级刀术">初级刀术</option>

                                <option value="二十四式太极拳" selected="selected">二十四式太极拳</option> <!--默认选中-->

                                <option value="三路长拳">三路长拳</option>

                            </optgroup>

                       </select>  <br/><br/>

                  <!--disabled="disabled"不可操作状态-->

                  <!--readonly="readonly"只读模式-->

                  <!--size="size"输入框长度-->

                  <!--input type="button"value="按钮" /-->

                  <input type="submit" value="登录"/>&nbsp&nbsp&nbsp  <!--提交-->

                  <input type="reset" />   <!--重置：清空信息-->

        </form>

    </body>

</html>

补充

    <head>

        <title>页面标题</title>

        <meta charset="UTF-8" />

        <meta name="keywords" content="搜索关键字1,搜索关键字2" />

        <meta name="description" content="描述内容" />

        <meta http-equiv="refresh" content="等待秒数;URL=跳转 url 地址" />

        <meta http-equiv="pragma" content="no-cache"> <!--不缓存-->

        <!--

            title:例如百度搜索列表中的标题

            description:例如百度搜索列表中的标题下边的描述

        -->

    </head>

HTML学习的更多相关文章

  1. 从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  2. Angular2学习笔记（1）

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  3. ABP入门系列（1）——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  4. 消息队列——RabbitMQ学习笔记

    消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...

  5. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. Unity3d学习 制作地形

    这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...

  7. 《Django By Example》第四章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...

  8. 菜鸟Python学习笔记第一天：关于一些函数库的使用

    2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...

  9. 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁，Atomic原子类)

    前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...

  10. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

随机推荐

  1. Autodesk View and Data API二次开发学习指南

    什么是View and Data API? 使用View and Data API,你可以轻松的在网页上显示大型三维模型或者二维图纸而不需要安装任何插件.通过View and Data API,你可以 ...

  2. Android开发者的Kotlin：书

    原文标题:Kotlin for Android Developers: The book 原文链接:http://antonioleiva.com/kotlin-android-developers/ ...

  3. 你必须知道的HTTP错误

    发送网络请求有时失败,分析一下响应行,在响应的响应行内,你会发现响应行由三部分组成,用空格来隔开,HTTP/1.1 404 NOT FOUND,第一个是响应的HTTP的版本,第二个和第三个是状态值. ...

  4. 从无到有实现登录功能以及thinkphp怎么配置数据库信息

    好开心,终于解决了.从学习android到现在写登录功能已经不是一次两次了,如今再写想着肯定是信手拈来,没有想到的是尽然折磨了我一天的时间才搞定它.唉...... 先来看几张截图,这次的登录跟以往的不 ...

  5. 转载：android自定义view实战(温度控制表)！

    效果图 package cn.ljuns.temperature.view; import com.example.mvp.R; import android.content.Context;impo ...

  6. Dagger2 (二) 进阶篇

    一.作用域Scope 之前了解RoboGuice的时候,我们知道它默认给我们提供了几个注解,ContextSingleton和Singleton,但是Dagger2更为灵活,只有javax包中提供的S ...

  7. (八)Eclipse创建Maven项目运行mvn命令

    1.Eclipse创建Maven项目 使用Eclipse创建一个Maven项目非常的简单,选择菜单项File>New>Other(也可以在项目结构空白处右击鼠标键),在弹出的对话框中选择M ...

  8. 0038 Java学习笔记-多线程-传统线程间通信、Condition、阻塞队列、《疯狂Java讲义 第三版》进程间通信示例代码存在的一个问题

    调用同步锁的wait().notify().notifyAll()进行线程通信 看这个经典的存取款问题,要求两个线程存款,两个线程取款,账户里有余额的时候只能取款,没余额的时候只能存款,存取款金额相同 ...

  9. 常用MySQL图形化管理工具

    MySQL的管理维护工具非常多,除了系统自带的命令行管理工具之外,还有许多其他的图形化管理工具,这里我介绍几个经常使用的MySQL图形化管理工具,供大家参考. MySQL是一个非常流行的小型关系型数据 ...

  10. shell 脚本之 shell 练习题汇总

    整理了一些 shell 相关的练习题,记录到这里. 1. 请按照这样的日期格式 xxxx-xx-xx 每日生成一个文件,例如:今天生成的文件为 2013-09-23.log, 并且把磁盘的使用情况写到 ...