对HTML内容进行一个总结，如有错误请评论指正，感谢！

前言

我是通过b站pink的免费课程进行学习，参考的菜鸟编程及一些其他的面试题，前端面试中对于HTML和CSS的询问并不多。所以更多的是对自学的一个总结。对于面试题和重点会标注，方便阅读

基本知识梳理

我们在vscode通过！可以快捷生成一个基本的框架我们需要了解每个标签的含义。记住常用标签。

DOCTYPE 有什么作用？怎么写？

在html文件中的第一行，但它不是**标签**
是用来声明文档类型的
DOCTYPE 声明大小写不敏感
DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）

页面出现了乱码，是怎么回事？如何解决？

没有DOCTYPE声明文档会显示
在meta标签中声明utf-8 GBK 等制式

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

title 属性和 alt 属性分别有什么作用？

是img标签上的属性

title当鼠标放在图片上会显示标题
alt当图片未加载时通过文字代替图片

HTML中的标签

列表标签的清除样式

dl/ol/ul 清除样式通过list-style:none

input标签的属性有哪些（有一家公司问了这个面试题）

type：表单类型
value：表单的值
name：表示元素名称
id：可以设置css
maxlength：该属性规定输入字段允许的最大长度

其中type有很多属性，单选框radio 复选框checkbox 按钮button 文本域textarea 选择列表select

以及在HTML5新增的一些属性

<li>邮箱<input type="email"></li>

<li>网址<input type="url"></li>

<li>日期<input type="date"></li>

<li>时间<input type="time"></li>

<li>周类型<input type="week"></li>

<li>月类型<input type="month"</li>

<li>数字<input type="number"></li>

<li>手机号码<input type="tel"></li>

<li>搜索框<input type="search"></li>

<li>颜色选择表单<input type="color"></li>

通过laber标签可以对内容和选择进行绑定比如我们输入的单选按钮男和女我们直接点击文字也能进行选取

    <label for="male">Male</label>
    <input type="radio" name="sex" id="male">
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female">

HTML5新增标签有哪些（面试题）

对于网页排版来说新增了以下标签

头部标签<hearder>
导航标签<nav>
内容标签<article>
定义文档某个区域<section>
侧边栏标签<aside>
底部标签<footer>

新增媒体标签和音频标签,以及input标签等

行内元素与块级元素的区别

块级元素自己独占一行、高度宽度可以控制常见的块级元素有h1-h6 p div ul 行内元素一行可以显示多个、宽高直接设置无效常见的行内元素有span a 等行内块元素 img input 等

关于VScode 创建标签的简写方式

#demo可以生成一个带有id的div
.demo可以生成一个带有class的div
div{你好}可以生成一个<div>你好</div>
ul>li*10可以生成一个ul包含10个li

HTML总结

前言