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.创建精灵 在实际使用中,精灵是由一个纹理创建的.在不加任何设置的情况下,精灵就是一张显示在屏幕上的图片.通常精灵置于层下,因此我们首选在层的初始化方法中创建精灵,设置属性,并添加到层中. 有多种方 ...
随机推荐
- 一个美国小券商的生存之道Tradestation
转自:证券时报记者 张欣然 桂衍民 中国互联网金融的口号喊了十几年,众多证券公司仍然苦于找不到新的蓝海,研究大西洋彼岸的美国TradeStation公司的业务模式,也许对国内的证券公司会有一些启迪. ...
- Solr开发参考文档(转)
Solr开发文档 Solr 是一种可供企业使用的.基于 Lucene 的搜索服务器,它支持层面搜索.命中醒目显示和多种输出格式.在这篇文章中,将介绍 Solr 并展示如何轻松地将其表现优异的全文本搜索 ...
- halt和shutdown 的区别
1.halt -h 标准情况下是关机 但是要手动关闭电源 .有些发行版增强了halt脚本 使其可以关闭电源 halt执行时﹐杀死应用进程﹐执行sync系统调用﹐文件系统写操作完成后就会停止内核. 2. ...
- BAT染指影视制作 欲全面撬开互联网粉丝经济
预測: 或靠"用户"模式盈利 除了内容制作,电影发行也在遭遇互联网模式的冲击. 除了给片方支付高额保底以外,随着市场竞争激烈.新进入者都在争夺好片的发行权. 业内预測.再往后,发行 ...
- Upgrade to Python 2.7.9 on CentOS5.5
1. Install python2.7 #cd /tmp #wget https://www.python.org/ftp/python/2.7.9/Python-2.7.9.tgz --no-ch ...
- display:box和flex的区别
没区别,仅是各阶段草案命名flex是最新的 但是在实际的浏览器测试中,display: flex 不能完全替代display: -webkit-box display: box 使用可以参考http: ...
- win7 打开方式不能添加程序
打开注册表,找到“HKEY_CLASSES_ROOT\Applications\”中,查看相应的程序的“\shell\open\command”项中的数据是否正确:如果不正确,就修改正确,之后再添加程 ...
- utils object doesn,t exists中毒后，就删除了.JS文件后台就出现了前面的英文。请问怎么解决
明显是你删了js丢失了函数了...从备份里还原一份.js出来放进去,前台也不能删,如果遇到名字冲突,修改一下名字即可
- 开源的Android开发框架-------PowerFramework使用心得（二）图片异步加载ImageTask
图片异步加载.可以备注图片是否缓存.缓存状态. 1.缓存-SD卡,路径可设置 2.图片压缩 3.可加载本地和网络图片 4.url为本地视频文件可以显示缩略图 5.中文url图片地址FileNotFou ...
- Android开发手记(19) 数据存储四 ContentProvider
转载自:http://www.cnblogs.com/devinzhang/archive/2012/01/20/2327863.html Android为数据存储提供了五种方式: 1.SharedP ...