前端开发学习笔记02----HTML基础

最新推荐文章于 2024-07-12 20:49:16 发布

EddieEddieJones

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量656

点赞数 2

分类专栏：前端开发学习笔记文章标签： html 前端开发笔记

前端开发学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

HTML

内容来自w3school
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落`
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。 h1定义的标题字体最大。
HTML 链接是通过 <a> 标签进行定义的。

<a href="http://www.w3school.com.cn">This is a link</a>

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法。（<br> 标签定义换行）
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定。
<a href="http://www.w3school.com.cn">This is a link</a>
居中排列标题

//align的英文翻译是对齐
<h1 align="center">This is heading 1</h1>

页面背景颜色是黄色

//bgcolor--backgroundcolor  背景颜色
<body bgcolor="yellow">

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号。
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
注释代码：

HTML 提示 - 如何查看源代码?
如果您想找到其中的奥秘，只需要单击右键，然后选择“查看源文件”（IE）或“查看页面源代码”（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
标签。
script的中文翻译是脚本。
<pre>标签可以保留空格，可用于显示计算机代码。
建立超链接：

Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>

块引用：这是长的引用：<blockquote>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
这是短的引用：<q>，浏览器显示内容会自动加上双引号。
-代码： <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
结果：
一打有二十十二件。
文本格式化标签

标签      描述
<b>     定义粗体文本。
<big>   定义大号字。
<em>    定义着重文字。
<i>     定义斜体字。
<small> 定义小号字。
<strong>定义加重语气。
<sub>   定义下标字。
<sup>   定义上标字。
<ins>   定义插入字。
<del>   定义删除字。

“计算机输出”标签

标签  描述
<code>  定义计算机代码。
<kbd>   定义键盘码。
<samp>  定义计算机代码样本。
<tt>    定义打字机代码。
<var>   定义变量。
<pre>   定义预格式文本。

引用、引用和术语定义

标签  描述
<abbr>      定义缩写。
<acronym>   定义首字母缩写。
<address>   定义地址。
<bdo>       定义文字方向。
<blockquote>定义长的引用。
<q>         定义短的引用语。
<cite>      定义引用、引证。
<dfn>       定义一个定义项目。

`标签描述

<a href="url">Link text</a>

使用 Target 属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

HTML 链接

HTML 链接

<!--创建指向锚"#C4"的链接-->
<a href="#C4">look Chapter 4</a>

<!--对锚进行命名-->
<h2><a name="C4">Chapter 4</a></h2>

在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

<a> 定义锚。

HTML 图像

插入图像

<img src="/i/eg_mouse.jpg" width="128" height="128" />

将其他文件夹或服务器的图片显示到网页中

<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />

在 HTML 中，图像由 <img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
定义图像的语法是：

<img src="url" />

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
设置网页背景图片

<body background="/i/eg_background.jpg">

图片对齐方式

<!--文字与图片底部对齐-->
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

<!--文字与图片中部对齐-->
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>

<!--文字与图片上部对齐-->
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>

请注意，bottom 对齐方式是默认的对齐方式。

<img src ="/i/eg_cute.gif" align ="left"> 带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。 </p>
设置图像大小

<img src="/i/eg_mouse.jpg" width="100" height="100">

添加图像背景

<body background="/i/eg_background.jpg">
代码
</body>

将图像作为一个链接使用。

<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>

图像标签

标签      描述
<img>   定义图像。
<map>   定义图像地图。
<area>  定义图像地图中的可点击区域。

表格
表格由 <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

空格符号:&nbsp
表格标签

表格          描述
<table>     定义表格
<caption>   定义表格标题。
<th>        定义表格的表头。
<tr>        定义表格的行。
<td>        定义表格单元。
<thead>     定义表格的页眉。
<tbody>     定义表格的主体。
<tfoot>     定义表格的页脚。
<col>       定义用于表格列的属性。
<colgroup>  定义表格列的组。

HTML 列表

无序号列表

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

有序号列表

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

浏览器显示如下：
Coffee
Black hot drink
Milk
White cold drink

以圆点开头列表：<ul type="disc">，“disc”的英文翻译是圆盘
以句号开头列表：<ul type="circle">
以实心方块开头列表：<ul type="square">
数字列表：<ol>
字母列表：<ol type="A">
小写字母列表：<ol type="a">
一个嵌套列表：

<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

自定义列表：

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

页面显示为：

计算机
用来计算的仪器 ... ...
显示器
以视觉方式显示信息的装置 ... ...

列表标签

标签      描述
<ol>    定义有序列表。
<ul>    定义无序列表。
<li>    定义列表项。
<dl>    定义定义列表。
<dt>    定义定义项目。
<dd>    定义定义的描述。

HTML
和

HTML 块元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 表单和输入

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。

<form>
...
  input 元素
...
</form>

文本域（Text Fields）

<form>
First name: 
<input type="text" name="firstname" />
<br />
Last name: 
<input type="text" name="lastname" />
</form>

注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

单选按钮（Radio Buttons）

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

复选框（Checkboxes）
<form> <input type="checkbox" name="bike" /> I have a bike <br /> <input type="checkbox" name="car" /> I have a car </form>
表单的动作属性（Action）和确认按钮

<form name="input" action="html_form_action.asp" method="get">
Username: 
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.asp” 的页面。该页面将显示出输入的结果。

创建按钮


<form>
<input type="button" value="Hello world!">
</form>

表单标签


标签          描述
<form>      定义供用户输入的表单
<input>     定义输入域
<textarea>  定义文本域 (一个多行的输入控件)
<label>     定义一个控制的标签
<fieldset>  定义域
<legend>    定义域的标题
<select>    定义一个选择列表
<optgroup>  定义选项组
<option>    定义下拉列表中的选项
<button>    定义一个按钮
<isindex>   已废弃。由 <input> 代替。

HTML 框架

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize=”noresize”。

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

HTML Iframe

iframe 用于在网页内显示网页。
添加 iframe 的语法

<iframe src="URL"></iframe>

Iframe - 删除边框

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

HTML iframe 标签

标签              描述
<iframe>    定义内联的子窗口（框架）

HTML 背景

背景颜色（Bgcolor）

<body bgcolor="black">

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。