HTML小記

1、頁面內跳轉

當<a>元素用于頁面內的錨點跳轉時,應該先為該頁面設置一些錨點,而定義錨點有兩種辦法:

  • 通過<a>元素的name屬性來定義,如:<a name="anchor-name">name屬性的值就是錨點的名稱<a>
  • 通過其他元素的id屬性來定義,如:<div id="anchor-name">id屬性值可以作為錨點的名稱</div>

設置好了錨點之外,就可以通過<a>元素鏈接到該錨點位置,其href取值為“# 錨點名稱”,示例如下:

<a href="#anchor1">錨點鏈接一</a>
<a href="#anchor2">錨點鏈接二</a><div><div>我這里有很多內容...</div><!-- 使用a的name屬性定義錨點 --><a name="anchor1">點擊錨點鏈接一,會跳到我這里</a><div>我這里有很多內容...</div><!-- 使用元素的id屬性定義錨點 --><p id="anchor2">點擊錨點鏈接二,會跳轉到我這里</p>
</div>

?

2、電子郵件鏈接

當其用于郵件連接時,href屬性的值為"mailto: 郵件地址",示例如下:

<a href="mailto:xuyc_brother@foxmail.com”>發送郵件給我</a>

?

3、電話鏈接

提供電話鏈接有助于用戶查看連接到手機的網絡文檔和筆記本電腦,示例如下:

<a href="tel: 491570156"> 49 157 0156</a>

?

4、使用 download 屬性保存畫布為PNG格式

如果想允許用戶下載一個HTML畫布,可以創建一個下載屬性和畫布數據作為文件URL鏈接圖像:

var link = document.createElement('a');
link.innerHTML = 'download image';link.addEventListener('click', function(ev) {link.href = canvas.toDataURL();link.download = "mypainting.png";
}, false);document.body.appendChild(link);

?

5、創建表單

5.1 <input>元素

<input>元素跟<img>元素一樣,不需要閉合標簽

<!-- 文本輸入框 -->
<input type="text" name="username">
<!-- 文本輸入框提示信息 -->
<input type="text" name="username" placeholder="用戶名">
<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索">
<!-- 數字輸入框 -->
<input type="number" name="age" placeholder="只能輸入數字">
<!-- 密碼輸入框 -->
<input type="password" name="pwd" placeholder="密碼">
<!-- 單選框 -->
<input type="radio" name="sex" value="man"><!-- 復選框 -->
<input type="checkbox" name="hobby" value="music">音樂
<!-- 隱藏域 -->
<input type="hidden" name="other-data" value="用戶不可見數據">
<!-- 上傳文件 -->
<input type="file" name="file">
<!-- 普通按鈕 -->
<input type="button" name="button" value="普通按鈕">
<!-- 提交按鈕 -->
<input type="submit" name="submit" value="立即加入">
<!-- 重置按鈕 -->
<input type="reset" name="reset">

?

5.2 <textarea>元素

用于多行文本輸入,可以通過cols和rows屬性來規定textarea的尺寸

<textarea rows="5" cols="30" placeholder="請輸入評論"></textarea>

?

5.3 <select>元素

用于創建選項菜單,默認只能選擇一個值,可以通過設置屬性multiple="multiple"來實現多選,其選項元素為<option>元素,常用有兩個屬性:

  • value:表示選中該選項的值。
  • selected: 表示默認選中。
    <!-- 單選且有默認選中值 -->
    <select name="tag"><option value="html" selected>HTML</option><option value="css">CSS</option><option value="js">JS</option>
    </select>
    <!-- 多選 -->
    <select name="tags" multiple="multiple"><option value="html">HTML</option><option value="css">CSS</option><option value="js">JS</option>
    </select>

    ?

5.4 <button>元素

一般對于提交與重置按鈕,我們建議使用 input 來定義,對于普通按鈕可以使用 button。

5.5 <label>元素

<label>元素用于關聯表單元素的標題,可直接包裹表單元素,也可以通過設置其 for 屬性關聯到表單元素的 id 屬性,這樣點擊 label 標題上關聯的表單元素就可以自動獲取焦點,提升用戶體驗。

