HTML学习杂记

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准。它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。

元素

包括空元素和非空元素

非空元素包含两个标签，opening tag&closing tag，在closing tag中关闭

空元素在opening tag中关闭

大部分可分为块元素和内联元素

块元素block level element 在浏览器显示时，通常以新行开始（结束）

内联元素inline element 通常不会以新行开始（结束）

元素可以嵌套

标签要小写！

元素一定要关闭！

        <head>

        所有头部元素的容器，指示浏览器样式表，元信息位置

         <title>

        定义浏览器工具栏中的标题

        提供页面被添加到收藏夹时显示的标题

        显示在搜索引擎结果中的页面标题

        <base>

        为所有链接添加默认地址或目标

        <link>

        当在文档中声明使用外接资源(比如CSS)时使用此标签

        <style>

        为html文档指定样式信息

        <meta>

        meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据

        元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

        Meta robots标签管理着搜索引擎是否可以进入网页，你可以用它来允许或不允许搜索引擎来获取你的网页、进入你网页中的子链接或对你的网页存档。例如：
<meta name="robot" content="noindex,nofollow"/>
       这个 meta 标签告诉搜索引擎不要获取网页，并且阻止其进入链接

      <script>

        定义客户端脚本，如javascript

      <h>

        标题元素

        浏览器自动在标题元素前后添加空行

<hr/>

水平线；分隔内容用

HTML注释

<!-- This is a comment –>

       <p>

        段落元素

        浏览器自动在标题元素前后添加空行

<br/>

在不产生段落的情况下空行

      <pre>

         预格式文本元素

         对空格和空行进行控制

<abbr> <acronym>

缩写或首字母缩写元素

<html>
<body>

<abbr title="etcetera">
etc.
</abbr>

<acronym title="World Wide Web">
www
</acronym>

</body>
</html>

<bdo> bi-directional override

反方向输出文字元素
<html>
<body>

<bdo dir="rtl">
收到了吗
</bdo>

</body>
</html>

      <blockquote> <quote>

        长引用和短引用

        使用<blockquote>浏览器会自动添加空行和边框，但使用<q>则不会
<html>
<body>
<blockquote>
黑猫白猫，抓老鼠的就是好猫
                                         --------邓xx
</blockquote>

<quote>
已阅！！
</quote>
</body>
</html>

<del> <ins>

删除字效果和下划线效果元素
<html>
<body>

<p><del>玩你</del>育碧大法<ins>好</ins>！</p>

</body>
</html>

       <img>

        图像元素

        属性   scr=source（图像地址）   width height

                  alt （图像不能显示时替换为文字）
<img scr="mosaic.gif" alt="马赛克">

        <table>

        表格元素

        <tr>行元素      <td>列元素    <th>表头（默认粗体居中） <caption>标题

       colspan/rowspan列/行合并属性<th>，可创建跨列/行表头

       cellpadding 单元格中文字与边框距离属性<table>

       cellspacing 单元格与单元格距离属性<table>

       frame 控制边框属性<table> 值 box above below hsides vsides
<table>
<tr>
<th>计划</th>
<th>变化</th>
<tr>
<td>吃</td>
<td>喝</td>
<td>玩</td>
<td>乐</td>
</tr>
<tr>
<td>钱</td>
<td>钱</td>
<td>钱</td>
<td>钱</td>
</tr>
</table>

        <ul>

        无序列表（列表项由<li>开始）

        type属性 disc circle square 定义项目符号

        <ol>

        有序列表（列表项由<li>开始）

        type属性 A a I i 定义排序符号

         <dl>

         自定义列表（列表项由<dt>开始，项定义由<dd>开始，可使用图片、段落等）

      <form>

        允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素

         <input>

        文本域   由type属性控制（text 文本框   radio 单选按钮 checkbox 复选按钮 button 创建按钮）

        此文本域的缺省宽度是20个字

         action属性
<form action="html.asp" method="get">
Aegis or cheese?
<input type="text" name="option" />
<input type="submit" name="submit"/>
</form>
<select> 制作下拉列表
<form>
<select name="heros">
<option value="Rubic">Rubic</option>
<option value="Void">Void</option>
<option value="Roshan">Roshan</option>
</select>
</form>
<option value="Roshan" selected="selected">Roshan</option>
上式可选定预选值

<textarea>

可以创建文本域字数不受限制
<html>
<body>
<textarea row="20" cols="70"/>

<frameset>

       框架结构元素

       rows和cols属性定义将页面按横向还是竖向分为几个框架

       不能将<body>和<frameset>同时使用

       但是对于不支持框架的浏览器应该用<noframes>说明，此时内部要用<body>
<noframes>
<body>
您的浏览器不支持框架
</body>
</noframes>
<frameset cols="20%,30%,50%">
<frame   blablabla A/   noresize="noresize">  <!-- 禁止改变大小->
<frame   blablabla B/>
<frame   blablabla C/>
</frameset>

<iframe>

内联框架元素用于在网页中显示网页

<iframe scr="EA.html" name="Value" width="100" height="200">
</iframe>
<a href="www.baidu.com" target="Value">
看我～
</a>

属性

只能？在开始标签中规定属性值

属性要小写！

始终为属性值添加双引号！

href：Hypertext Reference 超文本引用

相关语法：
<a href="value">
        属性值：

        a.绝对url 指向另外一个站点

        b.相对url 指向站内某个文件

        c.锚          指向页面中的锚（href="#top"）

target 属性

定义被链接的文档在何处显示
<html>
<body>

<a href="www.baidu.com"  target="＿blank">百毒
</a>

</body>
</html>
将在新页面中打开网址

name/id 命名锚

在需要链接到的一段文字处命名，然后在本页面或其它页面处引用
<a name="tips">基本注意事项-有用的提示</a>
<a href="#tips">有用的提示</a>
<a href="http://www.baidu.com/html/...#tips">有用的提示</a>

background 添加页面背景图片/也可添加在<table>中作为表格背景/<td>中作为单元格背景
<body background="nice.png">
</body>

align 指定位置(相对于文本)/可添加在单元格
<img scr="good.jpg" align="top"/>
<img scr="good.png" align="middle"/>
<img scr="bad.bmp" align="bottom"/>
<img scr="bad.bmp" align="left"/>
<img scr="bad.bmp" align="right"/>
bottom是默认对齐方式

          <!DOCTYPE>

           不是标签，只是用来声明该文档html类型

          html5声明

          <!DOCTYPE html>

          不间断空格（non-breaking space）

          HTML 中的常用字符实体是不间断空格( )。

          浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用   字符实体。

URL - Uniform Resource Locator 统一资源定位器
   语法规则： scheme://host.domain:port/path/filename
       scheme - 定义因特网服务的类型。最常见的类型是 http

                      http
                      超文本传输协议
                      以 http:// 开头的普通网页。不加密。

                      https
                      安全超文本传输协议
                      安全网页。加密所有信息交换。

                      ftp
                      文件传输协议
                      用于将文件下载或上传至网站。

                      file
                      您计算机上的文件。

       host - 定义域主机（http 的默认主机是 www）

       domain - 定义因特网域名，比如 w3school.com.cn

      :port - 定义主机上的端口号（http 的默认端口号是 80）

       path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。

       filename - 定义文档/资源的名称