狂神系列之HTML学习笔记
2024-04-15 12:35:08
HTML
超文本标记语言 — Hyper Text Markup Language
W3C标准
W3C：World Wide Web Consortium
W3C标准包括：结构化标准语言(HTML,XML)表现标准语言(CSS)行为标准(DOM,ECMAScript)1.网页基本信息
<!--告诉浏览器，使用什么规范-->
<!DOCTYPE html><html lang="en"><!--head标签代表网页头部-->
<head><!--meta描述性标签，它用来描述我们网站的一些信息--><meta charset="UTF-8"><meta name="Keywords" content="llll的主页"><meta name="description" content="记录lll的学习日常"><title>我的第一个网页</title>
</head><!--body标签代表网页主体-->
<body>hello,world</body></html>2.基本标签
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>基本标签学习</title>
</head><body><!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3><!--段落标签-->
<p>哥舒歌</p>
<p>[唐] 西鄙人</p>
<p>北斗七星高，哥舒夜带刀</p>
<p>至今窥牧马，不敢过临洮</p><!--换行标签-->
哥舒歌<br/>
[唐] 西鄙人<br/>
北斗七星高，哥舒夜带刀<br/>
至今窥牧马，不敢过临洮<br/><!--水平线标签-->
<hr/><!--字体样式标签，粗体和斜体-->
<h1>字体样式标签</h1>
粗体： <strong>you are my son</strong><br/>
斜体： <em>you are my son</em><br/><!--特殊符号-->
空 格<br/>
大于号：><br/>
小于号：<<br/>
版权符号：©<br/></body></html>3.图像标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签学习</title>
</head>
<body><!--
img标签学习
src：图片地址：相对地址，绝对地址../ 上一级目录
alt:图像的名字
title：鼠标悬停文字
-->
<img src="../resources/image/1.png" alt="小黑" title="悬停文字" width="300" height="180">
<br/><a href="4.超链接标签.html#down">down</a></body>
</html>4.超链接标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签学习</title>
</head>
<body><!--使用name作为标记-->
<a name="top">top</a>
<br/><!--
a标签
href：要跳转到那个页面
target：表示窗口在哪打开_blank 在新标签中打开_self 在自己的网页中打开-->
<a href="1.网页基本信息.html" target="_blank">页面一</a>
<br/>
<a href="https://www.baidu.com" target="_self">百度</a>
<br/><a href="1.网页基本信息.html"><img src="../resources/image/1.png" alt="小黑" title="悬停文字" width="300" height="180">
</a>
<br/><!--
锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<br/>
<a name="down">down</a>
<br/><!--
功能性链接邮件链接：mailto
-->
<a href="mailto:lihao_180319@163.com">联系</a>
<br/></body>
</html>5.列表标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表标签学习</title>
</head>
<body><!--有序列表-->
<ol><li>java</li><li>python</li><li>c++</li><li>android</li>
</ol><hr/><!--无序列表-->
<ul><li>java</li><li>python</li><li>c++</li><li>android</li>
</ul><hr/><!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
-->
<dl><dt>语言</dt><dd>java</dd><dd>python</dd><dd>c++</dd><dd>android</dd><dt>位置</dt><dd>西安</dd><dd>宝鸡</dd><dd>深圳</dd><dd>北京</dd>
</dl></body>
</html>6.表格标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格标签学习</title>
</head>
<body><!--
表格table
行：tr
列：td
--><table border="1px"><tr><!--colspan 跨列--><td colspan="3">1-1</td>
<!-- <td>1-2</td>-->
<!-- <td>1-3</td>--></tr><tr><!--rowspan 跨行--><td rowspan="2">2-1</td><td>2-2</td><td>2-3</td></tr><tr>
<!-- <td>3-1</td>--><td>3-2</td><td>3-3</td></tr>
</table></body>
</html>7.视频和音频
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>媒体元素学习</title>
</head>
<body><!--音频和视频
src：资源路径
controls：控制条
autoplay：自动播放
-->
<video src="../resources/video/1.mp4" controls autoplay width="640" height="480"></video>
<br/><audio src="../resources/audio/1.mp3" controls autoplay></audio></body>
</html>8.页面结构
页面结构分析：header：标题头部区域的内容（用于页面或页面中的一块区域）
footer：标记脚部区域的内容（用于整个页面或页面的一块区域）
section：Web页面中的的一块独立区域
article：独立的文章内容
aside：相关内容或应用（常用于侧边栏）
nav：导航类辅助内容9.iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联框架</title>
</head>
<body><!--
iframe内联框架
src：地址
name：框架标识名
-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe><a href="https://www.baidu.com" target="hello">点击跳转</a></body>
</html>10.表单
表单的应用：
隐藏，只读，禁用表单的初级验证:
placeholder 提示信息
required 非空判断
pattern 正则表达式<!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.网页基本信息.html" method="post"><!-- 文本输入框value="lihao" 默认初始值maxlength="8" 最长能写几个字符size="30" 文本框的长度readonly 只读hidden 隐藏placeholder 提示信息required 非空判断--><p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p><!-- 密码框 --><p>密码：<input type="password" name="pwd"></p><!-- 单选框input type="radio"value：单选框的值name：表示组checked 默认选中disabled 禁用--><p>性别：<input type="radio" value="boy" name="sex">男<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="char" name="hobby">聊天<input type="checkbox" value="game" name="hobby">游戏</p><!--按钮--><p><input type="button" name="btn1" value="点击"><br/><br/><input type="image" src="../resources/image/1.png" width="80" height="50"></p><!--下拉框，列表框--><p><select name="" id="列表名称"><option value="xian">西安</option><option value="baoji" selected>宝鸡</option><option value="yanan">延安</option><option value="yulin">榆林</option></select></p><!-- 文本域 --><p><textarea name="testarea" id="1" cols="10" rows="5">文本内容</textarea></p><!-- 文件域input type="file"--><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="number" max="100" min="10" step="5"></p><!-- 滑块 --><p>音量：<input type="range" name="voice" min="0" max="100" step="2"></p><!-- 搜索框 --><p>搜索：<input type="search" name="search"></p><!-- 增强鼠标可用性 --><p><label for="mark">你点我试试</label><input type="text" id="mark"></p><p>自定义邮箱<input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"></p><p><input type="submit"><input type="reset"></p>
</form></body>
</html>狂神系列之HTML学习笔记相关推荐
- Rancher 系列教学视频学习笔记（1）
Rancher 系列教学视频-学习笔记(1) 一.培训视频学习笔记1<容器管理平台Rancher官方介绍>(Rancher 1.0 发布) 视频地址:http://v.youku.com/ ...
- SQL Server 2008中SQL应用系列及BI学习笔记系列--目录索引 @邀月
邀月 的数据库学习 http://www.cnblogs.com/downmoon/archive/2011/03/10/1980172.html SQL Server 2008中SQL应用系列及BI ...
- SQL Server 2008/2012中SQL应用系列及BI学习笔记系列--目录索引
SQL Server 2008中的一些特性总结及BI学习笔记系列,欢迎与邀月交流. 3w@live.cn ◆0.SQL应用系列 1.SQL Server 2008中SQL增强之一:Values新用途 ...
- 吴恩达《机器学习系列课程》学习笔记（一）
大家都想做在线教育,结果最后,B 站反而更像中国的 YouTube. 在 B 站上看到吴恩达的<机器学习系列课程>,看了看发现挺有意思,就梳理一下在此形成学习笔记. 第一节:前言 机器学习 ...
- 【狂神说】Docker 学习笔记【基础篇】
学习思想而非学技术,技术日新月异,唯有思想长盛不衰,润泽后生 学习资料: [狂神说Java]Docker最新超详细版教程通俗易懂_哔哩哔哩_bilibili Docker快速入门总结笔记_huangj ...
- 【狂神说】MySQL学习笔记01----初识MySQL
狂神说MySQL系列连载课程,通俗易懂,基于MySQL5.7.19版本,欢迎各位狂粉转发关注学习. 狂神说B站MySQL视频教程请点这里 1.初识MySQL JavaEE:企业级Java开发.Web ...
- 【狂神说】CSS学习笔记
参考B站狂神说教学视频,文末附有链接 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) 美化网页(文字,阴影,超链接,列表,渐变-) 盒子模型 浮动 定位 ...
- Java并发39:Executor系列--ScheduleExecutorService接口学习笔记
[超级链接:Java并发学习系列-绪论] 本章主要学习ScheduleExecutorService接口. 1.ScheduleExecutorService接口概述 @since 1.5 Sched ...
- 狂神说Java-多线程学习笔记
线程简介 多任务:边吃饭边玩手机,同时做多件事(但是实际上是分时进行的,大脑分时处理,时间交替很快) 多线程:多车道,多条线路同时执行任务 普通方法调用和多线程 直接调用run和调用start函数的不 ...
最新文章
- Oracle Data Guard 理论知识
- Aim Controller:所有游戏都支持的PSVR
- 完善的仿京东电商开源项目
- 四个好用却可能不为人所熟知的Pandas函数，建议收藏！！！
- C语言学习之从键盘输入任意一个字母，输出它的对应大（小）写
- 洛谷P4742（tarjan缩点+拓扑DP）
- HDFS分布式文件系统设计原理
- Spring Cloud Alibaba —— Sentinel 详细使用
- 「雕爷学编程」Arduino动手做（36）——WS2812B 4位彩灯模块
- Vue 实践过程中的几个问题
- Dijkstra算法图文详解和C++代码
- ImageView的属性android:scaleType
- 流体力学有限元法（一）
- Python的三目表达式and简短语法
- OSError解决办法
- css扁平化设计,从一个web前端开发者的角度来看扁平化设计的5大优点
- 单例模式在JavaScript与TypeScript中的几种设计方式
- winscp，winscp连接
- Arnold材质节点篇- GPU渲染从入门到放弃
- Displayport 连接、握手时序