- A+
所属分类：Web前端
HTML学习笔记
目录
初识HTML
HTML：（Hyper Text Markup Language）超文本[1]标记语言
发展史：由HTML4.0 -> XHTML2.0 -> HTML5.0
优势： 1.全球知名浏览器对HTML5的支持 2.市场需要 3.天然跨平台
管理： W3C标准
-
由万维网联盟[2]管理
-
W3C标准包括：
结构化标准：（HTML，XML）
表现化标准：（CSS）
行为化标准：（DOM，ECMAScript）
常见的IDE：IDEA
HTML基本结构
< head >标签为html的头部
< body >标签为html的主体
像< body >< /body >等类似成对存在的标签分别叫开放标签和闭合标签
而像< br/ >只有一个标签的称为自闭合标签。自闭合标签的/是因为习惯而添加的。
网页基本信息如下：
要知道这几个是什么
- DOCTYPE
- < title> 标签
- < meta >标签
<!--DOCTYPE:告诉浏览器我们要使用什么规范，去掉也可以，默认html--> <!--DOCTYPE的意思是Docment Type(文档类型)--> <!DOCTYPE html> <!--html 总标签，内容在这里面写才会显示--> <html lang="en"> <!--head：网页头部--> <head> <!--meta：描述性标签，一般用来描述我们网站的一些基本信息，一般用来做SEO--> <meta charset="UTF-8"/> <meta name="kegwords" content="生命之源"/> <!--title：网页标题--> <title>我的第一个网页</title> </head> <!--body：网页主体--> <body> Hallo Werld </body> </html> 而为html的注释符可用ctrl+/调出
网页基本标签
需要知道这几个是什么
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2.网页基本标签</title> </head> <body> <!--标题标签--> <h1>一级标题</h1> <h2>二级标题</h2> <h6>六级标题</h6> <!--段落标题--> <p>这是第一段</p> <p>这是第二段</p> <p>这是第三段</p> <!--换行标签--> 这是第一段 <br/> 这是第二段 <br/> <!--水平线标签--> <hr/> <!--字体样式标签--> <!--粗体:<strong> 斜体:<em>--> 粗体:<strong>这是粗体</stong> <br/> 斜体: <em>这是斜体</em> <!--注释和特殊符号--> <!--特殊符号记忆方式:不需要完全记,下面记住常用的就行,需要其他特殊字符可以百度--> 空格: <br/> 大于符号:> <br/> 小于符号:⁢ <br/> 版权所有:© </body> </html> 段落标签可用快捷键p+ctrl创建
图像标签
需要知道这几个是什么：
- 图像标签
- 图像标签相关参数
- 相对路径和绝对路径
常见的图像格式：JPG，GIF，PNG，BMP
在HTML里面图像标签< img >
<img src="" alt=""> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3.图像标签</title> </head> <body> <!--图像标签:<img src="" alt="" title="" width="" hegth="">--> <!-- src:图片地址 alt:图像替代文字 :图像未加载出来的提示文字 title:鼠标悬停时文字 width:图像宽度 height:图像高度 --> </body> </html> 图像地址分为绝对路径和相对路径
绝对路径：一般从盘符开始的路径为绝对路径（不推荐）
相对路径：用../这样的路径（推荐）
链接标签
要知道这几点：
- 链接标签
- 文字链接标签和图片链接标签
- 锚链接
- 功能性标签：qq邮箱标签和邮箱标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>4.链接标签</title> </head> <body> <!--链接标签：a标签--> <!--<a href="path" target="目标窗口位置">链接文本或图像</a>--> <!-- href:要跳转的页面 target:表示窗口在哪里打开 _blank:在新窗口打开 _self：在本网页打开 --> <a href="" target="_blank"></a> </body> </html> 链接标签分为文字链接标签和图像链接标签
文字链接标签
<a href="https://www.baidu.com/" target="_blank">这个是百度</a> 图像链接标签
<a href="https://www.baidu.com/" target="_blank"> <img src="<!--这里面是图像地址-->" alt="<!--这里是鼠标提示文字-->"> </a> 超链接
页面间链接
从页面间链接到另一个页面
锚标签
- 需要一个标记：用name参数
- 点击标记：需要一个＃号
<a name="top">顶部</a> <a href="#top">点击回到顶部</a> #页面内跳转 <a href="https://www.baidu.com/#top">点击转到百度</a> #页面外跳转 功能性标签
邮箱链接
在href里面输入mailto：XXXX(邮箱地址)点击链接后跳转到邮箱
<!--在mailto后跟上邮箱即可建立邮箱链接--> <a href="mailto:[email protected]">点击跳转到邮件</a> QQ邮箱链接
进入qq推广->推广工具
行内元素和块元素
块元素:无论内容多少，该元素占一行，如(p,h1-h6,……)
行内元素：内容撑开宽度，左右都是行内元素，可以排在一行，如(a,strong,em)
简单分辨：输入标签后，不会换行就是行内元素，会换行就是块元素
列表
需要知道一下几点：
- 有序列表由什么标签构成
- 无序列表由什么标签构成
- 自定义列表由什么标签构成
有序列表
由< ol >[3]和< li >标签构成
<ol> <li>生</li> <li>命</li> <li>之</li> <li>源</li> </ol> 应用范围：试卷，问卷
无序列表
由< ul >[4]和< li >标签构成
<ul> <li>生</li> <li>命</li> <li>之</li> <li>源</li> </ul> 应用范围：导航，侧边栏
自定义列表
由< dl >[5]、< dt >[6]和< dd>标签构成
<!-- dl标签：表示创建自定义列表 dt标签：表示列表名称 dd标签：表示列表内部--> <dl> <dt>年龄 <dd>18</dd> </dt> </dl> 应用范围：网页底部
表格
要知道以下几点：
- 创建表格标签
- 表格标签常用参数
为什么用表格：
简单通用
结构稳定
基本结构
单元格，行，列，跨行，跨列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>6.表格</title> </head> <body> <!--table标签：创建一个表格--> <!--border：表格加边框--> <table border="1px"> <!--tr：行标签--> <tr> <!--td：列标签--> <!--align:设置对称--> <td>1-1</td> <td>1-2</td> <!--colspan：跨列标签--> <td colspan="3">1-3</td> </tr> <tr> <!--rowspan:跨行标签--> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> <td>2-6</td> </tr> <tr> <td>3-2</td> <td>3-3</td> <td>3-4</td> <td>3-5</td> </tr> </table> </body> </html> 视频，音频
须知以下几点：
- 音频标签
- 视频标签
- 相关参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>7.视频元素</title> </head> <body> <!--视频标签：<video src="" controls="" autoplay=""></video>--> <!-- controls:控制条 autoplay:自动播放 --> <video src="链接名" controls autoplay></video> <!--音频标签：<audio src="" ></audio>--> <audio src="" controls autoplay></audio> </body> </html> 页面结构分析
这些元素只是为了语言规范，认识header，footer，nav即可
| 元素名 | 描述 |
|---|---|
| header | 标题头部局部的内容（用于页面或页面中的一块区域） |
| footer | 标题脚部局部的内容（用于整页面，或页面的一块区域） |
| section | web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
iframe：内联框架
一个网站嵌入另一个网页
<!-- iframe：内联框架 src：地址 w-h：宽度，高度 name：框架标识符 --> <iframe src="打开的路径" frameborder="0"></iframe> 表单语法
通过form标签来实现，表单提供的位置，可以是网站，也可以是请求处理的地址
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>9.表单语法</title> </head> <body> <!-- form:表单标签 method:规定如何发送表单数据 提交方式常用值 get:可以在url看见我们提交的信息，不安全，高效 post：不可在url看见我们提交的信息，较安全 action:表示向何处发送表单数据 --> <form action="1.我的第一个网页.html" method="post"> <h1>注册</h1> <p>账号： <!--文本输入框：text，同时习惯在后面加上name--> <input type="text" name="username"> </p> <p>密码： <!--密码输入框：password--> <input type="password" name="pwd"> </p> <!-- 单选标签 ：radio 初始值：value 指定表单元素名称：name 同时习惯于在标签结束后加上“/”表示标签的闭合 --> <p>性别： <input type="radio" value="boy" name="sex" checked/>男 <input type="radio" value="girl" name="sex"/>女 </p> <!--多选框：checkbox--> <p> <input type="checkbox" name="aihao" value="sleep"/>睡觉 <input type="checkbox" name="aihao" value="study"/>学习 </p> <!--按钮：butten--> <p> <input type="button" value="这是按钮"/> </p> <!--图片按钮：image--> <p> <input type="image"/> </p> <p> <!--提交：submit--> <input type="submit"/> <!--重置：reset--> <input type="reset"/> </p> <!--邮件验证：email--> <p> <input type="email" name="Email"/> </p> <!--URL:url--> <p> <input type="url" name="url"/> </p> <!-- 数字：number 步长：step --> <p> <input type="number" min="0" max="100" step="10"> </p> <!--滑块:range--> <p>滑块 <input type="range"/> </p> <!--搜素框：search--> <p> <input type="search"> </p> <!--文件域：file---> <p> <input type="file" name="file"> </p> <!--上面全是input标签的表单，下面为其他表单--> <!-- 文本域：textarea 一般文本内容写中文，容易“乱码” --> <p> <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea> </p> <!-- 下拉框标签：select 子标签：option 默认值：selected --> <p>下拉框: <select name="列表名称" > <option value="选项的值">中国</option> <option value="选项的值" selected>瑞士</option> </select> </p> </form> </body> </html> 表单元素格式
| 标签 | 描述 |
|---|---|
| type | 指定元素类型：text；password；checkbox[7]；radio[8]；submit[9]；reset[10]；file[11]；hidden[12]，image[13]和botton[14]，默认text |
| name | 指定表单元素名称，Java读取需要读取 |
| value | 初始值，type为radio时必须指定 |
| size | 初始宽度，当type为text或password时，表单元素大小以字符为单位，对于其他类型，宽度以像素为单位（一般不用） |
| maxlengh | type为password或text时，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否被选中，也就是默认选择 |
表单应用
隐藏域：hidden
只读：readonly
禁用：disabled
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10.表单应用</title> </head> <body> <!-- 隐藏域：hldden 只读：readonly 禁用：disabled --> <form action="1.我的第一个网页.html"> <p>邮箱： <input type="email" name="email" hidden> </p> <p>搜索框： <input type="search" readonly> </p> <p>图片按钮： <input type="image" disabled> </p> </form> </body> </html> 增强鼠标可用性:label
让文本框前面的字也可点击
<!--增强鼠标可用性：label--> <label for="110">点击</label> <p>邮箱： <input type="email" name="email" id="110"> 表单初级验证
为什么要进行表单验证—>减轻压力
常用方法：
placeholder：提示信息
required：非空判断
pattern：正则表达式
脚注：
