从零开始的HTML5

本着从头学习理解内核的想法,前端先从HTMl5开始学习,了解前端的发展历程,更深入的了解原理

第一步,知道什么是HTML5,默认的规范是什么

 1 <!DOCTYPE html><!--告诉浏览器是什么规范(默认是HTML)-->
 2 <html lang="en">
 3 <!--网页头部-->
 4 <head>
 5     <!--meta   描述性标签,用来描述网站信息-->
 6     <!--一啊不能用来做SEO-->
 7     <meta charset="UTF-8">
 8     <meta name = "keyword" content="这是李瑞戈的前端自学网站">
 9     <meta name = "description" content="用来记录李瑞戈第一个自我研发的网站,包含前后端内容">
10     <title>今天吃什么</title>
11 </head>
12 <!--主体文件-->
13 <body>
14 <!--自闭和标签,单个标签(正常标签是,开放标签和闭合标签成双出现)-->
15 今天不学完h5不吃饭
16 </body>
17 </html>

第二步,快速入门  学习各级标签以及常用标点符号

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>基本标签学习</title>
 6 </head>
 7 <body>
 8 <!--标题标签-->
 9 <h1>一级标签</h1>
10 <h2>二级标签</h2>
11 <h3>三级标签</h3>
12 <h4>四级标签</h4>
13 <h5>五级标签</h5>
14 <h6>六级标签</h6>
15 <!--段落标签-->
16 <p>今天吃什么?</p>
17 <p>不想告诉你</p>
18 <p>其实是不知道</p>
19 <!--水平线标签-->
20 <hr/>
21 <!--换行标签(影响间距和画面感)-->
22 今天吃什么?<br/>
23 不想告诉你<br/>
24 其实是不知道<br/>
25 <hr/>
26 <!--字体样式标签-->
27 <strong>粗体:Strong</strong><br/>
28 <em>斜体:em</em>
29 <hr/>
30 <!--注释和特殊符号-->
31 &nbsp;空格(&nbsp;)
32 &gt;&lt;&ge;&le;&copy;
33 <br/>
34 特殊符号&开头分号结尾
35 </body>
36 </html>

第三步,学习一些最常见的用法,增强自信!!

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>常见的图像格式和链接</title>
 6 </head>
 7 <body>
 8 <a name="top">这里是顶部</a>
 9 
10 <!--图片样式设置-->
11 <img src="../resources/image/1.jpg" alt="我的图片" title="悬停文字随便我设置" width="50" height="50"><br/>
12 <!--链接放置-->
13 文本超链接<br/>
14 <!--
15 href:必填表示要跳转到哪个页面
16 target:表示页面在哪里打开   _blank在新页面打开  _self默认当前页面打开
17 
18 
19 
20 -->
21 <a href="https://www.bilibili.com/" target="_blank">点击跳转到哔哩哔哩</a><br/>
22 <a href="6.表格.html" target="_parent">点击跳转我制作的第一个网页</a><br/>
23 图片超链接<br/><!--图像作为超链接  就是把图片放到链接中去这样点击图片可以进行跳转-->
24 <a href="homepage.html" target="_top">
25     <img src="../resources/image/1.jpg" alt="我的图片" title="悬停文字随便我设置" width="50" height="50"><br/>
26 </a>
27 <!--功能性链接
28 邮件链接:mailto
29 qq链接:  去腾讯创建分享链接即可
30 -->
31 <a href="mailto:220295808@qq.com">点击发送邮件</a><br/>
32 
33 <!--锚链接-->
34 <!--
35 1.需要一个标记作为锚
36 2.跳转到这个锚
37 实现页面间的跳转,例如目录,可以跳转到这个页面的固定位置去
38 -->
39 <a href="#top" target="_top">
40     回到顶部
41 </a>
42 </body>
43 </html>

第四步,学列表!

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>列表学习</title>
 6 </head>
 7 <body>
 8 <!--列表
 9 无序列表  ol
10 有序列表  ul
11 自定义列表  dl  自定义列表中dt(列表名称)只有一个   dd(列表内容)可以有多个
12                 一般用于公司网站底部
13 -->
14 有序列表
15 <ol>
16     <li>java</li>
17     <li>python</li>
18     <li>前端</li>
19     <li>html5</li>
20     <li>vue</li>
21 </ol>
22 <hr/>
23 无需列表
24 <ul>
25     <li>java</li>
26     <li>python</li>
27     <li>前端</li>
28     <li>html5</li>
29     <li>vue</li>
30 </ul>
31 <hr/>
32 自定义列表
33 <dl>
34     <dt>java</dt>
35     <dd>python</dd>
36     <dd>前端</dd>
37     <dd>html5</dd>
38     <dd>vue</dd>
39     <dd>山西</dd>
40 </dl>
41 </body>
42 </html>

