文章目录
本文主要是狂神HTML5视频的笔记。
插播一个神奇的在线编程学习网站FreeCodeCamp
一、HTML基本结构
新建html文件就会自动给出的内容(我用的是pycharm)
标签种类简介
名称 | 格式 | 举例 | 说明 |
---|---|---|---|
闭合标签 | < xxx > < /xxx > | < html > < /html > | 成对出现 |
空标签 | < xxx/ > | < hr/ > | 单独出现,用/表示关闭空元素 |
二、第一个网页——hello world
只修改了基本框架中title和body的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
hello world !
</body>
</html>
预览结果
三、基本标签介绍
名称 | 格式 | 说明 |
---|---|---|
标题标签 | < hn > < /hn > | hn(n取1-6)表示n级标签,如h1表示一级 |
段落标签 | < p > < /p > | 段落之间会隔一行 |
换行标签 | < br/ > | 本行写完后面加换行标签。行之间紧凑 |
水平线标签 | < hr/ > | 单独一行水平横线 |
字体样式标签 | < xxx >< /xxx > | 比如xxx写strong表示加粗,em表示斜体 |
注释标签 | < !-- xxx – > | xxx是注释内容 |
特殊符号 | &xxx; |   ;是空格。> ;是大于号。< ;是小于号 。© ;是版权符号 |
1.标题标签
2.段落标签
3.换行标签
4.水平线标签
5.字体样式标签
6.特殊符号
四、图像标签
src和alt是必写项
五、链接标签
1.a标签(某页面)
2.锚标签(页面内某位置)
跳转到某页面内的标记位置
(1)本页面内跳转
下面示例用name做了标记
(2)其他页面跳转
3.功能性链接
邮件链接mailto(暂时用不到,先不写了)
六、块元素和行内元素
名称 | 特点 | 举例 |
---|---|---|
块元素 | 独占一行(没法多个挤在一行里) | 标题标签、段落标签、水平线标签等 |
行内元素 | 多个行内元素可以挤在一行里面 | 字体样式标签、图像标签、链接标签等 |
七、列表标签
有序列表、无序列表、自定义列表
八、表格标签
九、媒体元素
十、页面结构分析
十一、iframe内联框架
在一个网页里嵌套另一个网页
以B站视频为例
十二、表单
1. 初识表单post和get提交
提交方式 | 优点 | 缺点 |
---|---|---|
get | 高效 | 在url中携带提交的信息,不安全。不能提交大文件 |
post | 比较安全,可以传输大文件 |
2. 文本框、单选框