[ 前端与 HTML]

HTML(HyperText Markup Language)基础知识

• HyperText : 图片、标题、链接、表格
• Markup Language : 标签

HTML语法

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，如input，meta
• 属性值推荐用双引号包裹
• 某些属性值可以省略，如required、readonly

HTML基础标签

标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

段落

段落是通过<p>标签进行定义的。

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

链接

HTML 链接是通过 <a href> 标签进行定义的。

target="_blank" 新窗口打开的样式

<a href="https://www.baidu.com/">百度</a>
<a href="https://www.baidu.com/" target="_blank">baidu</a>

图像

HTML 图像是通过 <img> 标签进行定义的。

<img src="https://pic.imgdb.cn/item/63ac378308b683016317b2e2.jpg" width="380"/>

音频

HTML 音频是通过<audio>标签进行定义的。

<audio src="http://m10.music.126.net/20230115163724/4675a59f03a16e5e337b1cc72faf86d2/ymusic/95c7/fc74/a18d/a495f292f32b81beccf8cb9b5eeaf5dc.mp3" controls></audio>

视频

HTML 音频是通过<video>标签进行定义的。

<video src="/assets/video.mp4" controls ></video>

列表

有序列表

<ol> 标签用来表示有序列表

<ol>

<li>a</li>

</ol>

<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>

无序列表

<ul>标签用来表示有序列表

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

定义列表（key-val类型）

dt:标题

dd:对应的值

多对多的关系

<dl>
    <dt>author:</dt>
    <dd>An Xinrui</dd>
    <dt>about</dt>
    <dd>handsome</dd>
    <dd>clever</dd>
</dl>

输入

<input>标签

• placeholder: 默认占位符

• type=

  • "range":滑动块
  • "number":用户输入数字，可以设置最大值最小值
  • "data":用户输入日期，可以设置起止日期
  • "radio":用户

<input placeholder="请输入用户名"><br/>
​
<input type = "range"><br/>
​
<input type="number" min = "1" max="10"><br/>
​
<input type="date" min="2002-12-10"><br/>
​
<textarea>Hey</textarea><br/>

<textarea> 标签

当用户需要输入很多行的时候使用

选择

<input tpye=

• "checkbox" :用户选择多个选项
• "radio":选择一个选项

<p>
    <label><input type="checkbox"/>apple</label>
    <label><input type="checkbox" checked />pair</label>
</p>
​
<p>
    <label><input type="radio" name = "sport"/>apple</label>
    <label><input type="radio" name = "sport" />pair</label>
</p>

<selsect><option><option></select> 下拉选择

<p>
    <select>
        <option>a</option>
        <option>b</option>
        <option>v</option>
    </select>
</p>

用户自由输入，给用户提示

<input list="countries" />
<datalist id="countries">
    <option>Greece</option>
    <option>United Kingdom</option>
    <option>United States</option>
</datalist>

文本类标签

引用

• 长引用

<blockquote cite="https://baike.baidu.com/item/%E9%95%BF%E6%81%A8%E6%AD%8C/22524">
    <p>迟迟钟鼓<strong>初长夜</strong>，耿耿星河<em>欲曙天</em> </p>
</blockquote>

• 短引用<cite>(用于引用章节)

<p><cite>diyizhang</cite></p>

• <q>（引用内容）

<p>
    在<cite>第一章</cite>,我们讲过<q>字符串是不可变量</q>
</p>

• <code>引用代码，<pre><code>引用长代码

<p>
    <code>const</code>声明创建一个只读的常量
</p>

<pre>
    <code>
        const int a = 1;
        const int b = 2;
    </code>
</pre>
​

强调

• <strong>强调时期的重要
• <em>语气上强调