<!-- 包裹表單元素 -->
<label>用戶名:<input type="text"></label><!-- 使用for屬性關聯表單元素的id屬性 -->
<label for="username">用戶名:</label><input type="text" id="username">

更多詳細表單:HTML5中的表單元素

本文轉載于:猿2048→https://www.mk2048.com/blog/blog.php?id=h0hb2c2j&title=HTML小記

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/370201.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/370201.shtml
英文地址,請注明出處:http://en.pswp.cn/news/370201.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

python3連接數據庫失敗_python3使用pymysql連接mysql數據庫報Keyerror

該樓層疑似違規已被系統折疊 隱藏此樓查看此樓不好意思Traceback (most recent call last):File "d:\Python\practice2\mydbconn.py", line 5, in conn pymysql.connect(usertestuser, passwdtestpasswd,host192.168.1.3, dbtest,charsetutf8)File "C:\Users\t…

MantisBT 問題分配顯示 姓名

MantisBT 在提交問題的時候&#xff0c;系統默認“分配”給備選賬號&#xff0c;而不是姓名。這樣在使用的時候很不便。能夠通過改動配置文件來改變&#xff0c;找到MantisBT根文件夾下文件config_inc.php&#xff0c;用文本編輯器打開。代碼例如以下&#xff1a; <?php $g…

使用多種MIME類型測試REST

1.概述 本文將重點介紹測試具有多種媒體類型/表示形式的RESTful服務。 這是關于使用Spring和基于Java的配置的Spring Security設置安全的RESTful Web Service的系列文章的第十篇。 REST with Spring系列&#xff1a; 第1部分 – 使用Spring 3.1和基于Java的配置引導Web應用程序…

firewallD卸載Linux,在Ubuntu 18.04/16.04系統上安裝和使用Firewalld的方法

本文介紹Firewalld在Ubuntu 18.04或Ubuntu 16.04發行版上的安裝方法及基本用法。簡介Firewalld是Linux防火墻管理工具&#xff0c;支持IPv4、IPv6、以太網橋和IPSet防火墻設置&#xff0c;它充當Linux內核的netfilter框架的前端&#xff0c;同時Firewalld是RHEL 7系列上的默認防…

JavaWeb學習中的小問題

1. HttpServletRequest和ServletRequest之間的區別&#xff1f; 再看別人項目的時候突然看到一句&#xff1a; ServletRequest request&#xff1b;HttpServletRequest hsRequest (HttpServletRequest) request;// 獲取HttpServletRequest對象瞬間就有一點懵逼 &#xff0c;趕…

python 結構數組_Python數組

數組是一個容器&#xff0c;它可以容納一定數量的項目&#xff0c;這些項目是相同的類型。 大部分數據結構都使用數組來實現它們的算法。 以下是理解數組(Array)概念的重要術語。元素 - 存儲在數組中的每個項目稱為元素。索引 - 數組中元素的每個位置都有一個數字索引&#xff…

廣播 布局文件代碼

<?xml version"1.0" encoding"utf-8"?><RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android" xmlns:app"http://schemas.android.com/apk/res-auto" xmlns:tools"http://schemas.android.com/…

PCGen的垃圾收集分析

介紹 我決定結合我的兩個軟件愛好&#xff0c;并在PCGen上進行一些分析&#xff0c; PCGen是一種流行的基于Java的開放源代碼角色生成器&#xff0c;用于角色扮演游戲。 我用Censum &#xff0c;我們&#xff08; jClarity的&#xff09;新的垃圾收集日志分析工具來進行分析。 …

THINKPHP增刪改查--(改)

