【整理】html知识点

原创
RandTsui 2023-05-22 13:11:42 博主文章分类：web前端 ©著作权
文章标签 html HTML ci 文章分类 JavaScript 前端开发
©著作权归作者所有：来自51CTO博客作者RandTsui的原创作品，请联系作者获取转载授权，否则将追究法律责任
1、链接target属性  _blank 在新窗口中打开

 <a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a>    



 2、链接 id 属性 



 在HTML文档中插入ID:

 <a id="tips">有用的提示部分</a>

 在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

 <a href="#tips">访问有用的提示部分</a>

 或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

 <a href="http://www.runoob.com/html-links.htm#tips">

 访问有用的提示部分</a>   



 3、基本的注意事项 - 有用的提示

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



 4、图片链接



 <p>创建图片链接:

 <a href="http://www.runoob.com/html/html-tutorial.html">

 <img src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>



 5、在本页面打开（跳出框架）

 <a href="http://www.runoob.com/" target="_top">点击这里!</a> 



 6、HTML <base> 元素

 <base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

 <head>

 <base href="http://www.w3cschool.cc/images/" target="_blank">

 </head>



 7、<meta> 标签- 使用实例

 为搜索引擎定义关键词:

 <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

 为网页定义描述内容:

 <meta name="description" content="Free Web tutorials on HTML and CSS">

 定义网页作者:

 <meta name="author" content="Hege Refsnes">

 每30秒中刷新当前页面:

 <meta http-equiv="refresh" content="30">



 8、CSS字符间隔

 <div style="letter-spacing:12px;">Manipulate Text</div>



 9、文本颜色和背景色

 <div style="color:#40B3DF;">Colors<span style="background-color:#B4009E;color:#ffffff;">Boxes</span></div>



 10、没有下划线的链接

 <a href="http://www.w3cschool.cc" style="text-decoration:none;">Visit w3cschool.cc!</a>



 11、文本格式化

 <b>加粗文本</b><br><br>

 <i>斜体文本</i><br><br>

 <code>电脑自动输出</code><br><br>

 这是 <sub> 下标</sub> 和 <sup> 上标</sup>



 12、文本格式化2

 <b>
 定义粗体文本

 <em>
 定义着重文字

 <i>
 定义斜体字

 <small>
 定义小号字

 <strong>
 定义加重语气

 <sub>
 定义下标字

 <sup>
 定义上标字

 <ins>
 定义插入字

 <del>
 定义删除字

 <code>
 定义计算机代码

 <kbd>
 定义键盘码

 <samp>
 定义计算机代码样本

 <var>
 定义变量

 <pre>
 定义预格式文本

 <abbr>
 定义缩写

 <address>
 定义地址

 <bdo>
 定义文字方向

 <blockquote>
 定义长的引用

 <q>
 定义短的引用语

 <cite>
 定义引用、引证

 <dfn>
 定义一个定义项目



 13、字体

 <h1 style="font-family:verdana;">A heading</h1>

 <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>



 14、文本对齐

 <h1 style="text-align:center;">Center-aligned heading</h1>

 <p>This is a paragraph.</p>



 15、HTML 图像- Alt属性

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

 替换文本属性的值是用户定义的。

 <img src="boat.gif" alt="Big Boat">

 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。



 16、排列图片 

 <h4>Image with default alignment (align="bottom"):</h4>

 <p>This is some text. <img src="smiley.gif" alt="Smiley face" width="32" height="32"> This is some text.</p>

 <h4>Image with align="middle":</h4>

 <p>This is some text. <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32"> This is some text.</p>

 <h4>Image with align="top":</h4>

 <p>This is some text. <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32"> This is some text.</p>

 <p><b>Note:</b> The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.</p>



 17、浮动图片

 <p>

 <img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> A paragraph with an image. The image will float to the left of this text.

 </p>

 <p>

 <img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> A paragraph with an image. The image will float to the right of this text.

 </p>



 18、图片映射

 <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

 <map name="planetmap">

   <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

   <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">

   <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

 </map>



 19、HTML 图像标签

 标签
 描述

 <img>
 定义图像

 <map>
 定义图像地图

 <area>
 定义图像地图中的可点击区域



 20、表格

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



 21、表格的表头

 <table border="1">

 <tr>

   <th>Name</th>

   <th>Telephone</th>

   <th>Telephone</th>

 </tr>

 <tr>

   <td>Bill Gates</td>

   <td>555 77 854</td>

   <td>555 77 855</td>

 </tr>

 </table>



 22、表格的表头2

 <table border="1">

 <tr>

   <th>First Name:</th>

   <td>Bill Gates</td>

 </tr>

 <tr>

   <th>Telephone:</th>

   <td>555 77 854</td>

 </tr>

 <tr>

   <th>Telephone:</th>

   <td>555 77 855</td>

 </tr>

 </table>



 23、带标题的表格

 <table border="1">

   <caption>Monthly savings</caption>

   <tr>

     <th>Month</th>

     <th>Savings</th>

   </tr>

   <tr>

     <td>January</td>

     <td>$100</td>

   </tr>

   <tr>

     <td>February</td>

     <td>$50</td>

   </tr>

 </table>



 24、跨行跨列的表格

 <table border="1">

 <tr>

   <th>Name</th>

   <th colspan="2">Telephone</th>

 </tr>

 <tr>

   <td>Bill Gates</td>

   <td>555 77 854</td>

   <td>555 77 855</td>

 </tr>

 </table>



 <h4>Cell that spans two rows:</h4>

 <table border="1">

 <tr>

   <th>First Name:</th>

   <td>Bill Gates</td>

 </tr>

 <tr>

   <th rowspan="2">Telephone:</th>

   <td>555 77 854</td>

 </tr>

 <tr>

   <td>555 77 855</td>

 </tr>

 </table>



 25、表格内的标签

 <table border="1">

 <tr>

   <td>

    <p>This is a paragraph</p>

    <p>This is another paragraph</p>

   </td>

   <td>This cell contains a table:

    <table border="1">

    <tr>

      <td>A</td>

      <td>B</td>

    </tr>

    <tr>

      <td>C</td>

      <td>D</td>

    </tr>

    </table>

   </td>

 </tr>

 <tr>

   <td>This cell contains a list

    <ul>

     <li>apples</li>

     <li>bananas</li>

     <li>pineapples</li>

    </ul>

   </td>

   <td>HELLO</td>

 </tr>

 </table>



 26、单元格边距

 <table border="1">

 <tr>

   <td>First</td>

   <td>Row</td>

 </tr>   

 <tr>

   <td>Second</td>

   <td>Row</td>

 </tr>

 </table>



 <h4>With cellpadding:</h4>

 <table border="1" cellpadding="10">

 <tr>

   <td>First</td>

   <td>Row</td>

 </tr>   

 <tr>

   <td>Second</td>

   <td>Row</td>

 </tr>

 </table>



 27、单元格边距

 <table border="1">

 <tr>

   <td>First</td>

   <td>Row</td>

 </tr>

 <tr>

   <td>Second</td>

   <td>Row</td>

 </tr>

 </table>



 <h4>With cellspacing="0":</h4>

 <table border="1" cellspacing="0">

 <tr>

   <td>First</td>

   <td>Row</td>

 </tr>

 <tr>

   <td>Second</td>

   <td>Row</td>

 </tr>

 </table>



 <h4>With cellspacing="10":</h4>

 <table border="1" cellspacing="10">

 <tr>

   <td>First</td>

   <td>Row</td>

 </tr>

 <tr>

   <td>Second</td>

   <td>Row</td>

 </tr>

 </table>



 28、HTML 表格标签

 标签
 描述

 <table>
 定义表格

 <th>
 定义表格的表头

 <tr>
 定义表格的行

 <td>
 定义表格单元

 <caption>
 定义表格标题

 <colgroup>
 定义表格列的组

 <col>
 定义用于表格列的属性

 <thead>
 定义表格的页眉

 <tbody>
 定义表格的主体

 <tfoot>
 定义表格的页脚



 29、无序列表

 <ul>

   <li>Coffee</li>

   <li>Tea</li>

   <li>Milk</li>

 </ul>



 30、有序列表

 <ol>

   <li>Coffee</li>

   <li>Tea</li>

   <li>Milk</li>

 </ol>



 <ol start="50">

   <li>Coffee</li>

   <li>Tea</li>

   <li>Milk</li>

 </ol>



 31、不同类型的有序列表

 <h4>Numbered list:</h4>

 <ol>

  <li>Apples</li>

  <li>Bananas</li>

  <li>Lemons</li>

  <li>Oranges</li>

 </ol>  



 <h4>Letters list:</h4>

 <ol type="A">

  <li>Apples</li>

  <li>Bananas</li>

  <li>Lemons</li>

  <li>Oranges</li>

 </ol>  



 <h4>Lowercase letters list:</h4>

 <ol type="a">

  <li>Apples</li>

  <li>Bananas</li>

  <li>Lemons</li>

  <li>Oranges</li>

 </ol>  



 <h4>Roman numbers list:</h4>

 <ol type="I">

  <li>Apples</li>

  <li>Bananas</li>

  <li>Lemons</li>

  <li>Oranges</li>

 </ol>  



 <h4>Lowercase Roman numbers list:</h4>

 <ol type="i">

  <li>Apples</li>

  <li>Bananas</li>

  <li>Lemons</li>

  <li>Oranges</li>

 </ol> 



 32、不同类型的无序列表

 <h4>Disc bullets list:</h4>

 <ul style="list-style-type:disc">

  <li>Apples</li>

  <li>Bananas</li>

  <li>Lemons</li>

  <li>Oranges</li>

 </ul>  



 <h4>Circle bullets list:</h4>

 <ul style="list-style-type:circle">

  <li>Apples</li>

  <li>Bananas</li>

  <li>Lemons</li>

  <li>Oranges</li>

 </ul>  



 <h4>Square bullets list:</h4>

 <ul style="list-style-type:square">

  <li>Apples</li>

  <li>Bananas</li>

  <li>Lemons</li>

  <li>Oranges</li>

 </ul>



 33、嵌套列表

 <ul>

   <li>Coffee</li>

   <li>Tea

     <ul>

       <li>Black tea</li>

       <li>Green tea</li>

     </ul>

   </li>

   <li>Milk</li>

 </ul>



 34、自定义列表

 <dl>

   <dt>Coffee</dt>

   <dd>- black hot drink</dd>

   <dt>Milk</dt>

   <dd>- white cold drink</dd>

 </dl>



 35、文本的容器 HTML <span> 与元素

 <span> 元素也没有特定的含义。

 当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。



 36、HTML 区块元素 和 HTML 内联元素

 大多数 HTML 元素被定义为块级元素或内联元素。

 块级元素在浏览器显示时，通常会以新行来开始（和结束）。

 实例: <h1>, <p>, <ul>, <table>

 内联元素在显示时通常不会以新行开始。

 实例: <b>, <td>, <a>, <img>



 37、表单 文本框

 <form>

 First name: <input type="text" name="firstname"><br>

 Last name: <input type="text" name="lastname">

 </form>



 38、表单 密码框

 <form>

 Password: <input type="password" name="pwd">

 </form>



 39、单选按钮（Radio Buttons）

 <input type="radio"> 标签定义了表单单选框选项

 <form>

 <input type="radio" name="sex" value="male">Male<br>

 <input type="radio" name="sex" value="female">Female

 </form>



 40、复选框（Checkboxes）

 <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

 <form>

 <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

 <input type="checkbox" name="vehicle" value="Car">I have a car 

 </form>



 41、提交按钮(Submit Button)

 <input type="submit"> 定义了提交按钮.

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

 <form name="input" action="html_form_action.php" method="get">

 Username: <input type="text" name="user">

 <input type="submit" value="Submit">

 </form>



 42、预选下拉列表

 <form action="">

 <select name="cars">

 <option value="volvo">Volvo</option>

 <option value="saab">Saab</option>

 <option value="fiat" selected>Fiat</option>

 <option value="audi">Audi</option>

 </select>

 </form>



 43、带边框的表单（注意这个<fieldset>和<legend>）

 <form action="">

 <fieldset>

 <legend>Personal information:</legend>

 Name: <input type="text" size="30"><br>

 E-mail: <input type="text" size="30"><br>

 Date of birth: <input type="text" size="10">

 </fieldset>

 </form>



 44、HTML 表单标签

 New : HTML5新标签

 标签
 描述

 <form>
 定义供用户输入的表单

 <input>
 定义输入域

 <textarea>
 定义文本域 (一个多行的输入控件)

 <label>
 定义了 <input> 元素的标签，一般为输入标题

 <fieldset>
 定义了一组相关的表单元素，并使用外框包含起来

 <legend>
 定义了 <fieldset> 元素的标题

 <select>
 定义了下拉选项列表

 <optgroup>
 定义选项组

 <option>
 定义下拉列表中的选项

 <button>
 定义一个点击按钮

 <datalist>New
 指定一个预先定义的输入控件选项列表

 <keygen>New
 定义了表单的密钥对生成器字段

 <output>New
 定义一个计算结果



 45、注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。



 46、HTML 框架

 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

 iframe语法:

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

 该URL指向不同的网页。

 Iframe - 设置高度与宽度

 height 和 width 属性用来定义iframe标签的高度与宽度。

 属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%").

 实例

 <iframe src="demo_iframe.htm" width="200" height="200"></iframe>



 47、使用iframe来显示目录链接页面

 iframe可以显示一个目标链接的页面

 目标链接的属性必须使用iframe的属性，如下实例:

 实例

 <iframe src="demo_iframe.htm" name="iframe_a"></iframe>

 <p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>



 48、html颜色

 <p style="background-color:#FFFF00">

 通过十六进制设置背景颜色

 </p>

 <p style="background-color:rgb(255,255,0)">

 通过 rbg 值设置背景颜色

 </p>

 <p style="background-color:yellow">

 通过颜色名设置背景颜色

 </p>



 49、HTML<noscript> 标签

 <noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

 <noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

 只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：



 50、HTML字符实体

 Note
 

  实体名称对大小写敏感！



 显示结果
 描述
  实体名称
 实体编号

  
 空格
  
  

 <
 小于号
 <
 <

 >
 大于号
 >
 >

 &
 和号
 &
 &

 "
 引号
 "
 "

 '
 撇号 
' (IE不支持)
 '

 ￠
 分
 ¢
 ¢

 £
 镑
 £
 £

 ¥
 日元
 ¥
 ¥

 €
 欧元
 €
 €

 §
 小节
 §
 §

 ©
 版权
 ©
 ©

 ®
 注册商标®
  ®

 ™
 商标
 ™
 ™

 ×
 乘号
 ×
 ×

 ÷
 除号
 ÷÷



 51、URL 字符编码

 URL 只能使用 ASCII 字符集.

 来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

 URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

 URL 不能包含空格。URL 编码通常使用 + 来替换空格。