专栏首页Lemon黄(续)很久很久以前学的,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;

效果展示:

本文分享自微信公众号 - Lemon黄(lemonhunag)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Rust日报】2019-09-25 Nushell 0.3.0 发布

    Nushell(简称Nu)是一种新型的shell,它采用现代的结构化方法来处理命令行。它与来自文件系统、操作系统和越来越多的文件格式的数据无缝地工作,使构建强大...

    MikeLoveRust
  • django 请求 与 响应

    注意:键值对的值是多个的时候,比如checkbox类型的input标签,select标签,需要用:request.POST.getlist("hobby")

    郭大侠
  • 2000万条直播数据,揭秘斗鱼主播生存现状

    本文转载自凹凸玩数据 2019年7月17日游戏直播平台斗鱼在美国纳斯达克股票交易所成功上市,成为继虎牙直播之后第二家赴美上市的国内直播平台。

    数据森麟
  • 使用Centrifuge平台检测固件漏洞

    最近,针对TP-Link WL-WA850RE WiFi Range Extender 发布的漏洞引起了我们的注意,并对其进行了进一步调查。对于许多低成本的消费...

    安恒网络空间安全讲武堂
  • Python批量下载无版权图片

    生活或者工作中,不管是写文章、公司 UI 交互图还是广告图等等都需要用到图片,图片的优点和重要性自不用说。

    数据森麟
  • 一文搞懂各大APP&网站python网络爬虫

    很久以前写了一篇爬虫的文章,把它放在CSDN上(livan1234)没想到点击量竟然暴涨,足以看到大家在数据获取方面的需求,爬虫技术现在已经非常普遍,其用途也非...

    数据森麟
  • 最新新浪短网址(t.cn)生成API接口

    许坏
  • 使用 Docker 和 Traefik 搭建 Flarum 轻论坛应用

    本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议,欢迎转载、或重新修改使用,但需要注明来源。 署名 4.0 国际 (CC BY 4.0)

    soulteary
  • 为什么大部分的码农都做不了架构师?

    一般来说技术团队的金字塔顶尖往往是技术最牛的人做架构师(或TL)。所以架构师在广大码农中的占比大概平均不到 20%。

    数据森麟
  • 初识爬虫

    郭大侠

扫码关注云+社区

领取腾讯云代金券