w3school之HTML学习笔记

由于html标记语言是网页自动化测试所必须要掌握的，所以重新学习html语言（这似乎是我第四次学习html，这次得坚持了）,这次归纳总结了下，希望能帮助到大家。

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

HTML 指的是超文本标记语言 (Hyper Text Markup Language)，用来描述网页的。Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。HTML文档是由HTML元素定义的。HTML元素指的是开始标签到结束标签的所有代码。

1.基础标签

各个标签说明

注：所有标签建议小写，所有属性及属性值建议小写。

一般标签的属性有：

id（元素唯一id），name（元素名称值），class（元素类名），dir（文本方向），style（元素行内CSS样式），title（元素额外信息）。

特殊标签属性有：

href（链接地址），target（标签打开方式），src（来源），alt（代替的文本信息）

HTML元素语法：

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

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

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

1.基础标签

点击返回目录

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

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

<head></head>中使用的标签如下：

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

<base />：该标签为页面上的所有链接规定默认地址属性href或默认目标属性target。空标签。

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

2.常用标签

点击返回目录

2.1标题

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

2.2段落

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

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

2.3链接

<a href="链接地址或#锚名">元素内容</a>：链接。href为属性，属性值可以是url也可以是“mailto：邮件地址”具体可以查看w3cschool。属性target：target="_blank"（设置链接在新窗口打开）。

<a name="锚名">元素内容</a>：被链接。name为属性，设置锚。

有两种使用 <a> 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接，跳转到另外一个文档页面。
通过使用 name 属性 - 创建文档内的书签。在同一个文档页面中跳转。用name属性设置锚。

2.4图片

<img src="图片来源" width="宽像素点" height="高像素点" alt="无法载入图片时的替代文本" align="图形对齐方式" border="0" usemap="#map元素的id或者name值"/>：图片。空元素（无结束标签）。

<map name="" id=""><area 属性值对 /></map>：图像映射。

<area shape="" coords="" href="url" target="_blank" alt="替代文本"/>：图像映射中可点击区域。空标签。

2.5其他

换行，水平线，注释。

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

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

：注释。浏览器会忽略注释，不会显示它们。

3.脚本标签

点击返回目录

script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型（如text/javascript）。JavaScript 最常用于图片操作、表单验证以及内容动态更新。

在html文件中的js：实例如下：

<script type="text/javascript">

document.write("Hello World!")

</script>

<noscript>Your browser does not support JavaScript!</noscript>

引用外部的js：实例如下：

<script src="script.js"></script>

script.js文件如下：

document.write("Hello World!")

注：外部脚本script.js中不能包含 <script> 标签。

4.CSS样式表标签

点击返回目录

CSS层叠样式表（Cascading Style Sheets）：样式定义如何显示HTML元素！

<head>

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

</head>

<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>

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，然后优先级依次：内部样式表，外部样式表，浏览器中缺省值。

关于CSS说明，可前往W3CShool学习：http://www.w3school.com.cn/css/css_syntax.asp

5.表格标签

点击返回目录

<table></table>:该标签定义表格：border属性设置边框粗细大小。cellpadding属性定义元素边框与元素内容之间的空间。cellspacing属性设置单元格间距。frame属性来控制围绕表格的边框。

<tr></tr>:该标签定义行标签。

<td>元素内容</td>:该标签定义列标签：“ ”代表空表格。align属性定义单元格内容对齐方式。

<th>元素内容</th>:该标签定义表格头：colspan属性设置横跨n列，rowspan属性设置横跨n行。align属性定义单元格内容对齐方式。

<caption>我的标题</caption>：该标签定义表格标题。

6.列表标签

点击返回目录

6.1无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

<ul></ul>：无序列表始于 <ul> 标签。

<li> 元素内容</li>：每个列表项始于 <li>标签。

6.2有序标签

有序列表有序列表也是一列项目，列表项目使用数字进行标记。

<ol></ol>：有序列表始于 <ol> 标签。

<li> 元素内容</li>：每个列表项始于 <li> 标签。

6.3定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

<dl></dl>：自定义列表以 <dl> 标签开始。

<dt>元素内容</dt>:每个自定义列表项以 <dt> 开始。

<dd>元素内容</dd>:每个自定义列表项的定义以 <dd> 开始。

