当前位置：
  1. 首页
  2. html
  3. 正文
本文介绍: 本文详细讲述了html及其一些常用标签

在这里插入图片描述

一、HTML简介

1、网页

1>什么是网页

网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。
网页是网站中的一“页”，通常是 HTML格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。

2>什么是HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言 (markup language)。 标记语言是一套标记标签 (markup tag)。

超文本的含义：

  1. 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制 ）。
  2. 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）。

2、Web标准

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

1>为什么需要Web标准

由于不同浏览器解析出来的效果不一致，开发者需要开发多个版本。

Web 标准可以让不同的开发人员写出的页面更标准、更统一；内容能被更广泛的设备访问；更容易被搜寻引擎搜索；使网站更易于维护；提高页面浏览速度。

2>Web标准的构成

Web标准主要包括结构（Structure） 、表现（Presentation）和行为（Behavior）三个方面。
在这里插入图片描述

标准 说明
结构 结构用于对网页元素进行整理和分类，HTML
表现 表现用于设置网页元素的颜色、大小等外观样式，CSS
行为 行为指网页模型的定义及交互的编写，Javascript

结构写到 HTML 文件中， 表现写到 CSS 文件中， 行为写到 JavaScript 文件中。

在这里插入图片描述

3、HTML语法规范

1>基本语法

  1. HTML 标签是由尖括号包围的关键词，如 < html &gt;
  2. 双标签：成对出现（大多数都是双标签），如< html&gt;< /html&gt;
  3. 单标签：单个标签（很少），如< br/>

2>标签关系

<head>
      <title> </title>
</head>

<head></head>
<body></body>

二、HTML标签

1、基本标签

标签名 定义
< html>< /html> HTML标签
< head>< /head> 文档的头部
< title>< /title> 文档的标题
< body>< /body> 文档的主体 
<html>
   <head>
      <title> 文章标题</title>
   </head>
   <body>
      文章主题在这里！
   </body>
</html>

2、标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题，即< h1> – < h6> 。

3、段落和换行标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，< p>标签用于定义段落，它可以将整个网页分为若干个段落。

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 < br />。

  • < br /> 是个单标签。
  • < br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4、文本格式化标签

突出重要性, 比普通文字更重要

语义 标签
加粗 < strong>< /strong>
倾斜 < em>< /em>
删除线 < del>< /del>
下划线 < ins>< /ins>

在这里插入图片描述

5、< div>和< span>标签

它们是没有语义的，就是一个盒子，用来装内容的。

  1. < div> 标签用来布局，但是现在一行只能放一个< div>。 大盒子
  2. < span> 标签用来布局，一行上可以多个 < span>。小盒子

6、图像标签

< img> 标签用于定义 HTML 页面中的图像。

<img src="图像URL"/>

src 是< img>标签的必须属性，它用于指定图像文件的路径和文件名。

图像标签属性说明：

属性 说明
src 图片路径
alt 图片不能显示用来代替的文字
title 鼠标放到图像上显示的文字
width 设置图像的宽度
height 设置图像的高度
border 设置图像边框粗细

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

7、超链接标签

< a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。

语法格式：

<a href="跳转目标url地址" target="目标窗口弹开方式">文本或图像</a>
属性 作用
href 指定链接目标的url地址
target 链接打开方式，默认为_self，在新窗口打开为_blank

链接分类：

  1. 外部链接: 例如 < a href=”http:// www.baidu.com “> 百度< /a >。
  2. 内部链接:直接链接内部页面名称即可
  3. 空链接: 如果当时没有确定链接目标时，< a href=“#”> 首页 < /a > 。
  4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
  5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
  6. 锚点链接: 点击链接,可以快速定位到页面中的某个位置.（在链接文本的 href 属性中，设置属性值为 #名字 的形式，找到目标位置标签，里面添加一个 id 属性 = 刚才的名字）

8、表格标签

在这里插入图片描述

语法格式：

<table>
        <tr>
            <td>单元格内的文字</td>
            ...
        </tr>
        ...
</table>

1>表格属性

属性名 属性值 描述
align left、center、right 表格相对周围元素对齐方式
border 1或“ ” 是否有边框
cellpadding 像素值 边沿与内容间空白值 ，默认1
cellspacing 像素值 单元格之间的空白 ，默认2
width 像素值或百分比 规定表格的宽度

2>表格结构标签

  1. < thead>< /thead>：用于定义表格的头部。< thead> 内部必须拥有 < tr> 标签。 一般是位于第一行。
  2. < tbody>< /tbody>：用于定义表格的主体，主要用于放数据本体 。
  3. 以上标签都是放在 < table>< /table> 标签中。

3>合并单元格

  1. 先确定是跨行还是跨列合并。
  2. 找到目标单元格。
  3. 删除多余的单元格。

方式：

9、列表标签

表格是用来显示数据的，那么列表就是用来布局的。列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据不同的使用情景，列表可以分为三类：无序列表、有序列表和自定义列表。

1>无序列表

< ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 < li> 标签定义。

语法格式：
在这里插入图片描述

2>有序列表

< ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 < li> 标签来定义列表项。

语法格式：
在这里插入图片描述

3>自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

< dl> 标签用于定义描述列表（或定义列表），该标签会与 < dt>（定义项目/名字）和
< dd>（描述每一个项目/名字）一起使用。

语法格式:
在这里插入图片描述

10、表单标签

一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。

1>表单域

表单域是一个包含表单元素的区域， < form> 标签用于定义表单域，以实现用户信息的收集和传递。
< form> 会把它范围内的表单元素信息提交给服务器

常用属性：

属性 作用
action 指定接收并处理表单数据的服务器程序的url地址
method 设置表单数据的提交方式，其值为get或post
name 指定表单的名称，区分一个页面的多个表单 
<form action="url地址" method="提交方式" name="表单域名称">
        表单元素控件
</form>

2>表单控件

<input表单元素
<input type="属性值"/>

type 属性设置不同的属性值用来指定不同的控件类型

type属性值

属性值 描述
txet 定义单行输入文本
password 定义密码字段
radio 定义单选按钮
checkbox 复选框
submit 把表单域form里表单元素的值提交给后台服务器
reset 重置按钮，清除表单所有数据
button 定义可点击按钮
file 文件域，上传文件使用

除type外其他属性：

属性 描述
name 定义input元素名称
value 规定input元素的值
checked input元素首次加载时被选中
maxlength 规定字符最大长度

label标签

为 input 元素定义标注，签用于绑定一个表单元素, 当点击< label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

语法格式：

<!-- <label> 标签的 for 属性应当与相关元素的 id 属性相同。 -->
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
<select下拉表单元素

如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用< select>标签控件定义下拉列表。

语法格式：
在这里插入图片描述

<textarea文本域表单元素

当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 < textarea> 标签。在表单元素中，< textarea> 标签是用于定义多行文本输入的控件。使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

语法格式：

<textarea row3="3" cols="20">
        文本内容
</textarea>
显示所有内容
上一篇 用html+js+css3实现整屏滚动fullpage功能
下一篇 【毕业设计之html系列】基于html5的动物领养网站

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。