Html学习笔记
•随笔
965
0
<body> , </body>等成对的标签，分别叫开放标签和闭合标签，单独呈现的标签（空元素），如<hr/> ，意味用 "/" 关闭空元素。
HTML注释写法
<!-- 这里是注释内容 -->1.网页基本信息
<!-- DOCTYPE:告诉浏览器我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="zh">
<!-- head标签代表网页头部 -->
<head>
<!-- meta描述性标签，一般用来做 SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="第一个网页">
<meta name="description" content="这里是第一个网页的描述内容">
<!-- title网页标题 -->
<title>第一个网页</title>
</head>
<!-- body用来写网页主题内容 -->
<body>
Hello,World
</body>
</html>本节常用单词
head : 头部 ， meta : 元 ， keywords : 关键词 , description : 描述 ，content : 内容 , title : 标题 , body : 身体
2.基本标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>2.基本标签</title>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!-- 段落标签 -->
<p>会当凌绝顶</p>
<p>一览众山小</p>
<p>这一次我Html会有许多进步</p>
<!-- 水平线标签 -->
<hr/>
<!-- 换行标签 -->
会当凌绝顶<br/>
一览众山小<br/>
这一次我Html会有许多进步
<br/>
<!-- 粗体和斜体 -->
粗体：<strong>I Love You</strong>
斜体：<em>I Love You</em>
</body>
</html>3.图像标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>3.图像标签</title>
</head>
<body>
<!--
src : 图片路径（必填）
alt : 图片加载失败显示的文字（必填）
title : 鼠标悬停时显示
width : 设置宽度
height : 设置高度
-->
<img src="https://api.isoyu.com/bing_images.php" alt="图片加载失败" title="这是今天的必应每日一图" width="100%" height="100%">
</body>
</html>本节常用单词：width : 宽度 ， height : 高度
4.链接标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>4.链接标签</title>
</head>
<body>
<!-- a标签
href : 必填，表示要跳转的地址
target : 表示窗口在哪里打开
_blank : 在新标签页打开
_self : 在自己的网页中打开
-->
<a href="https://www.5iv.top" target="_blank" >点击访问昔羽记</a>
<!-- 锚链接
暂时还没有写
-->
<!-- 功能性链接 -->
<a href="mailto:root@5iv.top">root@5iv.top</a>
</body>
</html>5.列表标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>5.列表标签</title>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>CSS</li>
</ol>
<!-- ul无序列表 -->
<ul>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>CSS</li>
</ul>
<!-- 自定义列表
dl : 标签
dt : 列表名称
dd :列表内容
-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>PHP</dd>
<dd>CSS</dd>
<dt>分数</dt>
<dd>99</dd>
<dd>78</dd>
<dd>67</dd>
<dd>98</dd>
</dl>
</body>
</html>6.表格标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>6.表格标签</title>
</head>
<body>
<!-- 表格table
tr :行
td :列
colspan : 跨列
rowspan : 跨行
-->
<table border="1px">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">小佳</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="3">小星</td>
</tr>
<tr>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
</body>
</html>7.媒体标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>7.媒体标签</title>
</head>
<body>
<!-- 音频和视频
src : 资源地址
controls : 控制条
autoplay : 自动播放
-->
<!-- 视频 -->
<video src="1.mp4" controls autoplay></video>
<!-- 音频 -->
<audio src="1.mp3" controls autoplay></audio>
</body>
</html>8.页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容 |
| footer | 标记脚部区域的内容 |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
9.iframe 内联框架
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>9.iframe内联框架</title>
</head>
<body>
<!-- iframe
src : 资源地址
w-h :宽度和高度
-->
<iframe src="https://www.5iv.top" frameborder="0" width="1000px" height="800px"></iframe>
<!-- 设置点击按钮后调用 iframe 框架打开
将框架命名为 name
然后使用 a 标签 target 元素指定为名字为 name 的 iframe 框架打开
-->
<iframe src="" naframeborder="0" name="hello" width="1000px" height="800px"></iframe>
<a href="https://www.5iv.top" target="hello">点击链接打开昔羽记</a>
</body>
</html>10.表单
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>10.表单</title>
</head>
<body>
<!-- 表单
action : 表单提交的位置
method : post , get 提交方式
-->
<form action="1.php" method="get">
<!-- 文本输入框 input type = "text"
type : 输入框类型，常用的有
text : 文本 , password : 密码 , submit : 提交
reset : 重置 , radio :单选 , checkbox :多选
button : 按钮 , image : 图片按钮
value : 默认值
maxlength : 最长能写几个字符
size : 文本框的长度
hidden : 隐藏域
readonly : 只读
disabled : 禁用
-->
<p>名字： <input type="text" name="username" id="username" value="" /></p>
<!-- 密码输入框 input type = "password" -->
<p>密码： <input type="password" name="password" id="password" value=""></p>
<!-- 单选框 需要使用 name 设置为一个组
checked : 默认选中
readonly : 只读
-->
<p>性别：
<input type="radio" value="boy" name="sex" readonly>男
<input type="radio" value="girl" name="sex" checked>女
</p>
<!-- 多选框
checked : 默认选中
disabled : 禁用
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby" disabled>睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="game" name="hobby">游戏
</p>
<!-- 按钮 -->
<input type="button" value="这是一个按钮" name="bt1">
<!-- 图片按钮 需要指定图片路径-->
<input type="image" src="test.png" alt="">
<!-- 提交和重置 -->
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
</body>
</html> 11.表单扩展
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>11.表单扩展</title>
</head>
<body>
<!-- 表单
action : 表单提交的位置
method : post , get 提交方式
-->
<form action="1.php" method="get">
<!-- 下拉框 -->
<p>国家：
<select name="列表名称" id="country">
<!--
value : 选项的值
selected : 默认选择
-->
<option value="选项的值">中国</option>
<option value="选项的值">美国</option>
<option value="选项的值" selected>瑞士</option>
<option value="选项的值">印度</option>
</select>
</p>
<!-- 文本域 -->
<p>反馈：
<textarea name="textarea" id="textarea" cols="30" rows="10">文本内容</textarea>
</p>
<!-- 文件域 -->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!-- 邮箱验证 -->
<p>邮箱：
<input type="email" name="email">
</p>
<!-- URL验证 -->
<p>URL：
<input type="url" name="url">
</p>
<!-- 数字
max : 最大值
min : 最小值
step : 步长
-->
<p>数字：
<input type="number" name="num" max="100" min="0" step="1">
</p>
<!-- 滑块 -->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="1">
</p>
<!-- 搜索框 -->
<p>搜索
<input type="search" name="search">
</p>
</form>
</body>
</html> 12.表单初级验证
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>12.表单初级验证</title>
</head>
<body>
<!-- 表单
action : 表单提交的位置
method : post , get 提交方式
-->
<form action="1.php" method="get">
<!--
placeholder : 提示信息
required : 非空判断
pattern : 正则表达式
-->
<p>手机号：
<input type="text" name="phone" placeholder="请输入手机号" required pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$">
</p>
<p>账号：
<input type="password" name="password" placeholder="请输入密码" required>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
</body>
</html> 最后更新 2022-11-13