`

HTML零碎笔记

    博客分类:
  • HTML
 
阅读更多

HTML 文档包含 HTML 标签和纯文本 。

某些HTML 元素没有结束标签,比如 <br />。

开始标签的英文翻译是 start tag 或 opening tag,结束标签的英文翻译是 end tag 或 closing tag。

HTML标题由<h1></h1>...<h6></h6>定义;
浏览器会自动地在标题的前后添加空行


HTML段落由<p></p>定义。
浏览器会自动地在段落的前后添加空行。
使用<p></p>进行换行是一个坏习惯,换行使用换行符<br/>


HTML链接由<a></a>定义。
注意既然是链接,则需要指定所链接到的地址。
完整的一个例子:<a href="www.baidu.com">www.baidu.com</a>,
在 href 属性中指定链接的地址

HTML图像由<img>定义。
图像的名称(src,即存放的地址)和尺寸(width,宽;height,高)以属性方式提供。

例如:<img src="w3school.jpg" width=100 height=100 />,
注意:多个属性的摆放没有顺序性;这个没有结束标签;最后的/可以不写,但是最好加上

HTML元素,是指从开始标签到结束标签的所有代码;元素的内容是开始标签与结束标签之间的内容。

在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。


HTML 标签对大小写不敏感:<P> 等同于 <p>。
最好使用小写,因为在未来(X)HTML版本中强制使用小写。

属性总是在HTML开始标签规定。

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,比如:name='Bill "Hello World" Gates'

确保将 HTML heading 标签只用于标题。
不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。

<hr /> 标签在 HTML 页面中创建水平线。

HTML注释。格式如:<!--...-->   例子:

<!-- This is a comment -->

 

开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。

当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
段落的行数取决于浏览器的大小,如果调节浏览器窗口的大小,将改变段落中的行数。

<pre></pre>可以控制空行和空格


使用 Target 属性,你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档:

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
如上例,如果把链接的 target 属性设置为 "_blank",该链接会在新窗口中打开


HTML 链接 - name 属性

name 属性规定锚(anchor)的名称。

name 属性用于创建 HTML 内部的书签。

书签不会以任何特殊方式显示,它对读者是不可见的。

当使用命名锚(named anchors)时,我们可以创建直接跳至页面中某个节的链接,这样使用者就无需不停的滚动页面来寻找他们需要的信息。

实例

 

HTML 文档内部的已命名的锚:

<a name="tips">Useful Tips Section</a>

然后,我们创建指向相同文档中“有用的提示”部分的链接:

<a href="#tips">Visit the Useful Tips Section</a>

或者,创建从另一个页面指向该文档中“有用的提示”部分的链接:

<a href="http://www.w3school.com.cn/html_links.htm#tips">
Visit the Useful Tips Section
</a>

在上面的代码中,我们将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个命名锚了。
假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。



请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3school.com.cn/html/"。


 

表格

表格由 <table>标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

 

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下:

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2


表格的表头

表格的表头使用 <th> 标签进行定义。

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下:

HeadingAnother Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
表头还有横放的和垂直的之分
姓名电话电话
Bill Gates
555 77 854
555 77 855

控制表格属性还有caption(表格的标题),colspan(单元格跨行),rowspan(单元格跨列),Cell padding(单元格内容与其边框的空白),Cell spacing(单元格之间的距离),align(以某个形式排列单元格内容),frame(控制边框的形式)等等


头元素内的信息

头元素内的元素不会被浏览器显示出来。

根据 HTML 标准,仅有几个标签在 HTML 的头部分是合法的。它们是:<base>, <link>, <meta>, <title>, <style> 和 <script>。

分享到:
评论

相关推荐

    4.数学三高分学霸笔记.pdf

    其实 很多考研的小伙伴...另一方面 同学们却有着一种“惰性”(这在男孩纸身上体现的更为明显)再加上高强度的学习任务在身 数学知识点零碎 总结起来极为繁琐 而各类题型的解题方法的总结需要慢慢积累 又不是一朝一夕能

    3.数学二高分学霸笔记.pdf

    其实 很多考研的小伙伴...另一方面 同学们却有着一种“惰性”(这在男孩纸身上体现的更为明显)再加上高强度的学习任务在身 数学知识点零碎 总结起来极为繁琐 而各类题型的解题方法的总结需要慢慢积累 又不是一朝一夕能

    jquery零碎实例

    jquery零碎实例

    minisay笔记程序 1.2.0 beta.zip

    minIsay发布,主要用于记录一些简短,零碎的内容。minIsay是从Isay3修改、精简而来,minisay更简洁,操作更方便。 作者:wenbin(QQ:792278952) 版本:minisay 1.2.0 beta 更新内容: 1.修改config配置文件位置 ...

    网络安全零碎资料,网络安全零碎资料

    网络安全零碎资料,网络安全零碎资料

    Arcgis消除零碎图斑

    介绍通过arcgis软件消除大的碎图斑,现在借助 ArcGIS的Eliminate工具可以很轻松的完成这个工作。该工具可以将选中的多边形合并到周围边大的多边形当中去。

    轻笔记 For Android v4.1.zip

     无需数据线,网页资料、脑子里的零碎想法、待办事项、电脑上的照片、word、excel、ppt、mp3、txt、pdf等资料轻松传输到手机,随时可以查看   无需带电脑,随时随地用浏览器即可访问云端资料   首款与网盘...

    SPSS 学习笔记

    快速学习到SPSS的重点部分,避开一些无用的零碎知识点

    2.数学一高分学霸笔记.pdf

    其实 很多考研的小伙伴...另一方面 同学们却有着一种“惰性”(这在男孩纸身上体现的更为明显)再加上高强度的学习任务在身 数学知识点零碎 总结起来极为繁琐 而各类题型的解题方法的总结需要慢慢积累 又不是一朝一夕能

    二级C零碎知识二级C零碎知识二级C零碎知识

    二级C零碎知识 本文旨在总结和概括二级C零碎知识的重要概念和技术要点,涵盖面向对象程序设计、数据结构、软件测试、队列、完全二叉树、ER 图、数据库技术、数据库设计、C 语言等多个方面。 一、面向对象程序设计 ...

    java详细笔记

    本文详细记载了java零碎知识 从零开始,适合基础开发人员

    拾起零碎的美好

    拾起零碎的美好

    minIsay笔记程序 v1.2.0 beta

    minIsay发布,主要用于记录一些简短,零碎的内容。minIsay是从Isay3修改、精简而来,minisay更简洁,操作更方便。版本:minisay 1.1.4 beta更新:修正正则函数;略微修该默认模板和基本配置;增加两个模板:caicai,...

    kubernetesk&amp;DevOps学习笔记.zip

    学习&lt;逃脱只会部署系列&gt;时的原教材,讲解非常详细,属于个人收藏系列。

    软件体系结构零碎的资料

    软件体系结构零碎的资料

    First:各种零碎代码

    First:各种零碎代码

    S5PV210学习笔记.pdf

    一、零碎的前提知识 1.1 IO 与内存统一编址和独立编址 在计算机系统中,IO设备和内存都是通过总线来访问的。在统一编址中,IO设备和内存共享同一个地址空间,而在独立编址中,IO设备和内存分别具有独立的地址空间。...

    一款面试刷题的 Spring Cloud 开源系统 零碎时间利用小程序查看常见面试题,夯实Java基础 该项目可以.zip

    零碎时间利用小程序查看常见面试题,夯实Java基础。 一款面试刷题的 Spring Cloud 开源系统。零碎时间利用小程序查看常见面试题,夯实Java基础。 一款面试刷题的 Spring Cloud 开源系统。零碎时间利用小程序查看常见...

    单片机零碎年度学习总结.doc

    单片机零碎年度学习总结.doc

Global site tag (gtag.js) - Google Analytics