1.初识HTML
HTML：Hyper Text Markup Language(超文本标记语言)
超文本：文字，图片，音频 ，视频，动画等
W3C（万维网联盟，国际中立性技术标准机构）标准：
- 结构化标准语言（HTML，XML）
- 表现标准语言（CSS）
- 行为标准（DOM，ECMAScript）
HTML基本结构
注释：IDEA快捷键 “Ctrl" + “/”,
** tab键：输入h1,p等，按住tab键，即可快速生成相应标签***
<!-- DOCTYPE: 告诉浏览器使用的规范-->
<!DOCTYPE html>
<!--html: 浏览器上显示的东西必须在html内-->
<html lang="en">
<!-- head 代表网页头部-->
<head>
<!-- meta: 描述性标签，描述网站的一些信息-->
<!-- meta一般用来做SEO（Search Engine Optimization,即搜索引擎优化，即通过一定技术手段提高网站
关键词搜索排名获取更多展示，然后从自然搜索结果获得更多网站流量的过程-->
<meta charset="UTF-8">
<meta name="keywords" content="绵绵米学Java">
<meta name="description" content="只要卷不死，就往死里学">
<!-- title ： 网页标题-->
<title>我的第一个网页</title>
</head>
<!-- body 标签代表网页主体-->
<body>
Hello，World ~~~~~~~~~
</body>
</html>
网页标题如上图
meta属性用于SEO示例如上图
2.网页基本标签
标题标签，段落标签，换行标签，水平线标签，字体样式标签，注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!-- 标题标签 hx -->
<h1> 一级标签</h1>
<h2> 二级标签</h2>
<h3> 三级标签</h3>
<h4> 四级标签</h4>
<h5> 五级标签</h5>
<!--段落标签 p -->
<p> Java</p>
<p> C++</p>
<p> Python</p>
<p> Matlab</p>
<!-- 水平线标签 hr ,一般自闭合标签，可加上/，便于编码规范-->
<hr/>
<!--换行标签 br/ -->
1 <br/>
2 <br/>
3 <br/>
4 <br/>
5 <br/>
<!-- 粗体，斜体-->
<h1>字体样式标签</h1>
粗体： <strong> hello，world</strong>
斜体： <em>hello，world </em>
<br/>
<!-- 特殊符号 &*; -->
空 格
空 格
<br/>
大于： >
小于： <
版权： ©版权所有绵绵米
𝕒
</body>
</html>
3. 图像、超链接、网页布局
- 图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!-- img 学习
src: 图片地址（必填）：相对地址（推荐）和绝对地址
../ --表示上一级目录
alt: 图片名字（必填，图片无法加载则显示此内容）
-->
<img src="../html/resources/image/8463585.jpg" alt="壁纸" title="悬停文字" width="300" height="300">
</body>
</html>
- 链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!-- a 标签
href: (必填），表示要跳转的页面
target: 表示窗口在哪里打开
_blank 在新标签中打开
_self 在自己当前页面打开
-->
<a href="1.MyFirstWebPage.html" target="_blank">点击我跳转到第一个页面</a>
<br>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br>
<a href="1.MyFirstWebPage.html">
<img src="../html/resources/image/8463585.jpg" alt="壁纸" title="悬停文字" width="920" height="780">
</a>
<!-- 锚链接
1.需要一个锚标记
2.跳转到标记（用“#”表示）
-->
<a href="#top">回到顶部</a>
<a name="down">down</a>
<!--功能性标签
邮件链接：mailto
QQ链接：
-->
<a href="mailto:1508206429@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好，加我领取课程资料" title="你好，加我领取课程资料"/></a>
</body>
</html>
4. 列表、表格、媒体元素
列表：信息资源的一种展示形式。使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
列表分类：无序列表、有序列表、定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表 ol 即ordered list的缩写-->
<ol>
<li>Java</li>
<li>Python</li>
<li>C++</li>
<li>HTML</li>
</ol>
<!--无序列表 ul un...-->
<ul>
<li>Java</li>
<li>Python</li>
<li>C++</li>
<li>HTML</li>
</ul>
<!--自定义列表
dl: 标签
dt: 列表名称
dd: 列表内容
-->
<dl>
<dt>语言</dt>
<dd>Java</dd>
<dd>C</dd>
<dd>Python</dd>
<dd>Go</dd>
<dt>地点</dt>
<dd>武汉</dd>
<dd>长沙</dd>
<dd>上海</dd>
<dd>深圳</dd>
</dl>
</body>
</html>
- 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--表格table
行 tr
列 td
-->
<table border="1px">
<tr>
<!-- colspan 跨列-->
<td colspan="4">1-1</td>
<td>1-5</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">
<title>页面结构分析</title>
</head>
<body>
<header>
<h2> 网页头部 </h2>
</header>
<section>
<h2> 网页主体 </h2>
</section>
<footer>
<h2> 网页尾部 </h2>
</footer>
</body>
</html>
-
iframe内联框架
<iframe src="path" name = "mainFrame" frameborder="0"></iframe> 引用页面地址 框架标识名<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe内联框架学习</title> </head> <body> <!--<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height = "800px"></iframe>--> <iframe src="" name = "hello" frameborder="0"></iframe> <a href="1.MyFirstWebPage.html" target="hello">点击跳转</a> </body> </html>
5. 表单及表单应用（重点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1> 注册</h1>
<!--表单form
action: 表单提交的位置，可以是网站，请求处理地址等
method: post,get两种提交方式
get: 可以在url中看到提交信息，不安全，高效
post: 比较安全，适用于传输大文件
-->
<form action="1.MyFirstWebPage.html" method="get">
<!-- 文本输入框： input type="text"
value="mianmianmi" 默认初始值
maxlength="9" 最长字符长度
size="30" 文本框长度
-->
<p>名字：<input type="text" name="username" placeholder="请输入用户名" required ></p>
<p>密码：<input type="password" name="pwd" value="123456" hidden></p>
<!-- 单选框标签：radio
input type="radio"
value: 单选框的值
name: 表示组，比如性别，只有两者全在一个sex组里，才能提供单选功能，否则和多选一样
-->
<p>性别：
<input type="radio" value="boy" name="sex" checked disabled/> 男
<input type="radio" value="girl" name="sex"/> 女
</p>
<!-- 多选框
input type="checkbox"
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby"> 睡觉
<input type="checkbox" value="code" name="hobby" checked> 敲代码
<input type="checkbox" value="game" name="hobby"> 游戏
<input type="checkbox" value="chat" name="hobby"> 聊天
</p>
<!-- 按钮
input type="button" 普通按钮
input type="image" 图片按钮
input type="submit" 提交按钮
input type="reset" 重置（2021.11.8无法清空默认值的名字选项）
-->
<p> 按钮
<input type="button" name="btn1" value="点击变长">
<!-- <input type="image" src="resources/image/8463585.jpg">-->
</p>
<!-- 下拉框，列表框
-->
<p>省份
<select name="列表名称">
<option value="Jiang Su" >江苏</option>
<option value="Hu nan" selected>湖南</option>
<option value="Shen">深圳</option>
<option value="guang ">广州</option>
</select>
</p>
<!-- 文本域
textarea name="textarea" cols="30" rows="10"
-->
<p>
<textarea name="textarea" placeholder="请输入你想输入的内容" cols="30" rows="10"> 文本内容</textarea>
</p>
<!-- 文件域
input type="file" name="files"
-->
<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>
<!-- 数字-->
<p>数字：
<input type="number" name="num" max="100" min="0" step="10">
</p>
<!-- 滑块-->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="10">
</p>
<!-- 搜索框-->
<p>搜索框：
<input type="search" name="search">
</p>
<!-- 增强鼠标可用性 -->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p>自定义邮箱：
<input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>
6. 表单初级验证（重点）
表单验证：缓解服务器压力，保证数据安全
正则表达式：直接百度搜索常用正则表达式即可
7 HTML总结
以上笔记来源于B站狂神说HTML学习视频总结，感恩~~~~
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