学表格!

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>学习表格标签</title>
 6 </head>
 7 <body>
 8 <!--表格标签table
 9 tr行
10 td列  colspan 跨行  rowspan 跨列
11 
12 -->
13 <table border="1px">
14     <tr>
15         <td colspan="4">1-1</td>
16     </tr>
17     <tr>
18         <td rowspan="3">2-1</td>
19         <td>2-2</td>
20         <td>2-3</td>
21         <td>2-4</td>
22     </tr>
23     <tr>
24         <td>3-1</td>
25         <td>3-2</td>
26         <td>3-3</td>
27     </tr>
28     <tr>
29         <td>4-1</td>
30         <td>4-2</td>
31         <td>4-3</td>
32     </tr>
33 </table>
34 </body>
35 </html>

学媒体元素!

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--媒体元素    音频(video) 视频(audio)-->
 9 <!--
10 src:资源路径
11 controls : 控制条
12 autoplay : 自动播放
13 -->
14 <video src="../resources/video/vide.mp4" controls autoplay>小猫coke//////如果播放到一半再添加自动播放视频会两遍一起播放</video><br/>
15 <audio src="../resources/audio/新录音%203.m4a" controls>我看过</audio><br/>
16 </body>
17 </html>

学页面结构分析!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<!--页面结构
header头部
footer脚部
section主体(web页面中一块独立区域)
article 独立的文章内容
aside 相关内容或应用常用于侧边栏
nav 导航类辅助内容

这些标签的顺序都可以自己调整
-->

<aside>
    <h2>相关内容或应用</h2>
</aside>

<header>
    <h2>网页头部</h2>
</header>
<nav>
    <h2>导航类辅助内容</h2>
</nav>

<aside>
    <h2>相关内容或应用</h2>
</aside>

<section>
    <h2>网页主体</h2>
</section>

<article>
    <h2>独立的文章内容</h2>
</article>

<aside>
    <h2>相关内容或应用</h2>
</aside>

<nav>
    <h2>导航类辅助内容</h2>
</nav>

<footer>
    <h2>网页脚部</h2>
</footer>

</body>
</html>

学内联框架!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--内联框架(网页里面放网页)
frameborder="0" 显示边框0(不显示)/1(显示)
-->

<!--
这里首先第一行设置了一个内联标签,是哔哩哔哩官网,然后给他命名为gogo
第二行设置了一个页面跳转,跳转目标(target)就是第一行命名为gogo的内联标签,等于把内联标签作为一个容器.
-->
<iframe src="https://www.bilibili.com/" name="gogo" frameborder="0" width="600" height="500"></iframe><br/>
<a href="8.页面结构分析.html" target="gogo" >点击跳转gogo</a><br/>
<a href="https://www.bilibili.com/" target="gogo" >点击跳回哔哩哔哩</a><br/>


<iframe src="https://www.bilibili.com/" name="meme" frameborder="0" width="600" height="500"></iframe><br/>
<a href="7.媒体元素.html" target="meme" >点击跳转meme</a><br/>
<a href="https://www.bilibili.com/" target="meme" >点击跳转回哔哩哔哩</a><br/>
</body>
</html>