1.CURD 控制器?>namespace Home\Controller;use Think\Controller;class CurdController extends Controller{ public function index(){ $db_student D(Student); $data_student $db_student->relation(true)->select();// dump($data_student); $this->assign…

Linux監控CPU關閉服務器,監控Linux服務器CPU和內存

利用腳本獲取Linux服務器的CPU和內存。需要安裝bc計算器yum install -y bc創建執行腳本計算CPU利用率&#xff0c;配置了5秒采樣。執行腳本&#xff0c;5秒后輸出采集日期|CPU負載|可用內存|總內存#!/bin/sh##echo user nice system idle iowait irq softirqCPULOG_1$(cat /pro…

springboot不會運行gc_SpringBoot 和JVM 調優(深度好文,建議收藏)

點擊上方[全棧開發者社區]→右上角[...]→[設為星標?]項目調優作為一名工程師&#xff0c;項目調優這事&#xff0c;是必須得熟練掌握的事情。在SpringBoot項目中&#xff0c;調優主要通過配置文件和配置JVM的參數的方式進行。一、修改配置文件關于修改配置文件 application.p…

移動端原生js,css3實現輪播圖

一、功能需求 1、自動播放2、滑動切換3、點擊切換 二、思路分析 html代碼&#xff1a; <div class"container">   <ul class"list clearfix">   <li class"item fl item5">圖5</li>   <li class"item fl …

關于換行這個動作,win 和 mac 的實現

‘\r是回車&#xff0c;前者使光標到行首&#xff0c;&#xff08;carriage return&#xff09;\n是換行&#xff0c;后者使光標下移一格&#xff0c;&#xff08;line feed&#xff09;\r 是回車&#xff0c;return\n 是換行&#xff0c;newline對于換行這個動作&#xff1a;u…

你好駱駝:自動文件傳輸

Apache Camel在其主頁上 &#xff08;以及Camel用戶指南中 &#xff09;將其描述為“基于已知企業集成模式的通用開源集成框架”。 Camel框架基于《 企業集成模式 》一書&#xff0c;并提供了該書中描述的模式的實現 。 我看一下這篇文章中使用Camel的“ Hello World”類型示例…

Linux 常用命令二 pwd cd

一、pwd命令 顯示整個路徑名&#xff1a; wangwang:~$ pwd /home/wang 二、cd命令 切換到其他路徑&#xff08;相對路徑方式&#xff09;&#xff1a; wangwang:~$ cd workpalce/ wangwang:~/workpalce$ pwd /home/wang/workpalce 切換到其他路徑&#xff08;絕對路徑方式&…

3dobject用什么打開_第一次用開塞露是什么感覺?網友:像打開了新世界的大門

第一次用開塞露是什么感覺&#xff1f;網友:像打開了新世界的大門我媽說我小時候便秘去醫院&#xff0c;醫生給開了支開塞露&#xff0c;然后在醫院的公廁里使用的&#xff0c;我媽的描述是:“要不是我手挪走的快點&#xff0c;就直接噴我手了”。。。。。。。。。。。。。。。…

linux root郵箱地址,linux – 如何將root的電子郵件轉發到外部電子郵件地址?

我家里有一臺小型服務器(Ubuntu 10.04),我想將root的電子郵件轉發到我的gmail托管域,以獲取安全通知,什么不是.我把所有東西都撕掉了,然后從頭開始跑到other issues.我現在有sendmail工作,我可以發郵件到someexternal.com并收到郵件.但是,向/root/.forward添加地址實際上并不轉…

RHEL6.4 xclock安裝小記

http://blog.sina.com.cn/s/blog_623630d50101tc67.html轉載于:https://www.cnblogs.com/Baronboy/p/7077911.html

Java 7中對String.substring的更改

眾所周知&#xff0c;在您生成相同源字符串的許多子字符串的情況下&#xff0c;Java會優化子字符串操作。 它通過使用(value, offset, count)存儲信息的方式來做到這一點。 請參閱以下示例&#xff1a; 在上圖中&#xff0c;您會看到字符串“ Hello”和“ World&#xff01;”…

原生js創建模態框

1.效果圖如下&#xff1a; 2.代碼如下&#xff1a; <!DOCTYPE html><html><head><meta charset"UTF-8"><title>Test</title><style>#pageMask {visibility: hidden; position: absolute;left: 0px; top: 0px;width:…