7.块标签

点击返回目录

可以通过 <div> 和 <span> 将 HTML 元素组合起来。

7.1块元素

块元素的前后会自动加上空行。

如：<div>,<h1>,<p>,<ul>,<table>

<div></div>:非常常用，用于组合其他HTML元素的容器。与CSS一同使用，可用于对大的内容块设置样式属性。

如下：

<!DOCTYPE html>

<html>

<head>

<style>

.cities {

    background-color:black;

    color:white;

    margin:20px;

    padding:20px;

}

</style>

</head>

<body>

<div class="cities">

<h2>标题</h2>

<p>段落1</p>

<p>段落2</p>

</div>

</body>

</html>

.cities：表示类class属性值为cities的标签内容样式为style中.cities设定的样式。

7.2内联元素

块元素的前后会自动加上空行。

如：<span>,<b>,<td>,<a>,<img>

<span></span>:非常常用，用于文本的容器。与CSS一同使用，可用于部分文本设置样式属性。

如下：

<!DOCTYPE html>

<html>

<head>

<style>

span.red {

    color:red;

}

</style>

</head>

<body>

<h1>我的<span class="red">重要的</span>标题</h1>

</body>

</html>

span.red：表示span标签下的类class属性值为red的标签内容样式为style中span.red设定的样式。

8.框架标签

点击返回目录

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

8.1框架标签

<frameset></frameset>：该标签定义HTML框架。rows/columns 的属性值规定了每行或每列占据屏幕的面积。

<noframes>元素内容</noframes>：元素内容的文字就必须将这段文字嵌套于 <body></body> 标签内。
<frame />：定义每个框架。属性有src（来源），noresize（框架边缘不可改变大小）。空标签。
如下：

<html>

<frameset cols="50%,*,25%">

  <frame src="/example/html/frame_a.html" noresize="noresize" />

  <frame src="/example/html/frame_b.html" />

  <frame src="/example/html/frame_c.html" />

</frameset>

<noframes>

<body>您的浏览器无法处理框架！</body>

</noframes>

</html>

8.2内联框架标签

126邮箱登录内联框架实例如下：

<iframe id="x-URS-iframe" frameborder="0" name="" scrolling="no" style="width: 100%; height: 100%; border: medium none; background: none repeat scroll 0% 0% transparent;" src="http://passport.126.com/webzj/m126_1.0.1/pub/index_dl.html?wdaId=">

<html>

......

</html>

</iframe>

设置frameborder属性值为 "0" 就可以移除边框。src属性指向隔离页面的位置。

还可以使用 iframe 作为链接的目标

iframe 可用作链接的目标（target）。链接的 target 属性必须引用 iframe 的 name 属性：

<!DOCTYPE html>

<html>

<body>

<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>

<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

<p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p>

</body>

</html>

9.文本格式化标签

点击返回目录

<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>

10.表单标签

点击返回目录

<form></form>:该标签定义HTML表单。HTML 表单用于收集用户输入。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。属性有：action：指定表单处理程序，submit提交到此。method：规定提交表单时所用的HTTP方法（GET或POST）。name：识别表单名称。accept-charset：使用的字符集。

<fieldset></fieldset>:定义域。用于组合表单数据。

<legend>标题</legend>定义域标题。

<input>:输入框或单选框或提交按钮等通过type属性值设置。

type属性：text：文本输入。password：密码域。radio：单选框。checkbox：复选框。submit：提交表单。button：按钮。number：数字。

value属性：规定输入字段的初始值。

readonly属性：只读。

disabled属性：禁用。

size属性：规定输入字段的尺寸（以字符计）。

maxlength 属性：规定输入字段允许的最大长度。

属性还有，id，name。属性值checked="checked"，表示默认被选中的选项。

<select></select>:定义下拉列表。

<option></option> ：定义待选择的选项。属性值selected="selected"，表示默认被选择的选项。

<textarea></textarea>:文本域。属性rows和cols。

<button></button>:定义按钮。

<datalist></datalist>:h5新增的元素，用户输入数据时看到预定义选项的下拉列表。<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。元素内容：<option value="">。

w3school之HTML学习笔记的更多相关文章

