<!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. openStack ceilometer API

    1.概述 Ceilometer是OpenStack中的一个子项目,它像一个漏斗一样,能把OpenStack内部发生的几乎所有的事件都收集起来,然后为计费和监控以及其它服务提供数据支撑.Ceilomet ...

  2. Theme Section - HDU 4763（KMP）

    题目大意:给你一个串,从这个串里面找出一个前缀后缀中间相等的串的最大长度也就是 EAEBE,每个字母都代表一个串,E出现了三次,找出最长的那个E.   分析:我们知道KMP里面保存的就是前缀和后缀的最 ...

  3. XQuery FLWOR 表达式

    FLWOR 是 "For, Let, Where, Order by, Return" 的只取首字母缩写.for 语句把 bookstore 元素下的所有 book 元素提取到名为 ...

  4. js输入框只能输入数字和小数点

    <input name="number" onKeyPress="if (event.keyCode!=46 && (event.keyCode&l ...

  5. [转载]Android利用convertView优化ListView性能

    本的getView写法 Java代码public View getView(int position, View convertView, ViewGroup parent) {View view = ...

  6. Qt 属性

      Qt提供了一套和一些编译器提供商也提供的属性系统类似的完善的属性系统.然而,作为一个不依赖编译器和平台的库,Qt不能依赖像__property或者[property]那样的非标准编译器特征.我们的 ...

  7. Android 跨应用调用Activity及Service

    如何调用另外一个app应用的activity或者service,本文提供一个验证可行的方法. 调用方法: Intent intent=new Intent("youActionName&qu ...

  8. java mysql驱动

    mysql驱动方式有三种, 1.第一种是先把jar包放在项目的目录下,通过添加jar包,是使用相对地址的,这样把项目复制到其它电脑也可以用 2.第二种方法是导入外部的jar包,是绝对地址,如果项目要复 ...

  9. 第四篇：SQL

    前言 确实,关于SQL的学习资料,各类文档在网上到处都是.但它们绝大多数的出发点都局限在旧有关系数据库里,内容近乎千篇一律.而在当今大数据的浪潮下,SQL早就被赋予了新的责任和意义. 本篇中,笔者将结 ...

  10. Android开发艺术探索》读书笔记 (12) 第12章 Bitmap的加载和Cache

    第12章 Bitmap的加载和Cache 12.1 Bitmap的高速加载 (1)Bitmap是如何加载的?BitmapFactory类提供了四类方法:decodeFile.decodeResourc ...