HTML [व्यावहारिक पाठ्यक्रम] (2024 नवीनतम संस्करण)

HTML [व्यावहारिक पाठ्यक्रमः] (2024 नवीनतम संस्करणम्)

2024-07-12

मूलविचार——शब्दार्थीकरण

【面试题】如何理解 HTML 语义化 ?
1

सामग्रीप्रकारः केवलं टैग्-द्वारा, विशेषतः शीर्षकैः, अनुच्छेदैः, चित्रैः, सारणीभिः च निर्धारयितुं शक्यते ।

कोड पठनीयतां वर्धयन्तु, जनानां कृते अवगन्तुं सुलभं कुर्वन्तु
SEO कृते अधिकं मैत्रीपूर्णं, अन्वेषणयन्त्राणां कृते अवगन्तुं सुलभं भवति

html सञ्चिकानां मूलभूतसंरचना

html सञ्चिकानां कृते सञ्चिकाप्रत्ययः अस्ति .html, यथा index.html

vscode इत्यत्र आङ्ग्लभाषां प्रविशन्तु ! त्वरितं निवेशः

<!-- HTML5的文档类型声明【必要】 -->
<!doctype html>
<!-- 整个页面，语言为英文【必要】 -->
<html lang="en">
  <!-- 页面的头部【必要】 -->
  <head>
    <!-- 页面的元信息-- 文档的字符编码为 UTF-8 -->
    <meta charset="UTF-8" />
    <!-- 页面的元信息-- 设备上显示页面的区域 viewport 的配置 -- width 为 device-width ，即采用设备宽度；intial-scale 为 1 ，即按原比例显示（无缩放）-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 页面的标题【必要】 -->
    <title>Document</title>
    <!-- 页面中的样式 -->
    <style>
      html,
      body {
        height: 100%;
      }
    </style>
  </head>
  <!-- 页面的身体【必要】 -->
  <body>
  <!-- 页面的内容 -->
  <div></div>
  <!-- 页面的脚本 ——  JS 代码 -->
  <script></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

【面试题】为什么<style></style> 标签要写在<head></head> 中  ?
1

ब्राउजर् HTML दस्तावेजान् उपरितः अधः यावत् विश्लेषणं करोति । <style></style> लेबलं लिखितव्यम्<head></head> प्रथमं शैल्याः लोड् कर्तुं शक्नुवन्ति ततः एलिमेण्ट्स् लोड् कर्तुं शक्नुवन्ति ।

यदि इच्छसि <style></style> लेबलं लिखितम् अस्ति<body></body> अधः प्रथमं तत्त्वानि ततः शैल्याः लोड् भवन्ति, यस्य परिणामेण उपयोक्ता शैल्याः विना पृष्ठसंरचनां पश्यति ।

【面试题】为什么<script></script> 标签要写在 <body></body> 内的底部  ?
1

ब्राउजर् HTML दस्तावेजान् उपरितः अधः यावत् विश्लेषणं कुर्वन्ति । <style></style> यदि न स्थापितः<body></body> पृष्ठस्य अधः प्रथमं JS लोड् कृत्वा विश्लेषणं भविष्यति, ततः तत्त्वानि रेण्डर् करिष्यन्ति, येन पृष्ठस्य रेण्डरिंग् समयः दीर्घः भविष्यति यदि DOM ऑपरेशन्स् JS मध्ये सम्मिलिताः सन्ति तर्हि पृष्ठस्य रेण्डरिंग् अपि अवरुद्धं करिष्यति .

html टैग्स् इत्यस्य वर्गीकरणम्

लेबलस्य पूर्वनिर्धारितप्रदर्शनशैलीमूल्यानुसारं द्वयोः वर्गयोः विभक्तम् अस्ति ।

【面试题】HTML有哪些内联元素和块状元素 ?
1

inline elements इति

विस्तारः सामग्रीद्वारा निर्धारितः भवति

display :inline तत्त्वस्य प्रतिस्थापनं विना विस्तारः, ऊर्ध्वता च सेट् कर्तुं न शक्यते ।

img，span ,  a ,  b 等
1

display :inline-block विस्तारं ऊर्ध्वतां च सेट् कर्तुं शक्नोति

input， button 等
1

अवरोधतत्त्वानि

विस्तारः पात्रेण निर्धारितः भवति (विस्तारः सम्पूर्णं पात्रं पूरयिष्यति), विस्तारः, ऊर्ध्वता च सेट् कर्तुं शक्यते

display: block

