本节列举了一些简单的HTML例子,帮助大家更感性地认识HTML标签。是不是对一些标签还不熟悉?别担心,后面几个章节会有详细说明,先跑几个例子看看效果吧。

HTML文档相关标签
所有HTML文档必须以<!DOCTYPE html>声明开头。

HTML文档则以<html>开头,以</html>结尾。

HTML中所有可见区域都放在<body></body>之间。

HTML文档实例

<!DOCTYPE html>
<html>
<body> <h1>我是标题1</h1>
<p>我是段落</p> </body>
</html>

HTML标题
HTML标题用<h1>到<h6>六个标签表示。

<h1>表示级别最高的标题,<h6>表示级别最低的标题。

HTML标题实例

<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>

HTML段落
HTML段落用<p>标签表示。

HTML段落实例

<p>我是段落</p>
<p>我是另一个段落</p>

HTML超链接
HTML中的超链接用<a>标签表示。

HTML超链接实例

<a href="http://www.w3uu.com">去w3悠游学习</a>

上例中href是<a>标签的属性,href属性定义了这个超链接跳转的网址。以后的学习中我们会看到,每个标签都有属性。有了属性,标签的表现会更强大、更丰富。

HTML图片
HTML中的图片用<img>标签表示。

<img>标签有四个重要的属性:src(图片路径)、alt(图片失效时替代的文字)、width(图片宽度)、height(图片高度)。

HTML图片实例

<img src="/static/img/qrcode.jpg" alt="w3uu.com" width="160" height="160">

原文链接: www.w3uu.com/intro/base/html-basic.html

HTML基础实例的更多相关文章

  1. APP接口自动化测试JAVA+TestNG(二)之TestNG简介与基础实例

    前言 继上篇环境篇后,本篇主要对TestNG进行介绍,给出最最基础的两个实例,通过本文后,学会并掌握TestNG测试用例的编写与运行,以及生成美化后的报告.下一篇为HTTP接口实战(国家气象局接口自动 ...

  2. python基础——实例属性和类属性

    python基础——实例属性和类属性 由于Python是动态语言,根据类创建的实例可以任意绑定属性. 给实例绑定属性的方法是通过实例变量,或者通过self变量: class Student(objec ...

  3. Windows 8实例教程系列 - 数据绑定基础实例

    原文:Windows 8实例教程系列 - 数据绑定基础实例 数据绑定是WPF,Silverlight以及Windows Phone应用开发中最为常用的开发技术,在基于XAML的Windows Stor ...

  4. TypeScript进阶开发——ThreeJs基础实例,从入坑到入门

    前言 我们前面使用的是自己编写的ts,以及自己手动引入的jquery,由于第三方库采用的是直接引入js,没有d.ts声明文件,开发起来很累,所以一般情况下我们使用npm引入第三方的库,本文记录使用np ...

  5. javascript订阅模式浅析和基础实例

    前言 最近在开发redux或者vux的时候,状态管理当中的createStore,以及我们在组件中调用的dispatch传递消息给状态管理中心,去处理一些操作的时候,有些类似我们常见到订阅模式 于是写 ...

  6. Java线程基础实例

    概述 Java线程是一个在实战开发中经常使用的基础功能,而在Java中线程相关的类在java.lang和java.util.concurrent里 Thread package thread.base ...

  7. Quartz基础+实例

    1. 介绍 Quartz体系结构: 明白Quartz怎么用,首先要了解Scheduler(调度器).Job(任务)和Trigger(触发器)这3个核心的概念. 1. Job: 是一个接口,只定义一个方 ...

  8. 快速掌握Ajax-Ajax基础实例(Ajax返回Json在Java中的实现)

    (转)实例二:Ajax返回Json在Java中的实现 转自http://www.cnblogs.com/lsnproj/archive/2012/02/09/2341524.html#2995114 ...

  9. Vue.js教程--基础(实例 模版语法template computed, watch v-if, v-show v-for, 一个组件的v-for.)

    官网:https://cn.vuejs.org/v2/guide/index.html Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统. 视频教程:https: ...

  10. android binder 基础实例及解析(一)【转】

    本文转载自:http://blog.csdn.net/newchenxf/article/details/49359283#insertcode 原文网址(转载请注明出处): http://blog. ...

随机推荐

  1. 【起航计划ObjC 002】印第安老斑鸠ObjC的幻想 ---- Ubuntu下安装并使用MAC虚拟机

    本文介绍如何在Ubuntu下安装Mac OS X Mavericks系统.具体如下: 1)安装前准备工作 下载Mac OS X Mavericks系统,地址:http://pan.baidu.com/ ...

  2. 通过 Powershell 来替换 ARM 模式下虚拟机的网络接口

    需求描述 客户在部署完 ARM 模式的虚拟机以后,由于误操作在虚拟机内部禁用了网卡导致远程访问虚拟机受到限制,以下是通过 Powershell 命令来替换原有虚拟网络接口实现虚拟网卡重置功能. Not ...

  3. C#实现文件异步上传

    //前台方法,包含弹出框确认以及文件选择<input type="button" id="importxlsx" name="importxls ...

  4. February 28 2017 Week 9 Tuesday

    Time you enjoy wasting, was not wasted. 你乐于挥霍的时间,都不能算作是浪费. A few days ago, I learned a sentence from ...

  5. 战神CPU计算机硬件组装

    今天本来更新DP常见优化的,但是下午土木学院吴书记找我组装电脑,晚上A题后,临时有一些事情,没来得及整理. 这里分享一下战神CPU(死垃圾)的组装. 一顿操作猛如虎,很艰难的装好机子了,发现吴书记被坑 ...

  6. 树状数组 && 线段树应用 -- 求逆序数

    参考:算法学习(二)——树状数组求逆序数 .线段树或树状数组求逆序数(附例题) 应用树状数组 || 线段树求逆序数是一种很巧妙的技巧,这个技巧的关键在于如何把原来单纯的求区间和操作转换为 求小于等于a ...

  7. Linux使用sz、rz命令下载、上传文件

    1.安装服务 yum -y install lrzsz 2.上传命令:rz 使用rz命令,会调用系统的资源管理器,选择文件进行上传即可.上传的文件默认保存linux当前所在目录 3.下载命令:sz 根 ...

  8. maven常用依赖总结

    Apache工具组件 <!-- 字符串处理 --> <dependency> <groupId>org.apache.commons</groupId> ...

  9. SpringMVC学习记录三——8 springmvc和mybatis整合

    8      springmvc和mybatis整合 8.1      需求 使用springmvc和mybatis完成商品列表查询. 8.2      整合思路 springmvc+mybaits的 ...

  10. 【luogu P1268 树的重量】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1268 给定所有点间的最短路求原图所有路径和 形如: 我们需要计算红边+绿边 绿边 = (红边+蓝边+紫边)/ ...