学表单post和get提交

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>表单</title>
  6 </head>
  7 <body>
  8 <!--
  9 
 10 action 表单的提交位置可以是网站,也可以是一个请求处理地址
 11 method :post get 提交方式
 12    get方式提交 在url中可以看到提交的信息,不安全,但是高效
 13    post方式提交,比较安全,可以传输大文件
 14 -->
 15 <!--br/ 放到label后面经常会失效   放到label内后也会导致格式不统一或失效-->
 16 <h2>注册登录</h2>
 17 <form action="homepage.html" method="post">
 18 <p>
 19     <label>
 20         账号:<input type="text" name="username">
 21     </label>
 22     <label>
 23         密码:<input type="password" name="pwd">
 24     </label>
 25 </p>
 26 
 27 <h2>注册登录</h2>
 28     <p>账号:<input type="text" name="username"></p>
 29     <p>密码:<input type="password" name="pwd"></p>
 30 <!--
 31 按钮--框:
 32 input type= "radio" 单选框
 33 input type= "checkbox" 多选框
 34 input type= "button"文字按钮   文字按钮不会自动提交
 35 input type= "image" 图片按钮   图片按钮会自动提交   因为action绑定了页面所以提交后会自动跳转某个页面
 36 input type= "file" 选择文件
 37 input type= "submit" 提交按钮
 38 input type= "reset" 重置按钮
 39 
 40 checked 默认选择
 41 -->
 42     <p>性别:
 43         <input type="radio" value="boy" name="sex" checked>男
 44         <input type="radio" value="girl" name="sex">女
 45     </p>
 46 
 47     <p>爱好:
 48         <input type="checkbox" value="sleep" name="hobby">睡觉
 49         <input type="checkbox" value="love" name="hobby" checked>爱爱
 50         <input type="checkbox" value="tuotuo" name="hobby">拖拖
 51     </p>
 52 
 53     <p>按钮
 54         <input type="button" name="btn1" value="点击变大">
 55         <input type="image" src="" name="btn1" value="点击便便">
 56     </p>
 57 
 58     <p>
 59         <input type="file" name="files">
 60         <input type="button" value="上传文件按钮" name="upload">
 61     </p>
 62 <!--
 63 下拉框:
 64 selected  默认值
 65 -->
 66     <p>下拉框:
 67         <select name="列表名称" id="a">
 68             <option value="选项的值">1</option>
 69             <option value="选项的值">2</option>
 70             <option value="选项的值">3</option>
 71             <option value="选项的值">4</option>
 72             <option value="选项的值">5</option>
 73             <option value="选项的值" selected>6</option>
 74         </select>
 75     </p>
 76     <p>国家:
 77         <select name="国家选择" id="b">
 78             <option value="china">中国</option>
 79             <option value="us">美国</option>
 80             <option value="ek" selected>英国</option>
 81             <option value="edu">印度</option>
 82             <option value="astru">澳大利亚</option>
 83             <option value="hk">香港</option>
 84         </select>
 85     </p>
 86 
 87     <!--文本域
 88 cols="50" rows="10"   50行  10列
 89     -->
 90 
 91     <p>反馈:
 92         <textarea name="文本域" cols="50" rows="10">反馈内容</textarea>
 93     </p>
 94 
 95     <p>
 96         <input type="submit">
 97         <input type="reset">
 98     </p>
 99 
100 </form>
101 
102 </body>
103 </html>

学功能标签!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>功能标签</title>
</head>
<body>
<form action="2.html" method="get">提交
<!--
input type="email"邮箱
input type="url"地址
input type="search"搜索
input type="range"滑块
input type="number"数值   step 增加值  假设设置为6   那么必须是0或者6的倍数

disabled   禁用 (不论选项还是输入内容)
hidden     隐藏
readonly   只读

初级验证:--------------------------------------------------------
placeholder 提示信息,输入文字后会消失
required   非空判断
pattern    正则表达式判定或者内容
-->

<p>邮箱:
    <input type="email" name="em" value="就是不让填写东西" disabled>
</p>

<p>网址:
    <input type="url" name="url" hidden="hidden" readonly>
</p>

<p>搜索:
    <input type="search" name="search"  value="readonly是只读" readonly>
</p>

    <p>输入你邮箱:
        <input type="text" placeholder="提示信息" required pattern="^\d{9,}$">
    </p>

<p>滑块调节音量或者数值:
    <input type="range" name="voice" min="0" max="100" step="20">
</p>

<p>商品数量:
    <input type="number" name="num" min="0" max="100" step="6">
</p>

<p>
    <input type="submit" value="提交表单" hidden="hidden" id="2">
    <input type="reset" value="重置表单" id="3">
</p>

    <!--增强鼠标可用性
    label     for="指向一个id"  点击则会指向id表示的框 并进行了点击操作
    -->
    <label for="2">点击我试试 增强鼠标可用性</label>
    <input type="text" id="1">
</form>

</body>
</html>

好了!,现在就可以根据这些东西去做一个简单的网页架构了,如果想要页面的内容更加丰富,需要用到CSS

posted on 2023-11-27 13:44  权限007  阅读(13)  评论(0)    收藏  举报