w3school之JavaScript学习笔记
在前端测试过程中,少不了听到开发说到JS,JS在webJavaScript 是浏览器脚本语言(简称JS),主要用来向HTML页面添加交互行为. 学习网址:http://www.w3school.com ...
w3school之CSS学习笔记
由于web自动化测试中,会用到比较复杂的定位方式:CSS定位,这种定位方式比较简洁,定位速度较快,所以继续学习前端的CSS知识,总结下学习笔记,以便后续查看.同时,也希望能帮助到大家. 学习网址:ht ...
《JavaScript语言精粹》学习笔记
一.in的用法 for...in 枚举一个对象的所有可枚举属性检测DOM/BOM属性 if ("onclick" in elem) { // 元素支持onclick } if ( ...
《CSS 设计指南》学习笔记一
本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己 ...
xml基础学习笔记01
注意:刚刚看了网上对于XML中的标签,节点和元素?到底应该怎么表述?起初我也有这个疑惑,现在我的想法是:下面出现node的应称作节点,节点对象.element应称作元素,毕竟这更符合英文的本意.至于标 ...
CSS3学习笔记之linear-gradient
我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...
（爬虫向）python_json学习笔记
JSON学习笔记 - 在线工具 - https://www.sojson.com/ - http://www.w3school.com.cn/json/ - http://www.runoob.com ...
毕业设计之五 PHP语法学习笔记
毕业设计之四 PHP语法学习笔记作者:20135216 平台:windows10 软件:XAMPP,DreamWeaver 说明:该笔记是对网站编程语言的详细学习一.PHP基础 0. 关于环境 ...
HTML基础学习笔记（1）
HTML学习笔记(1) 1.常用快捷键 win+d---返回桌面 win+e---我的电脑 win+r---打开运行 Alt+tab---切换软件 ctrl+tab---切换软件文档 F2---重命名 ...

随机推荐

Javascript中valueOf与toString区别
前言基本上,所有JS数据类型都拥有这两个方法,null除外.它们俩解决JavaScript值运算与显示的问题,重写会加大它们调用的优化. 测试分析先看一例:var aaa = { i: 10, ...
使用mybatis多表联查的时候结果异常及springmvc的理解
今天使用mybatis多表联查的时候,在dos窗口查询时可以出结果集,但是使用mybatis查询的时候最后返回的结果只有最后一个结果然后研究了半天没弄出来,后来无意中发现添加了最外层从表的ID字段后 ...
SPA UI-router
------------------------------------------------------------------------------------ SPA SPA(单页面应用): ...
Redis哈希相关命令
hash类型(类似于多维数组)hset key field value 把key中filed域的值设置为value(如果之前存在就覆盖,不存在就添加) hmset key field1 value1[ ...
POJ2796/DP/单调栈
题目链接[http://poj.org/problem?id=2796] 题意:给出一个数列,要求在这个数列里找到一个区间,使得在这个区间里的最小值*SUM[l,r]最大. 题解:思路来源于[http ...
PLSQL 几种游标的用法
分类: Oracle 1. PL/SQL里的游标可以分为显式和隐式两种,而隐式有分为select into隐式游标和for .. in 隐式游标两种.所以,我们可以认为,有3种游标用法: A. 显式游 ...
五、oracle基本建表语句
--创建用户create user han identified by han default tablespaceusers Temporary TABLESPACE Temp;grant conn ...
ubuntu 把终端信息输出到文本文件中的方法
方法一:把终端中所有信息都写到文本文件中在终端的命令行中输入以下命令: $ script -f output.txt 这样就会在当前目录下创建一个output.txt文件接下来,在按 ...
oracle 解析json格式
1. CREATE OR REPLACE PACKAGE PKG_ANALYSE_COMMON IS -- AUTHOR : YZCHEN -- CREATED : 2013/11/26 14:12: ...
openstack私有云布署实践【4.1 上层代理haproxy配置 (科兴环境)】
官方文档上的高可用配置,它推荐的是使用haproxy的上层代理来实现服务组件的主备访问.或者负载均衡访问一开始我也是使用haproxy来做的,但后来方式改了测试环境:haproxy + n ...

w3school之HTML学习笔记

w3school之HTML学习笔记的更多相关文章

随机推荐

热门专题