<!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. kickstrt脚本for cobbler基于system-config-kickstart配置

    1,由于是基于图形界面来生成ks自动安装脚本,所有图形生成ks脚本的服务器首先需要的就是有X Window System; 要是虚机的可以配个tigervnc-servere来进行操作 不说了直接上命 ...

  2. Spring 报错：Error creating bean with name

    org.springframework.beans.factory.BeanCreationException: 原因是在autowire时,找不到相应的类,上述问题是因为XXXXX的实现类中没有加相 ...

  3. AbpZero--4.不使用谷歌字体，提升加载速度

    jtable控件样式中会使用到谷歌字体,每次访问都特别慢 1.打开jtable.css文件 [..\MyCompanyName.AbpZeroTemplate.Web\libs\jquery-jtab ...

  4. linux网络编程echo多进程服务器

    echo_server 多进程版本 #include <unistd.h> #include <stdlib.h> #include <stdio.h> #incl ...

  5. [AWS] Install the AWS cli

    On Windows, just download the installer and install it. Configure: aws configure In your aws console ...

  6. linux中 vi / vim显示行号或取消行号命令

    1. 显示行号 :set number 或者 :set nu 2. 取消行号显示 :set nu! 3. 每次打开都显示行号 修改vi ~/.vimrc 文件,添加:set number

  7. 汉诺塔III 递推题

    题目描述: 约19世纪末,在欧州的商店中出售一种智力玩具,在一块铜板上有三根杆,最左边的杆上自上而下.由小到大顺序串着由64个圆盘构成的塔.目的是将最左边杆上的盘全部移到右边的杆上,条件是一次只能移动 ...

  8. RunTime 应用实例–关于埋点的思考

    埋点是现在很多App中都需要用到的,这个问题可能每个人都能处理,但是怎样来减少埋点所带来的侵入性,怎样用更加简洁的方式来处理埋点问题,怎样减少误埋,如果上线了发现少埋了怎么办?下面是本文讨论的重点: ...

  9. Android（java）学习笔记214：开源框架的文件上传（只能使用Post）

    1.文件上传给服务器,服务器端必然要写代码进行支持,如下: 我们新建一个FileUpload.jsp的动态网页,同时我们上传文件只能使用post方式(不可能将上传数据拼凑在url路径下),上传数据Ap ...

  10. codevs 1281 Xn数列 （矩阵乘法）

    /* 再来个题练练手 scanf longlong 有bug....... */ #include<cstdio> #include<iostream> #include< ...