Html5 文档结构
<!--第一行告诉浏览器这个是一个html5的文档--><!DOCTYPE html><!--这个是根标签，也可以叫做根元素。lang=“en”代表属性，表示当前页面所使用的语言--><html lang="en"> <!--头元素，它的内容不在页面中显示，它是给浏览器和搜索引擎使用的。--> <head> <!--设置字符编码--> <meta charset="UTF-8" /> <!--viewport：表示可显示区域--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>php全栈开发第一节课</title> </head> <!--主体元素，用户可以看到--> <body> </body></html>
元素与属性的关系
<!--元素由双标签来表示，--><!--段落元素，它的样式分为默认样式、内部样式、内联样式三种--><style> p { color: red; }</style><p>测试文本</p><!--内联样式--><p style="color:green">测试文本2</p>
<!--三大通用属性：style\id\class--><p style="color:white">style属性</p><p id="red">id属性</p><p class="green">class属性</p>
语义化的结构元素
<!--页面结构主要分为三大块儿，分别为头部、主体、底部--><!--头部（页眉）--><header> <nav> <a href="">index</a> <a href="">news</a> <a href="">news</a> </nav></header><!--主体--><main> <section>广告</section> <article>内容区</article></main><!--底部（页脚）--><footer> <nav> <a href="">php中文网</a> <a href="">sohu</a> <a href="">google</a> </nav></footer><!--分为块元素和内联元素（行内元素）--><!--通用的块元素，作为容器来使用，可以放置任何元素--><div> <p>测试文本></p> <!--通用的行内元素，不暴露出来，应该放在一个块元素中--> <span>行内元素</span></div>
语义化的文本元素
<time>2020/07/31</time><!-- 下标 --><sub></sub><!-- 上标 --><sup></sup><!-- 地址标签 --><address></address><!-- 删除标签 --><del></del><!-- 加粗标签 --><strong></strong><!-- 代码标签 --><code></code><!-- 进度条标签 --><progress></progress>
链接元素
<body> <p> <!-- 最常用法 ，在不同的页面中跳转--> <a href="https://www.php.cn" target="_blank">php中文网</a> <!-- 下载文件 --> <a href="测试.pdf" download="file.pdf">测试文档</a> <!-- 打电话 --> <a href="tel:138103004**">服务热线</a> <!-- 发邮件 --> <a href="mailto:15898***@qq.com">邮件</a> <!-- 锚点（就是在当前页面跳转，也用A标签来写,可以添加多个锚点） --> <a href="#anchor">跳转到测试点1</a> <h3 style="margin-top:1200px;" id="anchor">测试点1</h3> </p></body>
列表元素
<!-- 无序列表 --><ul> <li>html</li> <li>css</li> <li>javascript</li></ul><!-- 无序列表的应用场景：导航 --><ul style="list-style:none"> <!-- 作用是取消前面的小黑点 --> <li><a a href="">首页</a></li> <li><a href="">新闻</a></li> <li><a href="">关于我们</a></li></ul><!-- 有序列表 --><ol> <li>吃早饭</li> <li>上班</li> <li>回家</li></ol><!-- 自定义列表 --><dl> <!-- 列表项标题 --> <dt>php</dt> <!-- 列表项内容 --> <dd>通用的服务器端编程语言</dd> <dt>mysql</dt> <dd>免费的开源数据库软件</dd></dl>
