（续）很久很久以前学的，16个HTML笔记
（续）很久很久以前学的，16个HTML笔记
点击上方“Lemon黄”关注我哦，不定期原创文，定期好技术文推广分享
1、超链接
也称Anchor（锚）。
1.1、定义和用法
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
在所有浏览器中，链接的默认外观是：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
<a>属性：
属性 | 值 | 描述 | ||
|---|---|---|---|---|
download | filename | 规定被下载的超链接目标。( HTML5 中的新属性) | ||
href | URL | 规定链接指向的页面的 URL。 | ||
hreflang | language_code | 规定被链接文档的语言。 | ||
media | media_query | 规定被链接文档是为何种媒介/设备优化的。( HTML5 中的新属性) | ||
rel | text | 规定当前文档与被链接文档之间的关系。 | ||
target | · _blank· _parent· _self· _top· framename | 规定在何处打开链接文档。 | ||
type | MIME type | 规定被链接文档的的 MIME 类型。( HTML5 中的新属性) | ||
注意：
- 如果不使用href属性，则不可以使用如下属性：download,hreflang,media,rel,target以及type属性。
- URL(Uniform Resource Locator统一资源定位符)统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
- a标签规范是不允许嵌套的，即不允许出现<a>bb<a>cc</a></a>
超链接分为外部链接、内部链接、文本链接、图片链接、下载链接、空链接、电子邮件链接等。
外部链接： URL是本网站外的链接
<a href=”http://www.sina.com.cn” target=”_blank”>新浪网</a>
例如：
Hao123.com的推荐网站:
内部链接：URL是本网站内的二级域名
<a href="http://sports.sina.com.cn/csl/" target="_blank">中超</a>
例如：
文本链接：
普通文本加上<a href=”url”>普通文本</a>
例如：
12306网上购票系统-用户支付通知
下载链接：
将提供下载的内容打包成*.rar,*.zip,*.iso,*.mp4,*.flv等
当用户点击时，会自动关联下载工具。
空链接：
<a href=””>空链接</a>
<a href=”javascript:void(0)”>我是JavaScript空链接也叫死链接</a>
单击后没有反应，可以配合JS程序
<a href=”javascript:void(0)” onclick=”alert(‘点我啊！！’)”>我也是JavaScript 空链接</a>
电子邮件链接：
<a href=”完整的email地址”>联系我们</a>
<a href=”mailto:完整的email地址”>联系我们</a>
点击这个链接就会自动启动Micosoft office outlook向email发送邮件
锚点链接：
先定义锚点：<a name=”top”></a>
使用方法： <a href=”#top”>回到TOP位置</a>
2、表格结构
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
<table>属性：
属性 | 值 | 描述 |
|---|---|---|
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 | 规定表格的宽度。 |
<!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>
<table border="1" bordercolor="red" cellpadding="10" cellspacing="20">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</body>
</html>显示效果：
<tr>属性：
属性 | 值 | 描述 |
|---|---|---|
align | · right· left· center· justify· char | 定义表格行的内容对齐方式。 |
char | character | 规定根据哪个字符来进行文本对齐。 |
charoff | number | 规定第一个对齐字符的偏移量。 |
valign | · top· middle· bottom· baseline | 规定表格行中内容的垂 |
<td>属性
属性 | 值 | 描述 |
|---|---|---|
abbr | text | 规定单元格中内容的缩写版本。 |
align | · left· right· center· justify· char | 规定单元格内容的水平对齐方式。 |
axis | category_name | 对单元进行分类。 |
char | character | 规定根据哪个字符来进行内容的对齐。 |
charoff | number | 规定对齐字符的偏移量。 |
colspan | number | 规定单元格可横跨的列数。 |
headers | header_cells'_id | 规定与单元格相关的表头。 |
rowspan | number | 规定单元格可横跨的行数。 |
scope | · col· colgroup· row· rowgroup | 定义将表头数据与单元数据相关联的方法。 |
valign | · top· middle· bottom· baseline | 规定单元格 |
<!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>
<table border="1" bordercolor="red" cellpadding="10" cellspacing="20">
<tr><td colspan="2">2</td><td>3</td></tr>
<tr><td rowspan="2">4</td><td>5</td><td>6</td></tr>
<tr><td>8</td><td>9</td></tr>
</table>
</body>
</html>显示效果：
<th>属性
列标题文字，自加粗并在单元各居中
<caption>
表格标题，双标记
3、表单
表单在网页中主要负责数据采集功能。
一个表单有三个基本组成部分：
表单标签：这里面包含了处理表单数据以及数据提交到服务器。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
表单的标签：<form></form>
属性：
属性 | 描述 |
|---|---|
action | 规定向何处提交表单的地址（URL）（提交页面）。 |
autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
enctype | 规定被提交数据的编码（默认：url-encoded）。 |
method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
novalidate | 规定浏览器不验证表单。 |
target | 规定 action 属性中地址的目标（默认：_self）。 |
Action属性：
Action属性定义在提交表单时执行的动作。通常表单会被提交到web服务器上的某个PHP文件。若action被省略，则action会被设置为当前页面。
Method属性：
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
<form action="a.php" method="GET">
或：
<form action=".php" method="POST">
何时使用GET?
GET适合少量数据的提交。一般使用GET提交时，提交的数据会在地址栏中显示出来。一般搜索查询的时候用GET提交。
何时使用POST?
POST的安全性高，适合提交一些敏感信息(如密码等)，POST提交数据是不可见的。
Name属性：
每个输入字段必须设置一个name属性。
Entype属性：
有两个类型：
application/x-www-form-urlencoded在发送前编码所有字符（默认），一般可以省略不写。
multipart/form-data在发送前不对字符编码，在使用包含文件上传控件的表单时，必须使用该值。
表单的元素
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
<input>元素是最重要的表单元素。
常用的input类型如text、password、radio、submit等
当action和method都不填写的情况：
<?php
if (!empty($_GET)) {
$name = $_GET['lastname'];
echo "提交上来的姓名为：" . $name;
}
?>
<!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>
<form>
姓名：<input type="text" name="lastname" />
<input type="submit" value="提交"/>
</form>
</body>
</html>效果展示：
正常action和method都填写的情况：
HTML:
<!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>
<form>
<form method="POST" action="test1.php">
姓名：<input type="text" name="name" />
<input type="submit" value="发送"/>
</form>
</form>
</body>
</html>PHP:
<?php
$name = $_POST['name'];
echo "从11.html中传递过来的姓名为：".$name;效果展示：
腾讯云开发者