div，h1-h6，p，ul, ol ，form , hr 等
1

display: table

table
1

display: list-item

li
1

HTML मध्ये प्रतिस्थापनतत्त्वानि

येषां तत्त्वानां रेण्डर्ड् सामग्रीः विशेषतायाः (प्रायः src विशेषता) मूल्यं परिवर्त्य प्रतिस्थापयितुं शक्यते, ते "प्रतिस्थापनतत्त्वानि" इति उच्यन्ते ।

निम्नलिखित टैग्स् सर्वे प्रतिस्थापनतत्त्वानि सन्ति:

img、video、iframe、canvas、textarea、input、select、object
1

प्रतिस्थापितानां तत्त्वानां लक्षणम्

सर्वे अन्तःरेखातत्त्वानि सन्ति
सामग्रीयाः स्वरूपं अन्यटैग्स् इत्यस्य CSS इत्यनेन प्रभावितं न भवति, यथा प्रतिस्थापिते सामग्रीयां पाठः इत्यादि ।
प्रतिस्थापितायाः सामग्रीयाः एव आयामाः सन्ति
- img इत्यस्य पूर्वनिर्धारितः आकारः तस्य लोड् कृतस्य चित्रस्य आकारः अस्ति ।
- विडियो, iframe, canvas इत्यादीनां पूर्वनिर्धारित आकारः (सीमाः विहाय) 300px * 150px अस्ति ।
प्रतिस्थापितस्य तत्त्वस्य आधाररेखा (vertical-align इत्यस्य पूर्वनिर्धारितं मूल्यं आधाररेखा अस्ति) तत्त्वस्य अधः धारः भवति, न तु x वर्णस्य अधः धारः
यदि प्रतिस्थापनसामग्री लोड् न भवति (उदाहरणार्थं, src विशेषता सेट् न भवति), तर्हि प्रतिस्थापनतत्त्वं प्रतिस्थापनतत्त्वस्य लक्षणं नष्टं करिष्यति तथा च साधारणः इनलाइनतत्त्वः भविष्यति

तत्त्वस्य आकारं प्रतिस्थापयन्तु

प्रतिस्थापितस्य तत्त्वस्य अन्तिमः आकारः निम्नलिखितत्रिविधानां संयोजनेन निर्धारितः भवति, तेषां... उच्चतः निम्नपर्यन्तं प्राथमिकता तदनन्तरं : १.

आकारः CSS चौड़ाई, ऊर्ध्वता, अधिकतम-चौड़ाई/मिनट-चौड़ाई, अधिकतम-उच्चता/मिनिट-उच्चता द्वारा सेट् भवति
भवान् एलिमेण्ट् इत्यत्र html एट्रिब्यूट्स् प्रतिस्थापयित्वा आकारं सेट् कर्तुं शक्नोति, यथा img इत्यस्य width तथा height एट्रिब्यूट्स्, input इत्यस्य size एट्रिब्यूट्, textarea इत्यस्य cols तथा rows एट्रिब्यूट्स् इत्यादयः
प्रतिस्थापितायाः सामग्रीयाः एव आयामाः सन्ति

HTML5 नवीन टैग्स

【面试题】HTML5 新增了哪些标签 ? (回答几个常用的即可)
1

संरचनात्मक टैग

<header>: 定义文档或节的头部。
<nav>: 定义导航链接。
<section>: 定义文档中的独立节。
<article>: 定义文档、页面、应用或网站中独立的内容区域。
<aside>: 定义页面的侧边栏内容。
<footer>: 定义文档或节的页脚。
<main>: 定义文档的主体内容。
1
2
3
4
5
6
7

बहुमाध्यम टैग

<video>: 定义视频或电影。
<audio>: 定义音频内容。
<source>: 为<video>和<audio>元素定义媒体资源。
<track>: 为<video>和<audio>元素定义文本轨道。
<embed>: 定义嵌入的内容，比如插件。
<canvas>: 用于在网页上绘制图形。
1
2
3
4
5
6

रूप टैग

<datalist>: 定义选项列表，与<input>元素配合使用，以提供“自动完成”功能。
<output>: 定义不同类型的输出，比如脚本的输出。
1
2

अन्ये टैग्स्

<time>: 定义日期或时间。
<mark>: 定义高亮显示的文本。
<progress>: 定义任何类型的任务的进度。
<meter>: 定义已知范围或分数值内的标量测量。
<details>: 定义用户可见的或者隐藏的额外的细节。
<summary>: 定义<details>元素的可见标题。
<figure>: 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>: 定义<figure>元素的标题（caption）。
1
2
3
4
5
6
7
8

