文章目录
HTML简单学习记录
简介
HTML5（超文本标记语言）是 Hyper Text Markup Language 5 的缩写，超文本包括文字、图片、音频、视频、动画等等
HTML基本结构
<body>、</body>等成对的标签，分别叫开放标签和闭合标签，单独呈现的标签（空元素），如<hr/>意为用/来关闭空元素
- DOCTYPE声明：告诉浏览器我们要使用什么规范
<title>标签<meta>标签：描述性标签，用来描述网站的信息，一般用来做SEO（搜索引擎优化）
网页基本标签
- 标题标签：
<h1>一级标签</h1>、<h2>二级标签</h2>… - 段落标签：
<p></p> - 换行标签：
<br/> - 水平线标签：
<hr/> - 字体样式标签：
粗体：<strong>i love you</strong>
斜体：<em>i love you</em> - 注释和特殊符号：
注释：<!--注释 -->
特殊符号：
空格：
大于号：>
小于号：<
版权符号：© - 特殊符号记忆方式：
以“&”开头，以“;”结尾，用“&+一个字母”可以预览特殊符号：
图像标签
<img src="path" alt="text" title="text" width="x" height="y" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<img src="../resource/image/1.jpg" alt="头像" title="悬停文字" >
</body>
</html>
其中：
- "…/"指上级目录
- src与alt是必填项，其他选填
链接标签
超链接标签：<a></a>
<a href="path" target="目标窗口位置">链接文本或图像</a>
其中：
href是必填项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">点击我在新窗口跳转到百度</a>
<a href="https://www.baidu.com" target="_self">点击我在当前窗口跳转到百度</a>
<br>
<!--头像超链接-->
<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E5%A4%B4%E5%83%8F&step_word=&hs=0&pn=95&spn=0&di=124960&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2876708552%2C1198222067&os=3794562073%2C801013625&simid=2876708552%2C1198222067&adpicid=0&lpn=0&ln=1978&fr=&fmq=1643707728507_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined©right=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=head&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_source%2F1d%2F31%2F79%2F1d3179f050039cc45f9f62a105b12c3a_8.jpg%26refer%3Dhttp%3A%2F%2Fup.enterdesk.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1646300533%26t%3D721bdd7ed82b9131d2a8f1785f0eb869&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bjgpj61jfh_z%26e3Bv54AzdH3FuwvjAzdH3Flbab0-89nnn9b_z%26e3Bip4s&gsm=5c&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDEsMiw1LDcsOCw2LDQsOQ%3D%3D">
<img src="../resource/image/1.jpg" alt="头像" title="悬停文字" >
</a>
</body>
</html>
其中：
target="_blank"表示在新窗口跳转页面；target="_self"表示在当前窗口跳转页面
超链接
锚链接
-
1.需要一个标记
-
2.跳转到标记
-
通过”#“+标记名跳转到目标标记
Title 顶部
点击跳转到顶部
其中：
- name属性已经被淘汰（
<a name="top">顶部</a>），当前流行用top属性（<a top="top">顶部</a>）
锚链接可以用来跳转到页面指定位置
功能性链接
如邮箱链接：
<a href="mailto:邮箱地址">点击联系我</a>
行内元素和块元素
- 块元素
无论内容多少，该元素独占一行 (p、h1-h6…) - 行内元素
内容撑开宽度，左右都是行内元素的可以在排在一行( a . strong . em …)
列表
列表是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式展现出来，以便浏览者能更快捷地获得相应的信息
列表的分类：
-
有序列表：
- Java
- python
- C/C++
-
无序列表
- Java
- python
- C/C++
-
自定义列表
-
学科
<dd>Java</dd> <dd>python</dd>
表格
简单通用、结构稳定
基本结构：
-
单元格
-
行
-
列
-
跨行
-
跨列
表格学习 1 2-1 2-2 2-3 2-4 3-1 3-2 3-3
其中：
<table></table>：创建表格<tr></tr>：创建行<td></td>：创建列colspan：跨行rowspan：跨列
视频和音频
视频
<video src="视频资源路径" controls autoplay></video>
音频
<audio src="音频资源路径" controls autoplay></video>
其中：
- controls：控制选项，设置视频可播放
- autoplay：自动播放
页面的简单布局
元素名
描述
header
标题头部区域的内容（用于页面或页面中的一块区域）
footer
标记脚部区域的内容（用于整个页面或页面的一块区域）
section
web页面中的一块独立区域
article
独立的文章内容
aside
相关内容或应用（常用于侧边栏）
nav
导航类辅助内容
iframe内联框架
<iframe src="path" name="mainFrame"></iframe>
表单语法
其中：
- action：表单提交的位置，可以是网站，也可以是一个请求处理地址
- method：post，get 提交方式
get方式提交可以在url中看到提交的信息，高效但不安全
post方式提交在url中无法看到提交的信息，比较安全，也用来传输大文件
表单元素格式
属性
说明
type
指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name
指定表单元素的名称
value
元素的初始值。type为radio时必须指定一个值
size
指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength
type为text或password时，输入的最大字符数
checked
type为radio或checkbox时，指定按钮是否为被选中
单选框
<!--
value：单选框的值
name：表示组
-->
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
多选框
<input type="checkbox" ...>
按钮
- input type=”button“ ：普通按钮
- input type=”image“ ：图像按钮
- input type=”submit“ ：提交按钮
- input type=”reset“ ：重置按钮（清空表单）
下拉框
<!-- selected 默认选择-->
<select name="...">
<option value="选项的值">1</option>
<option value="选项的值">2</option>
<option value="选项的值" selected>3</option>
<option value="选项的值">4</option>
</selcet>
文本域
<textarea name="..." cols="10" rows="50">文本内容</textarea>
文件域
<input type="file" name="...">
邮件验证
<input type="email" name="...">
验证比较初级
url验证
<input type="url" name="...">
验证比较初级
数字验证
<input type="number" name="..." max="100" min="0" step="1">
滑块（音量）
<input type="range" name="..." max="100" min="0" step="2">
搜索框
<input type="search" name="...">
表单的应用
-
隐藏域
如：密码：
-
只读
如：名字：
-
禁用
如：性别： 男 女
表单的初级验证
作用：
- 减轻服务器压力
- 保证安全性
常用方式：
- placeholder
- required
- pattern
558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
