HTML学习笔记
HTML
Hyper Text Markup Language(超文本标记语言)
W3C标准包括：
结构化标准语言(HTML,XML)
表现标准语言(CSS)
行为标准(DOM,ECMAScript)
vscode新建html文件：！+ Tab
<!DOCTYPE html> <!--告诉浏览器我们使用什么规范-->
<html lang="en">
<!--crtl+/ 注释快捷键-->
<!---->
<!-- head 代表网页头部 -->
<head>
<!-- meta网页描述,用来描述网站的一些信息
一般用来做SEO
-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页标题 -->
<title>我的第一个网页</title>
</head>
<!-- body代表网页主题 -->
<body>
</body>
</html>
显示： vs code :AIT+B
基本标签
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 注释
- 特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本标签</title>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 段落标签 -->
<p>两只老虎爱跳舞</p>
<p>小兔子乖乖</p>
<p>把门开开</p>
<!-- 水平线标签 -->
<hr/>
<!-- 换行标签 -->
两只老虎爱跳舞<br/>
小兔子乖乖<br/>
把门开开<br/>
<!-- 粗体斜体 -->
<h1>字体样式标签</h1>
粗体：<strong>I love you</strong>
<br/>
斜体：<em>I love you </em>
<br/>
<!-- 注释和特殊符号 -->
空 格：
<br/>
空 格：
<br/>
>:>
<br/>
<:<
<br/>
<br/>
©版权所有CC
</body>
</html>
图像标签
img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像标签学习</title>
</head>
<body>
<!-- img学习
src:图片的地址
相对地址（推荐），绝对地址
../ --上一级目录
alt:图片名字（必填）图片无法显示时会显示图片名字
-->
<img src="../website/image/马1.png" alt="马男1" title="悬停文字" width="400" height="300">
</body>
</html>
链接标签
- 文字、图片链接
- 功能性链接：邮箱，QQ
- 锚链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接标签学习</title>
</head>
<body>
<!-- 锚链接：使用name作为标记 -->
<a name="top">顶部</a>
<br/>
<!--a标签
href:必填，表示要跳转到哪个页面
target:表示网页在哪里打开
_blank 在新标签页打开
_self 在本网页跳转
-->
<a href="../website/1.第一个网页.html" target="_blank">点我跳转页面</a>
<br/>
<a href="https://www.google.com.us/" target="_self">点我跳转谷歌</a>
<br/>
<!-- 图像超链接 -->
<p>
<a href="../website/1.第一个网页.html">
<img src="../website/image/马1.png" alt="马男波杰克" title="悬停文字" width="400" height="300">
</a>
</p>
<br/>
<!-- 锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<br/>
<a name="down">底部</a>
<br/>
<!-- 功能性链接
邮件链接：mailto
QQ链接
-->
<a href="mailto:1145245603@qq.com">点击联系我</a>
<br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1145245603&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:1145245603:53" alt="点我领取大电影" title="点我领取大电影"/></a>
<br/>
</body>
</html>
块元素
无论内容多少，该元素独占一行:(p,h1-h6...)
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行:(a,strong.em...)
列表
- 有序列表
- 无序列表
- 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表学习</title>
</head>
<body>
<!-- 有序列表
应用范围：试卷、问答、、、
-->
<ol>
<li>python</li>
<li>java</li>
<li>c</li>
<li>前端</li>
<li>后端</li>
</ol>
<!-- 无需列表
应用范围：导航，侧边栏、、、
-->
<ul>
<li>python</li>
<li>java</li>
<li>c</li>
<li>前端</li>
<li>后端</li>
</ul>
<!-- 自定义列表
dl:标签
dt：列表名称
dd：列表内容
应用范围：公司网站底部
-->
<dl>
<dt>学科</dt>
<dd>python </dd>
<dd>java </dd>
<dd>C</dd>
<dd>前端</dd>
<dd>后端</dd>
<dt>分数</dt>
<dd>99</dd>
<dd>98</dd>
<dd>95</dd>
<dd>90</dd>
<dd>90</dd>
</dl>
</body>
</html>
表格
- 行tr、列td
- 跨行rowspan、跨列colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格学习</title>
</head>
<body>
<!-- 为什么使用表格table
简单通用
结构稳定
基本机构：
单元格
行:tr (table row)
列:td (table data cell单元格)
跨列:colspan
跨行：rowspan
-->
<!-- border:边框 -->
<table border="1px">
<tr>
<!-- colspan 跨列 -->
<td colspan="4">1-1</td>
</tr>
<tr>
<!-- rowspan 跨行 -->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格作业</title>
</head>
<body>
<!-- 表格
border：表格边框
cellpadding:单元格间距，默认为1px
cellspacing:单元格间距：默认为2px
-->
<table border="2px" cellpadding="0px" cellspacing="2">
<tr>
<td colspan="3" style="text-align:center">学生成绩</td>
</tr>
<tr>
<td rowspan="2" >狂神</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">CC</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
</body>
</html>
媒体元素
- 音、视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体元素学习</title>
</head>
<body>
<!-- 音频和视频
controls:控制条
autoplay:自动播放
-->
<video src="../website/video/滚就滚.mp4" controls>滚就滚</video>
<br/>
<audio src="../website/video/李志.下雨.mp3" controls autoplay>下雨</audio>
</body>
</html>
页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或者页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面结构学习</title>
</head>
<body>
<header><h2>网页头部</h2></header>
<section><h2>网页主体</h2></section>
<footer><h2>网页脚部</h2></footer>
</body>
</html>
内联框架
- iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内联框架学习</title>
</head>
<body>
<!-- 内联框架
src: 引用页面地址
name:框架标识名
-->
<iframe src="https://space.bilibili.com/20869470" frameborder="0" width="500" height="300"></iframe>
<br/>
<!-- 通过 a标签在iframe 里添加内容,若无target则网页不会跳转到 iframe里-->
<iframe src="" name="hello" frameborder="0" width="500" height="300"></iframe>
<a href="https://www.baidu.com" target="hello">点击跳转</a>
<!-- bilibili的分析链接 -->
<!-- <iframe src="//player.bilibili.com/player.html?aid=69246026&bvid=BV1RE411977A&cid=120012810&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> -->
</body>
</html>
表单
- from[get/post]
- 文本框
- 密码框
- 单选框
- 多选框
- 下拉框
- 按钮
- 滑块
- 。。。
表单元素格式
| 属性 | 说明 |
|---|---|
| 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时，指定按钮是否被选中 |
表单的应用
-
隐藏域 hidden
-
只读 readonly
-
禁用 disabled
表单初级验证
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!-- 表单 form
action：表单提交的位置，网站或者一个请求处理地址
get,post:提交方式
get:可以在url里看到提交信息，不安全，高效
post:后台可以看到，相对安全
placeholder：提示信息
-->
<form action="" method="get">
<!-- 文本输入框 input type="text"
value="CC":默认初始值
maxlength:最长输入字符
size:文本框长度
readonly:只读
hidden：隐藏
required:非空判断
-->
<p> 名字： <input type="text" name="username" maxlength="9" size="20" placeholder="请输入用户名" readonly></p>
<p> 密码： <input type="password" name="pwd" hidden required></p>
<p> 密码： <input type="password" name="pwd2" required></p>
<!-- 单选框 input type="radio"
value:单选框的值
name：表示组
checked：默认选项
disabled：禁用
-->
<P>性别：
<input type="radio" value="boy" name="sex" disabled>男
<input type="radio" value="girl" name="sex">女
<input type="radio" value="ET" name="sex" checked>外星人
</P>
<!-- 复选框 input type="checkbox"
value：显示在地址栏
checked：默认选项
-->
<p>爱好：
<input type="checkbox" value="football" name="hobby" checked>足球
<input type="checkbox" value="rap" name="hobby">说唱
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="eat" name="hobby">吃饭
</p>
<!-- 按钮
input type="button" 普通按钮
input type="button" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>按钮：
<input type="button" name="btn1" value="不用点击">
</p>
<br/>
<!-- 图片 图片无法显示时显示value值 -->
<P>
<input type="button" src="../website/image/马1.png" value="图片" name="img1" width="500" height="300">
</P>
<!-- 下拉框
selected 默认选择
-->
<p>国家
<select name="国籍" id="">
<option value="None">无政府</option>
<option value="USA">漂亮国</option>
<option value="China" selected>中国</option>
<option value="India">印度</option>
<option value="Seibertron">赛博坦</option>
</select>
</p>
<!-- 文本域 -->
<p>说些什么：<br/>
<textarea name="textarea" id="" cols="30" rows="10" placeholder="..."></textarea>
</p>
<!-- 文件域 input type="file"
普通按钮 input type="button,value显示在按钮上
-->
<p>上传文件：
<input type="file" name="files" >
<input type="button" value="上传" name="upload">
</p>
<!-- 邮箱验证 -->
<p>邮箱：
<input type="email" name="email">
</p>
<!-- 自定义邮箱
pattren:正则表达式
-->
<p>自定义邮箱：
<input type="text" pattern="^\\s*\\w+(?:\\.{0,1}[\\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\\.[a-zA-Z]+\\s*$">
</p>
<!-- Url -->
<p>URL:
<input type="url" name="url">
</p>
<!-- 数字 -->
<p>数字：
<input type="number" name="num" max="100" min="0" step="">
</p>
<!-- 滑块 -->
<p>音量：
<input type="range" name="volume" max="100" min="0" step="5">
</p>
<!-- 搜索 -->
<p>搜索：
<input type="search" name="search">
</p>
<!--增强鼠标可用性 -->
<p>
<label for="mark">你点我试试:</label>
<input type="text" id="mark">
</p>
<!-- 提交，重置 -->
<p>
<input type="submit">
<input type="reset" value="清空">
</p>
</form>
<br/>
© 版权CC所有
</body>
</html>
浙公网安备 33010602011771号