सामान्यतया प्रयुक्तानां HTML टैग्स् इत्यस्य व्यावहारिकाः प्रमुखबिन्दवः

बाह्यलिङ्कसंसाधनं लिङ्क् कुर्वन्तु

केवलं head tag इत्यस्य अन्तः उपयुज्यते, एतत् दस्तावेजस्य बाह्यसंसाधनस्य च सम्बन्धं परिभाषितुं शक्नोति, यथा बाह्यलिङ्कस्य css शैली, बाह्यलिङ्कपृष्ठस्य शीर्षकात् पूर्वं लघुचिह्नम् इत्यादयः

<!-- 外链--样式 -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- 外链--页面标题前的小图标 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
1
2
3
4

a hyperlink

हाइपरलिङ्कस्य चत्वारि प्रमुखाणि कार्याणि a tag (पृष्ठं कूर्दनं, पृष्ठे स्क्रॉलं [anchor], पृष्ठं ताजगीं, सञ्चिकां डाउनलोड्)
https://blog.csdn.net/weixin_41192489/लेख/विवरण/140217094
अनुच्छेदेषु हाइपरलिङ्क्स् योजयन्तु
क इत्यनेन प इत्यस्य स्थाने प इत्यनेन वेष्टयन्तु
```
<p><a href="">段落</a></p>
1
```

साधारणाः पाठविशिष्टाः टैगाः

br अनुच्छेदस्य अन्तः रेखाविच्छेदः

इदं केवलं p टैग्स् इत्यस्य अन्तः रेखाविच्छेदेषु प्रयोज्यम् अस्ति ।

<p>广东省<br/>广州市<br/>黄埔大道西601号</p>
1

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

span inline text

विशेषशैल्याः योजयितुं पाठस्य भागं रेखायाः अन्तः वेष्टयितुं प्रयुक्तम् ।

<p><span style="color: red">要点：</span> 不能长时间睡觉。</p>
1

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

sup superscript

<p>m<sup>2</sup></p>
1

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

उप उपलिपिः

<p>m<sub>2</sub></p>
1

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

पूर्वनिर्धारितः पाठः

अवरोधतत्त्वानि display: block

इदं सर्वाणि श्वेतस्थानवर्णानि (अन्तरिक्षाणि, नवीनरेखाः) धारयितुं शक्नोति तथा च परिणामान् अक्षुण्णान् निर्गन्तुं शक्नोति प्रायः सङ्गणकस्य स्रोतसङ्केतं प्रदर्शयितुं अस्य उपयोगः भवति ।

<pre>
你好：
      我昨天给你打了个电话。
</pre>
1
2
3
4

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

कोड कोड

inline elements इति display: inline

सङ्गणकस्य स्रोतसङ्केतः अन्यस्य यन्त्रेण पठनीयस्य पाठसामग्रीणां प्रतिनिधित्वार्थं प्रयुक्तः कोडस्य इण्डेन्टेशनस्वरूपं रक्षितुं प्रायः पूर्वटैग् इत्यनेन सह उपयुज्यते ।

कोडटैग् इत्यस्य अन्तः पाठः नियत-विस्तारेण, टेलिटाइपराइटर-शैल्याः फॉन्ट् (Courier) इत्यनेन प्रदर्शितः भविष्यति ।

<pre>
    <code>
        let a = 1;
    </code>
</pre>
1
2
3
4
5

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

सम्बन्धित टैग सूची

उल अक्रमित सूची

प्रकारविशेषणं क्रमाङ्कप्रकारं परिवर्तयितुं शक्नोति
- चक्र ठोस उत्पत्ति [पूर्वनिर्धारित] ।
- वर्ग ठोस वर्ग बिन्दु
- वृत्तं खोखले वृत्तम्

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
1
2
3
4
5

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

ol आदेशित सूची

type attribute - क्रमाङ्कप्रकारः, यथा १ (अरबीसङ्ख्याः [पूर्वनिर्धारितम्]), a, A, i, I
start attribute——गणना आरम्भबिन्दु

<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>
1
2
3
4
5

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

<ol type="a">   
    <li>嘿嘿</li>
    <li>嘿嘿</li>
    <li>呵呵</li>
</ol>
1
2
3
4
5

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

<ol type="1" start="4"> 
    <li>哈哈</li>
    <li>哈哈</li>
    <li>哈哈</li>
</ol>
1
2
3
4
5

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

