<html>标签:定义HTML文档

<body>标签:定义文档主体

<h1> - <h6> 标签:定义HTML标题

<hr> 标签:创建水平线

<!-- 这是一个注释 --> 注释

<p> 标签:段落

<br />标签:换行


HTML 链接

<a> 标签:链接

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时,链接显示为红色并带有下划线。

(1)href属性:来描述链接的地址

  1. <a href="url">链接文本</a>

(2)target 属性:定义被链接的文档在何处显示

  例:target="_blank": 链接将在新窗口打开

(3)id属性:在一个HTML文档书签标记

  例:插入ID   <a id="tips">文字</a>

    文档中创建一个链接到ID部分  <a href="#tips">文字</a>

    创建一个链接到其它文档ID部分<a href="http://www.baidu.com/html-links.html#tips">文字</a>

注释: 请始终将正斜杠添加到子文件夹。

  例:href="http://www.baidu.com/html/


HTML <head> 元素

头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>

<title> 标签:定义了不同文档的标题

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时,显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

<base> 标签:描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:

  1. <base href="http://www.baidu.com/images/" target="_blank">

<link> 标签:链接到样式表(CSS)

  1. <link rel="stylesheet" type="text/css" href="mystyle.css">

<style> 元素:直接添加CSS样式来渲染 HTML 文档

  1. <head>
  2. <style type="text/css">
  3. body {background-color:yellow}
  4. p {color:blue}
  5. </style>
  6. </head>

<meta> 标签:提供了元数据不显示在页面上,但会被浏览器解析。

为搜索引擎定义关键词:

  1. <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

  1. <meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

  1. <meta name="author" content="Runoob">

每30秒中刷新当前页面:

  1. <meta http-equiv="refresh" content="30">

<script>标签:用于加载脚本文件,如: JavaScript


HTML 图像- 图像标签( <img>)和源属性(Src)

<img> 是空标签,只包含属性,没有闭合标签。

  1. <img src="url" alt="some_text">

(1)src 属性: "source"源属性的值是图像的 URL 地址

(2)alt 属性:用来为图像定义一串预备的可替换的文本。

(3)height(高度) 与 width(宽度)属性:用于设置图像的高度与宽度。


HTML 表格

<table> 标签:表格

<tr> 标签:行

<th> 标签:表头

<td> 标签:单元格

colspan="2":链接行的两个段元格

  1. <table border="1">
  2. <tr>
  3. <th>Header 1</th>
  4. <th>Header 2</th>
  5. </tr>
  6. <tr>
  7. <td>row 1, cell 1</td>
  8. <td>row 1, cell 2</td>
  9. </tr>
  10. <tr>
  11. <td>row 2, cell 1</td>
  12. <td>row 2, cell 2</td>
  13. </tr>
  14. </table>

HTML 列表

<ul> 标签:无序列表

<ol> 标签:有序列表

<li> 标签:每个列表项的开始

  1. <ul>
  2. <li>Coffee</li>
  3. <li>Milk</li>
  4. </ul>
  5.  
  6. <ol>
  7. <li>Coffee</li>
  8. <li>Milk</li>
  9. </ol>
  1. <dl>标签:自定义例表
  1. <dl>
  2. <dt>自定义列表项</dt>
  3. <dd>自定义列表项的定义<dd>
  4. <dt>自定义列表项</dt>
  5. <dd>自定义列表项的定义<dd>
  6. </dl>

HTML 区块

<div> 元素:块级元素,可用于组合其他 HTML 元素的容器。

<span> 元素:内联元素,可用作文本的容器。

<table> 元素:作用是显示表格化的数据。

块级元素(block-level):在浏览器显示时,通常会以新行来开始(和结束)。例: <h1>, <p>, <ul>, <table>

内联元素(inline):在显示时通常不会以新行开始。例: <b>, <td>, <a>, <img>


HTML 布局

<div>块级元素或是<table>表格化的数据


HTML 表单和输入

<form>标签:表单

<input>标签:输入

文本域(Text Fields):缺省宽度是20个字符

  1. <form>
  2. First name: <input type="text" name="firstname"><br>
  3. Last name: <input type="text" name="lastname">
  4. </form>

密码字段:<input type="password">——密码不会显示,以星号或圆点替代

  1. <form>
  2. Password: <input type="password" name="pwd">
  3. </form>

单选按钮:<input type="radio">

  1. <form>
  2. <input type="radio" name="sex" value="male">Male<br>
  3. <input type="radio" name="sex" value="female">Female
  4. </form>

复选框:<input type="checkbox">

  1. <form>
  2. <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
  3. <input type="checkbox" name="vehicle" value="Car">I have a car
  4. </form>

提交按钮:<input type="submit">

  1. <form name="input" action="html_form_action.php" method="get">
  2. Username: <input type="text" name="user">
  3. <input type="submit" value="Submit">
  4. </form>

HTML 框架

<iframe>框架:在同一个浏览器窗口中显示不止一个页面。

iframe语法:<iframe src="URL"></iframe>

height 和 width 属性:用来定义iframe标签的高度与宽度。——属性默认以像素为单位,

  1. <iframe src="demo_iframe.htm" width="200" height="200"></iframe>

