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

HTML

  • 内容来自w3school
  • 之间的文本描述网页
    之间的文本是可见的页面内容

    之间的文本被显示为标题

    之间的文本被显示为段落`
  • HTML 标题(Heading)是通过

    -

    等标签进行定义的。 h1定义的标题字体最大。
  • HTML 链接是通过 标签进行定义的。
<a href="http://www.w3school.com.cn">This is a linka>
//align的英文翻译是对齐

align="center">This is heading 1

  • 页面背景颜色是黄色
//bgcolor--backgroundcolor  背景颜色
<body bgcolor="yellow">
  • 属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
    在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号。
  • 标题(Heading)是通过

    -

    等标签进行定义的。

    定义最大的标题。
    定义最小的标题。


  • 标签在 HTML 页面中创建水平线。
    hr 元素可用于分隔内容。
  • 注释代码:

  • HTML 提示 - 如何查看源代码?
    如果您想找到其中的奥秘,只需要单击右键,然后选择“查看源文件”(IE)或“查看页面源代码”(Firefox),其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

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

  • script的中文翻译是脚本。
  • 标签可以保留空格,可用于显示计算机代码。
  • 建立超链接:
Written by <a href="mailto:[email protected]">Donald Ducka>.<br> 
  • 块引用:
    这是长的引用:

    使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。
    这是短的引用:,浏览器显示内容会自动加上双引号。
    -代码:

    一打有 二十 十二 件。


    结果:

    一打有 二十 十二 件。

  • 文本格式化标签
标签      描述
<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 texta>
  • 使用 Target 属性,你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档:
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!a>

HTML 链接

  • HTML 链接

<a href="#C4">look Chapter 4a>


<h2><a name="C4">Chapter 4a>h2>

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

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

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

HTML 图像

  • 插入图像
<img src="/i/eg_mouse.jpg" width="128" height="128" />
  • 将其他文件夹或服务器的图片显示到网页中
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
  • 在 HTML 中,图像由 标签定义。
    是空标签,意思是说,它只包含属性,并且没有闭合标签。
    要在页面上显示图像,你需要使用源属性(src)。src 指 “source”。源属性的值是图像的 URL 地址。
    定义图像的语法是:
<img src="url" />
  • 浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。
  • 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 对齐方式是默认的对齐方式。


  • 带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。

  • 设置图像大小
<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>  定义图像地图中的可点击区域。
  • 表格
    表格由 标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由
    标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
    <table border="1">
    <tr>
    <td>row 1, cell 1td>
    <td>row 1, cell 2td>
    tr>
    <tr>
    <td>row 2, cell 1td>
    <td>row 2, cell 2td>
    tr>
    table>
    在浏览器显示如下:
    row 1, cell 1   row 1, cell 2
    row 2, cell 1   row 2, cell 2
    
    • 空格符号: 
    • 表格标签
    表格          描述
    <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>Coffeedt>
    <dd>Black hot drinkdd>
    <dt>Milkdt>
    <dd>White cold drinkdd>
    dl>
    浏览器显示如下:
    Coffee
    Black hot drink
    Milk
    White cold drink
    • 以圆点开头列表:

        ,“disc”的英文翻译是圆盘
        以句号开头列表:

          以实心方块开头列表:

          • 数字列表:


              字母列表:

                小写字母列表:

                1. 一个嵌套列表:

          <ul>
            <li>咖啡li>
            <li><ul>
              <li>红茶li>
              <li>绿茶li>
              ul>
            li>
            <li>牛奶li>
          ul>
          • 自定义列表:
          计算机
          用来计算的仪器 ... ...
          显示器
          以视觉方式显示信息的装置 ... ...

          页面显示为:

          计算机
          用来计算的仪器 ... ...
          显示器
          以视觉方式显示信息的装置 ... ...
          • 列表标签
          标签      描述
          <ol>    定义有序列表。
          <ul>    定义无序列表。
          <li>    定义列表项。
          <dl>    定义定义列表。
          <dt>    定义定义项目。
          <dd>    定义定义的描述。

          HTML

          • HTML 块元素
            块级元素在浏览器显示时,通常会以新行来开始(和结束)。
            例子:

            ,

            ,

              ,
            • HTML 内联元素
              内联元素在显示时通常不会以新行开始。
              例子:,
            • , ,
            • 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。如果与 CSS 一同使用,
              元素可用于对大的内容块设置样式属性。
            • 元素也没有特定的含义。
              当与 CSS 一同使用时, 元素可用于为部分文本设置样式属性。
            • HTML 表单和输入

              • 表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
                表单使用表单标签(
                )定义。
              
              ...
                input 元素
              ...
              
              • 文本域(Text Fields)
              <form>
              First name: 
              <input type="text" name="firstname" />
              <br />
              Last name: 
              <input type="text" name="lastname" />
              form>

              前端开发学习笔记02----HTML基础_第1张图片
              注意,表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。

              • 单选按钮(Radio Buttons)
              type="radio" name="sex" value="male" /> Male
              type="radio" name="sex" value="female" /> Female
              • 复选框(Checkboxes)


                I have a bike



                I have a car
              • 表单的动作属性(Action)和确认按钮
              "input" action="html_form_action.asp" method="get"> Username: type="text" name="user" /> type="submit" value="Submit" />


              假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 “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 框架

              • 假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 标签中加入: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 元素的布局和显示属性。

              HTML 颜色

              • 仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

              HTML 4.01 快速参考

              • < is the same as <
                > is the same as >
                © is the same as ©

              你可能感兴趣的:(前端开发学习笔记,html,前端开发,笔记)