सूची नीडीकरणम्

li एकः पात्रस्तरीयः टैग् अस्ति यस्मिन् ul सहितं किमपि भवितुं शक्नोति ।

<ul>
  <li>
    <b>北京市</b>
    <ul>
      <li>海淀区</li>
      <li>朝阳区</li>
      <li>东城区</li>
    </ul>
  </li>

  <li>
    <b>广州市</b>
    <ul>
      <li>天河区</li>
      <li>越秀区</li>
    </ul>
  </li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

table table

https://blog.csdn.net/weixin_41192489/लेख/विवरण/140217983

i चिह्नम्

i टैग् मूलतः इटालिकपाठस्य प्रतिनिधित्वार्थं प्रयुक्तः आसीत्, पूर्वनिर्धारितरूपेण फॉन्ट् इटालिक इफेक्ट् इत्यनेन सह, परन्तु अधुना इटालिक्स् CSS मार्गेण एकरूपेण कार्यान्विताः सन्ति । यतः i चिह्नस्य प्रथमं अक्षरम् अस्ति, अधुना चिह्नं प्रदर्शयितुं i टैग् इत्यस्य उपयोगः प्रथा अस्ति, अतः पूर्वनिर्धारितप्रवणतां रद्दीकर्तुं भवद्भिः font-style:normal इति शैलीं योजयितुं आवश्यकम्

<i style="font-style:normal">&#9742</i>
1

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

img चित्रम्

display :inline inline elements इति

समर्थिताः चित्रस्वरूपाः : jpg (jpeg), gif, png, bmp, अन्ये प्रारूपाः समर्थिताः न सन्ति, यथा psd, ai

 <img src="./ecLogo.jpg" alt="EC编程俱乐部的logo" />
1

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

src [आवश्यकम्]: बिम्बस्य सम्बोधनम्
alt [महत्त्वपूर्णम्]: यदा चित्रं प्रदर्शयितुं न शक्यते तदा अन्वेषणयन्त्राणि चित्रे प्रदर्शितसामग्रीणां स्थाने एतत् विशेषतां क्रॉल करिष्यन्ति । alt "alternate" इति शब्दात् आगतं, यस्य अर्थः संसाधनस्य स्थाने अन्यः भवति । (केचन ब्राउजर् तस्य समर्थनं न कुर्वन्ति)
चित्रस्य आस्पेक्ट् रेश्यो स्थापयितुं प्रायः केवलं विस्तारस्य, ऊर्ध्वतायाः च एकं सेट् कुर्वन्तु ।
[व्यावहारिक कौशल] प्रतिक्रियाशील चित्र
https://blog.csdn.net/weixin_41192489/लेख/विवरण/126038175
[व्यावहारिक युक्तयः] चित्राणां आलस्यपूर्णं लोडिंग् (हस्तलिखितम्)
https://blog.csdn.net/weixin_41192489/लेख/विवरण/126263221

श्रव्य श्रव्य

display :inline inline elements इति
अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

<audio controls>
  <source src="./test.mp3" type="audio/mp3" />
  您的浏览器不支持 audio 标签。
</audio>
1
2
3
4

src [आवश्यकम्]: श्रव्यसङ्केतः
प्रदर्शनं संगीतवादकं नियन्त्रयति
autoplay स्वचालितं क्रीडा
लूप् लूप् प्लेबैक
preload preload (autoplay सेट् करणसमये एतत् विशेषता अमान्यं भविष्यति)

अधः vue3 इत्यस्य उपयोगेन कार्यान्वितः सरलः संगीतप्लेयरः अस्ति ।

<script setup>
let bgMusic_ref = ref(null)

function printInfo() {
  let musicInfo = {
    //currentTime 当前播放进度（单位秒s）
    currentTime: bgMusic_ref.value.currentTime,
    //duration 音频总时长（单位秒s）
    duration: bgMusic_ref.value.duration
  }

  console.log(musicInfo)
}

function play() {
  // 播放音频
  bgMusic_ref.value.play()
}

function pause() {
  // 暂停播放音频
  bgMusic_ref.value.pause()
}

// 重新播放音频（从头开始播放）
function rePlay() {
  // 先将当前播放进度重置为 0
  bgMusic_ref.value.currentTime = 0
  // 再播放音频
  bgMusic_ref.value.play()
}
</script>

