<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h1>我的第一个页面</h1>

<p>我的第一个段落。</p>

<script>

window.alert(5 + 6);

</script>

</body>

</html>
  • DOCTYPE 声明了文档类型
  • 位于标签 <html> 与 </html> 描述了文档类型
  • 位于标签 <body> 与 </body> 为可视化网页内容
  • 位于标签 <h1> 与 </h1> 作为一个标题使用
  • 位于标签 <p> 与 </p> 作为一个段落显示

可以看出：

  • HTML 是用来描述网页的一种语言；
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • 浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户；

工具与环境：

  • Nodepad++ 编写 html 与 css。
  • chrome 浏览器直接运行 html。

基础扩展：

<a>：定义链接

href：指定超链接地址

示例： <a href = "http://www.gameres.com">游资网</a>

<img>：定义图像

示例：<img src="testImg.png" width="400" height="270">

如果不按图标自身的长宽比来配置，图标会按配置的长宽比进行拉伸/压缩

HTML 属性：

上述的 href 就是一种属性，img 标签的图片源、长、宽都是由属性提供的，可以知道：

  • 属性都被标注在标签的开头；
  • 属性的值都要使用双引号；

id 属性示例：

<html>

<head>

<script type="text/javascript">

function change_header()

{

document.getElementById("myHeader").innerHTML="Nice day!";

}

</script>

</head>

<body>

<h1 id="myHeader">Hello World!</h1>

<button onclick="change_header()">Change text</button>

</body>

</html>

HTML 水平线与注释：

<hr>    <!-- 注释测试 -->

<hr>

<hr>

HTML 段落换行：

<p>这个<br>段落<br>演示了分行的效果</p>

HTML 文本格式化：

<b>显示

加粗文本</b> <br>   <!-- 换行无效-->

<i>显示斜体文本</i> <br>

<big>显示  大号文本</big> <br>

<small>显示  小号文本</small> <br>

<pre>                <!-- 换行有效-->

换行可以不用标签

就可以实现

</pre>

<p>WWF's goal is to:     <!-- 换行有效-->

<q>Build a future where people live in harmony with nature.</q>    <!-- <q> 输出引号 -->

We hope they succeed.</p>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>        <!-- 删除效果与下划线效果 -->

留下教程来源方便查询：http://www.runoob.com/html/html-formatting.html。

HTML 链接：

target 属性：定义被链接的文档在何处显示。

<a href="http://www.gameres.com" target="_blank">游资网</a>

将一张图片作为链接点：

<p>图片链接

<a href="http://www.gameres.com">

<img src="testImg.png" width="730" height="270">

</a></p>

链接到当前页面的指定位置：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<p>

<a href="#C2">查看章节2</a>

</p>

<h2>章节 1</h2>

<p>这边显示该章节的内容……</p>

<h2><a id="C2">章节 2</a></h2>

<p>这边显示该章节的内容……</p>

<h2>章节 3</h2>

<p>这边显示该章节的内容……</p>

</body>

</html>

HTML 头部：

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件

HTML 基础元素的更多相关文章

  1. Ansible的基础元素和YAML介绍

    本节内容: YAML Ansible常用的数据类型 Ansible基础元素 一.YAML 1. YAML介绍 YAML是一个可读性高的用来表达资料序列的格式.YAML参考了其他多种语言,包括:XML. ...

  2. ansible入门三（Ansible的基础元素和YAML介绍）

    Ansible的基础元素和YAML介绍   本节内容: YAML Ansible常用的数据类型 Ansible基础元素 一.YAML 1. YAML介绍 YAML是一个可读性高的用来表达资料序列的格式 ...

  3. 『心善渊』Selenium3.0基础 — 4、Selenium基础元素定位详解

    目录 1.什么是元素定位 2.Selenium元素定位常用API (1)By_id 定位 (2)by_name 定位 (3)by_class_name 定位 (4)by_tag_name 定位 (5) ...

  4. webdriervAPI基础元素定位

    from  selenium  import  webdriver driver  =  webdriver.Chorme() driver.get("http://www.baidu.co ...

  5. Web UI自动化测试基础——元素定位（三）

    本篇文章整理了元素定位的基础知识——iframe框架中的元素定位. 一.iframe框架元素定位 iframe是Html页面的内联框架,如果在自动化测试中无法定位到某个元素,那么很有可能是因为该元素在 ...

  6. Web UI自动化测试基础——元素定位（二）

    本篇文章整理了元素定位的基础知识——多个元素定位方式. 一.多个元素定位方式简介 同单个元素定位方式相同,多个元素定位方式也有与之对应的8种方式,即id.name.class_name.tag_nam ...

  7. Web UI自动化测试基础——元素定位（一）

    本篇文章整理了元素定位的基础知识——单个元素定位方式. 一.单个元素定位方式简介 1. find_element_by_id 通过元素的id属性进行定位.以百度首页为例,首先进入https://www ...

  8. AngularJS的基础元素应用

    <!doctype html> <!-- 标记ng-app告诉AngularJS处理整个HTML页并引导应用 --> <html ng-app> <head& ...

  9. 游戏基础元素之精灵——Cocos2d-x学习历程(九)

    1.创建精灵 在实际使用中,精灵是由一个纹理创建的.在不加任何设置的情况下,精灵就是一张显示在屏幕上的图片.通常精灵置于层下,因此我们首选在层的初始化方法中创建精灵,设置属性,并添加到层中. 有多种方 ...

随机推荐

  1. Threading Module源码概述(一)

    Python的Threading模块是建立在thread module基础上的一个模块,在threading模块中,暴露着许多thread模块的属性.比如threading._get_ident实际上 ...

  2. Teacher YYF - POJ 3746（打表........）

    1.名词和介词可以被用作主语或宾语 名词->n  介词->pron 2.当使用名词时,必须有冠词在它前面 n+art(冠词) 3.名词可以被一个形容词修饰,动词可以被一个副词修饰 adj+ ...

  3. java 复用类的三种方式区别 组合，继承，代理的区别

    1. 组合 : 只需在新类中产生现有类的对象 .(is - a 有一个) 新类是由现有类的对象组成. (引用初始化与作用域?) 2. 继承 : 按照现有类的类型来创造新类. (has - a 有一个) ...

  4. IOS中线程的通信

    一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任务后,转到另1个线程继续执行任务 ...

  5. 【转】四种常见的POST提交数据方式

    HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 POST 一般用来向服务端提交数据,本文 ...

  6. 在安装twincat plc时，出现 there are some files marked for deletion on next reboot.please reboot first then

    在注冊表内"HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Session Manager\ "中删除注冊表值 " ...

  7. java内存不足

    -Xmx1024m -Xms1024m -XX:PermSize=128m -XX:MaxPermSize=512m ------------------------- 亲测可用

  8. [转] 消息系统该Push/Pull模式分析

    信息推拉技术简介 “智能信息推拉(IIPP)技术”是在网上信息获取技术中加入了智能成份,从而有助于用户在海量信息中高效.及时地获取最新信息,提高了信 息系统主动信息服务的能力.如果引入基于IIPP的主 ...

  9. 刨根问底：对于 self = [super init] 的思考

    对象初始化有两种方式:[class new] 与 [[class alloc] init] 对于后者,有分配和初始化的过程,alloc 从应用程序的虚拟地址空间上为该对象分配足够的内存,并且将新对象的 ...

  10. picasso_强大的Android图片下载缓存库

    tag: android pic skill date: 2016/07/09 title: picasso-强大的Android图片下载缓存库 [本文转载自:泡在网上的日子 参考:http://bl ...