html的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的internet资源连接为一个逻辑整体。html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等。
https://www.bilibili.com/video/bv1x4411v75c
<!--!doctype 告诉浏览器使用什么规范--><!doctype html><html lang="en"><!--head 网页头部--><head><!-- meta 描述性标签 描述网页信息--><!-- meta 一般用来做o--> <meta chart="utf-8"> <meta name="keywords" content="iu"> <meta name="description" content="test"><!-- title 网页标题--> <title>hello world</title></head><!--body 网页主题--><body> hello world</body></html>
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>基本标签</title></head><body><!--标题标签--><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><!--段落标签--><p>设计模式（design pattern）是前辈们对代码开发经验的总结，是解决特定问题的一系列套路。它不是语法规定，而是一套用来提高代码可复用性、可维护性、可读性、稳健性以及安全性的解决方案。</p><p>1995 年，gof（gang of four，四人组/四人帮）合作出版了《设计模式：可复用面向对象软件的基础》一书，共收录了 23 种设计模式，从此树立了软件设计模式领域的里程碑，人称「gof设计模式」。</p><!--换行标签--><p>设计模式（design pattern）是前辈们对代码开发经验的总结，是解决特定问题的一系列套路。它不是语法规定，而是一套用来提高代码可复用性、可维护性、可读性、稳健性以及安全性的解决方案。</p><br><p>1995 年，gof（gang of four，四人组/四人帮）合作出版了《设计模式：可复用面向对象软件的基础》一书，共收录了 23 种设计模式，从此树立了软件设计模式领域的里程碑，人称「gof设计模式」。</p><!--水平线标签--><hr/><!--字体样式标签--><h1>字体样式标签</h1><strong>粗体</strong><em>斜体</em><br><!--特殊符号--><!--空格-->空 格><©</body></html>
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>图像标签</title></head><body><!--src图片地址（必填） alt图片名字（必填）--><img src="../resources/image/iu_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667"><a href="4.%20链接标签.html#down"> 底部</a></body></html>
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>链接标签</title></head><!--a标签--><!--href（必填）表示跳转到哪个页面--><!--target 表示窗口在哪里打开--><!-- _blank 新标签打开--><!-- _lf 本页面打开--><!--块元素--><!--无论内容多少，该元素独占一行(p、h1-h6...)--><!--行内元素--><!--内容撑开宽度﹐左右都是行内元素的可以在排在一行( a . strong . em ... )--><body><a name="top">顶部</a><a href="1.%20我的第一个网页.html" target="_blank">点击跳转我的第一个网页</a><a href="/d/file/titlepic/www.baidu.com" target="_lf">点击跳转百度</a><br><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页 <img src="../resources/image/iu_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">&l肃然起敬t;/a><!--锚链接--><!--1. 需要一个锚标记--><!--2. 跳转到标记--><!--<a href="1.%20我的第一个网页.html">点击跳转我的第一个网页--><!-- <img src="../resources/image/iu_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">--><!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页--><!-- <img src="../resources/image/iu_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">--><!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页--><!-- <img src="../resources/image/iu_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">--><!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页--><!-- <img src="../resources/image/iu_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">--><!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页--><!-- <img src="../resources/image/iu_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">--><!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页--><!-- <img s医学检验就业前景rc="../resources/image/iu_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">--><!--</a>--><!--功能性链接--><!--邮箱链接--><!--qq推广链接--><a href="mailto:666@163.com">mailto</a><a href="#top">回到顶部</a><a name="down">底部</a></body></html>
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>列表</title></head><body><!--有序列表--><ol> <li>java</li> <li>python</li> <li>c</li> <li>c++</li> <li>php</li></ol><hr/><!--无序列表--><ul> <li>java</li> <li>python</li> <li>c</li> <li>c++</li> <li>php</li></ul><hr/><!--自定义列表dl：标签dt：标题dd：内容--><dl> <dt>title1</dt> <dd>1</dd> <dd>2</dd> <dd>3</dd> <dt>title2</dt> <dd>1</dd> <dd>2</dd> <dd>3</dd></dl></body></html>
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>表格</title></head><body><!--表格table行 tr列 td--><table border="1px"> <tr><!-- 跨列--> <td colspan="5">跨5列</td> </tr> <tr><!-- 跨行--> <td rowspan="2">跨2行</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td><!-- <td>5</td>--> </tr></table><hr/><table border="1px"> <tr> <td colspan="3">表格测试</td> </tr> <tr> <td rowspan="2">跨2行</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> <tr> <td rowspan="2">跨2行</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr></table></body></html>
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>媒体元素</title></head><body><!--<video src="源" controls控制条 autoplay自动播放/></video>--><audio src="../resources/audio/iu,suga%20-%20에잇(prod.&feat.%20suga%20of%20bts).flac" controls autoplay></audio></body></html>
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>页面结构分析</title></head><body><p>header 标题头部区域的内容(用于页面或页面中的一块区域)</p><p>footer 标记脚部区域的内容（用于整个页面或页面的一块区域)</p><p>ction web页面中的一块独立区域</p><p>article 独立的文章内容</p><p>aside 相关内容或应用(常用于侧边栏)</p><p>nav 导航类辅助内容<p/><header><h1>网页头部</h1></header><header>网页头部</header><hr><ction><h1>网页主体</h1></ction><ction>网页主体</ction><hr><footer><h1>网页脚部</h1></footer><footer>网页脚部</footer></body></html>
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>内联框架</title></head><body><!--ifram内联框架--><iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=bv1x4411v75c&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe><!--<iframe src="/d/file/titlepic/www.baidu.com" width="300px" height="300px"></iframe>--><iframe src="" name="baidu" width="1000px" height="800px"></iframe><a href="/d/file/titlepic/www.baidu.com" target="baidu">点击跳转</a></body></html>
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>表单</title></head><body><!--表单formaction 表单提交的位置 网站/请求处理地址method post get 提交方式 get方式提交 可以在url中看到提交的信息 不安全 高效 post方式提交 比较安全 传输大文件--><p>type 指定元素的类型。text、password、checkbox、radio、submit、ret、file、hidden、image 和button，默认为 text</p><p>name 指定表单元素的名称</p><p>value 元素的初始值。type为radio时必须指定一个值</p><p>size 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位</p><p>maxlength type为text或 password时，输入的最大字符数</p><p>checked type为radio或checkbox时，指定按钮是否是被选中</p><p>readonly 只读</p>d<p>disable 禁用</p><p>hidden 隐藏 -> 传递默认值</p><h1>注册</h1><form action="1.%20我的第一个网页.html" method="get"><!-- 文本输入框--> <p>用户名 <input type="text" name="urname" value="初始值" maxlength="8" size="30"></p> <p>用户名 <input type="text" name="urname" value="readonly" readonly maxlength="8" size="30"></p><!-- 密码框--> <p>密 码 <input type="password" name="passwd"></p> <p>密 码 <input type="password" name="passwd" hidden></p><!-- 单选框--><!-- name相同为同一组--> <p>性 别 <input type="radio" value="boy" name="x" checked/>男 <input type="radio" value="boy" name="x" checked disabled/>男 <input type="radio" value="girl" name="x"/>女 </p><!-- 多选框--&g你是我的翅膀t; <p>爱好 <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="code" name="hobby" checked>coding <input type="checkbox" value="chat" name="hobby">聊天 <input type="checkbox" value="game" name="hobby">游戏 <input type="checkbox" value="girl" name="hobby">girl </p><!-- 按钮--> <p> <input type="button" name="btn1" value="按钮"><!-- <input type="image" src="../resources/image/iu_16x10.png">--> </p> <p> <input type="submit"> <input type="ret" value="清空表单"> </p><!-- 下拉框 列表框--> <p>下拉框 <lect name="列表名称"> <option value="111">选项一</option> <option value="222">选项二</option> <option value="333" lected>选项三</option> <option value="444">选项四</option> <option value="555">选项五</option> &l英国博士申请t;/lect> </p><!-- 文本域--> <p>textarea <textarea name="textarea" cols="50" rows="10">文本内容</textarea> </p><!-- 文件域--> <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="0" step="10"> </p><!-- 滑块--> <p>音量 <input type="range" name="voice" min="0" max="100" step="10"> </p><!-- 搜索--> <p>搜索 <input type="arch" name="arch"> </p><!-- 增强鼠标可用性--> <p> <label for="mark">点我聚焦位置</label> <input type="text" id="mark"> </p> <p> <input type="submit" disabled> </p></form></body></html>
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>表单验证</title></head><body><!--表单formaction 表单提交的位置 网站/请求处理地址method post get 提交方式 get方式提交 可以在url中看到提交的信息 不安全 高效 post方式提交 比较安全 传输大文件--><p>placeholder 提示信息</p><p>required 非空判断</p><p>pattern 正则表达式</p><form action="1.%20我的第一个网页.html" method="get"><!-- 文本输肾部保养的好处入框--> <p>用户名 <input type="text" name="urname" placeholder="请输入用户名" required></p><!-- 密码框--> <p>密 码 <input type="password" name="passwd" placeholder="请输入密码"required></p><!-- 正则表达式验证--> <p>正则表达式验证<input type="text" required name="test" pattern="[a-z]{3}" title="只能包含三个字母的文本字段（数字或特殊字符）"></p> <p> <input type="submit"> </p></form></body></html>
本文作者：双份浓缩馥芮白
原文链接：/d/file/titlepic/14939352.html
本文发布于:2023-04-03 21:18:22，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/12f904d966869099ed12bba30b3e2c35.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：【HTML】HTML5学习笔记.doc
本文 PDF 下载地址：【HTML】HTML5学习笔记.pdf
| 留言与评论（共有 0 条评论） |