frameborder 属性:是否显示边框——属性值为 "0" 移除iframe的边框

  1. <iframe src="demo_iframe.htm" frameborder="0"></iframe>

例:点击链接,链接地址页面显示在iframe框架中

  1. <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
  2. <p><a href="http://www.baidu.com" target="iframe_a">baidu.com</a></p>

注:name和target名字相同。


HTML 回顾整理的更多相关文章

  1. logback日志回顾整理--2018年8月8日

    几年前使用过logback作为项目的日志框架. 当时觉得这个框架比log4j更加好用. 所以系统的学习了一遍. 后来换了公司, 不再使用logback. 如今, 又有机会使用logback了, 所以, ...

  2. Java知识系统回顾整理01基础02面向对象01类和对象

    一.面向对象实例--设计英雄这个类 LOL有很多英雄,比如盲僧,团战可以输,提莫必须死,盖伦,琴女 所有这些英雄,都有一些共同的状态 比如,他们都有名字,hp,护甲,移动速度等等 这样我们就可以设计一 ...

  3. Java知识系统回顾整理01基础05控制流程07结束外部循环

    一.break是结束当前循环 二.结束当前循环实例 break; 只能结束当前循环 public class HelloWorld { public static void main(String[] ...

  4. Java知识系统回顾整理01基础05控制流程06break

    一.break break:结束循环 二.练习--直接结束当前for循环 public class HelloWorld { public static void main(String[] args ...

  5. Java知识系统回顾整理01基础05控制流程04 for

    一.for 比较for和while public class HelloWorld { public static void main(String[] args) { //使用while打印0到4 ...

  6. Java知识系统回顾整理01基础05控制流程01if

    一.if if(表达式1){ 表达式2: } 如果表达式1的值是true, 就执行表达式2 public class HelloWorld { public static void main(Stri ...

  7. Java知识系统回顾整理01基础04操作符06三元运算符

    一.三元运算符 表达式?值1:值2 如果表达式为真 返回值1 如果表达式为假 返回值2 if语句学习链接:if语句 public class HelloWorld { public static vo ...

  8. Java知识系统回顾整理01基础04操作符02关系操作符

    一.关系操作符 关系操作符:比较两个变量之间的关系  > 大于 >= 大于或等于 < 小于 <= 小于或等于 == 是否相等 != 是否不等 public class Hell ...

  9. Java知识系统回顾整理01基础04操作符01算术操作符

    一.算数操作符类别 基本的有: + - * / % 自增 自减: ++ -- 二.基本算数操作符 + - * / 基本的加 减 乘 除 public class HelloWorld { public ...

  10. Java知识系统回顾整理01基础03变量07final关键字

    一.final赋值 final 修饰一个变量,有很多种说法,比如不能改变等等 准确的描述是 当一个变量被final修饰的时候,该变量只有一次赋值的机会 二.在声明的时候赋值 i已经被赋值为5,所以这里 ...

随机推荐

  1. python排序算法之冒泡,选择,插入

    1.参考 一本关于排序算法的 GitBook 在线书籍 <十大经典排序算法>,使用 JavaScript & Python & Go 实现 2.冒泡排序:两两比较,互换位置 ...

  2. memcached 配置

    Memcached是一款开源.高性能.分布式内存对象缓存系统,可应用各种需要缓存的场景,其主要目的是通过降低对Database的访问来加速web应用程序.它是一个基于内存的“键值对”存储,用于存储数据 ...

  3. gitlab之三: gitlab邮件通知的配置

    参考 :  https://www.cnblogs.com/lovelinux199075/p/9072265.html gitlab 添加新用户后,会自动发送邮件到填写的邮箱. 实验版本:  11. ...

  4. BZOJ1497 [NOI2006]最大获利 网络流 最小割 SAP

    原文链接http://www.cnblogs.com/zhouzhendong/p/8371052.html 题目传送门 - BZOJ1497 题意概括 有n个站要被建立. 建立第i个站的花费为pi. ...

  5. JavaSE| 网络编程

    URL URI(Uniform resource identifier):表示一个统一资源标识符 (URI) 引用,用来唯一的标识一个资源. URL(Uniform Resource Locator) ...

  6. Java版本翻转字符串

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1282题目描述: Java中的StringBuilder有一个字符串翻转函数,因此,可以先将输入的数字转 ...

  7. python数据结构之栈

    栈 栈(stack),有些地方称为堆栈,是一种容器,可存入数据元素.访问元素.删除元素,它的特点在于只能允许在容器的一端(称为栈顶端指标,英语:top)进行加入数据(英语:push)和输出数据(英语: ...

  8. type__列表

  9. 解决VS打开文件出现No EditorOptionDefinition export found for the given option name问题

    转载自http://stackoverflow.com/questions/23893497/no-editoroptiondefinition-export-found-error的第一个回答 Af ...

  10. SpringBoot文件上传下载

    项目中经常会有上传和下载的需求,这篇文章简述一下springboot项目中实现简单的上传和下载. 新建springboot项目,前台页面使用的thymeleaf模板,其余的没有特别的配置,pom代码如 ...