前端基础_HTML笔记
HTML
1 概述
1.1 什么是HTML
HTML：Hyper Text Markup Language（超文本标记语言）
超文本包括：文字，图片 ，音频，视频，动画等
1.2 W3C标准
W3C
- World Wide Web Consortium（万维网联盟）
- 1994年成立，Web技术领域最权威的具影响力的国际中立技术标准机构
- http://www.w3.org/
- https://www.chinaw3c.org/
W3C标准包括
- 机构化标准语言（HTML，XML）
- 表现标准语言（CSS）
- 行为准则（DOM，ECMAScript）
1.3 常见IDE
- 记事本
- Dreamweaver
- IDEA
- WebStorm
1.4 HTML基本结构
<body>、</body>等成对出现的标签，分别叫开放标签和闭合标签，单独呈现的标签（空标签），如<hr/>;意思是用/来关闭空标签
2 网页基本信息
-
DOCTYPE声明
告诉浏览器，使用的规范，默认的就是html
-
<head>标签代表网页头部部分
-
<body>标签代表网页主体部分
-
<title>标签表示网页标题
-
<meta>标签描述性标签，它用于描述网站的信息
一般用来做SEO
2.1 html的注释
<!-- -->
快捷键：
单行：Ctrl + /
多行：Ctrl +Shitf + /
idea中标签快捷方式：
p + Tab
3 网页基本标签
基本标签
- 标题标签
- h1-h6
- 段落标签
- p
- 换行标签
- br
- 水平线标签
- hr
- 字体样式标签
- strong
- em
- 注释和特殊符号
- 注释：
<!-- --> - 空格：
- 版权符号：
©
- 注释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>
<hr>
<!--段落标签-->
<h3>段落p标签</h3>
<p>摔碎的红酒杯碎的那么美</p>
<p>空气中弥漫醉人的香味</p>
<p>脸上的耳光 甩的那么脆</p>
<p>这时候我应该假装对错无所谓</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
<h3>换行br标签</h3>
摔碎的红酒杯碎的那么美<br/>
空气中弥漫醉人的香味<br/>
脸上的耳光 甩的那么脆<br>
这时候我应该假装对错无所谓<br>
<hr/>
<!--粗体，斜体-->
<h3>粗体，斜体标签</h3>
<b>粗体字体样式b标签</b> <br/>
<i>斜体字体样式i标签</i> <br/>
<strong>粗体字体样式strong标签</strong> <br/>
<em>斜体字体样式em标签</em> <br/>
<hr/>
<!--特殊符号-->
<h3>特殊符号</h3>
空 格（4个）<br/>
空 格（4个nbsp+;）<br/>
大于：> &+gt; <br/>
小于：< &+lt; <br/>
版权：© &+copy; <br/>
<!--
特殊符号记忆方式
& ;
查百度
-->
</body>
</html>
4 图像img标签
常见图像格式：
- JPG
- GIF
- PNG
- BMP
- ……
<img src="图片地址" alt="图片资源有误显示的文字" title="悬停文字" width="x" height="y" />
<!--
src:图像地址（必填）
相对地址(推荐使用) 绝对地址（加盘符，比较固定）
../ --上一级目录
./ --根目录
alt:图像的替代文字（建议填，用于图片资源有问题时显示的文字）
title:鼠标悬停提示文字
width:图像宽度
height:图像高度
-->
5 链接a标签
<a href="path" target="目标窗口位置">链接的文字或图像</a>
<!--a标签
href:必填，表示要跳转到哪个页面
target:表示窗口在哪里打开
_blank 新窗口打开
_self 当前窗口打开
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接a标签</title>
</head>
<body>
<a name="top" >顶部</a>
<!--a标签
href:必填，表示要跳转到哪个页面
target:表示窗口在哪里打开
_blank 新窗口打开
_parent 在父窗体中打开链接，在窗口与顶级框架中，等同于_self
_self 当前窗口打开
_top 在当前窗体打开链接，并替换当前的整个窗体(框架页)，清除所有包含的框架
name 显示在名字叫name的窗口中
注：_parent，_top，name，必须结合frame的使用。
frame
使用frame（框、框架），可以将浏览器分成几个部分，每个部分再显示一个独立的页面。
-->
<a href="基本标签页path" target="_blank">跳转到基本标签页面</a>
<a href="https://www.baidu.com/" target="_self">跳转到百度</a>
<br/>
<a href="基本标签.html" target="">
<img src="path" alt="图片资源有误显示的文字" title="悬停文字" width="300" height="300" />
</a>
<!--链标记
1.需要一个链标记 可以用name
2.跳转到标记
-->
<!--锚链接-->
<a href="#top">回到顶部</a>
<!--功能性链接
邮件链接：mailto:邮箱地址
比如1111@qq.com
-->
<a href="mailto:具体qq号@qq.com">点击联系我</a>
<!--QQ推广
QQ链接
去官网自动生成
-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=具体qq号&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:具体qq号:52" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=具体qq号&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:具体qq号:51" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=具体qq号&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:具体qq号:53" alt="点击联系我" title="点击联系我"/>
</a>
</body>
</html>
6 行内元素和块元素
块元素
- 无论内容多少，该元素独占一行
- （p，h1-h6。。。）
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行
- (a，strong，em。。。)
7 列表
列表
- 有序列表
- ol li
- 无序列表
- ul li
- 自定义列表
- dl （外标签）
- dt（列表名称） dd（列表内容）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<h4>有序列表</h4>
<ol>
<li>Java</li>
<li>Python</li>
<li>前端</li>
<li>C/C++</li>
</ol>
<!--无序列表
应用范围：导航，侧边栏。。。
-->
<h4>无序列表</h4>
<ul>
<li>Java</li>
<li>Python</li>
<li>前端</li>
<li>C/C++</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
应用范围：公司网站底部
-->
<h4>自定义列表</h4>
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>前端</dd>
<dd>C/C++</dd>
<dt>位置</dt>
<dd>四川</dd>
<dd>重庆</dd>
</dl>
</body>
</html>
8 表格标签
表格
-
表格
- table
-
行
- tr
- 跨行：rowspan
-
列
- td
- 跨列：colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table
行 tr rows
列 td table data 单元格数据 column
colspan跨列
rowspan跨行
-->
<table border="1" style="text-align: center">
<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>
9 媒体元素
媒体
-
视频元素
- video
-
音频元素
- audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--音频+视频
controls:控制条
autoplay:自动播放
muted:关闭视频的声音
-->
<video src="path.mp4" controls autoplay></video>
<audio src="path.mp3" controls autoplay></audio>
</body>
</html>
10 页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面中的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用 |
| nav | 导航类辅助内容 |
11 iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架iframe</title>
</head>
<body>
<!--blbl内联框架，自动生成的-->
<!--<iframe src="//player.bilibili.com/player.html?aid=99219374&bvid=BV1w741117Di&cid=169354564&page=1"-->
<!-- scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->
<!--iframe内联框架
src:地址
w-h:宽度高度（width-height）
name:框架表示名
-->
<iframe src="https://www.bilibili.com/video/av99219374" name="blbliframe" frameborder="0" width="1000" height="800"></iframe>
</body>
</html>
12 表单语法(重点)
表单标签
- form
- action：表单提交的地址，可以是网站，也可以是一个请求处理地址
- method：提交方法 get post
表单元素input格式
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型，text，password，checkbox（单选），radio（多选），submit，reset，file，hidden，image和button，默认是text |
| name | 指定表单元素的名称 |
| value | 元素的初始值，trpe为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度，当type为text或password时，表单元素的大小以字节为单位，对于其他类型，宽度以像素为单位 |
| maxlength | type为text或password时，输入的最大字符数 |
| checked | type为redio或checkbox时，指定按钮默认选中 |
| placeholder | value为空的时候默认显示的值 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单form</title>
</head>
<body>
<!--表单form
action:表单提交的地址，可以是网站，也可以是一个请求处理地址
method:提交方法 get post
get:地址栏明文显示提交的信息，不安全，高效
post:比较安全，传输大文件
-->
<!--输入框input
value:默认初始值
maxlength:最长输入字符数
size:文本框长度
-->
<form action="" method="">
<!--文本输入框 <input type="text" /> -->
<p>用户名：<input type="text" name="username" /></p>
<!--密码输入框 <input type="password" /> -->
<p>密码：<input type="password" placeholder="" name="pwd" /></p>
<!--单选框<input type="radio">
value为单选框的值
name为指定分组，相同分组只能选一个
-->
<p>性别：
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex" checked>女
</p>
<!--多选框<input type="checkbox">
checked：默认选中
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="chat" name="hobby">聊天
</p>
<!--按钮
<input type="button"> 普通按钮
<input type="image"> 图片按钮
<input type="submit"> 提交按钮
<input type="reset"> 重置按钮
-->
<p>按钮：
<input type="button" name="bt1" value="点击">
<input type="image" src="../resources/img/starrySky.png" width="30" height="30">
</p>
<!--文件域-->
<p>文件域：
<input type="file" name="files">
<input type="button" name="upload" value="上传">
</p>
<!--下拉框，列表框
selected选中，默认第一个
-->
<p>下拉框：
<select name="地区">
<option value="">中国</option>
<option value="" selected>美国</option>
<option value="">瑞士</option>
<option value="">印度</option>
</select>
</p>
<!--文本域textarea
没有value属性,直接写在两个便签内即可
cols：几列
rows：几行
-->
<p>反馈:
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!--邮件验证-->
<p>邮箱：
<input type="email" name="email">
</p>
<!--URL验证-->
<p>URL：
<input type="url" name="url">
</p>
<!--数字验证-->
<p>数字：
<input type="number" name="number" max="100" min="0" step="10">
</p>
<!--滑块
<input type="range"
-->
<p>滑块：
<input type="range" min="0" max="100" step="2" name="voice">
</p>
<!--搜索框
<input type="range"
-->
<p>搜索：
<input type="search" name="serach">
</p>
<!--增强鼠标可用性-->
<p>
<label for="mark">你点我试试</label>
<input type="text" value="清空表单" id="mark">
</p>
<!--提交和重置-->
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
13 表单的应用
隐藏域
- hidden
只读
- readonly
禁用
- disabled
14 表单初级验证
常用方式
- 提示信息：placeholder
- 非空判断：required
- 正则表达式：pattern
浙公网安备 33010602011771号