时间戳

首页 > 技术文章 > HTML基本使用

HTML基本使用

birdy-silhouette 2021-06-12 21:35 原文

HTML初识

(Hyper Text Markup Language): 超文本标记语言

「HTML骨架格式」

<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head>     
        <!-- 标题标签 -->
        <title></title> 
    </head>
    <!-- 文档的主体 -->
    <body>
    </body>
</html>

约定大小写:

  • HTML标签名、类名、标签属性和大部分属性值统一用小写

HTML标签关系

  • 嵌套关系父子级包含关系
  • 并列关系兄弟级并列关系
  • 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。

基本标签和属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

文档类型<!DOCTYPE >

用来说明你用的XHTML或者HTML是什么版本。<!DOCTYPE html>告诉浏览器按照HTML5标准解析页面。

<html>

作用： <html>标签用来告诉浏览器这个文档中包含的信息是用HTML编写的。

所有的网页的内容都需要编写到html标签中， 一个页面中html标签只能有一个。 html标签中有两个子标签head和body

作用： <head>标签用来表示网页的元数据，帮助浏览器解析网页，head中的信息在浏览器中不可见。

<head>标签作为html标签的子元素的出现，一 个网页中只能有一个head。

<meta>

<meta> 标签可提供有关页面的元信息，比如 针对搜索引擎和更新频度的描述和关键词。 <meta> 标签位于文档的头部，不包含任何内 容。

• 设置页面的字符集 – <meta charset="utf-8">
• 设置网页的描述 – <meta name="description" content=""> 
• 设置网页的关键字 – <meta name="keywords" content=""> 
• 请求的重定向 – <meta http-equiv="refresh"  content="5;url=地址"/>

<title>

作用： <title>标签表示网页的标题，一般会在网页的标题栏上显示。 – title标签中的文字，是页面优化的最重要因素。在 搜索引擎的搜索时最先看到的、最醒目的内容。

用法： 建议将title标签紧贴着head标签编写，这样搜索 引擎可以快速检索到标题标签。 – 网站中的多个页面的title也不应该重复，这样不利 于搜索隐藏检索。

<body>

作用： – 标签用来设置网页的主体，所有在页 面中能看到的内容都应该编写到body标签中。

用法： – body标签作为html的子标签使用。

lang

  • 根据根据lang属性来设定不同语言的样式，或者字体
  • 告诉搜索引擎做精确的识别
  • 让语法检查程序做语言识别
  • 帮助翻译工具做识别
  • 帮助网页阅读程序做识别

字符集

(Character set)是多个字符的集合,计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字

UTF-8是目前最常用的字符集编码方式，让 html 文件是以 UTF-8 编码保存的， 浏览器根据编码去解码对应的html内容。

<meta charset="UTF-8" />

常用标签

排版标签

主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签

  • 标题标签h(h1~h6)
  • 段落标签p，可以把 HTML 文档分割为若干段落
  • 水平线标签hr
  • 换行标签br
  • div和span标签: 是没有语义的，是我们网页布局最主要的2个盒子。

文本格式化标签

  • b和strong 文字以粗体显示
  • i和em 文字以斜体显示
  • s和del 文字以加删除线显示
  • u和ins 文字以加下划线显示

区块标签

div

图像标签img

属性 值 说明
src URL 规定显示图像的 URL。必填
width 规定图像的宽度。
length 规定图像的长度，
alt text 图片加载失败时的替代文本
title text 鼠标悬浮在图片上时的提示信息

注意：

  • 图片大小一般只设置长或宽的一种，如设置长度时宽度可自适应变化

  • 标签可以拥有多个属性，属性必须写在开始标签中，位于标签名后面。

  • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

  • 采取 键值对 的格式 key="value" 的格式

超链接标签

<a href="跳转url" target="目标窗口的弹出方式">文本或图像</a>
属性 作用
href 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

链接分类

  1. 外部链接 ，格式·http://www.baidu.com

  2. 内部链接 ，直接链接内部页面名称即可，比如跳转首页< a href="index.html">

  3. 空链接，如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

      <!-- 在开发中可以将#作为超链接的路径的展位符使用,点击可回到页面顶部 -->
    <a href="#">回到顶部</a>

 <!-- 可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生，常用来获取当前行的数据并打开弹框 -->
    <a href="javascript:;" @click="openDialog(scope.row)">打开弹框</a>

  4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

  5. 锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。

    <!--  使用相应的id名标注跳转目标的位置。 (找目标) -->
  <h3 id="two">第2集</h3> 

<!--  使用<a href="#id名">链接文本</a>创建链接文本（被点击的） -->
  <a href="#two">

src 和 href 的区别

一句话概括: src 是引入资源的，href 是跳转url的

  1. src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
  2. src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
  3. href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。如果我们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

表格

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

table、tr、td，他们是创建表格的基本标签，缺一不可

  • table用于定义一个表格标签。
  • tr标签 用于定义表格中的行，必须嵌套在 table标签中。
  • td用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。td像一个容器，可以容纳所有的元素。

**表头单元格标签th **: 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

表格属性（了解）

大多数表格属性在html5中已经废除使用，改用css样式

注意： border cellpadding cellspacing 默认为0

合并单元格

合并的顺序我们按照先上后下、先左后右的顺序 ，合并完之后需要删除多余的单元格。

  • 跨行合并：rowspan="合并单元格的个数"
  • 跨列合并：colspan="合并单元格的个数"

表格划分结构

  • 页眉: <thead>
  • 主体：<tbody>
  • 页脚：<tfoot>

注意：

  1. ：用于定义表格的头部。用来放标题之类的东西。 内部必须拥有 标签！
  2. ：用于定义表格的主体。放数据本体 。
  3. 放表格的脚注之类。
  4. 以上标签都是放到table标签中。

列表

无序列表ul

  • <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
  • <li>与</li>之间相当于一个容器，可以容纳所有元素。
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

有序列表 ol

  • <ol>标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序，常用的type属性值分别为是1，a，A，i，I
  • <ol reversed="reversed">中的reversed属性能够让有序列表中的序列倒序排列。
  • <ol start="3">中的start属性值为数值型，有序列表中的第一个序列号将从3开始排列。
<ol type="A" start="2"> 
  <li>列表一</li>
  <li>列表二</li>
  <li>列表三</li>
</ol>

自定义列表

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

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

表单

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。

  • 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
  • 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
  • 表单域：它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

表单域<form>

传送门

<form action="demo_form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

重要属性：

  • action: 设置提交的服务器地址
  • method: 设置提交的方式 GET(默认值)或 POST

input 控件

传送门

input 输入的意思，为单标签，type属性设置不同的属性值用来指定不同的控件类型，除了type属性还有别的属性

下面通过一个简单的例子来介绍几个重要的属性

 <form action="1.php" method="post">
        用户名：<input type="text" name="username" value="birdy"> <br>
        密码：<input type="password" name="password"> <br>
        <input type="submit" value="注册">
 </form>

密码输入123，点击注册按钮后，传给服务器参数如下

username=birdy
password=123

由此可见，type属性定义输入框的类型，name属性定义传递给服务器的参数名，而value属性则是参数的值

type属性

type 属性规定要显示的 input元素的类型。

常见属性

name属性

name表单控件的名字， 后台可以通过这个name属性定位到是哪一个控件。 页面中的表单很多，name主要作用就是用于区别不同的表单控件。

  • name属性值是我们自己定义的。
  • 单选框radio 如果是一组，我们必须给他们命名相同的名字name
<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

推荐阅读