คำถามติดแท็ก html

HTML (HyperText Markup Language) เป็นภาษามาร์กอัปหลักสำหรับการสร้างเว็บเพจและข้อมูลอื่น ๆ ที่จะแสดงในเว็บเบราว์เซอร์ คำถามเกี่ยวกับ HTML ควรมีตัวอย่างที่ทำซ้ำได้น้อยที่สุดและแนวคิดบางประการเกี่ยวกับสิ่งที่คุณพยายามทำ แท็กนี้ไม่ค่อยได้ใช้คนเดียวและมักจะจับคู่กับ [CSS] และ [javascript]

9
ทำไมเซิร์ฟเวอร์ถึงเพิกเฉยต่อการเปลี่ยนแปลงในไฟล์รหัสแม้ว่าแคชจะถูกปิดการใช้งาน?
ฉันทดสอบรหัส html / js บน localhost ของฉัน (Windows 7, Chrome v79.0.3945.130 (64 บิต)) และประมาณ 50% ของการเปลี่ยนแปลงรหัสเวลาจะไม่ปรากฏในเบราว์เซอร์ (ฉันเห็นด้วย Dev Tools / Sources ) มีคำแนะนำมากมายเกี่ยวกับอินเทอร์เน็ต แต่ดูเหมือนจะไม่ทำงาน: คลิกขวาที่โหลดและเลือก "ล้างแคชและโหลดซ้ำยาก" - ไม่ช่วยใน 30% ของกรณี ปิดใช้งานแคชในแท็บเครือข่ายของ Chrome Dev Tools - ไม่ช่วย เพิ่ม <meta http-equiv="Cache-control" content="no-cache">ในส่วนหัว - ไม่ช่วย แทนที่<script src="common.js"></script>ด้วย<script src="common.js?blabla"></script> - ช่วยใน 60% ของกรณี แต่คุณต้องทำหลังจากการเปลี่ยนแปลงทุกครั้งเป็นงานที่น่าเบื่อมาก …
5
แปลง html เป็นสตริง html ในไฟล์ JS
ฉันต้องการสร้าง html ผ่าน JS ดังนั้นฉันต้องเขียน html ในไฟล์ JS เช่น: function createHtmlSection() { return "<li class=\"chapter up-wrapper-btn\">" + "<div>" + "<button><i class=\"fa fa-plus\" onclick=\"addSection('up',this)\"></i></button>" + "<label contenteditable=\"true\">section 1</label>" + "</div>" + "</li>"; } มีเครื่องมือหรือทางลัดบางอย่างเพื่อสร้างสตริง html ประเภทนี้หรือไม่ ฉันหมายถึงในกรณีนี้ฉันต้องพิมพ์ html ทั้งหมดนี้ด้วยมือ ด้วย+และจำเป็นต้องเพิ่ม"เครื่องหมาย สิ่งที่สามารถแปลงสิ่งนี้: <li class="chapter up-wrapper-btn"> <div> <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button> <label contenteditable="true">section …
14 javascript  html 
3
คลิกรายการในรายการเติมข้อความอัตโนมัติด้วย VBA และ HTML
ฉันได้สร้างระบบอัตโนมัติที่จะให้ฉันป้อนรายละเอียดบนเว็บไซต์ (แม้ว่าฉันจะไม่สามารถแบ่งปันได้เนื่องจากเป็นภายใน) รหัสของฉันด้านล่างใช้งานได้จนกว่าจะมีการป้อนข้อความใน "ได้รับจาก" อย่างไรก็ตามฟิลด์ "ได้รับจาก" นี้มีรายการเติมข้อความอัตโนมัติและฉันต้องเลือกเพื่อเติมฟิลด์อื่นเช่น TIN และที่อยู่ รายการเติมข้อความอัตโนมัติค่อนข้างคล้ายกับรายการใน https://jqueryui.com/autocomplete/ หรือhttp://demos.codexworld.com/autocomplete-textbox-using-jquery-php-mysql/ ด้านล่างเป็นรหัสของฉัน: Sub Automate_IE_Enter_Data() 'This will load a webpage in IE Dim i As Long Dim Url As String Dim IE As InternetExplorer Dim objElement As Object Dim objCollection As Object Dim HWNDSrc As Long Dim wsTemplate As Worksheet …
5
วิธีหลีกเลี่ยง Chrome ซ่อนภาพพื้นหลังและสีบนอินพุตที่ป้อนอัตโนมัติ
Chrome Browserเติมเอฟเฟกต์ที่ลบออกโดยอัตโนมัติของbackground-colorและbackground-imageจากUsernameและPasswordช่องป้อนข้อมูล ก่อนเติมข้อความอัตโนมัติ หลังจากเติมข้อความอัตโนมัติ แต่การเติมข้อความอัตโนมัติของChrome Browserซ่อนไอคอนของฉันจากอินพุตและเปลี่ยนของฉันbackground-colorด้วย ดังนั้นฉันต้องการไอคอนของฉันอยู่ในอินพุตเหมือนเดิม เป็นไปได้ไหมที่จะหยุดChrome Browserจากการเปลี่ยนสีพื้นหลังของฟิลด์และซ่อนภาพ? .form-section .form-control { border-radius: 4px; background-color: #f7f8fa; border: none; padding-left: 62px; height: 51px; font-size: 16px; background-repeat: no-repeat; background-position: left 17px center; } .form-section .form-control:focus { -webkit-box-shadow: none; box-shadow: none; } .form-section .form-group { margin-bottom: 21px; } .form-section .form-control[type="email"] { background-image: url('https://i.stack.imgur.com/xhx3w.png'); …
5
ป้ายกำกับ HTML จะไม่ทริกเกอร์อินพุตที่เกี่ยวข้องหากเมาส์ถูกย้ายขณะคลิกใน Firefox
ในตัวอย่างต่อไปนี้เมื่อคุณคลิกที่ฉลากฉลากจะเปลี่ยนสถานะ document.querySelector("label").addEventListener("click", function() { console.log("clicked label"); }); label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } <input type="checkbox" id="1"> <label for="1">Label</label> เรียกใช้ข้อมูลโค้ดHide resultsขยายตัวอย่างข้อมูล ใน Chrome เมื่อคุณเลื่อนเคอร์เซอร์ไปมาระหว่างmousedownและกับmouseupเหตุการณ์อินพุทยังคงได้รับการทริกเกอร์ในขณะที่ใน Firefox ช่องทำเครื่องหมายจะไม่เปลี่ยนสถานะ มีวิธีแก้ไขปัญหานี้หรือไม่? (โดยไม่ใช้ผู้ฟังเหตุการณ์ JavaScript) รุ่น Firefox: 69.0.3 (64-bit) ชุดเต็มของการกระทำเมื่อใช้โครเมี่ยม กดปุ่มบนฉลาก เลื่อนเคอร์เซอร์ไปรอบ ๆ (แม้ด้านนอกฉลาก) ในขณะที่ยังกดปุ่มค้างไว้ กลับเคอร์เซอร์กลับไปที่ฉลาก ปล่อยปุ่ม
13 javascript  html  css  label 
6
การวาดลูกศรด้านบน HTML
ฉันมีตาราง html และฉันต้องการวาดลูกศรจากเซลล์หนึ่งไปยังอีกเซลล์หนึ่ง ตัวอย่างเช่นนี้: สิ่งนี้จะเกิดขึ้นได้อย่างไร? ตัวอย่าง HTML: <html> <body> <table> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td id="end">9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td id="start">0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> </body> </html> หากคุณปรับขนาดเบราว์เซอร์ลูกศรควรอยู่ในตำแหน่งเริ่มต้น / สิ้นสุด (ใหม่)
13 javascript  html  svg 
2
HTML filepicker multi - รับไฟล์ที่ใช้งานอยู่
ปัญหาต่อไปนี้เกิดขึ้นโดยใช้ Firefox v73 บน Window 7: ในรหัสของฉันฉันใช้ตัวเลือกหลายไฟล์ใน html เพื่ออัปโหลดได้ถึง 100 ไฟล์แนว: <input type="file" id="files" name="files" multiple> ไฟล์จะถูกส่งไปยัง REST-API ซึ่งดำเนินการในภายหลัง เมื่อฉันเลือกไฟล์เดียว (ใน file-explorer) ซึ่งใช้งานอยู่ในปัจจุบันฉันได้รับข้อความแสดงข้อผิดพลาด (อาจเป็นหน้าต่าง) ซึ่งบอกฉันว่าไฟล์ไม่สามารถเลือกได้เพราะมันใช้งานอยู่ หากฉันพยายามเลือกไฟล์หลายไฟล์ซึ่งมีไฟล์ที่ใช้งานอย่างน้อยหนึ่งไฟล์ฉันไม่มีข้อผิดพลาดเกิดขึ้น แต่การอัปโหลดดูเหมือนว่าจะหยุดเมื่อถึงการใช้ไฟล์ถึงและรอให้ไฟล์นั้นเปิดตัว สิ่งนี้นำไปสู่การร้องขอเพื่อรอการหมดเวลา (ซึ่งเป็น 1 นาทีในกรณีของฉัน) มีตัวเลือกในการตรวจจับปัญหา (ในการใช้ไฟล์) ก่อนที่จะพยายามอัปโหลดไฟล์หรือไม่ PS: ฉันได้ลองทำเช่นเดียวกันใน Chrome แล้วจะส่งคืนข้อผิดพลาดก่อนที่จะส่งคำขอไปยัง REST-API
2
ฉันจะรับเหตุการณ์คลิกภายใน innerHTML ได้อย่างไร
ฉันเค้าโครงนี้ที่สร้างขึ้นแบบไดนามิก: for (let i = 1; i < 10; i++) { document.querySelector('.card-body').innerHTML += `<div class="row" id="img_div"> <div class="col-12 col-sm-12 col-md-2 text-center"> <img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80"> </div> <div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6"> <h4 class="name"><a href="#" id="title` + i + `">Name</a></h4> <h4> <small>state</small> </h4> <h4> <small>city</small> </h4> <h4> <small>zip</small> …
4
วิธีการจัดแนวข้อความทั้งหมดใน CSS ในแนวตั้ง?
ปัญหาน่าจะเป็นที่ตัวอักษรบางอย่างเช่นg, y, qและอื่น ๆ ที่มีหางที่เนินเขาลงไม่อนุญาตให้แนวตั้งตรงกลาง นี่คือภาพที่จะแสดงปัญหา ตัวละครในกล่องสีเขียวนั้นสมบูรณ์แบบเพราะไม่มีหางเลย ผู้ที่อยู่ในกล่องสีแดงแสดงให้เห็นถึงปัญหา ฉันต้องการให้ตัวละครทุกตัวอยู่กึ่งกลางแนวตั้งอย่างสมบูรณ์ ในภาพตัวละครที่มีหางลงไม่อยู่กึ่งกลางแนวตั้ง เป็นไปได้ที่จะแก้ไข? นี่คือไวโอลินที่แสดงให้เห็นถึงปัญหาที่เกิดขึ้นในเต็มรูปแบบ .avatar { border-radius: 50%; display: inline-block; text-align: center; width: 125px; height: 125px; font-size: 60px; background-color: rgb(81, 75, 93); font-family: "Segoe UI"; margin-bottom: 10px; } .character { position: relative; top: 50%; transform: translateY(-50%); line-height: 100%; color: #fff; } <div …
3
ตารางเต็มหน้า TCPDF
ฉันลองทำหลายวิธีเพื่อจัดตารางให้พอดีกับหน้า (A4) ดังที่แสดงในรูปภาพ: ฉันค้นหาจำนวนมาก แต่ไม่พบสิ่งใดที่มีประโยชน์บนเว็บ ฉันใช้ตารางไดนามิกทุกอย่างก็โอเคยกเว้นความกว้างของตาราง นี่คือรหัสของฉัน: $content = '<table><thead><tr><th class="bg-dark text-white" align="center">#</th><th align="center" class="bg-dark text-white">Code</th><th align="left" class="bg-dark text-white">Description</th><th align="center" class="bg-dark text-white">Item Type</th></tr></thead><tbody><tr style="background-color: #f2f2f2;"><td align="center">1</td><td align="center">1001</td><td align="left">Pofak</td><td align="center">Fixed Price</td></tr><tr ><td align="center">2</td><td align="center">1002</td><td align="left">Ice</td><td align="center">Weight</td></tr><tr style="background-color: #f2f2f2;"><td align="center">3</td><td align="center">1003</td><td align="left">Minoo</td><td align="center">Fixed Price</td></tr><tr ><td align="center">4</td><td align="center">1004</td><td align="left">Bastani</td><td align="center">Fixed Price</td></tr><tr style="background-color: #f2f2f2;"><td …
11 php  html  css  tcpdf 
2
ทำไมฉันไม่สามารถเปิดแท็บด้วยปุ่ม html-button ขณะอยู่ใน chrome web store ได้?
ฉันมีหน้าหนึ่งในส่วนหน้าของฉันที่มีปุ่มต่าง ๆ ปุ่มทั้งหมดด้วยตัวเองทำงานได้อย่างสมบูรณ์แบบ แต่ถ้าฉันคลิกปุ่มที่เปิดส่วนขยายใน chrome web store และคลิกที่ปุ่มอื่นหลังจากนั้นหน้านั้นจะไม่เปิดขึ้น . นี่คือตัวอย่างของสิ่งที่ฉันกำลังพูดถึง หากคุณคลิกปุ่มโดยไม่ต้องปิดแท็บที่เปิดอยู่ปุ่มที่คุณคลิกหลังจากเปิดเว็บ Chrome จะไม่มีผลกระทบใด ๆ มีใครรู้บ้างไหมว่าทำไมถึงเป็นเช่นนั้นและจะแก้ไขอย่างไร? https://html-ichr7r.stackblitz.io นี่คือรหัสสำหรับมัน <button id="button1" onclick="window.open('https://www.facebook.com/','popup','width=700,height=300');"><strong>CONTINUAR</strong></button><br> <button id="button2" onclick="window.open('https://www.google.com/','popup','width=700,height=300');"><strong>CONTINUAR</strong></button> <button id="button3" onclick="window.open('https://chrome.google.com/webstore/detail/dark-mode/dmghijelimhndkbmpgbldicpogfkceaj?hl=de','popup','width=700,height=300');"><strong>CONTINUAR</strong></button><br> <button id="button4" onclick="window.open('https://www.9gag.com/','popup','width=700,height=300');"><strong>CONTINUAR</strong></button> ความช่วยเหลือใด ๆ ที่ชื่นชม! แก้ไข : ฉันเพิ่งค้นพบว่ามันทำงานใน firefox แต่ก็ไม่รู้ว่าทำไมมันไม่ทำงานใน Chrome
1
แสดงแผนภูมิแบบพล็อตเชิงโต้ตอบ (ไฟล์. html) บนหน้า GitHub
ฉันได้สร้างพล็อตเรื่องต่อไปนี้ดังนี้: import plotly labels = ['Oxygen', 'Hydrogen', 'Carbon_Dioxide', 'Nitrogen'] values = [4500, 2500, 1053, 500] trace = plotly.graph_objs.Pie(labels=labels, values=values) plotly.offline.plot([trace], filename='basic-pie-chart') จากนั้นฉันสร้าง html ดังกล่าว: print(plotly.offline.plot([trace], include_plotlyjs=False, output_type='div')) การรันโค้ดด้านบนจะสร้างไฟล์. html ที่ฉันสามารถดูได้ในเบราว์เซอร์ของฉัน มีวิธีในการแสดงไฟล์. html ที่ตรงกลางของไฟล์มาร์กอัปบนหน้า GitHub ของฉันหรือไม่ นี่เป็นคำถามที่คล้ายกันที่ฉันถาม
3
การคงตำแหน่งการเลื่อนจะใช้งานได้เฉพาะเมื่อไม่ได้อยู่ใกล้กับด้านล่างของ div
ฉันกำลังพยายามเลียนแบบแอพแชทมือถืออื่น ๆ ซึ่งเมื่อคุณเลือกsend-messageกล่องข้อความและมันเปิดแป้นพิมพ์เสมือนจริงข้อความล่างสุดยังคงอยู่ในมุมมอง ดูเหมือนจะไม่มีทางทำสิ่งนี้กับ CSS อย่างน่าอัศจรรย์ดังนั้น JavaScript resize(วิธีเดียวที่จะค้นหาว่าเมื่อใดที่แป้นพิมพ์ถูกเปิดและปิดอย่างเห็นได้ชัด) เหตุการณ์และการเลื่อนด้วยตนเองเพื่อช่วยเหลือ มีคนให้โซลูชันนี้และฉันพบวิธีแก้ปัญหานี้ซึ่งทั้งคู่ดูเหมือนจะใช้งานได้ ยกเว้นในกรณีเดียว สำหรับบางเหตุผลถ้าคุณอยู่ในMOBILE_KEYBOARD_HEIGHT(250 พิกเซลในกรณีของฉัน) พิกเซลด้านล่างของข้อความ div เมื่อคุณปิดแป้นพิมพ์มือถืออะไรแปลก ๆ เกิดขึ้น ด้วยวิธีการแก้ปัญหาเดิมมันเลื่อนไปที่ด้านล่าง และด้วยวิธีแก้ปัญหาหลังมันจะเลื่อนMOBILE_KEYBOARD_HEIGHTพิกเซลขึ้นจากด้านล่างแทน หากคุณเลื่อนไปที่ความสูงนี้โซลูชันทั้งสองที่ให้ไว้ข้างต้นจะทำงานได้อย่างไม่มีที่ติ เฉพาะเมื่อคุณอยู่ใกล้ด้านล่างสุดที่พวกเขามีปัญหาเล็กน้อยนี้ ฉันคิดว่าบางทีมันเป็นเพียงโปรแกรมของฉันที่ทำให้เกิดสิ่งนี้ด้วยรหัสหลงทางแปลก ๆ แต่ไม่ฉันทำซ้ำซอและมีปัญหาตรงนี้ ฉันขอโทษที่ทำให้สิ่งนี้ยากต่อการแก้ไข แต่ถ้าคุณไปที่https://jsfiddle.net/t596hy8d/6/show (ส่วนต่อท้ายของการแสดงเป็นโหมดเต็มหน้าจอ) บนโทรศัพท์ของคุณคุณควรจะเห็น พฤติกรรมเดียวกัน หากคุณเลื่อนขึ้นมามากพอการเปิดและปิดแป้นพิมพ์จะรักษาตำแหน่งไว้ อย่างไรก็ตามหากคุณปิดแป้นพิมพ์ภายในMOBILE_KEYBOARD_HEIGHTพิกเซลที่ด้านล่างคุณจะพบว่ามันเลื่อนไปที่ด้านล่างแทน อะไรทำให้เกิดสิ่งนี้ การสร้างรหัสที่นี่: window.onload = function(e){ document.querySelector(".messages").scrollTop = 10000; bottomScroller(document.querySelector(".messages")); } function bottomScroller(scroller) { let scrollBottom = scroller.scrollHeight - …
3
การดึงลิงก์ล่วงหน้าทำงานข้ามโดเมนย่อยได้หรือไม่
ฉันพยายามใช้สิ่งนี้เพื่อรับการปรับปรุงประสิทธิภาพเมื่อคลิกจากหน้า Landing Page อย่างง่ายไปยังแอพพลิเคชั่นหน้าเดียวที่มีน้ำหนักมาก: <link rel="prefetch" href="https://example.com" as="document" /> <link rel="prefetch" href="https://example.com/app.js" as="script" /> <link rel="prefetch" href="https://example.com/app.css" as="style" /> ดูเหมือนว่าจะไม่มีการเพิ่มประสิทธิภาพที่เห็นได้ชัดเจนเมื่อหน้า Landing Page ของฉันอยู่ในโดเมนย่อย https://subdomain.example.comกล่าวว่า เมื่อฉันคลิกที่ลิงก์เพื่อเยี่ยมชมhttps://example.comฉันยังคงเห็นความล่าช้าเป็นเวลานานในแท็บเครือข่าย Chrome ที่เป็นapp.jsและapp.cssโหลด: นี่เป็นแหล่งข้อมูลเดียวกันที่ปิดใช้งานการดึงข้อมูลล่วงหน้า: ใช้เวลารวมทั้งหมดเท่ากัน ขอส่วนหัวสำหรับหนึ่งในเนื้อหาที่โหลดด้วยแคชการดึงข้อมูลล่วงหน้า: ทั่วไป: Request URL: https://example.com/css/app.bffe365a.css Request Method: GET Status Code: 200 (from prefetch cache) Remote Address: 13.226.219.19:443 Referrer Policy: no-referrer-when-downgrade การตอบสนอง: …
11
ป้องกันการเลื่อนขึ้น div เมื่อชนด้านล่างโดย div หรือไม่
ฉันถามคำถามที่คล้ายกันเมื่อวานนี้ แต่อธิบายได้ไม่ดีและไม่ได้ระบุความต้องการของฉันสำหรับโซลูชัน CSS บริสุทธิ์ซึ่งฉันคิดว่าควรจะเป็นไปได้ดังนั้นฉันจึงลองอีกครั้ง โดยทั่วไปฉันมีปัญหาที่ฉันมี div ของข้อความที่เลื่อนได้และฟิลด์อินพุตด้านล่าง เมื่อฉันคลิกปุ่มฉันต้องการให้ฟิลด์อินพุตมีการชนกันที่ 100 พิกเซลโดยไม่ต้องเลื่อน div ของข้อความด้วย นี่คือซอที่แสดงให้เห็นถึงปัญหาอย่างครบถ้วน อย่างที่คุณเห็นเมื่อคุณคลิกปุ่ม "เพิ่มระยะขอบ" ข้อความ div จะเลื่อนขึ้นเช่นกัน ฉันอยากให้มันอยู่ตรงไหน ในทำนองเดียวกันหากคุณเลื่อนขึ้นเล็กน้อยเพื่อให้คุณเห็นข้อความที่สองถึงข้อความสุดท้ายเท่านั้นการคลิกที่ปุ่มควรจะรักษาตำแหน่งนั้นไว้ในทำนองเดียวกันเมื่อคลิก สิ่งที่น่าสนใจคือพฤติกรรมนี้ "บางครั้ง" เก็บรักษาไว้ ตัวอย่างเช่นในบางสถานการณ์ (ซึ่งฉันไม่สามารถอนุมานได้มาก) ตำแหน่งการเลื่อนจะยังคงอยู่ ฉันแค่อยากให้มันประพฤติอย่างสม่ำเสมอ window.onload = function(e) { document.querySelector(".messages").scrollTop = 10000; }; function test() { document.querySelector(".send-message").classList.toggle("some-margin"); } .container { width: 400px; height: 300px; border: 1px solid #333; …
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.