【Web】Html 常用标签

Html、CSS、JavaScript

 

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：

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

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

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

 

Html文件基本结构

 

…

…

 

常见标签

 

标题标签 共有6个从h1到h6依次递减。

 

图片标签

 

头标签:

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

 

标签之间内容是网页的标题信息。

 

文字—> 注释标签

 

显示网页的内容。

 

段落标签

 

和 表示强调。

 

该标签没有语义，它的作用就是为了设置单独的样式用的。

 

短文本引用，不需要双引号，会被自动加上双引号。

 

 长文本引用，也不用加双引号。

 

换行

 

  空格

 

---

 添加水平横线

 

地址

 显示地址信息。

 

在文章中插入一行代码时，可以使用code标签。

 

插入一大段代码时可以使用pre标签，被pre元素包围的文本通常会保留空格和换行符。

 

 列表信息，无序列表。

 

 列表信息，有序列表。

 

容器，可以把一些独立的逻辑划分出来，如网页中的栏目板块。

 

标签
  表示一行

表示一列

 

表格标题  表格需要添加一些标签进行优化，可以添加标题和摘要。

标题文本

…

…

…

…

 

网址” title=”鼠标滑过显示的文本”>链接显示文本

 

网址” target=”_blank”>click here  在新建浏览器中打开链接

 

使用mailto 在网页中链接网页地址： 标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。




一个电子邮件完整的实例




地址” alt=”下载失败时替换文本” title=”提示文本”> 

Src: 标识图片的位置。

Alt：指定图片的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本。

Title：提供在图像可见时对图像的描述（鼠标滑过图片是显示的文本）。

 

 表单标签，与用户交互。

方式” action=”服务器文件”>

: 标签是成对出现的，以开始，以结束

:浏览器输入的数据被传送到的地方，如save.jsp

Method:数据传输方式（get、post）。

 

 文本框、密码输入框

Type:  当type=“text” 时，输入框为文本输入框。 当type=”password”时，输入框为密码输入框。

Name：为文本框命名，以备后台asp php 使用。

Value：为文本输入框设置默认值。（一般为提示作用）。

 

文本 文本域，支持多行输入

1.<span style="font-family:'宋体';">标签</span><span style="font-family:'宋体';">是成对出现的。</span></p> <p>2.cols：<span style="font-family:'宋体';">多行输入域的列数。</span></p> <p>3.rows<span style="font-family:'宋体';">：</span>多上<span style="font-family:'宋体';">输入域的行数。</span></p> <p>4.<span style="font-family:'宋体';">在</span><textarea>标签之间可以输入默认值。

在<span style="font-family:'宋体';">这里输入内容</span>…

 

1. type :  当type=”radio” 时，控件为单选框。 当 type=”checkbox” 时，控件为复选框。

2. value：提交数据到服务器的值。

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

4. checked=“checked” 该选项被默认选中。

注意：同一组的单选按钮，name取值一定要一致。

 

使用下拉列表，节省空间。

    

显示值   表示被默认选中

…

 

使用下拉列表框进行多选

下拉列表也可以进行多选操作，在标签中设置 multiple=“multiple” 属性，就可以实现多选功能，在windows操作系统下，进行多选时同时按下Ctrl 键和 单击 。

…

 

 提交按钮，用于提交表单数据。

 

 重置按钮，使输入框恢复到初识状态。

 

名称”>

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

注意：标签的for属性中的值要和相关控件的id属性值相同。

  男

  

  


  女

  

  输入你的邮箱地址