HTML是前端开发中最基础、最重要的技术之一。它是一种标记语言，用于创建网页结构和内容。无论是浏览器、手机还是其他设备，几乎所有的网页都是使用HTML构建的。在这篇博客中，我们将从四个方面简单介绍HTML。

一、重点内容：

什么是前端？什么是HTML？
HTML的基本语法.
HTML中的常见标签.
HTML语义化的理解.

二、详细知识点介绍：

1.前端与HTML

什么是前端？前端是使用前端技术栈解决多端人机交互功能的工程师.

什么是HTML? 即 HyperText Markup Language,超文本标记语言.

2.HTML的基本语法

标签和属性不区分大小写,但是推荐原生标签用小写,自定义组件的标签用大写.
空标签可以不闭合,比如 input, img, meta 等等
属性值推荐使用双引号包含,某些属性值可以省略,例如required(属性值默认为Ture)

3.HTML常见标签

标题标签: <h1></h1>到<h6></h6>字体大小逐渐变小.
列表标签: 有序<ol>,无序<ul>,自定义<dl><dt><dd>
链接标签: <a>超链接,属性值href代表跳转的地址,target设置当前页面打开还是新建页面打开.
多媒体标签: <img>,<audio>,<video>,属性值src资源路径,alt替代性文本,加载失败或不被加载时显示,controls显示播放控件.
文本类标签: 短引用:<q>具体内容,<cite>章节或标题.长引用:<blockquote>.单行代码<code>,多行代码<pre><code></code></pre>.斜体<em>,粗体<strong>
页面划分标签: header,nav放导航相关的内容,main,artical放主体内容,aside放广告或相关推荐,footer放版权本案信息.
input标签: 种类繁多,详情见实践练习例子部分.

4.HTML语义化

简短概括：传达内容而非传达样式

是什么？

HTML中的元素、属性及属性值都拥有某些含义.
开发者应该遵循语义来编写HTML,例如有序用ol无需用ul等等

为什么？

利于开发者修改维护页面
利于搜索引擎SEO优化
利于提升网页的无障碍性

怎么做？

了解每个标签和属性的含义
思考什么标签最适合
不使用可视化工具自动生成代码

三、实践练习例子：

此处仅收录input标签的例子,并且只给出了主体代码部分

<input type="text" placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-01-01">
<!-- 多选 -->
<p>
    <label for=""><input type="checkbox">⚽</label>
    <label for=""><input type="checkbox" checked>🏀</label>
</p>
<!-- 单选 -->
<p>
    <label for=""><input type="radio" name="fruits">🍎</label>
    <label for=""><input type="radio" name="fruits">🍏</label>
</p>
<!-- 下拉选项 -->
<p>
    <select name="" id="">
        <option value="">🍦</option>
        <option value="">🍵</option>
        <option value="">🍬</option>
    </select>
</p>
<!-- 文本提示选项 -->
<p>
    <input list="NameList">
    <datalist id="NameList">
        <option>zbwer</option>
        <option>Fs Anna</option>
        <option>duoluoluo</option>
    </datalist>
</p>

常见类型总结

type的属性值	描述
text	输入文本类型
number	仅允许输入数字类型
range	通过拖动控件实现输入一个范围
date	输入日期类型
checkbox	多选框
radio	单选框
password	密码类型,输入时不可见

常见属性总结

属性	描述
placeholder	输入内容为空时的提示词
min / max	设置输入内容的最大最小值
name	给每个radio赋值相同的name实现单选效果
checked	默认选中

初识HTML | 青训营