<!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. C++ sizeof

    class A{ int a; char c; char b; }; class B{ char c; int a; char b; }; int main(int argc, char* argv[ ...

  2. Wow! Such Doge! - HDU 4847 （水题）

    题目大意:题目描述了一大堆.....然而并没什么用,其实就是让求给的所有字符串里面有多少个"doge",不区分大小写.   代码如下: ====================== ...

  3. 阿里IPO弃港赴美？

    最近,关于阿里巴巴和香港联交所博弈的新闻一直长时间占据了各大科技媒体的头条.9月25日,香港联交所行政总裁在港交所其个人专栏“小加网志”中贴出一则名为<投资者保障杂谈>的博客文章,谈及“香 ...

  4. kafka入门教程

    1.Kafka独特设计在什么地方?2.Kafka如何搭建及创建topic.发送消息.消费消息?3.如何书写Kafka程序?4.数据传输的事务定义有哪三种?5.Kafka判断一个节点是否活着有哪两个条件 ...

  5. html中em和px

    px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸 ...

  6. [AWS S3] Hosting a Static Website on Amazon S3

    In this lesson, you will learn how to host a static website on Amazon S3. I will show you how to cre ...

  7. PHP安全编程：网站安全设计的一些原则(转)

    深度防范 深度防范原则是安全专业人员人人皆知的原则,它说明了冗余安全措施的价值,这是被历史所证明的. 深度防范原则可以延伸到其它领域,不仅仅是局限于编程领域.使用过备份伞的跳伞队员可以证明有冗余安全措 ...

  8. PHP安全编程：留心后门URL 直接可以通过URL访问（转）

    后门URL是指虽然无需直接调用的资源能直接通过URL访问.例如,下面WEB应用可能向登入用户显示敏感信息: <?php $authenticated = FALSE; $authenticate ...

  9. common-httpclient 用户名密码认证示例

    import java.io.IOException; import java.util.ArrayList; import java.util.List; import org.apache.com ...

  10. 第六篇：R语言数据可视化之数据分布图（直方图、密度曲线、箱线图、等高线、2D密度图）

    数据分布图简介 中医上讲看病四诊法为:望闻问切.而数据分析师分析数据的过程也有点相似,我们需要望:看看数据长什么样:闻:仔细分析数据是否合理:问:针对前两步工作搜集到的问题与业务方交流:切:结合业务方 ...