首页 > 代码库 > HTML小结

HTML小结

2024-09-01 05:10:48 220人阅读

1.HTML、CSS、JavaScript区别

　　1） HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

　　2） CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

　　3） JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

2.head标签

　　作用：文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：

　　<head>
    　　<title>...</title>
   　　 <meta>
   　　 <link>
    　　<style>...</style>
   　　 <script>...</script>
　　</head>

　　1）<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

　　例如：

　　<head>
    　　<title>hello world</title>
　　</head>

　2）<meta>标签：常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services

　　meta标签共有两个属性，分别是http-equiv属性和name属性。
　 *1.http-equiv(全称：http-equivlent)相当于HTTP的作用，比如说定义些HTTP参数(详细见http://www.cnblogs.com/sanshuimiao/p/5798289.html)　
  *2.name属性：主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。

　　 meta标签中name属性语法格式是：<meta name="参数" content="具体的描述"> 其中name属性共有以下几种参数。（详细见http://www.imooc.com/article/4475）

　　　　A. keywords(关键字)　　说明：用于告诉搜索引擎，你网页的关键字。举例：

     　　 <meta name="keywords" content="Lxxyx,博客，文科生，前端">

　　 B. description(网站内容的描述)说明：用于告诉搜索引擎，你网站的主要内容。举例：

     　　<meta name="description" content="文科生，热爱前端与编程。目前大二，这是我的前端博客">

　　 C. viewport(移动端的窗口) 说明：这个概念较为复杂，具体的会在下篇博文中讲述。这个属性常用于设计移动端网页。在用bootstrap,AmazeUI 等框架时候都有用过viewport。举例（常用范例）：

    　　 <meta name="viewport" content="width=device-width, initial-scale=1">

3.body内标签
　　1.段落：<p>段落文本</p>
　　2.标题：标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级
　　　　　　　　语法：
　　　　　　　　<hx>标题文本</hx> (x为1-6)
　　3.强调：但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。

　　　　　　<em>需要强调的文本</em>

　　　　　　<strong>需要强调的文本</strong>

　4. <span>标签是没有语义的，它的作用就是为了设置单独的样式用的。span就是标注一块区域，来进行样式的单独设置，本身没有语义！

　　<span>要设置格式的文字</span>

　　同时需要在<head>中加入<style><span color:blue;></style>

　5.引用：<q>引用文本</q>

6.长文本引用：<blockquote>引用文本</blockquote>

7.换行</br> (break)

8.空格：  （no-breaking space:不间断空格）

9.添加视屏横线：</hr> (horizental)

10.地址：一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。

　　<address>联系地址信息</address>

11.加入代码：<code>代码语言</code>

12.保留原格式显示：<pre>代码等内容</pre> 主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

13.在网页中添加无序信息列表<ul></ul>： ul-li是没有前后顺序的信息列表。在网页中显示的默认样式一般为：每项li前都自带一个圆点

　　<ul>                                      unordered list
 　　 <li>信息</li>                            list
 　　 <li>信息</li>
 　　  ......
　　</ul>    
14在网页中添加排序列表<ol></ol>：网页中展示有前后顺序的信息列表如，当当网上的书籍热卖排行榜，在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始。

　　<ol>
   　　<li>信息</li>
   　　<li>信息</li>
  　　 ......
　　</ol>
15.逻辑划分<div>…</div>
         <div  id="版块名称">…</div>   一个div相当于一个房间，id相当于房间号。
16.表格<table>...</table> 注意：表格还是需要添加一些标签进行优化，可以添加标题和摘要。摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。摘要：<table summary="表格简介文本">

　　　　　　　　　　　　　　　　技术分享

　　　　　标题：用以描述表格内容，标题的显示位置：表格上方。

　　　　　　<table>
    　　　　　　<caption>标题文本</caption>
    　　　　　　<tr>
       　　　　　　 <td>…</td>
        　　　　　　<td>…</td>
       　　　　　 …
    　　　　　　</tr>
　　　　　　　　　　…
　　　　　　</table>

　　 1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

　　 2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。

　　　　3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

　　　　4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

　　　　5、<th>…</th>：表格的头部的一个单元格，表格表头。

　　　　6、表格中列的个数，取决于一行中数据单元格的个数。

17.超链接：使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

　　　　　1）<a  href="http://www.mamicode.com/目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
　　　　　　title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）

　　　　　2）<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。

　　　　　　<a href="http://www.mamicode.com/目标网址" target="_blank">click here!</a>

　　　　　3）注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

　　　　技术分享

　　　　点击发送后：

　　　　　　　　技术分享

18.插入图片：<img>

　　　　　　1、src：标识图像的位置；

　　　　　　2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

　　　　　　3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

　　　　　　4、图像可以是GIF，PNG，JPEG格式的图像文件。

19.表单：<form>...</form> 表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

　　　　　　1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

　　　　　　2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

　　　　　　3.method ：数据传送的方式（get/post）。

　　　　　　<form    method="post"   action="save.php">
       　　　　 <label for="username">用户名:</label>
       　　　　 <input type="text" name="username" />
        　　　　<label for="pass">密码:</label>
       　　　　 <input type="password" name="pass" />
　　　　　　</form>

　　　　注意:所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

　　　　　　1.文本输入框和密码输入框：

　　　　　　　　语法：

　　　　　　　　<form>
   　　　　　　　　<input type="text/password" name="名称" value="http://www.mamicode.com/文本" />
　　　　　　　　</form>

　　　　　　　　1、type：

　　　　　　当type="text"时，输入框为文本输入框;

　　　　　　当type="password"时, 输入框为密码输入框。

　　　　　　　　2、name：为文本框命名，以备后台程序ASP 、PHP使用。

　　　　　　　　3、value：为文本输入框设置默认值。(一般起到提示作用)

　　　　　　　　举例：

　　　　　　　　　　<form>
 　　　　　　　　　　 姓名：
 　　　　　　　　　　 <input type="text" name="myName">
 　　　　　　　　　　 <br/>
 　　　　　　　　　　 密码：
 　　　　　　　　　　 <input type="password" name="pass">
　　　　　　　　　　</form>

　　　　　　　　　　　　技术分享

　　　2.文本域，支持多行文本输入：当用户需要在表单中输入大段文字时，需要用到文本输入域。

　　　　语法：

　　　　　　<textarea  rows="行数" cols="列数">文本</textarea>

　　　　　　　　1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

　　　　　　　　2、cols ：多行输入域的列数。

　　　　　　　　3、rows ：多行输入域的行数。

　　　　　　　　4、在<textarea></textarea>标签之间可以输入默认值。

　　　　　　举例：

　　　　　　　　<form  method="post" action="save.php">
      　　　　  <label>联系我们</label>
       　　　　 <textarea cols="50" rows="10" >在这里输入内容...</textarea>
　　　　　　　　</form>
　　　3.使用单选框、复选框，让用户选择  ：
　　　　 在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。

语法：

　　　　<input   type="radio/checkbox"   value="http://www.mamicode.com/值"    name="名称"   checked="checked"/>

　　　　　　1、type:

　　　　　　　　当 type="radio" 时，控件为单选框

　　　　　　　　当 type="checkbox" 时，控件为复选框

　　　　　　2、value：提交数据到服务器的值（后台程序PHP使用）

　　　　　　3、name：为控件命名，以备后台程序 ASP、PHP 使用

　　　　　　4、checked：当设置 checked="checked" 时，该选项被默认选中

　　　　　　技术分享

　　　　　　注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。

　　　4.使用下拉列表框，节省空间

　　　　　　　　技术分享

　　　　　　1、value：

技术分享

　　　　 2.selected="selected"：

　　　　　　　　　　设置selected="selected"属性，则该选项就被默认选中。

　　　　　　　　　　在浏览器中显示的结果：

技术分享

　　　5.使用下拉列表框进行多选

　　　　　　下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。如下代码：

技术分享

在浏览器中显示的结果：

技术分享

　　6.使用提交按钮，提交数据

　　　　　　在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。

　　　　　　语法：

　　　　　　　　<input   type="submit"   value="http://www.mamicode.com/提交">

　　　　　　　　type：只有当type值设置为submit时，按钮才有提交作用

　　　　　　　　value：按钮上显示的文字

技术分享

在浏览器中显示的结果：

技术分享

　　　7.使用重置按钮，重置表单信息

　　　　　　当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。

　　　　　　语法：

　　　　　　　　<input type="reset" value="http://www.mamicode.com/重置">

　　　　　　　　type：只有当type值设置为reset时，按钮才有重置作用

　　　　　　　　value：按钮上显示的文字

　　　　　　　　举例：

　　　　　　　　技术分享

　　　　　　　　在浏览器中显示的结果：

　　　　　　　技术分享

　　8.form表单中的label标签

　　　　label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

　　　　语法：

　　　　　　<label for="控件id名称">

　　　　　　注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

　　　　例子：

　　　　<form>
　　　　  <label for="male">男</label>
 　　　　 <input type="radio" name="gender" id="male" />
 　　　　 <br />
  　　　　<label for="female">女</label>
 　　　　 <input type="radio" name="gender" id="female" />
 　　　　 <label for="email">输入你的邮箱地址</label>
 　　　　 <input type="email" id="email" placeholder="Enter email">
　　　　</form>

HTML小结

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > HTML小结

HTML小结

1.HTML、CSS、JavaScript区别

2.head标签

A. keywords(关键字) 说明：用于告诉搜索引擎，你网页的关键字。举例：

B. description(网站内容的描述)说明：用于告诉搜索引擎，你网站的主要内容。举例：

C. viewport(移动端的窗口) 说明：这个概念较为复杂，具体的会在下篇博文中讲述。这个属性常用于设计移动端网页。在用bootstrap,AmazeUI 等框架时候都有用过viewport。举例（常用范例）：

2.文本域，支持多行文本输入 ： 当用户需要在表单中输入大段文字时，需要用到文本输入域。

4.使用下拉列表框，节省空间

5.使用下拉列表框进行多选

6.使用提交按钮，提交数据

7.使用重置按钮，重置表单信息

8.form表单中的label标签

看完仍有疑问？有类似问题直接问程序猿

　　　　A. keywords(关键字)　　说明：用于告诉搜索引擎，你网页的关键字。举例：

　　 B. description(网站内容的描述)说明：用于告诉搜索引擎，你网站的主要内容。举例：

　　 C. viewport(移动端的窗口) 说明：这个概念较为复杂，具体的会在下篇博文中讲述。这个属性常用于设计移动端网页。在用bootstrap,AmazeUI 等框架时候都有用过viewport。举例（常用范例）：

　　　2.文本域，支持多行文本输入：当用户需要在表单中输入大段文字时，需要用到文本输入域。

　　　4.使用下拉列表框，节省空间

　　　5.使用下拉列表框进行多选

　　6.使用提交按钮，提交数据

　　　7.使用重置按钮，重置表单信息

　　8.form表单中的label标签