HTML基础知识

HTML简介###

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML标题###

HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。

实例:

This is a heading


This is a heading


This is a heading

HTML段落###

HTML 段落是通过 <p> 标签进行定义的。

This is a paragraph.


This is another paragraph.

HTML链接###

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

HTML 链接是通过 <a> 标签进行定义的。

有两种使用 <a> 标签的方式:
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签

This is a link

HTML图像###

HTML 图像是通过 <img> 标签进行定义的。

源属性(Src)####

要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。

替换文本属性(Alt)####

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

Big Boat

HTML水平线###

<hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。

This is a paragraph




This is a paragraph




This is a paragraph

HTML 注释###

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
注释是这样写的:

换行###

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签:

This is
a para
graph with line breaks

插入样式表###

外部样式表####

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。



内部样式表####

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

内联样式####

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。


This is a paragraph

表格###

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










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

列表###

无序列表####

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。


  • Coffee

  • Milk

有序列表####

同样,有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。


  1. Coffee

  2. Milk

定义列表####

自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。


Coffee

Black hot drink

Milk

White cold drink

HTML表单###

表单####

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
表单使用表单标签(<form>)定义。


...
input 元素
...

输入####

多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

文本域(Text Fields)#####

当用户要在表单中键入字母、数字等内容时,就会用到文本域。


First name:



Last name:

单选按钮(Radio Buttons)#####

当用户从若干给定的的选择中选取其一时,就会用到单选框。


Male


Female

复选框(Checkboxes)#####

当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。



I have a bike



I have a car

表单的动作属性(Action)和确认按钮#####

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。


Username:


select标签####

select 元素可创建单选或多选菜单。
<select> 元素中的 <option> 标签用于定义列表中的可用选项。

textarea标签####

<textarea> 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。
使用resize:none;可以固定文本区。

label标签####

<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。








posted on 2016-07-13 09:36  前端园地  阅读(166)  评论(0)    收藏  举报