Html入门第一课
内容目录
- 写出html文档结构,并解释每个成员的功能与作用
- 演示布局元素,重点是 tag+class
- 演示图文的语义化解决方案
- 演示图像,链接与列表元素
（1）HTML文档结构，及其功能和作用
1. HTML的文档结构及其作用和功能
HTML文档包含文档类型元素、根元素、头元素、页面主题
<!-- 1.文档类型元素，告知浏览器这是一个什么类型的页面--><!DOCTYPE html><!-- 2.根元素：html文档的起点或入口lang是语言的意思，Zh-CN是中文的意思--><html lang="zh-CN"><!-- 头元素：告知浏览器使用的编码、适配网页、视窗和标题--><head><!-- UTF-8是普遍使用的中文编码--><meta charset="UTF-8"><!-- 适配的网页浏览器版本--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 视窗，可设置窗口自适应或固定窗口大小--><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 网页标题--><title>Document</title></head><body><h1>这是大标题的样式</h1></body></html>
2. 演示布局元素,重点是 tag+class
布局一般包含页眉、正文和页脚三个板块
页眉一般使用header、正文一般使用main、页脚一般使用footer表示
一般我们都会使用标间+元素的形式进行表示例如：<!-- “div”就是标签，Class就是元素--><div class="header">页眉</div><div class="main">正文</div><div class="footer">页脚</div>
3.演示图文的语义化解决方案
演示图文一般包含两种解决方案，一种是利用div的传统标签，另一种是使用figure语义化标签，figure可创建带标题的内容，而div操作起来比较麻烦
代码：
<figure><!-- 图片 --><a href=""><img src="https://img.php.cn/upload/course/000/000/068/6396fa6140e14800.png" alt="" /></a><!-- 文字 --><figcaption>第二十二期_前端开发</figcaption></figure>
传统化div标签直接使用img标签和p标签即可
4. 演示图像,链接与列表元素
4.1 图像演示
<img src="图片地址" alt="图片的名称" width="图片的宽度" />
4.2 链接演示
<!--默认是当前窗口打开--><a href="链接地址">链接名称</a><!--新的窗口打开--><a href="链接地址" target="_blank">链接名称</a><!--通过按钮访问--><a href="链接地址" target="_blank"><button>按钮名称</button></a><!--通过图片点击--><a href="链接地址" target="_blank"><img src="图片地址" alt="图片名称"/></a>
4.3 列表元素
列表分为有序列表、无序列表和自定义列表三种形式
- 有序列表
<ol><li><a href="">列表一</a><li><li><a href="">列表二</a><li><li><a href="">列表三</a><li></ol>
- 无序列表
<ul><li><a href="">列表一</a></li><li><a href="">列表一</a></li><li><a href="">列表一</a></li></ul>
自定义列表由dl、dt、dd三部分组成，一般用作关于我们、友情链接等多级菜单方向
<dl><!--表题--><dt>你叫什么:</dt><!--内容--><dd>我叫小白客</dd></dl>