文章目录
- 一. HTML介绍
- 二. 创建
- 三. HTML结构
- 四. 常见的标签
- 五. 链接标签
- 六. 图片标签
- 七. 资源路径
- 八. 列表标签
- 九. 表格标签
- 十. 表单标签
- 十一. 表单提交
一. HTML介绍
- HTML: 超文本标记语言
- 作用: 书写前端页面
- 前端三大技术(三大标准):
- HTML: 结构标准 (页面中有什么内容)
- CSS: 样式美化 (美化页面)
- Javascript (js): 行为标准, 交互效果, Jquery是JS的一个函数库
二. 创建
- 使用vscode, 创建带 .html 后缀的文件, 直接输入一个 ! 号, 点击回车, 即可快速生成一个 html 的基本页面
三. HTML结构
- 文档声明 (注释)
<html><head>- 设置编码
- 设置标题
- 引入和书写 css 文件
- 引入和书写 js 文件
</head><body>- 可以写其他 HTML 标签
</body>
</html>
四. 常见的标签
-
标签的分类
- 双标记标签(双标签)
<标签> 可以书写其他内容和标签 </标签>- 单标记标签(单标签)
<标签 其他内容><标签 其他内容 /> -
标题标签
<h1> 标题内容 </h1>
h1 到 h6 来表示
- 段落标签
段落前后都有换行
<p> .... </p>
- 换行标签
<br>
- 横线
<hr>
- div标签, 盒子标签, 没有特殊的含义, 一般用在布局, 添加div
<div>.....
</div>
五. 链接标签
默认是当前标签页打开新链接, 加 target='_blank' 可以在新标签页打开新链接
<a href='链接地址' target='_blank' >文字内容</a>
六. 图片标签
src属性: 图片的地址
alt属性: 1. 图片不能加载的时候, 显示的内容2. 读屏软件遇到图片读取的内容(例如 盲人使用的读屏软件)<img src="图片的地址" alt="xxxx">
七. 资源路径
- 相对路径, 从当前目录开始书写的路径, ./ 可以省略不写
- 绝对路径, 从根目录开始书写的路径, Linux 和 Mac 下使用 / 表示, Windows下使用 C: D: 表示
- 网络路径, 资源在网络中的URL地址
八. 列表标签
<!-- 有序列表 ol(order list) -->
<ol><!-- 列表中的每一项使用的标签是 li(list) --><li>pyhton</li><li>c++</li><li>go</li>
</ol>
<!-- 无序列表 ul(unorder list) -->
<ul><!-- 列表中的每一项使用的标签是 li(list) --><li>pyhton</li><li>c++</li><li>go</li>
</ul>
九. 表格标签
- 表格标签:
table - 行标签:
trtabke row - 表头标签:
thtable header - 表格中数据标签
tdtable data
十. 表单标签
- 表单概念: 手机用户输入的信息, 提交给web服务器
- input 标签属性
type- 单行文本
text - 密码框
password - 单选框
redio - 复选框
checkbox - 文件
file - 提交按钮
submit - 重置输入
reset - 普通的按钮
button
- 单行文本
- 多行文本框
textarea - 下拉框
select- 下拉选项
option
- 下拉选项
十一. 表单提交
- 直接使用默认的 GET 方式提交, 会发现多了一大串, ? 后面就是提交的参数, 表单中没有设置 name 属性的标签, 默认都是on , 选择性的还需要设置value
?name=aaa&password=213&gender=on&like=on&like=on&like=on
- 前提
- 需要提交的内容标签需要设置name属性
- 如果属性是选择性的, 还需要设置 value ,作为提交时的属性值
- form 标签的属性
action是将数据提交到指定 URL 地址, 不写的话, 默认是当前页面method是请求的方法,默认是 GET方式, 可以手动指定为 POST
