码迷,mamicode.com
首页 > Web开发 > 详细

w3cschool之HTML学习笔记-未完待续

时间:2016-08-24 12:59:10      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:

由于html标记语言是网页自动化测试所必须要掌握的,所以重新学习html语言(这似乎是我第四次学习html,这次得坚持了)

学习网址:http://www.w3school.com.cn/html/index.asp

HTML 指的是超文本标记语言 (Hyper Text Markup Language),用来描述网页的。Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容。

HTML文档是由HTML元素定义的。HTML元素指的是开始标签到结束标签的所有代码。

HTML元素语法:

HTML元素以开始标签开始,以结束标签结束,开始标签与结束标签之间的内容为元素内容。

某些HTML元素具有空内容,无结束标签。

大多数元素可拥有属性(属性总是以名称/值对出现,如name="value",总是在开始标签中规定)。

 

各个标签说明(所有标签建议小写,属性及属性值建议小写):

基础

<html>元素内容</html>:为文档的根元素,定义整个文档。

<head>元素内容</head>:为文档的头信息,头信息的元素大都不会显示在浏览器上。

<body>元素内容</body>:为文档的正文,其信息会显示在浏览器上。属性有bgcolor="yellow"(背景颜色),但要避免使用,请用样式代替<body style="background-color:yellow">。

 

<head></head>中使用的标签

<title>网页标题</title>:将文档的题目放在浏览器的标题栏中(tab页标题)。<head>中唯一可见的标签。

<script></script>:在该文档中要引用的脚本。如:JavaScript。

<style></style>:在该文档中要引用的CSS样式,以控制文档的格式。

<link>:资源引用。如引用样式表。

 

<body></body>中使用的标签

一般标签的属性有:class(元素类名),dir(文本方向),id(元素唯一id),style(元素行内CSS样式),title(元素额外信息)

块级元素前后添加一个额外的空行。

<h1>元素内容</h1>:标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。前后有空行。属性有:align="center"(居中),但要避免使用,请用样式代替<h1 style="text-align:center">。

<p>元素内容</p>:段落。前后有空行。可以使用style属性定义段落样式:以下分别定义了字体,颜色,字体大小。

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

<a href="链接地址或锚名">元素内容</a>:链接。href为属性。

<img src="图片来源" width="宽像素点" height="高像素点" />:图片。空元素(无结束标签)。

<br/>:换行。空元素。

<hr/>:水平线。空元素。

<!--注释-->:注释。浏览器会忽略注释,不会显示它们。

文本格式化标签

<b>元素内容</b>:加粗

<i>元素内容</i>:斜体

<em>元素内容</em>:定义着重文字

<strong>元素内容</strong>:定义加重语气

<big>元素内容</big>:定义大字号。

<small>元素内容</small>:定义小字号。

<sub>元素内容</sub>:定义下标。

<sup>元素内容</sup>:定义上标。

<ins>元素内容</ins>:定义插入字。

<del>元素内容</del>:定义删除字。

<pre>元素内容</pre>:定义预格式文本,保留原来的空格。

<abbr>元素内容</abbr>:定义缩写。

<address>元素内容</address>:定义地址。

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.
</address>

HTML CSS

<link>:外部样式表:空元素.链接到外部定义的样式表css文件。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<style>样式说明</style>:内部样式表。在文档中定义某些特别的样式。

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

<标签名 style="样式说明">元素内容</标签名>:内联样式:定义某个元素的样式。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

w3cschool之HTML学习笔记-未完待续

标签:

原文地址:http://www.cnblogs.com/yufeihlf/p/5802366.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!