html 5

hyper text markup language(超文本标记语言)

w3c标准包括

  • 结构化标准语言 html+xml
  • 表现标准语言 css
  • 行为标准 DOM ECMScript

网页基本标签

1. 标题

1
2
3
4
<!--  1.标题标签-->
<h1>一级标签</h1>
<h2>一级标签</h2>
<!-- <hn>n级标签</hn>> -->

2. 段落

1
2
3
<!--  2.段落标签-->
<p>段落标签,第一行</p>
<p>段落标签,第二行</p>

3. 换行

1
2
<!--  4.换行标签-->
坂本龙一是<br/>我喜欢的人

4. 字体

1
2
3
4
<!--  5.字体样式标签-->

粗体:<strong>i hate you!</strong>
斜体:<em>i love you!</em>

5. 水平线

1
2
<!--  3.水平线标签-->
我是<hr/>水平线

6. 特殊符号

1
2
<br/>空    格:只有一个格子 &nbsp;&nbsp;&nbsp; 多个空格用nbsp牛逼是屁  <br/>
&copy;版权所有lemon &varnothing;

7. 图片

1
2
3
4
5
6
<!--
../ 上一级目录 学到了😊
推荐用相对地址
-->
<!--alt就是图片加载不出来直接显示的显示内容,title就是鼠标悬停时候的显示文字-->
<img src="../resources/img/mordy.webp" alt="rick and mordy" title="莫迪">

8. 连接

1
2
3
4
5
6
<!--文字,图像都可以做成超链接,-->
<!--taret的属性 "_blank" 或 "_self" -->
<a href="https://www.zhihu.com/" target="_self">
点我看杜宇晨热舞
<img src="../resources/img/mordy.webp" alt="rick and mordy" title="莫迪">
</a>

9. 锚 书签定位

1
2
3
4
5
<!--你也可以把top换成任何你想要的名字,和你想的位置,最后就往那里跳转-->
<a id="top"></a>

<!--这个放下面-->
<a href="#top">回到顶部</a>

9. 功能

1
2
3
<!--功能连接-->
<a href="mailto:2210651885@qq.com">lemon的qq邮箱</a>
qq推广 在线咨询小图标 s 去网站复制连接即可

列表

  • 有序列表
  • 无序列表
  • 自定义列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--有序列表-->
<ol>
<li>ipad</li>
<li>apple watch</li>
<li>macbook</li>
</ol>

<!--无序列表-->
<ul>
<li>air max</li>
<li>sony wh1000-xm3</li>
<li>airpods pro</li>
</ul>

<!-- 自定义列表-->
<!-- dl dt dd-->
<dl>
<dt>学科</dt>

<dd>java</dd>
<dd>python</dd>
<dd>c++</dd>

<dt>老师</dt>
<dd>王梦瑶</dd>
<dd>徐俊象</dd>
<dd>刘洋</dd>
</dl>

表格(不想学)可以做课程表吧

媒体

1
2
3
4
5
6
7
<video src="../resources/video/hhh.mp4" controls autoplay>
没有图片!!需要改mp4的格式为h264吧,也许吧
</video>

<audio src="" controls autoplay>
音频播放
</audio>

iframe

  • 网站里面嵌套网站
1
2
3
4
5
6
7
<iframe src="path" name="mainFrame"></iframe>

<!--target为打开页面的地方,打开页面的地方是自己的小frame-->
<iframe src="" name="hello" frameborder="0"></iframe>
<a herf="https://www.bilibili.com/" target="hello">dianow</a>

<iframe src="https://www.bilibili.com/" frameborder="0" width="600px" height="400px"></iframe>

表单什么的

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--表单form
ation:表示提交的位置
method:Post,get方法
post:比较安全连接不会显示账号和密码
get:url可以看到提交的信息,不安全,高效
-->
<h1>注册</h1>
<form action="register" method="post">

<p>名字:<input type="text" name="username"></p>
<p>密码:<input type="password" name="psw" ></p>
<p><input type="submit"> <input type="reset"></p>
</form>

单选复选, 按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
 <!--    单选框-->
<p>性别:
<input type="radio" value="boy" name="sex">
<input type="radio" value="girl" name="sex">
</p>


<!-- 多选框-->
<p>hobby:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="eat" name="hobby">进食
<input type="checkbox" value="talk" name="hobby">交流
</p>
  • 按钮
1
2
3
4
<input type="button">
<input type="image">
<input type="submit">
<input type="reset">

下拉框,文本域,邮件验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--   下拉框,列表框-->
<p>国家
<select name="列表名称" id="">
<option value="china">china</option>
<option value="usa">usa</option>
<option value="japan">japan</option>
</select>
</p>

<!-- 文本框-->
<p>反馈
<textarea name="textarea" id="" cols="30" rows="10"></textarea>
</p>

<!-- 邮件验证-->

表单的应用

  1. 隐藏域 hidden
  2. 只读 readlony
  3. 禁用 disabled

表单验证

  1. pleasehold=”亲输入用户名” 提示信息
  2. required 非空
  3. pattern 正则表达式验证 (建议用的时候查常用表)