运维八一
lyndon
2022-08-01
目录

html

# 1. html介绍

超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则。

浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）。

静态网页文件扩展名：.html 或 .htm

HTML不是一种编程语言，而是一种标记语言 (markup language)

HTML使用标记标签来描述网页

# 2. html结构

image-20220822224343757

<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档

<html></html>	是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。

<head></head>	元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

<title></title>	定义网页标题，在浏览器标题栏显示。 

<body></body>	之间的文本是可见的网页主体内容
1
2
3
4
5
6
7
8
9

# 3. html标签

image-20220822224351716

标签的语法：

  • <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
  • <标签名 属性1=“属性值1” 属性2=“属性值2”…… />

# 4. 常用标签

# 4.1 DOCTYPE 标签

<!DOCTYPE> 声明位于文档中的最前面的位置，处于

标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

**作用：**声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

  • BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
  • CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat

# 4.2 head 内常用标签

# 4.2.1 meta 标签

  • <meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
  • <meta>标签位于文档的头部，不包含任何内容。
  • <meta>提供的信息是用户不可见的

meta标签的组成：

meta标签共有两个属性，分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

  • name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

<meta name="description" content="xxxx">
    1
    2
    3

  • http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

    <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">  //(注意后面的引号，分别在秒数的前面和网址的后面)

<meta http-equiv="content-Type" charset=UTF8">
                                             
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
    1
    2
    3
    4
    5

# 4.2.2 非meta标签

<title>op81</title>
<link rel="icon" href="http://www.jd.com/favicon.ico">
<link rel="stylesheet" href="css.css"><script src="hello.js"></script>
1
2
3

# 4.3 body 内常用标签

# 4.3.1 基本标签（块级标签和内联标签）

<br/> 		换行

<h1>~</h1> 	标题，定义标题字体大小，1最大，6最小

<p>...</p> 	段落

<i>...</i> 	斜体

<cite></cite> 	引用

<b>...</b> 		加粗

<strong>...</strong> 	强调加粗

<del></del> 	删除线

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

&lt; &gt；&quot；&copy;&reg; 特殊字符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 4.3.2 div 和 span

  • <div></div> ：<div>只是一个块级元素，用于在HTML文档中定义一个区块。常用于将标签集中起来， 然后用样式对它们进行统一排版。并无实际的意义，主要通过CSS样式为其赋予不同的表现。
  • <span></span>：<span>表示了内联行(行内元素),并无实际的意义，主要通过CSS样式为其赋予不同的表现。

块级元素与行内元素的区别：

  • 所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行；
  • 如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。

image-20220822224401119

# 4.3.3 img 图形标签

<img src=“图片文件路径”alt=“图片提示”>
1
属性 描述
src 要显示图片的路径
alt 图片没有加载成功时的提示
title 鼠标悬浮时的提示信息
width 图片的宽
height 图片的高 (宽高两个属性只用一个会自动等比缩放)

# 4.3.4 a 超链接标签(锚标签)

超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。

# URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
1
2
3

URL地址由4部分组成

  • 第1部分：为协议：http://、ftp://等
  • 第2部分：为站点地址：可以是域名或IP地址
  • 第3部分：为页面在站点中的目录：stu
  • 第4部分：为页面名称，例如 index.html

各部分之间用“/”符号隔开。

<a href="网址" target="_blank" title="" name="">click</a>
1
属性 描述
href 指定链接跳转地址
target 链接打开方式，常用值：_blank 打开新窗口
title 文字提示属性
name 定义锚点

href属性指定目标网页地址。该地址可以有几种类型：

  • 绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
  • 相对 URL - 指当前站点中确切的路径（href="index.htm"）
  • 锚 URL - 指向页面中的锚（href="#top"）

# 4.3.5 列表标签

<ul>：无序列表 
    [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

<ol>：有序列表
	<li>：列表中的每一项

<dl> ：定义列表
	<dt>：列表标题
	<dd>：列表项
1
2
3
4
5
6
7
8
9
标签 描述 参数
<ul> 无序列表 type=disc 默认实心圆
square 实心方块
circle 空心圆
<ol> 有序列表 type=1 默认数字，其他值：A/a/I/i/1
<li> 列表项目 在有序列表和无序列表中用

# 4.3.6 table 表格标签

表格概念：

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。

表格的基本结构：

<table>         
    <tr>                
        <td>标题</td>                
        <td>标题</td>         
    </tr>                  
    <tr>                
        <td>内容</td>                
        <td>内容</td>         
    </tr>
</table>


<table border="1">
    <thead>
        <tr>
            <th>主机名</th>
			<th>IP</th>
            <th>操作系统</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>www.op81.com</td>
            <td>192.168.1.10</td>
            <td>CentOS7</td>
        </tr>
    </tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
标签 描述
table 表格标签
thead 表格标题
tr 行标签
th 列名
tbody 表格内容
tr 列标签
td 列内容

属性：

  • <tr>: table row
  • <th>: table head cell
  • <td>: table data cell
  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.（最好通过css来设置长宽）
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列（即合并单元格）

# 4.3.7 form 表单标签

功能：

表单用于向服务器传输数据，从而实现用户与Web服务器的交互，表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含textarea、select、fieldset和 label标签。

表单属性

  • action: 表单提交的目标地址（URL）。一般指向服务器端一个程序，程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

  • method: 表单的提交方式 post/get，默认取值就是get。

  • **enctype：**编码类型。

    • application/x-www-form-urlencoded 默认值，编码字符；
    • multipart/form-data 传输数据为二进制类型，如提交文件；
    • text/plain 纯文本的传输。

  • **表单元素：**HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。表单一般用来收集用户的输入信息。

  • **表单工作原理：**访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。 服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。

# 4.3.7.1 input 系列标签

表单类型[type]：

  • text 文本输入框

  • password 密码输入框

  • radio 单选框

  • checkbox 多选框

  • submit 提交按钮

  • button 按钮(需要配合js使用)

    <button type=“submit”></botton>
type可选值：
• button：普通
• submit：提交
• reset：重置
    1
    2
    3
    4
    5

  • file 提交文件：form表单需要加上属性enctype="multipart/form-data" 。

    上传文件注意两点：

    • 请求方式必须是post；
    • enctype="multipart/form-data"

表单属性

  • name: 表单提交项的键。注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的。

  • value: 表单提交项的值，可以用来设默认值；

    对于不同的输入类型，value 属性的用法也不同：

    • type="button", "reset", "submit" - 定义按钮上的显示的文本
    • type="text", "password", "hidden" - 定义输入字段的初始值
    • type="checkbox", "radio", "image" - 定义与输入相关联的值

  • checked：radio 和 checkbox 默认被选中；

  • readonly：只读，text 和 password；

  • disabled：禁用该元素，对所用input都好使；

# 4.3.7.2 select标签

<select> 下拉选标签属性：

  • name：表单提交项的键，下拉列表的名称，用于储存下拉值；
  • size：下拉列表选项的个数；
  • multiple：设置可以选择多个项目；
  • disabled：禁用该元素；

optgroup： 为每一项加上分组

option：设置下拉选项中的每一项，属性有：

  • value：表单提交项的值；
  • selected: 默认下拉项
# 4.3.7.3 textarea 多行文本框
<form id="form1" name="form1" method="post" action="">
    <textarea cols=“宽度” rows=“高度” name=“名称”>          
        默认内容
    </textarea>
</form>
1
2
3
4
5
# 4.3.7.4 label 标签

定义：

label 标签为 input 元素定义标注（标记）。

说明：

  • label 元素不会向用户呈现任何特殊效果。
  • label 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form method="post" action="">
    <label for=“username”>用户名</label>
    <input type=“text” name=“username” id=“username” size=“20” />
</form>
1
2
3
4
# 4.3.7.5 fieldset 标签
<fieldset>
    <legend>登录吧</legend>
    <input type="text">
</fieldset>
1
2
3
4
上次更新: 2022/08/25, 00:10:15
Vue介绍
css

← css→

最近更新
01
ctr和crictl显示镜像不一致
03-13
02
alpine镜像集成常用数据库客户端
03-13
03
create-cluster
02-26
更多文章>
Theme by Vdoing | Copyright © 2015-2024 op81.com
苏ICP备18041258号-2