HTML基础

• 标签介绍

列表标签

<!--无序列表-->            //效果展示
<ul>
    <li>无序列表</li>      //·无序列表
    <li>无序列表</li>      //·无序列表
    <li>无序列表</li>      //·无序列表
</ul>

<!--有序列表-->            //效果展示
<ol>
    <li>有序列表</li>      //1.有序列表
    <li>有序列表</li>      //2.有序列表
    <li>有序列表</li>      //3.有序列表
</ol>

图片标签

<img
    width="100"
    height="100"
    src="https://xxx"    //图片来源
    alt="当图片链接失效时展示的图片文字说明"
/>

文本标签

<!--p标签及其强调内容显示-->
<p>普通文本<em>强调的内容，用斜体显示</em>。</p>
<p>普通文本<strong>强调的内容，用加粗显示</strong>。</p>

输入标签

<!--单行文本框，输入中的换行会被自动去除-->
<input type="text" placeholder="请填写文本信息" />

<!--复选框，只能点击选择框选中-->
<input type="checkbox">first checkbox
<input type="checkbox">second checkbox


<!--复选框优化，点击选项文字也可选中，交互体验好-->
<label>
    <input 
        type="checkbox"
        id="cbox1-pro"
        value="first_checkbox"
    />first checkbox
</label>

<!--选择文件-->
<input type="file" />

<!--单选框-->
<input type="radio" id="radio" />

<!--可拖动的控件-->
<input type="range" />

<!--提交按钮-->
<input type="submit" />

文本域标签（多行文本）

/**
 *多行纯文本编辑控件
 *cols表示文本域的可视宽度，rows表示文本域显示的行数
**/
<textarea name="story" rows="5" cols="20">
    this is a textarea
</textarea>

 

<kbd>：标签表示键盘元素
<pre>+<code>：标签表示代码段

• 语义化标签 （页面结构）

<nav>：导航栏标签
<article>：文章标签，包括header、section等部分
    <section>：段落/大纲
<aside>：侧边栏
<footer>：作者、文章信息等

语义化的优点：

1. 代码可读性好
2. 有利于搜索引擎识别标签，确定权重，爬取语义化标签
3. 提高页面的可访问性，残障人士的设备（屏幕阅读器等）可以根据不同的语义化标签发出不同声音，给残障人士传达不同信息，方便浏览