【狂神说Java】HTML5完整教学通俗易懂

笔记内容很简单，不适合初学，只供个人复习参考

 

 

 

 

 1 <!DOCTYPE html>
 2 <!--DOCTYPE说明使用的HTML版本-->
 3 <html lang="en">
 4 <!--注释的快捷键 ctrl + /-->
 5 <head>
 6 <!--描述性标签，它用来描述我们网站的一些信息-->
 7     <meta charset="UTF-8">
 8     <meta name="Keywords" content="java">
 9     <title>第一个HTML程序</title>
10 </head>
11 <body>
12 <!--标题标签-->
13 <h1>一级标题</h1>
14 <h2>二级标题</h2>
15 <!--段落标签-->
16 <p>这是一整段 ，下面的内容肯定和这段内容换行</p>
17 、aaa
18 <!--水平线标签-->
19 <hr>
20 <!--换行标签-->
21 你好</br>啊
22 <!--字体和样式标签-->
23 <strong>粗体</strong>
24 <em>斜体</em>
25 <!--特殊标签,用到啥自己查-->
26 你&nbsp;好
27 &copy;版权标签
28   <font color="red">正文</font>
29 <!--  img学习，其中src是图片地址，alt是图片不存在时的替换文字，其余的
30 非必填
31 -->
32 <img src="b.jpg" alt="测试图片",title = "悬浮文字"/><br/>
33 <img src="b.jpg" ,width="50",heigth = "150",title = "悬浮文字"/>
34 <!--_blank指在新页面打开-->
35 <a href="https://www.baidu.com" target="_blank">点我跳转到百度</a>
36 <!--锚链接-->
37 <a href="#top">跳转到顶端</a>
38 <!--设置锚点down，href就可以跳转到该锚点，甚至可以跨页面跳转到指定锚点，mailto:是邮件链接，可以跳转到指定邮件-->
39 <a name="down">down</a>
40 <img src="b.jpg" ,width="50",heigth = "150",title = "悬浮文字"/><br/>
41 <img src="b.jpg" ,width="50",heigth = "150",title = "悬浮文字"/><br/>
42 <img src="b.jpg" ,width="50",heigth = "150",title = "悬浮文字"/><br/>
43 <img src="b.jpg" ,width="50",heigth = "150",title = "悬浮文字"/><br/>
44 <img src="b.jpg" ,width="50",heigth = "150",title = "悬浮文字"/><br/>
45 <a href="#down">跳转到down</a>
46 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
47 </body>
48 </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     <li>java</li>
11     <li>python</li>
12     <li>运维</li>
13     <li>c++</li>
14 </ol>
15 <!--无序列表-->
16 <ul>
17     <li>java</li>
18     <li>python</li>
19     <li>运维</li>
20     <li>c++</li>
21 </ul>
22 <!--dl是自定义列表-->
23 <dl>
24     <dt>学科</dt>
25     <dd>java</dd>
26     <dd>python</dd>
27     <dd>运维</dd>
28     <dd>c++</dd>
29 <!--表格table学习-->
30 </dl>
31 <table border="1px">
32     <tr>
33         <td colspan="4">1-1</td>
34     </tr>
35     <tr>
36         <td rowspan="2">2-1</td>
37         <td>2-2</td>
38         <td>2-3</td>
39         <td>2-4</td>
40     </tr>
41     <tr>
42         <td>3-1</td>
43         <td>3-2</td>
44         <td>3-3</td>
45     </tr>
46 
47 </table>
48 
49 <!--视频和音频学习-->
50 <!--
51 src 资源路径
52 controls:控制条
53 autoplay:自动播放
54 -->
55 <audio src="a.mp3" controls autoplay></audio>
56 <video src="b.mp4" controls autoplay></video>
57 <header>
58     <h2>网页头部</h2>
59 </header>
60 <section>
61     <h2>网页主体</h2>
62 </section>
63 <footer>
64     <h2>网页脚步</h2>
65 </footer>
66 </body>
67 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--内联框架，在指定区域嵌入一个页面-->
 9 <iframe src="https://www.baidu.com" width="1000px" height="800px"></iframe>
10 <!--点击链接把指定网页加载到本地指定的内联区域里面-->
11 <iframe src="" name="hello" frameborder="0" width="500" height="500"></iframe>
12 <a href="https://www.cnblogs.com/henuliulei/" target="hello">点我跳转</a>
13 <h1>注册</h1>
14 <!--表单form
15 action表单提交的位置，
16 method：提交方式，post比get安全些
17 -->
18 <form action="Test01.html" method="post">
19     <p>
20         用户名：<input type="text" name="username">
21     </p>
22     <p>
23         密码：<input type="password" name="pwd">
24     </p>
25 <p>性别：
26     <input type="radio" value="boy" name="sex">男
27     <input type="radio" value="girl" name="sex">女
28 </p>
29     <p>爱好：
30         <input type="checkbox" value="sleep" name="hobby"> 睡觉
31         <input type="checkbox" value="code" name="code">敲代码
32         <input type="checkbox" value="chat" name="chat">聊天
33     </p>
34     <p>
35         <input type="submit">
36         <input type="reset">
37     </p>
38 </form>
39 </body>
40 </html>

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>下拉框，列表框</title>
 6 </head>
 7 <body>
 8 <!--下拉框-->
 9     <p>
10         <select name="列表名称">
11             <option value="China">中国</option>
12             <option value="us">美国</option>
13             <option value="eth">瑞士</option>
14         </select>
15     </p>
16 <!--列表框-->
17 <p>反馈：
18     <textarea name="textarea" cols="50" rows="10">文本区域</textarea>
19 </p>
20 <p>
21     <input type="file" name="files">
22     <input type="button" value="上传" name="upload">
23 </p>
24 <!--邮箱验证-->
25 <p>邮箱：
26     <input type="email" name="email">
27 </p>
28 <p>URL:
29     <input type="url" name="url">
30 </p>
31 <p>商品数量
32     <input type="number" name="num" maxlength="10" max="10" min="0" step="1">
33 </p>
34 <p>音量滑块：
35     <input type="range" min="1" max="100" name="voice">
36 </p>
37 <p>搜索
38     <input name="find" type="search">
39 </p>
40 <!--表单的三个应用 隐藏域，只读，禁用-->
41 
42 </body>
43 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--表单的三个应用 隐藏域hidden，只读readonly，禁用disabled-->
 9 <!--placeholder的作用是提示信息，requred是非空判断pattern正则表达式 -->
10 <form action="Test01.html" method="post">
11 <!-- 只读 -->
12     <p>
13         用户名：<input type="text" placeholder="请输入用户名" name="username" value="admin" readonly required>
14         实际名：<input type="text" placeholder="请输入实际名字" name="username1"  required>
15     </p>
16     <p>
17         密码：<input type="password" name="pwd" hidden>
18     </p>
19     <p>性别：
20         <input type="radio" value="boy" name="sex" checked disabled>男
21         <input type="radio" value="girl" name="sex">女
22     </p>
23     <p>
24         <input type="text" name="diymail" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">
25     </p>
26     <p>
27 <!--增强鼠标可用性-->
28         <label for="mark">你点我试试</label>
29 <!--点击之后跳转到文本框-->
30         <input type="text" id="mark">
31     </p>
32     <p>
33         <input type="submit">
34         <input type="reset">
35     </p>
36 </form>
37 </body>
38 </html>

 

posted @ 2020-06-03 22:08  你的雷哥  阅读(908)  评论(0)  编辑  收藏  举报