<template>
  <audio ref="bgMusic_ref" controls autoplay>
    <source src="./test.mp3" type="audio/mp3" />
    您的浏览器不支持 audio 标签。
  </audio>
  <button @click="play">播放</button>
  <button @click="pause">暂停</button>
  <button @click="rePlay">重新播放</button>
  <button @click="printInfo">打印音频信息</button>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

[व्यावहारिकयुक्तयः] स्थानीयसङ्गणके सङ्गीतं डाउनलोड् कुर्वन्तु
https://blog.csdn.net/weixin_41192489/लेख/विवरण/122680809

video video

display :inline inline elements इति

केवलं त्रीणि प्रारूपाणि समर्थयति: MP4, WebM, Ogg च अन्ये प्रारूपाः यथा flv, mkv इत्यादयः समर्थिताः न सन्ति ।

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

  <video controls>
    <source src="./test.mp4" type="video/mp4" />
  </video>
1
2
3

src [आवश्यकम्]: विडियोस्य पता
प्रदर्शनं विडियो प्लेयरं नियन्त्रयति
autoplay स्वचालितं क्रीडा
लूप् लूप् प्लेबैक
preload preload (autoplay सेट् करणसमये एतत् विशेषता अमान्यं भविष्यति)
[व्यावहारिकयुक्तयः] स्थानीयसङ्गणक-CSDN Blog इत्यत्र विडियो डाउनलोड् कुर्वन्तु
https://blog.csdn.net/weixin_41192489/लेख/विवरण/140223996

iframe एम्बेडेड् फ्रेम

display :inline inline elements इति

पृष्ठानां अन्तः जालपृष्ठानि एम्बेड् कुर्वन्तु

<iframe src="https://www.w3school.com.cn/index.html"></iframe>
1

src [आवश्यकम्]: अन्येषां जालपुटानां पता

सम्बन्धित टैग प्रपत्र

बटन बटन

display :inline-block inline elements इति

<button onclick="alert('你好!')">点击我！</button>
1

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

HTML विशेषवर्णान् प्रतिपादयति

स्वभावः	वर्णेतु	कोड
स्थानं	अभङ्गः अन्तरालः
<	न्यूनम्	<
>	अस्मात् महत्तरम्	>
©	प्रतिलिपिधर्मः	©
&	एम्परसैण्ड्	& .

अधिकविशेषवर्णानां कृते "html, js, css च विशेषवर्णाः कथं लिखितव्याः इति सारांशः" इति पश्यन्तु ।
https://www.cnblogs.com/starof/p/4718550.html इति ग्रन्थः

सामान्य HTML टैग् इत्यस्य व्यावहारिकं उदाहरणम्

पृष्ठ विन्यास

vue3 [व्यावहारिक] शब्दार्थ मुखपृष्ठ विन्यास-CSDN Blog
https://blog.csdn.net/weixin_41192489/लेख/विवरण/140215515
CSS [व्यावहारिक] "Siheyuan" लेआउट-CSDN ब्लॉग
https://blog.csdn.net/weixin_41192489/लेख/विवरण/139243680

प्रौद्योगिकी साझेदारी

HTML [व्यावहारिक पाठ्यक्रमः] (2024 नवीनतम संस्करणम्)

मूलविचार——शब्दार्थीकरण

html सञ्चिकानां मूलभूतसंरचना

html टैग्स् इत्यस्य वर्गीकरणम्

inline elements इति

अवरोधतत्त्वानि

HTML मध्ये प्रतिस्थापनतत्त्वानि

HTML5 नवीन टैग्स

सामान्यतया प्रयुक्तानां HTML टैग्स् इत्यस्य व्यावहारिकाः प्रमुखबिन्दवः

बाह्यलिङ्कसंसाधनं लिङ्क् कुर्वन्तु

a hyperlink

साधारणाः पाठविशिष्टाः टैगाः

br अनुच्छेदस्य अन्तः रेखाविच्छेदः

span inline text

sup superscript

उप उपलिपिः

पूर्वनिर्धारितः पाठः

कोड कोड

सम्बन्धित टैग सूची

उल अक्रमित सूची

ol आदेशित सूची

सूची नीडीकरणम्

table table

i चिह्नम्

img चित्रम्

श्रव्य श्रव्य

video video

iframe एम्बेडेड् फ्रेम

सम्बन्धित टैग प्रपत्र

बटन बटन

HTML विशेषवर्णान् प्रतिपादयति

सामान्य HTML टैग् इत्यस्य व्यावहारिकं उदाहरणम्

पृष्ठ विन्यास

व्यक्तिगत प्रोफाइल

मम सम्पर्कसूचना