zoukankan      html  css  js  c++  java
  • 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.基础标签

    2.常用标签

    3.脚本标签

    4.CSS样式表标签

    5.表格标签

    6.列表标签

    7.块标签

    8.框架标签

    9.文本格式化标签

    10.表单标签

    各个标签说明

    注:所有标签建议小写,所有属性及属性值建议小写。

    一般标签的属性有:

    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。空标签。

    <meta />:该标签用于页面描述,关键词,文档的作者,最后修改时间以及其他元数据等。元数据(metadata)是关于数据的信息。一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。name 和 content 属性的作用是描述页面的内容。空标签。

    <script></script>:在该文档中要引用的脚本。如:JavaScript。可详细查看下文:3.脚本标签

    <style></style>:在该文档中要引用的CSS样式,以控制文档的格式。可详细查看下文:4.CSS样式表标签

    <link>:资源引用。如引用CSS样式表。空标签。可详细查看下文:4.CSS样式表标签

    <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> 标签的方式:

    1. 通过使用 href 属性 - 创建指向另一个文档的链接,跳转到另外一个文档页面。
    2. 通过使用 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></script>:该标签用于定义客户端脚本,比如 JavaScript。可以放着<body>或<head>中。

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

    <noscript>元素内容</noscript>:只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容。

    在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元素!

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

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

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

    5.表格标签

    点击返回目录

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

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

    <td>元素内容</td>:该标签定义列标签:“&nbsp;”代表空表格。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内联框架标签

    <iframe src="URL"></iframe>:该标签用于定义内联框架。iframe 用于在网页内显示网页。

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

    <iframe id="x-URS-iframe" frameborder="0" name="" scrolling="no" style=" 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="">。

  • 相关阅读:
    php实现拼图滑块验证的思考及部分实现
    【php设计模式】门面模式
    【php设计模式】装饰器模式
    php 如何将image图片转化为字符串(GD库操作及imagick两种实现方式)
    【php设计模式】组合模式
    【php设计模式】桥接模式
    深拷贝和浅拷贝
    【php设计模式】适配器模式
    【php设计模式】建造者模式
    Java50道经典习题-程序29 求矩阵对角线之和
  • 原文地址:https://www.cnblogs.com/yufeihlf/p/5802366.html
Copyright © 2011-2022 走看看