阅读模式:

【前端】HTML5学习笔记

阅读量:11  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:✨HTMLHTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形......

【前端】HTML5学习笔记

✨HTML

HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字图形动画声音表格链接等。


✨课程链接

【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili


✨学习笔记

第一个网页

<!--!DOCTYPE 告诉浏览器使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head 网页头部-->
<head>
    <!--    meta 描述性标签 描述网页信息-->
    <!--    meta 一般用来做SEO-->
    <meta charset="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 charset="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>
<!--特殊符号-->
<!--空格-->
空&nbsp;格
&gt;
&lt;
&copy;

</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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 charset="UTF-8">
    <title>链接标签</title>
</head>

<!--a标签-->
<!--href(必填)表示跳转到哪个页面-->
<!--target 表示窗口在哪里打开-->
<!--    _blank 新标签打开-->
<!--    _self 本页面打开-->

<!--块元素-->
<!--无论内容多少,该元素独占一行(p、h1-h6...)-->
<!--行内元素-->
<!--内容撑开宽度﹐左右都是行内元素的可以在排在一行( a . strong . em ... )-->


<body>

<a name="top">顶部</a>

<a href="1.%20我的第一个网页.html" target="_blank">点击跳转我的第一个网页</a>
<a href="https://www.baidu.com" target="_self">点击跳转百度</a>

<br>

<a href="1.%20我的第一个网页.html">点击跳转我的第一个网页
    <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">
</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 src="../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 charset="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 charset="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 charset="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 charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>

<p>header 标题头部区域的内容(用于页面或页面中的一块区域)</p>
<p>footer 标记脚部区域的内容(用于整个页面或页面的一块区域)</p>
<p>section Web页面中的一块独立区域</p>
<p>article 独立的文章内容</p>
<p>aside 相关内容或应用(常用于侧边栏)</p>
<p>nav 导航类辅助内容<p/>



<header><h1>网页头部</h1></header>
<header>网页头部</header>
<hr>
<section><h1>网页主体</h1></section>
<section>网页主体</section>
<hr>
<footer><h1>网页脚部</h1></footer>
<footer>网页脚部</footer>

</body>
</html>

内联框架

<!DOCTYPE html><html lang="en"><head>    <meta charset="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="https://www.baidu.com" width="300px" height="300px"></iframe>--><iframe src="" name="baidu" width="1000px" height="800px"></iframe><a href="https://www.baidu.com" target="baidu">点击跳转</a></body></html>

表单

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>表单</title></head><body><!--表单formaction 表单提交的位置 网站/请求处理地址method post get 提交方式    get方式提交 可以在url中看到提交的信息 不安全 高效    post方式提交 比较安全 传输大文件--><p>type 指定元素的类型。text、password、checkbox、radio、submit、reset、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="username" value="初始值" maxlength="8" size="30"></p>    <p>用户名 <input type="text" name="username" value="readonly" readonly maxlength="8" size="30"></p><!--    密码框-->    <p>密&nbsp;&nbsp;码 <input type="password" name="passwd"></p>    <p>密&nbsp;&nbsp;码 <input type="password" name="passwd" hidden></p><!--    单选框--><!--    name相同为同一组-->    <p>性&nbsp;&nbsp;别        <input type="radio" value="boy" name="sex" checked/>男        <input type="radio" value="boy" name="sex" checked disabled/>男        <input type="radio" value="girl" name="sex"/>女    </p><!--    多选框-->    <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="reset" value="清空表单">    </p><!--    下拉框 列表框-->    <p>下拉框        <select name="列表名称">            <option value="111">选项一</option>            <option value="222">选项二</option>            <option value="333" selected>选项三</option>            <option value="444">选项四</option>            <option value="555">选项五</option>        </select>    </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="search" name="search">    </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 charset="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="username" placeholder="请输入用户名" required></p><!--    密码框-->    <p>密&nbsp;&nbsp;码 <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>

⭐转载请注明出处

本文作者:双份浓缩馥芮白

原文链接:https://www.cnblogs.com/Flat-White/p/14939352.html

版权所有,如需转载请注明出处。

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: