HTML学习

HTML学习

B/S架构介绍

　　在开始介绍HTML之前，我们得先知道一个Browser/Server端架构，也就是B/S架构，B/S架构是一种特殊的C/S架构，对于B/S架构来说，它的Client端其实就变成了Browser端，也就是浏览器。

　　我们整个上网的过程其实就是一个不断下载的过程，输入网址意味着就是输入Server端的IP地址，而Browser会自动为你添加80port（端口号），这些其实都是一种叫HTTP协议的应用层协议规定好了的，在Server端接收到请求后就会返回一些文件数据，此时通过Browser端的渲染，那么久会呈现出我们十分熟悉的网页。

　　通过点击某一链接又会重复上一次的步骤，所以整个上网的过程就是浏览器与服务器在不断的进行数据交互的一个过程，而浏览器本身其实就是一个解释器，它会将服务器返回的文件数据进行解释并渲染一遍。

 

image-20200707154226639

 

　　我们这里也可以通过socket来搭建出一个非常简单的服务器，来与浏览器进行交互。

from socket import *

def run():
    server = socket(AF_INET,SOCK_STREAM) # 传输层基于TCP协议
    server.bind(("127.0.0.1",8080))
    server.listen(5)

    while 1:
        conn,addr = server.accept()
        data = conn.recv(1024)
        print(data)  # 浏览器中传来的信息
        # 必须HTTP协议发送内容才能被Browser所识别
        conn.sendall(bytes("HTTP/1.1 201 OK 

","utf8"))
        # 返回的内容
        conn.sendall(bytes("<h1>Hello,World!</h1>","utf8"))
        conn.close()

if __name__ == '__main__':
    run()

 

image-20200707163549793

 

　　可以看到，上图我们的Server端返回了2条数据，一条是HTTP协议的返回头信息，一条是返回体信息。在返回体中我们写了一条HTML代码，最终这条HTML代码就被Browser端渲染了出来。

　　那么这样做其实是有问题的，我们应该是将HTML代码书写进一个文本中，当Browser端需要的时候再通过文件读取的方式读出字节，最后Server端通过TCP协议流式的将代码发送给Browser端，再由Browser端进行渲染。

 

HTML历史

　　htyper text markup language 即超文本标记语言

 

　　超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

　　标记语言: 标记（标签）构成的语言.

 

　　HTML最早诞生于1990年，由物理学家蒂姆·伯纳斯-李所创建，在1989年的时候蒂姆·伯纳斯-李就曾在一份备忘录中提出一个基于互联网的超文本系统这样的概念，并且在1990年规定出了HTML并在同年写出了浏览器与软件。

版本年份
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

 

HTML文档树

　　我们拿一段最简单的HTML代码举例，先不管写的是什么，先来看看它的结构。

 

<!--文档声明-->
<!DOCTYPE html>
<!--根标签 lang = "en"  chorme打开出现翻译此页？-->
<html lang="en">
<!--头部标签-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--主体内容标签-->
<body>
    <div>
        <h1>hello，world!</h1>
    </div>
</body>
</html>

 

　　HTML中注释为 <!-- 注释内容 -->，你可以使用CTRL+/来实现。

 

　　通过观察上面的这一小段代码，可以看出一个标准的HTML文档内容至少包含三部分。分别是最外层的标签<html> </html>，还有标签<head> </head>与标签<body> </body>。而我们最主要的内容就是在<body> </body>标签中进行编辑。

　　他其实就是一个树状结构，如下：

image-20200707172047021

 

标签相关介绍

　　我们来看一下上面的这一小段HTML代码，里面有着各种各样的标签，标签具有以下特征：

 

　　1.由一对儿尖括号包裹的单词构成。例如:<meta>。所有的标签都不能以数字开头。

　　2.标签不区分大小写，如:<html>或<HTML>均可，但是为了可读性更推荐使用小写。

　　3.标签分为闭合标签与自闭合标签，闭合标签必须有开始标签与结束标签，如:<html>与</html>就是属于闭合标签，而<meta>就是属于自闭和标签。

　　4.标签支持嵌套，但是不能交叉嵌套，如：<a> <b> </a> </b>

 

　　除了标签本体外，我们还可以看见上图HTML代码中的标签还包含了一些属性，如<meta charset="UTF-8">，学习HTML就是学习标签，学习标签一定要贯穿着整个属性来学习。

 

　　1.属性通常是以键值对形式出现的. 例如 gender="male"

　　2.属性只能出现在开始标签 或 自闭和标签中.

　　3.属性名字全部小写. 属性值必须使用双引号或单引号包裹 例如gender="male"。

　　4.如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly。

 

　　另外，如果我们是使用自闭和标签，比如<input>，我们在设置完属性后一般会给它添加上一条正斜杠，如<input type="text" name="username" />。

 

!DOCTYPE HTML 文档声明

　　早期时候W3C标准没有出台时，各个浏览器对页面的渲染均采用不同的方法，这样会产生差异化。后来W3C标准出现后浏览器都开始采纳了这套标准，所以此标签的作用便是使用标准模式，如果不添加此标签代表使用浏览器自带的模式，也被称为怪异模式，因此后面的学习中一定要将它加上。

 

　　怪异模式：BackCompat，浏览器使用自己的解析标准进行页面渲染

　　标准模式：CSS1Comapt，浏览器采用W3C的解析标准进行页面渲染

 

head 头部标签

　　该标签的作用是专门提供一下网页的配置信息，如网页的标题，检索内容，解码格式等等，它里面包含了如下常用标签:

 

<head>标签中所包含的常用标签 
标签名称 功能描述
<title> 指定整个网页的标题，在浏览器最上方显示。
<meta> 提供有关页面的基本信息
<link> 定义文档与外部资源的关系。
<style> 定义内部样式表与网页的关系

　　

　　好了，那么接下来我们看看每个标签的详细使用与属性。

 

meta 标签

　　该元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。

　　标签位于文档的头部，不包含任何内容。

　　提供的信息是用户不可见的。 <meta>标签的组成：<meta>标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

 

http-equiv属性

　　它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

 

<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.google.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="X-UA-Compatible" content="IE-EmulateIE7">

 

　　<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">，代表两秒后该页面刷新跳转到谷歌，常见于色情网站 = = 如果不指定则不跳转页面。

　　<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />，请求头信息，可简写为<meta charset="UTF-8">。

　　<meta http-equiv="X-UA-Compatible" content="IE-EmulateIE7">，兼容IE7的标准，改成几兼容几，前提是在IE浏览器上用。由历史原因造成，告诉IE浏览器以最高级模式进行渲染。

 

name属性

　　主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ,号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

 

<!--content里写的词会被搜索引擎搜到-->
<meta name="keywords" content="...">
<!--content里写查看网页的简介信息-->
<meta name="Description" content="...">
<!--content移动端优先视口设置，响应式布局才会用到-->
<meta name="viewport" content="width=device-width,initial-scale=1">

 

image-20200707202210819

 

image-20200707202257409

 

title 标签

　　<title>标签可以设置网页的标题名称。

 

image-20200707202755315

 

link 标签

　　<link>标签一般都是用于引入一些资源。如网页的缩略图，网页所需要的css文件，js文件等等。它有两个重要的属性，ref与href。

 

　　ref属性

　　　　一般用于表示资源的类型，如图标文件icon，css文件stylesheet等等。

 

　　href属性

　　　　表示需要链接的资源地址。

 

　　<link rel="icon" href="http://5b0988e595225.cdn.sohucs.com/images/20180418/5b68cd1128d44c64af8234b43f57b233.jpeg">

 

image-20200707203847384

 

image-20200707203952397

 

script 标签

　　<script>标签是用于引入js文件，这个一般不会将它放在<head>标签中，但是也会有人这么做。它有一个属性src，即引入的js文件链接地址。

 

　　<script src="xxx"></script>

 

body 主体标签

　　该标签的作用是提供给用户预览的内容区域，你可以在<body>标签中写上如下的常用标签以及特殊符号来构建你的网页：

 

<body>标签中所包含的常用标签  
标签名称 功能描述 display
字体相关  
<font> 规定文本的字体、字体尺寸、字体颜色。不建议使用 inline
<hn> n的取值范围是1~6; 从大到小. 用来表示标题.h系列独占一行 block
<b> 文字加粗 inline
<strong> 文字加粗 inline
<i> 文字变斜体 inline
<em> 文字变斜体 inline
<u> 文字加入下划线 inline
<s> 文字加入删除线 inline
<del> 文字加入删除线 inline
<strike> 文字加入删除线，H5不建议使用 inline
<sup> 上角标 inline
<sub> 下角标 inline
排版相关  
<div> 分割标签，布局使用 block
<span> 用来组合文档中的行内元素，与<div>标签类似 inline
<br> 换行 inline
<p> 换行 block
<hr> 水平线，一条很细的横线 inline
<center> 居中，H5不建议使用 block
<pre> 预格式化，H5不建议使用 block
列表相关  
<ul>系列 用于定义无序列表。 block
<ol>系列 用于定义有序列表。 block
<dl>系列 用于定义自定义列表。 block
表单相关  
<form>系列 用于创建供用户输入的 HTML 表单。 block
表格相关  
<table>系列 定义 HTML 表格 block
超链接  
<a> 定义超链接，用于从一个页面链接到另一个页面。 inline
图像资源  
<img> 定义 HTML 页面中的图像。 inline-block
内联框架  
<iframe> 规定一个内联框架。 inline

 

<body>标签中所包含的常用特殊字符 
特殊字符 含义
&nbsp; 空格
&lt; 小于号 <
&gt; 大于号 >
&quot; 双引号 ''
&copy; 圆圈c ©
&reg; 圆圈r ®
&trade; 商标™
&amp; 符号&

 

内联标签与块级标签

　　上面表格中，有个display列，其中block为块级标签，inline为内联标签。

 

　　内联标签的特点：

　　　　1.和其他元素都在一行上

　　　　2.不可设置宽高

　　　　3.宽度就是它的文字或图片的宽度，不可改变

　　　　4.内联元素只能容纳文本或者其他内联元素

 

　　特殊的2个内联标签：

　　　　<img>，<input>可设置宽高，这是2个特殊的内联标签，所以被标为inline-block，是指能设置宽高的内联标签，也被称为内联块级标签。

 

　　块级标签的特点：

　　　　1.总是在新行上开始；

　　　　2.可设置宽高

　　　　3.宽度缺省是它的容器的100%，除非设定一个宽度。

　　　　4.它可以容纳内联元素和其他块元素

 

　　块级元素的嵌套规则：

　　　　1.块级元素可以包含内联元素或者某些块级元素但内联元素不可以包含块级元素，它们只能包含内联元素

　　　　2.有几个特殊的块级元素只能包含内联元素，不能包含块级元素如<h1-6>，<dt>，<p>

　　　　3.<li>内可以包含<div>

　　　　4.块级元素与块级元素并列，内联元素与内联元素并列

 

 

两个重要的通用属性

　　所有标签都可以设置两个非常重要的通用属性，他们分别是id与class。

 

　　id是HTML4.0后加入的，此前都是name，id 在 当前HTML 文档中必须是唯一的。

　　class的作用为规定元素的一个或多个类名（引用样式表中的类）。class并不具有唯一性。

 

　　建议：class的命名用 - 来链接，而id的命名用 _ 来链接。

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="header-menu">
        头部菜单
    </div>
    <div class="left-menu">
        左侧菜单
    </div>
    <div id="nav_right">
        右导航栏
    </div>
</body>
</html>

 

字体相关标签

font 文字

 

　　作用：规定文本的字体、字体尺寸、字体颜色。不建议使用

 

属性值描述
color rgb(x,x,x)，#xxxxxx，colorname 不赞成使用。请使用样式取代它。规定文本的颜色。设置方式：单词 #ff00cc ,或者rgb(0,0,255)。
face font_family 不赞成使用。请使用样式取代它。规定文本的字体。设置字体。
size number 不赞成使用。请使用样式取代它。规定文本的大小，范围为1-7

 

image-20200707221618841

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <font color="red" size="6" face="微软雅黑">你好啊！</font>
    <br />
    你好啊！
</body>
</html>

 

hn 标题

 

　　作用：n的取值范围是1~6; 从大到小. 用来表示标题.h系列独占一行

 

属性值描述
align left，center，right，justify 不推荐使用。请使用样式替代它。规定标题中文本的排列。

 

image-20200707222100757

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <h4>这是标题 4</h4>
    <h5>这是标题 5</h5>
    <h6>这是标题 6</h6>
</body>
</html>

 

b 加粗

 

　　作用：文字加粗

 

image-20200707222440346

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>这是普通文本 - <b>这是粗体文本</b>。</p>
</body>
</html>

 

strong 加粗

 

　　作用：文字加粗

image-20200707222832741

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>这是普通文本 - <strong>这是粗体文本</strong>。</p>
</body>
</html>

 

i 斜体

 

　　作用：文字变斜体

 

image-20200707223017456

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>这是普通文本 - <em>这是斜体文本</em>。</p>
</body>
</html>

 

em 斜体

 

　　作用：文字变斜体

 

image-20200707223017456

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>这是普通文本 - <em>这是斜体文本</em>。</p>
</body>
</html>

 

u 下划线

 

　　作用：文字加入下划线

 

image-20200707223318601

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>这是普通文本 - <u>这是有下划线的文本</u>。</p>
</body>
</html>

 

s 删除线

 

　　作用：文字加入删除线

 

image-20200707223518794

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>这是普通文本 - <del>这是有删除线的文本</del>。</p>
</body>
</html>

 

del 删除线

 

　　作用：文字加入删除线

 

image-20200707223518794

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>这是普通文本 - <del>这是有删除线的文本</del>。</p>
</body>
</html>

 

strike 删除线

 

　　作用：文字加入删除线，H5不建议使用

 

image-20200707223518794

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>这是普通文本 - <strike>这是有删除线的文本</strike>。</p>
</body>
</html>

 

sup与sub 角标

 

　　作用：上角标和下角标

 

image-20200707223956856

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>上角标<sup>3</sup>下角标<sub>2</sub></p>
</body>
</html>

 

排版相关标签

div与span 布局

 

　　<div>作用：分割标签，布局使用。如果只会单纯的HTML，那么它的作用性很小，所以这里不太好举例。

　　<span>作用：用来组合文档中的行内元素，与<div>标签类似，如果只会HTML，那么它的作用性也很小，不太好举例。

 

　　<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。

　　如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。

 

　　<div>在浏览器中，默认是不会增加任何的效果的，但是语义变了，<div>中的所有元素是一个小区域。

　　<div>标签是一个容器级标签，里面什么都能放，甚至可以放div自己。

　　<span>也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。

　　就是说，<span>里面只能放置文字、图片、表单元素

 

　　那么这里，我用一张图片举例。

 

image-20200707224846388

 

　　红色的都可以用<div>标签来设置宽高进行布局，而蓝色的部分由于<span>可以用来组合文档中的行内元素，那么蓝色部分里的每个小选项是都可以用<span>标签与其他标签进行组合完成的。

 

br与p 换行

 

　　<br>作用：换行。它是一个内联标签，注意与<p>的区别。

　　<p>作用：换行。它是一个块级标签，注意与<br>的区别。

 

　　注意：<p>是一个文本级的标签，里面只能放文字，图片，表单元素，其他的一律不放。

 

image-20200707231046735

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    哈哈哈哈
    <p>p标签</p>
    哈哈哈哈
    <br />br标签
</body>
</html>

 

hr 水平线

 

　　作用：水平线，一条很细的横线。

 

image-20200707231258991

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>hr的上面</p>
    <hr />
    <p>hr的下面</p>
</body>
</html>

 

center 居中

 

　　作用：居中，H5不建议使用

 

image-20200707231926942

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>未居中</h1>
    <center><h1>居中</h1></center>
</body>
</html>

 

pre 预格式化

 

　　作用：预格式化，H5不建议使用

 

　　含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行） ​ 说明：真正排网页过程中，<pre>标签几乎用不着。但在PHP中用于打印一个数组时可能会使用到。

 

image-20200707232641067

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
            我
            想
            怎
            么
            写
            就
            怎
            么
            写
    <pre>
            我
            想
            怎
            么
            写
            就
            怎
            么
            写
    </pre>
</body>
</html>

 

列表相关标签

ul与li 无序列表

 

　　作用：用于定义无序列表。注意：无序列表中必须有<li>标签来书写具体内容。

 

属性值描述
compact compact 不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。
type disc，square，circle 不赞成使用。请使用样式取代它。规定列表的项目符号的类型。

 

image-20200707233459890

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  <ul>
    <li>香蕉</li>
    <li>牛奶</li>
    <li>菠萝</li>
  </ul>
</body>
</html>

 

image-20200707233654885

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h4>Disc 项目符号列表：</h4>
    <ul type="disc">
         <li>苹果</li>
         <li>香蕉</li>
        <li>柠檬</li>
         <li>桔子</li>
    </ul>  

    <h4>Circle 项目符号列表：</h4>
    <ul type="circle">
         <li>苹果</li>
         <li>香蕉</li>
        <li>柠檬</li>
         <li>桔子</li>
    </ul>  

    <h4>Square 项目符号列表：</h4>
    <ul type="square">
         <li>苹果</li>
         <li>香蕉</li>
         <li>柠檬</li>
         <li>桔子</li>
    </ul>  
</body>
</html>

 

ol与li 有序列表

 

　　作用：用于定义有序列表。注意：有序列表中必须有<li>标签来书写具体内容。

 

属性值描述
compact compact HTML5 中不支持。HTML 4.01 中不赞成使用。规定列表呈现的效果比正常情况更小巧。
reversed reversed 规定列表顺序为降序。(9,8,7...)
start number 规定有序列表的起始值。
type 1，A，a，I，i 规定在列表中使用的标记类型。

 

image-20200707234300614

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <ol>
        <li>咖啡</li>
          <li>牛奶</li>
          <li>茶</li>
    </ol>

    <ol start="50">
          <li>咖啡</li>
          <li>牛奶</li>
          <li>茶</li>
    </ol>

</body>
</html>

 

image-20200707234554042

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <h4>数字列表：</h4>
    <ol>
         <li>苹果</li>
         <li>香蕉</li>
    </ol>  

    <h4>字母列表：</h4>
    <ol type="A">
         <li>苹果</li>
         <li>香蕉</li>
    </ol>  

    <h4>小写字母列表：</h4>
    <ol type="a">
         <li>苹果</li>
         <li>香蕉</li>
    </ol>  

    <h4>罗马字母列表：</h4>
    <ol type="I">
         <li>苹果</li>
         <li>香蕉</li>
    </ol>  

    <h4>小写罗马字母列表：</h4>
    <ol type="i">
         <li>苹果</li>
         <li>香蕉</li>
    </ol>  

</body>
</html>

 

dl与dt以及dd 自定义列表

 

　　作用：用于定义自定义列表。

 

　　<dl>为最外部，<dt>为标题，<dd>为段落。他们的使用场景也蛮多的，因为非常灵活。

 

image-20200707235417981

 

<html>
<body>

    <h2>一个定义列表：</h2>
    <dl>
       <dt>计算机</dt>
       <dd>用来计算的仪器 ... ...</dd>
       <dt>显示器</dt>
       <dd>以视觉方式显示信息的装置 ... ...</dd>
    </dl>

</body>
</html>

 

表单相关form系列

　　表单用于向服务器传递数据

　　表单能够包含 <input>元素，比如文本字段、复选框、单选框、提交按钮等等。

　　表单还可以包含<textarea>、<select>、<fieldset>和 <label>元素。

 

　　它会将位于表单标签内的子标签数据提取出来并发送给特定的路径，该路径会有相应的后台操作来处理这些数据。

 

属性值描述
accept MIME_type HTML 5 中不支持。
accept-charset charset_list 规定服务器可处理的表单数据字符集。
action URL 规定当提交表单时向何处发送表单数据。
autocomplete onoff 规定是否启用表单的自动完成功能。
enctype 下方有 规定在发送表单数据之前如何对其进行编码。
method getpost 规定用于发送 form-data 的 HTTP 方法。
name form_name 规定表单的名称。
novalidate novalidate 如果使用该属性，则提交表单时不进行验证。
target _blank，_self,_parent，_top，framename 规定在何处打开 action URL。

 

　　enctype 属性可能的值：

　　　　application/x-www-form-urlencoded

　　　　multipart/form-data

　　　　text/plain

 

　　其中 action是提交时候的路径，method是提交方式常用的有两种get或者post，如果想上传文件enctype必须设置为multipart/form-data并且action必须为post方式才能进行文件的上传。

 

　　在<form>系列标签中，共有以下几种常用的标签。

 

<form>标签中所包含的常用标签  
标签名称 功能描述 display
<input> 输入框 inline-block
<lable>· 为<input>元素定义标注（标记） inline
<select> 选择框 block
<textarea> 文本域 inline
<fieldset> 美化相关 未知
<legend> 美化相关 未知

 

　　注意：这里又出现了一个inline-block，说明它是一个可以设置宽高的内联块级标签。

 

input 输入框

　　<input>可以有多种形态，只需要设置属性type即可，如下表：

 

type属性值表现形式对应代码
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password" />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" />
radio 单选框 <input type="radio" />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置" />
button 普通按钮 <input type="button" value="普通按钮" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="file" />
number 数字输入框 <input type="number" />

 

　　在<input>标签中，绝大部分标签都需要设置键值对的方式，因为它们最后的信息都是提交给整个<form>表单标签的。但是也有少部分不用，比如button，reset，sumbit等等。

 

<input>其他常用属性  
属性 值 描述
name field_name 表单提交时的“键”，注意和id的区别
value value 表单提交时对应项的值
checked checked radio和checkbox默认被选中的项
readonly readonly text和password设置只读
disabled disabled 所有input均适用，变灰了，点不动了
placeholder text 规定帮助用户填写输入字段的提示。
required required 指示输入字段的值是必需的。
size number_of_char 定义输入字段的宽度。
min number date 定输入字段的最小值。
max number date 规定输入字段的最大值。

 

 

  • value：表单提交时对应项的值

    • type="button", "reset", "submit"时，为按钮上显示的文本年内容

    • type="text","password","hidden"时，为输入框的初始值

    • type="checkbox", "radio", "file"，为输入相关联的值

     

 

image-20200708004848143

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--上传文件必须留意from标签的method以及enctype属性-->
<form action="#" method="post" enctype="multipart/form-data">
    <p>头像：&nbsp;&nbsp;<input type="file" name="avatar" /></p>
    <p>用户名:&nbsp; <input type="text" name="username" placeholder="请输入用户名" /></p>
    <p>密码：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="pwd" placeholder="请输入密码" /></p>
    <p>性别:  男<input type="radio" name="gender" value="male" />女<input type="radio" name="gender" value="female" /></p>
    <p>爱好:  篮球<input type="checkbox" name="hobby" value="basketball" checked />足球<input type="checkbox" name="hobby" value="football" /></p>
    <p><input type="reset" value="重新填写信息" />&nbsp;<input type="submit" value="提交注册信息">&nbsp;<input type="butoon" value="联系客服" disabled></p>
</form>
</body>
</html>

 

lable 标注

 

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

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

　　<label> 标签的 for属性应当与相关元素的 id属性相同。

 

属性值描述
for id 规定 label 绑定到哪个表单元素。
form formid 规定 label 字段所属的一个或多个表单。

 

　　

　　我们先来看下面一段代码：

<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女

　　对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，点击“男”、“女”这两个文字时是无法选中的；于是，<label>标签派上了用场。

　　本质上来讲，“男”、“女”这两个文字和<input>标签时没有关系的，而label就是解决这个问题的。我们可以通过<label>把<input>和汉字包裹起来作为整体。

　　解决方法如下：

<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>

　　上方代码中，<input>元素要有一个id，然后<label>标签有一个<for>属性，和<id>相同，那么这个<label>和<input>就有绑定关系了。

　　当然了，复选框也有<label>：（任何表单元素都有<label>）

<input type="checkbox" id="kk" />
<label for="kk">10天内免登陆</label>

select与optgroup以及option 选择框

 

　　这三组标签可做选择框：

　　其中<select>标签应该具有一个name,它相当于字典的key。

　　<optgroup>不是必须的一个标签，主要对<option>标签做分组管理，必须要属性lable为组名

　　<option>标签应该设置value，并且<option>标签可以设置selected作为默认选择。<option>的选择项相当于字典的value。

 

<select>标签属性  
属性 值 描述
autofocus autofocus 规定在页面加载后文本区域自动获得焦点。
disabled disabled 规定禁用该下拉列表。
form form_id 规定文本区域所属的一个或多个表单。
multiple multiple 规定可选择多个选项。布尔属性，True或者False。
name name 规定下拉列表的名称。
required required 规定文本区域是必填的。
size number 规定下拉列表中可见选项的数目。

 

<optgroup>标签属性  
属性 值 描述
label text 为选项组规定描述。
disabled disabled 规定禁用该选项组。

 

<option>标签属性  
属性 值 描述
disabled disabled 规定此选项应在首次加载时被禁用。
label text 定义当使用 <optgroup> 时所使用的标注。
selected selected 规定选项（在首次显示在列表中时）表现为选中状态。
value text 定义送往服务器的选项值。

 

image-20200708011533697

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--上传文件必须留意from标签的method以及enctype属性-->
<form action="#" method="post" enctype="multipart/form-data">
    <p>头像：&nbsp;&nbsp;<input type="file" name="avatar" /></p>
    <p>用户名:&nbsp; <input type="text" name="username" placeholder="请输入用户名" /></p>
    <p>密码：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="pwd" placeholder="请输入密码" /></p>
    <p>性别:  男<input type="radio" name="gender" value="male" />女<input type="radio" name="gender" value="female" /></p>
    <p>爱好:  篮球<input type="checkbox" name="hobby" value="basketball" checked />足球<input type="checkbox" name="hobby" value="football" /></p>
    <p><input type="reset" value="重新填写信息" />&nbsp;<input type="submit" value="提交注册信息">&nbsp;<input type="butoon" value="联系客服" disabled></p>

    居住地
    <select name="addr">
        <optgroup label="中国">
            <option value="bejing" selected>北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
            <option value="shenzhen">深圳</option>
            <option value="other">其他</option>
        </optgroup>
        <optgroup label="海外">
            <option value="America">美国</option>
            <option value="Japanese">日本</option>
            <option value="England">英国</option>
            <option value="Germany">德国</option>
            <option value="Canada">加拿大</option>
        </optgroup>
    </select>
</form>
</body>
</html>

 

textarea 文本域

 

　　文本标签，和<text>标签类似。可使用placeholder定义默认显示值。

 

属性值描述
autofocus autofocus 规定在页面加载后文本区域自动获得焦点。
cols number 规定文本区内的可见宽度。
disabled disabled 规定禁用该文本区。
form form_id 规定文本区域所属的一个或多个表单。
maxlength number 规定文本区域的最大字符数。
name name_of_textarea 规定文本区的名称。
placeholder text 规定描述文本区域预期值的简短提示。
readonly readonly 规定文本区为只读。
required required 规定文本区域是必填的。
rows number 规定文本区内的可见行数。
wrap hardsoft 规定当在表单中提交时，文本区域中的文本如何换行。。

 

　　其中clos和rows分别可以设置列数和行数，但是不经常使用。更推荐CSS

 

image-20200708013731628

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--上传文件必须留意from标签的method以及enctype属性-->
<form action="#" method="post" enctype="multipart/form-data">
    <p>头像：&nbsp;&nbsp;<input type="file" name="avatar" /></p>
    <p>用户名:&nbsp; <input type="text" name="username" placeholder="请输入用户名" /></p>
    <p>密码：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="pwd" placeholder="请输入密码" /></p>
    <p>性别:  男<input type="radio" name="gender" value="male" />女<input type="radio" name="gender" value="female" /></p>
    <p>爱好:  篮球<input type="checkbox" name="hobby" value="basketball" checked />足球<input type="checkbox" name="hobby" value="football" /></p>
    <p><input type="reset" value="重新填写信息" />&nbsp;<input type="submit" value="提交注册信息">&nbsp;<input type="butoon" value="联系客服" disabled></p>

    居住地
    <select name="addr">
        <optgroup label="中国">
            <option value="bejing" selected>北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
            <option value="shenzhen">深圳</option>
            <option value="other">其他</option>
        </optgroup>
        <optgroup label="海外">
            <option value="America">美国</option>
            <option value="Japanese">日本</option>
            <option value="England">英国</option>
            <option value="Germany">德国</option>
            <option value="Canada">加拿大</option>
        </optgroup>
    </select>
    <p><textarea name="register_reason" cols="30" rows="10" placeholder="请填写充分理由"></textarea></p>

</form>
</body>
</html>

 

fieldset与legend 美化

　　美化标签，可以在<form>标签中的某个元素周边做一个特效。没啥用...

 

 

image-20200708014240089

 

结果展示

　　那么我们将上面代码整理一下，得到了一个比较简约的注册页面。

 

image-20200708014742820

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<!--上传文件必须留意于from标签的method以及enctype属性-->
<form action="#" method="post" enctype="multipart/form-data">
    <fieldset >
        <legend><h1>欢迎注册</h1></legend>

        <p>头像：&nbsp;&nbsp;<input type="file" name="avatar" /></p>
        <p>用户名:&nbsp; <input type="text" name="username" placeholder="请输入用户名" /></p>
        <p>密码：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="pwd" placeholder="请输入密码" /></p>
        <p>性别:  男<input type="radio" name="gender" value="male" />女<input type="radio" name="gender" value="female" /></p>
        <p>爱好:  篮球<input type="checkbox" name="hobby" value="basketball" checked />足球<input type="checkbox" name="hobby" value="football" /></p>

            居住地
        <select name="addr">
            <optgroup label="中国">
                <option value="bejing" selected>北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                <option value="shenzhen">深圳</option>
                <option value="other">其他</option>
            </optgroup>
            <optgroup label="海外">
                <option value="America">美国</option>
                <option value="Japanese">日本</option>
                <option value="England">英国</option>
                <option value="Germany">德国</option>
                <option value="Canada">加拿大</option>
            </optgroup>
        </select>
    </fieldset>

    <fieldset>
        <legend>请填写注册理由</legend>
        <p><textarea name="register_reason" cols="30" rows="10" placeholder="请填写充分理由"></textarea></p>
    </fieldset>
    <p><input type="reset" value="重新填写信息" />&nbsp;<input type="submit" value="提交注册信息">&nbsp;<input type="butoon" value="联系客服" disabled></p>

</form>
</body>
</html>

 

表格相关table系列

　　在<table>标签系列中，依然有很多标签。我们可以使用它们来做一个小表格。

　　<table>的2个应该设置的属性：border="1" style="border-collapse:collapse;"

 

<table>标签属性  
属性 值 描述
align left，center，right 不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolor rgb(x,x,x)，#xxxxxx，colorname 不赞成使用。请使用样式代替。规定表格的背景颜色。
border pixels 规定表格边框的宽度。
cellpadding pixels，% 规定单元边沿与其内容之间的空白。
cellspacing pixels，% 规定单元格之间的空白。
frame void，above，below，hsides，lhs，rhs，vsides，box，border 规定外侧边框的哪个部分是可见的。
rules none，groups，rows，cols，all 规定内侧边框的哪个部分是可见的。
summary text 规定表格的摘要。
width %，pixels 规定表格的宽度。

 

<table>标签中所包含的常用标签  
标签名称 功能描述 display
<caption> 定义表格标题 未知
<thead> 定义表格的表头。该标签用于组合 HTML 表格的表头内容。 block
<tfont> 定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。 block
<tbody> 定义表格主体（正文）。该标签用于组合 HTML 表格的主体内容。 block
<th> 表头单元格 - 包含表头信息（由 th 元素创建） block
<td> 标准单元格 - 包含数据（由 td 元素创建） block
<tr> 定义 HTML 表格中的行。 block

 

<thead>标签属性  
属性 值 描述
align right，left，center，justify，char 定义 thead 元素中内容的对齐方式。
char character 规定根据哪个字符来进行文本对齐。
charoff number 规定第一个对齐字符的偏移量。
valign top，middle，bottom，baseline 规定 thead 元素中内容的垂直对齐方式。

 

<tfont>标签属性  
属性 值 描述
color rgb(x,x,x)，#xxxxxx，colorname 不赞成使用。请使用样式取代它。规定文本的颜色。
face font_family 不赞成使用。请使用样式取代它。规定文本的字体。
size number 不赞成使用。请使用样式取代它。规定文本的大小。

 

<tbody>标签属性  
属性 值 描述
align right，left，center，justify，char 定义 tbody 元素中内容的对齐方式。
char character 规定根据哪个字符来进行文本对齐。
charoff number 规定第一个对齐字符的偏移量。
valign top，middle，bottom，baseline 规定 tbody 元素中内容的垂直对齐方式。

 

<th>与<td>标签属性  
属性 值 描述
abbr text 规定单元格中内容的缩写版本。
align left，right，center，justify，char 规定单元格内容的水平对齐方式。
axis category_name 对单元格进行分类。
bgcolor rgb(x,x,x)，#xxxxxx，colorname 不推荐使用。请使用样式替代它。规定表格单元格的背景颜色。
char character 规定根据哪个字符来进行内容的对齐。
charoff number 规定对齐字符的偏移量。
colspan number 设置单元格可横跨的列数。
headers idrefs 由空格分隔的表头单元格 ID 列表，为数据单元格提供表头信息。
height pixels，% 不推荐使用。请使用样式替代它。规定表格单元格的高度。
nowrap nowrap 不推荐使用。请使用样式取而代之。规定单元格中的内容是否折行。
rowspan number 规定单元格可横跨的行数。
scope col，colgroup，row，rowgroup 定义将表头数据与单元数据相关联的方法。
valign top，middle，bottom，baseline 规定单元格内容的垂直排列方式。
width pixels，% 不推荐使用。请使用样式取而代之。规定表格单元格的宽度。

 

<tr>标签属性  
属性 值 描述
align right，left，center，justify，char 定义表格行的内容对齐方式。
bgcolor rgb(x,x,x)，#xxxxxx，colorname 不赞成使用。请使用样式取而代之。规定表格行的背景颜色。
char character 规定根据哪个字符来进行文本对齐。
charoff number 规定第一个对齐字符的偏移量。
valign top，middle，bottom，baseline 规定表格行中内容的垂直对齐方式。

 

一个简单的表格

 

image-20200708144432273

 

<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}
</style>
</head>
<body>

<table border="1" style="border-collapse:collapse;">
  <caption>测试</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>15</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>16</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>页脚------</td>
      <td>页脚-------</td>
    </tr>
  </tfoot>
</table>

</body>
</html>

合并单元格

　　对<tr>标签使用属性rowspan与clospan能进行单元格的合并，但是严格区分区域，如<tbody>下的<tr>设置rowspan只能与<tbody>下的其他空白处进行合并。

 

image-20200708143856867

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<html>
<head>
    <style type="text/css">
        thead {
            color: green
        }

        tbody {
            color: blue;
            height: 50px
        }

        tfoot {
            color: red
        }
    </style>
</head>
<body>

<table border="1" style="border-collapse:collapse;">
    <caption>单元格合并演示</caption>
    <!--    表头-->
    <thead>
    <tr>
        <th>属性名称</th>
        <th>属性值</th>
        <th>功能描述</th>
        <th>无</th>
    </tr>
    </thead>
    <!--    表体-->
    <tbody>
    <tr>
        <td>rowspan</td>
        <td>number</td>
        <td>合并竖向单元格</td>
        <!--        注意，tbody中的rowspan只能与tbody中的合并，同理，tfoot中的也只能与tfoot中的合并-->
        <td rowspan="4">演示</td>
    </tr>
    <tr>
        <td>rowspan</td>
        <td>number</td>
        <td>合并竖向单元格</td>
        <!-- 空白-->
    </tr>
    <tr>
        <td>colspan</td>
        <td>number</td>
        <td>合并横向单元格</td>
        <!-- 空白-->
    </tr>
    <tr>
        <td>colspan</td>
        <td>number</td>
        <td>合并横向单元格</td>
        <!-- 空白-->
    </tr>
    </tbody>
    <!--    页脚-->
    <tfoot>
    <tr>
        <td colspan="4">一份不太严格的统计</td>
    </tr>
    </tfoot>
</table>

</body>
</html>

</body>
</html>

 

a 超链接

　　作用：定义超链接，用于从一张页面链接到另一张页面。<a> 元素最重要的属性是 href属性，它指示链接的目标。

 

<a>标签重要属性  
属性 值 描述
href URL 规定链接指向的页面的 URL。
target _blank， _parent， _self， _top， framename 规定在何处打开链接文档。
title text 悬停文本。
name section_name 主要用于设置一个锚点的名称。

 

　　注意：target属性值

　　　　_self：在同一个网页中显示（默认值）

　　　　_blank：在新的窗口中打开。

　　　　_parent：在父窗口中显示

　　　　_top：在顶级窗口中显示

 

　　<a>标签默认情况下都会有一条下划线，这条下划线可以在学习CSS后将它干掉。

　　另外，当href="#"的时候，代表为刷新页面。

　　如果想点击<a>标签没有任何作用，可以设置一条JavaScript语句，如下：

　　href = “javascript:void(0)”：阻止A标签默认的点击行为。

 

<a href="#" target="_blank" title="你好">点我</a>

image-20200708150213343

img 图像资源

 

　　作用：向网页中嵌入一幅图像。

　　请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。

 

属性值描述
alt text 规定图像的替代文本。
src URL 规定显示图像的 URL。
width pixels，% 设置图像的宽度。
height pixels，% 定义图像的高度。
title text 悬停文本。
align top，bottom，middle，left，right 不推荐使用。规定如何根据周围的文本来排列图像。

 

<img src=".peiqi.jpeg" alt="小猪佩奇" title="可爱的佩奇" width="200px">

 

　　.代表当前路径，可以省略

　　..代表上级目录

　　也可以使用网络资源http://，但是要注意的是不要使用file://，因为在Unix下没有盘符的概念。

 

image-20200708151615300

　　注意事项： ​

　　（1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。 ​

　　（2）如果想实现图文混排的效果，请使用align属性，取值为left或right。

 

 

a标签的妙用

a与id属性

　　我们可以用<a>标签的href来绑定一个锚点，达到当前页面跳转的功能，这在博客园的目录中很常用。

image-20200708152159037

 

　　下面我们做一个返回首页的按钮。

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        div{
            height: 80px;
        }
    </style>
</head>
<body>

<!--id具有唯一性-->

<div id="top">我是顶部</div>
<div>---</div>
<div>---</div>
<div>---</div>
<div>---</div>
<div>---</div>
<div>---</div>
<div>---</div>
<div>---</div>
<div>---</div>
<div>---</div>
<div>---</div>
<div>---</div>
<div>---</div>
<div>---</div>
<div>---</div>
<div>---</div>
<a href="#top">返回顶部</a>

</body>
</html>

 

a与img图片跳转链接

　　我们经常看见，当点击某一个图片的时候页面就会发生跳转，其实就是<a>与<img>的结合。

　　<a>标签是一个内联标签，而<img>是一个内联块级标签，我们需要将<img>标签嵌入至<a>标签的内部，所以需要把<a>标签也设置为一个内联块级标签（可设置宽高，但是不会换行）才行。

　　设置方法：

    a{
        display:inline-block;
    }
    <!--css来设置，将a标签转变为内联块级标签-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        a{
            display: inline-block;
        }
    </style>
</head>
<body>

    <a href="http://www.baidu.com/"><img src="./peiqi.jpeg" alt="可爱的佩奇" title="点我跳转百度" width="300px"></a>

</body>
</html>

 

内联框架 iframe

　　这个标签对于初学者来说会很少用到，但是它有一个非常强大的功能，这在后期学习中会体现出来。<iframe>可以伪造ajax请求并且它对上传文件的支持性特别好，这是后话以后再说。我们来看一下它的用法。

　　它有一个非常重要的属性src，可以将某一个网页完整的拿过来。

 

属性值描述
height pixels，% 规定 iframe 的高度。
width pixel，% 定义 iframe 的宽度。
name frame_name 规定 iframe 的名称。
scrolling yes，no，auto 规定是否在 iframe 中显示滚动条。
src URL 规定在 iframe 中显示的文档的 URL

 

image-20200708154120712

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">

    </style>
</head>
<body>

    <iframe src="http://www.baidu.com//" width="800px"></iframe>

</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Yunya-Cnblogs/p/13267518.html