HTML（Hyper Text Markup Language）超文本标记语言
超文本包括：文字，图像，音频，视频，动画等
最新HTML5：一些新的元素和新特性 ，新的网页功能
W3C标准
Word Wide Web Consortium(万维网联盟)
- 结构化标准语言（HTML,XML）
- 表现标准语言（CSS）
- 行为标准（DOM,ECMAScript）
第一个网页
<!-- 注释
DOCTYPE:告诉浏览器，我们要使用什么文档 默认HTML5-->
<!DOCTYPE html>
<html lang="en">
<!--head标签：网页头部 -->
<head>
<!--meta标签 用来描述我们网站的一些信息 一般用来做SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="HTML,LJL学Java">
<meta name="description" content="跟着B站狂神学习">
<!--title标签：网页标题 -->
<title>我的第一个网页</title>
</head>
<!--body标签：网页主体 -->
<body>
hello,world!
</body>
</html>
基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--水平线标签-->
<hr/>
<!--段落标签-->
<p>冬眠假期刚刚结束</p>
<p>我还有点糊涂</p>
<p>鸟儿在头顶把森林叫醒</p>
<p>春天空气让我很舒服</p>
<!--换行标签-->
冬眠假期刚刚<br/>
我还有点糊涂<br/>
鸟儿在头顶把<br/>
春天空气让我<br/>
<!--粗体，斜体标签-->
<h1>字体样式标签</h1>
粗体： <strong>i love you</strong><br>
斜体： <em>i love you</em>
<br/>
<!--特殊符号-->
<strong>空格：</strong>空 格 空 格 <br/>
<strong>大于号：</strong> ><br/>
<strong>小于号：</strong> <<br>
©版权所有大林
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--图片标签
src(必填): 图片地址 分为相对地址(推荐使用) 绝对地址:带盘符的地址 一般不推荐使用 ../ : 上一级目录
alt(必填)：当图片加载失败时会显示的内容
title：鼠标悬停显示内容
width：宽
height：高-->
<img src="../resources/image/丁海寅.jpg" alt="丁海寅图片" title="丁海寅" width="720" height="720">
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--name作为标记-->
<a name ="top"></a>
<!--a标签 ：链接标签
herf：必填 表示跳转路径！
target ="_blank" 表示跳转页面会在新的标签页打开 默认是在自己页面打开
-->
<p><a href="图像标签.html">点我查看丁海寅图片</a><br>
<a href="https://www.baidu.com">点击我跳转百度</a><br>
<a href="https://baike.baidu.com/item/%E4%B8%81%E6%B5%B7%E5%AF%85/17491972?fr=aladdin" target ="_blank">
<img src="../resources/image/丁海寅.jpg" alt="丁海寅图片" title="丁海寅" width="720" height="720">
</a>
</p>
<!--锚链接：页面内跳转
1.需要一个锚标记
2.跳转到标记位
3.#+标记名-->
<a href="#top">回到顶部</a>
<a name="down"></a>
<!--功能性链接：
1.邮件链接：mailto+邮箱：
2.QQ链接：
-->
<a href="mailto:1810550961@qq.com">点击联系我</a>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷 问答
-->
<ol>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前段</li>
<li>后段</li>
</ol>
<hr/>
<!--无序列表
应用范围：导航栏 侧边栏
-->
<ul>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前段</li>
<li>后段</li>
</ul>
<!--自定义列表
dl：自定义标签
dt：列表名称
dd：列表选项
应用范围：公司网站底部
-->
<hr>
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>运维</dd>
<dd>前段</dd>
<dd>后段</dd>
<dt>学历</dt>
<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="lpx">
<tr>
<!--colspan 跨列-->
<td colspan="4">1.1</td>
<!-- <td>1.2</td>
<td>1.3</td>
<td>1.4</td>-->
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<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>
<!--视频:
src:资源路径
controls：视频控制条
autoplay：自动播放
-->
<video src="../resources/video/五杀.mp4 " controls autoplay></video>
<!--音频：
src：资源路径
controls：音频控制条
-->
<audio src="../resources/audio/PLANET.mp3 "controls></audio>
</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>
内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架学习</title>
</head>
<body>
<!--内联框架
src：资源路径
name：框架标识名
-->
<iframe src="" name="hello" width="1700px"height="800px" frameborder="0"></iframe>
<a href="https://www.baidu.com" target="hello">点击跳转</a>
</body>
</html>
form表单
初级验证：
- placeholder：文本框输入提示
- pattern：正则表达式验证输入格式
- required：非空判断
- hidden：隐藏文本框
- disabled：不可点击使用
- readonly：只读
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<!--表单form：
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
mathod：post：比较安全，传输大文件
get：get方式提交可以在url中看到我们提交的信息 ，不安全 高效
-->
<h1>登录</h1>
<form action="7.%20媒体元素.html"method="get">
<!-- 文本输入框：<input type="text"name="username">
value="LJL学习中" 默认初始值
maxlength="=10" 最大输入长度
size="30"--> 文本框长度
<p>账号：<input type="text"name="username"value="ljl"readonly></p>
<!-- 密码框：<input type="password"name="pwd"> -->
<p>密码：<input type="password"name="pwd"placeholder="请输入密码"></p>
<!-- 单选框：<input type="radio"value="boy"name="sex">男
<input type="radio"value="=girl"name="sex">女
-->
<p> 性别：
<input type="radio"value="boy"name="sex">男
<input type="radio"value="=girl"name="sex">女
</p>
<!--多选框：-->
<p>兴趣爱好：
<input type="checkbox"value="sleep" name="hobby">睡觉
<input type="checkbox"value="code"name="hobby">敲代码
<input type="checkbox"value="football"name="hobby">足球
<input type="checkbox"value="game"name="hobby">游戏
</p>
<!--按钮
<input type="button"name="btn1"value="确定"> 确定按钮
<input type="image"name="img"src="../resources/image/丁海寅.jpg"> 图片按钮
<input type="submit"name="提交" > 提交按钮
<input type="reset"name="重置"> 重置按钮
-->
<p>按钮：
<input type="button"name="btn1"value="确定">
<!-- <input type="image"name="img"src="../resources/image/丁海寅.jpg">-->
</p>
<!--下拉框 列表框 -->
<p>学位:
<select name="学位" >
<option value="本科">本科</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
</select>
</p>
<!-- 文本域-->
<p>简介：<br>
<textarea name="introduction" id="1" cols="30" rows="10"></textarea>
</p>
<!-- 文件域-->
<p>
<input type="file"name="file">
<input type="button"name="upload"value="上传">
</p>
<!--邮件验证-->
<p>邮箱：
<input type="email"name="email">
</p><!--url-->
<p>url：
<input type="url"name="url">
</p>
<p>
<input type="submit"name="提交" >
<input type="reset"name="重置"value="重置"disabled>
</p>
</form>
</body>
</html>
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
