HTML 基础元素
<!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 基础元素的更多相关文章
- Ansible的基础元素和YAML介绍
本节内容: YAML Ansible常用的数据类型 Ansible基础元素 一.YAML 1. YAML介绍 YAML是一个可读性高的用来表达资料序列的格式.YAML参考了其他多种语言,包括:XML. ...
- ansible入门三（Ansible的基础元素和YAML介绍）
Ansible的基础元素和YAML介绍 本节内容: YAML Ansible常用的数据类型 Ansible基础元素 一.YAML 1. YAML介绍 YAML是一个可读性高的用来表达资料序列的格式 ...
- 『心善渊』Selenium3.0基础 — 4、Selenium基础元素定位详解
目录 1.什么是元素定位 2.Selenium元素定位常用API (1)By_id 定位 (2)by_name 定位 (3)by_class_name 定位 (4)by_tag_name 定位 (5) ...
- webdriervAPI基础元素定位
from selenium import webdriver driver = webdriver.Chorme() driver.get("http://www.baidu.co ...
- Web UI自动化测试基础——元素定位（三）
本篇文章整理了元素定位的基础知识——iframe框架中的元素定位. 一.iframe框架元素定位 iframe是Html页面的内联框架,如果在自动化测试中无法定位到某个元素,那么很有可能是因为该元素在 ...
- Web UI自动化测试基础——元素定位（二）
本篇文章整理了元素定位的基础知识——多个元素定位方式. 一.多个元素定位方式简介 同单个元素定位方式相同,多个元素定位方式也有与之对应的8种方式,即id.name.class_name.tag_nam ...
- Web UI自动化测试基础——元素定位（一）
本篇文章整理了元素定位的基础知识——单个元素定位方式. 一.单个元素定位方式简介 1. find_element_by_id 通过元素的id属性进行定位.以百度首页为例,首先进入https://www ...
- AngularJS的基础元素应用
<!doctype html> <!-- 标记ng-app告诉AngularJS处理整个HTML页并引导应用 --> <html ng-app> <head& ...
- 游戏基础元素之精灵——Cocos2d-x学习历程(九)
1.创建精灵 在实际使用中,精灵是由一个纹理创建的.在不加任何设置的情况下,精灵就是一张显示在屏幕上的图片.通常精灵置于层下,因此我们首选在层的初始化方法中创建精灵,设置属性,并添加到层中. 有多种方 ...
随机推荐
- SRM 506(2-1000pt)
DIV2 1000pt 题意:一个由n*m的网格组成的棋盘,有四种点,'.'表示空点,'#'表示是墙不能走,'$'表示起点(同样是空点),'1'~'9'表示该点有复活时间为t的怪兽.每次,可以从一个点 ...
- 跑步进入全站 HTTPS ，这些经验值得你看看
随着国内网络环境的持续恶化,各种篡改和劫持层出不穷,越来越多的网站选择了全站 HTTPS.就在前几天,免费提供证书服务的 Let’s Encrypt 项目也正式开放测试,HTTPS 很快就会成为 WE ...
- centos安装GO
1,下载 go1.5.1.linux-amd64.tar.gz 2,将go解压到/opt,个人喜好罢了[root@localhost ~]# tar -C /opt -xzf ./go1.5.1.li ...
- Greenplum 数据库架构分析
Greenplum 数据库是最先进的分布式开源数据库技术,主要用来处理大规模的数据分析任务,包括数据仓库.商务智能(OLAP)和数据挖掘等.自2015年10月正式开源以来,受到国内外业内人士的广泛关注 ...
- appium点击屏幕（手势）
在android测试过程中,会遇到要点击一下屏幕的需求. 在appium旧版本使用下面代码点击android屏幕,没有报错.Map tap = new HashMap(); tap.put(" ...
- Stage3D_Game_Programming:渲染3D模型
OBJ是文件,先来解释下OBJ文件.随便找一个OBJ文件,用文本查看: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 # ...
- motan源码分析十一：部分特性
本章将描述motan部分的特性并对源码进行分析. 1.requestid的维护,使用了当前时间左移20位,再和一个自增变量组合 public class RequestIdGenerator { ); ...
- iOS 类似美团外卖 app 两个 tableView 联动效果实现
写在前面 首先声明哈,不是广告,我就是用的时候觉得这个功能比较好玩,就想着实现了一下.效果如图: 接下来简单的说一下思路吧~ 大体思路 可能我们看到这种功能的实现的时候,首先想着的是我在这个控制器中左 ...
- 【分享】w32service table XPsp2
Ord Address fnAddr Symbols-------------------------------- [ 0] BF999280: BF93569A (win32k!Nt ...
- Day12 - 堡垒机开发
Python之路,Day12 - 那就做个堡垒机吧 本节内容 项目实战:运维堡垒机开发 前景介绍 到目前为止,很多公司对堡垒机依然不太感冒,其实是没有充分认识到堡垒机在IT管理中的重要作用的,很多 ...