<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>元素可分为块元素和内联元素</p> <!--div--> <p>块元素</p> <h1>标题1</h1> <h2>标题2</h2> <ul type="circle"> <li>1</li> <li>2</li> </ul> <hr width="300px" height="300px" color="yellow"> <form> <input type="text"> <input type="password"> <input type="submit" value="上传"> </form> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> <p>内联元素</p> <a href="#">不跳转</a> <span>无特定含义</span> <em>着重语气</em> <b>粗体</b> <i>斜体</i> <strong>加重语气</strong> <p>行内块元素 不换行 但能识别宽高</p> <!--button--> <img src="1.webp" alt="出错" width="300px" height="300px"> </body> </html>
元素可分为块元素和内联元素
块元素：在页面独占一行（从上至下） 他们有width height属性，一般其包括行元素和其他块级元素
内联元素：不占一行，只占自身大小，没有width height属性，一般其不包括行元素和其他块级元素
<img>标签为内联元素 但其有width和height属性
H5的新增标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <ul> <li>1</li> <li>2</li> </ul> </div> <div> <img src="./1.webp" alt="" width="300px" height="200px"> </div> <!--div是一个容器 用来区分各个板块--> <div id="header">1</div> <div id="nav"></div> <div id="article"> <div id="section"></div> </div> <div id="silder"></div> <div id="footer"></div> <!--兼容性好 但相对复杂--> <p>新增标签：</p> <header>头部</header> <nav>导航</nav> <article> 独立的完整的内容 <section>定义文档的节 比如章节，页眉，页脚</section> 独立的完整的内容 </article> <aside>侧边栏</aside> <footer>脚部</footer> </body> </html>
新增标签不包括<div> 新增标签的目标是用来优化SEO 可以使网站排名越高，但由于浏览器的版本问题 目前有的网页仍会选择旧标签 来满足所有浏览器的使用。