# HTML5基础教程 > hugo中`markdown`可以直接渲染`html`,可以直接得到效果 > 但是网页基础结构却不可以编写,这样会破坏渲染过程 因此[点击例子](/demo/web/html/body.html),同时点击F12,确定效果. **页面显示空白** 但是我们可以在源代码中看到 ```html Document ``` 因此后面我们就使用独立的html文件进行学习 ## 网页结构 + www规范 + 注释的写法 `` + html: 网页 + head: 标题标签 + meta: 网站信息 + body: 网页主题 > `meta`标签处于`head`区,对用户不可见,用于对网页进行描述,一般SEO优化 ```html ``` **实现自动跳转** 因此[点击例子](/demo/web/html/autojump.html),网页显示空白,等待3S,网页自动回到本页面 实现原理 ```html ``` 头文件区添加,可以看到虽然meta没有显示,但还是存在较大用处 ## 基本标签 + 标题标签 + 段落标签 + 换行标签 + 水平线标签 + 字体样式标签 + 注释和特殊符号标签 ### 标题标签 ```html

一级标签

二级标签

三级标签

四级标签

五级标签
六级标签
``` 在HUGO中实现,但是效果会显示的很诡异,因此独立文件实现;
[点击例子](/demo/web/html/标题.html),可以看到效果;同时F12，检查元素实现 ### 段落标签 ```html

段落标签

``` 显示如下:

我是一个段落

我又是一个段落

### 换行标签 ```html
``` ### 抄录环境 + pre + code pre显示的是原始的结构文本,程序不修改其中的tab,回车空格等;[pre演示](/demo/web/html/pre.html)
code标签显示的语义化文本,显示等宽字体,但是格式被打乱[code演示](/demo/web/html/code.html)
[语义化演示](/demo/web/html/语义化.html) + var 定义程序变量 + kbd 定义用户输入 + samp 定义程序输出 ```html

定义变量user_input,用作用户的输入

接收用户的输入用户输入

执行程序的输出程序输出

``` 但是程序好像并没有产生什么效果 [演示](/demo/web/html/变量.html) ### 引用标签 ### 强调标签 ### 水平线标签 ```html
```

我在水平线标签上方

我在水平线标签下方

### 字体样式标签 ```html 普通文本无效果
普通文本加粗
普通文本粗体
普通文本斜体
普通文本斜体
普通文本下划线
普通文本下划线
普通文本删除线
普通文本删除线
普通文本下标文本
普通文本上标文本
``` 普通文本无效果
普通文本加粗
普通文本粗体
普通文本斜体
普通文本斜体
普通文本下划线
普通文本下划线
普通文本删除线
普通文本删除线
普通文本下标文本
普通文本上标文本
## 图片标签 ```html 测试 ``` ## 链接 ```html 百度一下
百度一下
``` ## 列表标签 ### 有序列表 ```html
  1. HTML
  2. CSS
  3. JavaScript
```
  1. HTML
  2. CSS
  3. JavaScript
### 无序列表 ```html ``` ### 定义列表 ```html
前端
html
CSS
JavaScript
```
前端
html
CSS
JavaScript
## 表格 ```html
1-1 1-2
2-1 2-2
```
1-1 1-2
2-1 2-2
## 页面结构分析 | 元素名 | 描述 | | ------- | ----------------------- | | header | 标题头部区域 | | footer | 标记尾部内容 | | section | web页面中一块独立的区域 | | article | 独立文章内容 | | aside | 相关页面或者内容 | | nav | 导航类辅助内容 | ## iframe内联框架 ```html ``` ## 表单 ```html

名字:

密码:

``` > 出入账户和密码,点击按钮会触发相应的 > 动作**http://url/html5/submit.html?name=mengdemao&password=1234**, > 但是此时会显示失败,因为没有处理函数.

名字:

密码: