<!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. ASIHttpRequest或者SDWebImage给UIImageView加载图片的逻辑是什么样子的

    非常非常喜欢SDWebImage,就算后来AF也做了图片缓存,我也还是一直使用.图片缓存真的是一件令人头疼的事,但是SDWebImage封装了一切,你所需要的只是简单的set一个URL:1.设置一个展 ...

  2. PHP 計算字符串長度函數

    PHP內置的字符串長度函數strlen無法正確處理中文字符串,它得到的只是字符串所占的字節數.對於GB2312的中文編碼,strlen得到的值是漢字個數的2倍,而對於UTF-8編碼的中文,就是3倍的差 ...

  3. Git 版本控制工具使用介绍------Windows系统下使用

    Git 是用于 Linux内核开发的版本控制工具.与常用的版本控制工具 CVS, Subversion 等不同,它采用了分布式版本库的方式,不必服务器端软件支持(wingeddevil注:这得分是用什 ...

  4. JNI之本地线程进入c层

    在JNI开发中有时候会遇到在c层创建小线程的情况.从本质来讲,java线程和c线程都是请求kerner获取的,只是一段执行序列.从这个角度看,线程并没有什么不同,java线程和c线程可以通用. 然而在 ...

  5. Mac上安装pexpect

    1.首先安装pip sudo easy_install pip 2.pip安装pexpect sudo pip install pexpect

  6. SPOJ 3943 - Nested Dolls 最长不下降子序列LIS（二分写法）

    现在n(<=20000)个俄罗斯套娃,每个都有宽度wi和高度hi(均小于10000),要求w1<w2并且h1<h2的时候才可以合并,问最少能剩几个. [LIS]乍一看跟[这题]类似, ...

  7. codevs 1997 守卫者的挑战

    /* 表示很遗憾.. 开始状态想的没错 就是转移的时候出了问题 自己也想到了数组平移 然而没往下写 与正解擦肩而过…. 然后为了好转移写了个4维的 时间不多了没来得及降维 草草的算算空间就交了… 尼玛 ...

  8. VB php JAVA关于数据库连接数过多的解决方法

    这里讲解一个关于数据库连接多多的解决办法 一般都会在方法中进行数据库的开,利用和关 不过如果在一个循环里面使用的时候 这样数据库的连接数就会过多,如果是1万次的话,数据库服务器可能就会当机 PHP 中 ...

  9. Photon的log使用

    添加log引用,设置log文件在Photon根目录下的log文件夹内. using ExitGames.Logging;using ExitGames.Logging.Log4Net; public ...

  10. 一个PHP开发者总结的九条建议

    本文只是个人从实际开发经验中总结的一些东西,并不是什么名言警句,写出来有两个目的:一是时刻提醒自己要按照这些知识点来写自己代码,二是为了分享,说不定对你有用呢?万一,是吧... 1.首要意识:安全 大 ...