HTML5第一个网页

  • Hyper Text Markup Language

  • 超文本标记语言

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 网页使用的规范 -->
<!DOCTYPE html>
<html lang="en">

<!-- head标签代表网页头部 -->
<head>
    <!-- meta描述性标签，描述网站信息 -->
    <meta charset="UTF-8">
    
    <!-- title网页标题 -->
    <title>第一个网页</title>
</head>
    
<!-- body表示网站主题 -->
<body>
Hello Mr.T
</body>
    
</html>

基本标签

1
2
3
4
5
6
7
8
9
10
### 行内元素：行内元素之间无换行，会排成一行
### 块元素：元素独占一行，相当于会自动换行
<h1></h1>·····<h6><h6/> 1~6级标题
<p></p>	段落标签
<hr/>	分割线
<br/>	换行
<strong></strong>	粗体
<em></em> 	斜体
&nbcp; 空格 > 大于 < 小于		# & + 字符 搭配合成特殊符号

图片

1
2
3
4
5
6
7
8
9
10
11
12
<!--
图片相关
src：地址
相对路径：相对于html
绝对路径：电脑内路径
../上一级目录

alt：图片未加载的显示的字符串
titie：鼠标悬停图片出现的文字
height、width    长、宽
-->
<img src="../img/danwan.jpg" alt="图片404" title="弹丸论破" width="1020" height="689">

链接

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--
a标签
href：跳转的网页链接
target：新窗口在哪打开（新页面、本页面·····）
name：命名，方便传送。如顶部设name。
	随后另写一个链接<a href:"#name">点击回顶部<a/>
-->
<a href="我的第一个网页.html" target="_blank">点击跳转到页面1</a><br/>

<!-- 点击项目还可以是图片 -->
<a href="基本标签.html" >
    <img src="../img/yuanchuang1.jpg" height="640" width="800">
</a><br/>

列表

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
29
30
31
32
<!-- 有序列表 -->
<ol>
    <li>aaa</li>
    <li>ssdc</li>
    <li>sdsdsdsd</li>
</ol>

<!-- 无序列表 -->
<ul>
    <li>i</li>
    <li>jjj</li>
    <li>alsla</li>
</ul>

<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
-->
<dl>
    <dt>姓名</dt>

    <dd>sdsds</dd>
    <dd>ccc</dd>
    <dd>ccesce</dd>

    <dt>地址</dt>

    <dd>wuhan</dd>
    <dd>shanghai</dd>
    <dd>guangzhou</dd>
</dl>

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--表格 table
tr 行
    - colspan 跨列
    - rowspan 跨行
td 列
-->
<table border="1px">
    <tr>
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

媒体元素

1
2
3
4
5
6
7
<!--媒体文件
src：路径
controls：控制条
autoplay：自动播放 chrome浏览器加上 muted静音属性 才能自动播放
-->
<video src="../resource/video/1.mp4" controls autoplay></video>
<audio src="../resource/audio/1%20序曲·折纸信笺.mp3" controls autoplay></audio>

页面结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--页面结构
header：头部区域
footer：脚步区域
section：标签定义文档中的节。比如章节、页眉、页脚或文档中的其他部分
article：独立文章内容，外部内容
aside：侧边栏
nav：导航链接
-->
<header><h1>网页头部</h1></header>

<section><h1>section</h1></section>

<article><h1>aricle</h1></article>

<aside><h1>aside</h1></aside>

<nav><h1>nav</h1></nav>

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

iframe内联框架

1
2
3
4
5
6
<!--iframe
可以设置框架大小，给框架命名，然后用链接的target属性更改窗口跳转目标
最后便可在框架中看到网页
-->
<iframe src="" name="site" frameborder="0" width="1500px" height="720px"></iframe><br/>
<a href="https://www.bilibili.com" target="site">跳转</a>

表单相关语法

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<h1>注册</h1>
<!--表单form
action：表单提交的位置，网站、请求地址等
method：post，get提交方法
    get方式可在url中看到提交的信息，效率高，不安全
    post方式看不见信息，安全，可传输大文件
input：输入框
    type：定义input元素的类型
        radio：单选框，要规定为同一name即同一组，才可单选，没有组限制仍可单选
        checkbox：多选框
        button：按钮
        image+src：图片按钮
        submit：提交
        reset：重置
        file：提交文件
        range：滑块
            step：每次增量
        search：搜索
    checked：单选和多选的默认选择项
    value：默认值
    maxlength：最长显示字符
    size：文本框的长度
    readonly：只读
    hidden：隐藏，常用来传默认值
    disabled：禁用，不能选择
    placeholder：虚字提示
    required：不为空
    pattern：正则表达式，可用正则表达式定义自验证邮箱
-->
<form action="我的第一个网页.html" method="get">
    <p>用户名:<input type="text" name="username" value="xxxxx" maxlength="8" size="20" ></p>
    <p>密码:<input type="password" name="password" placeholder="请输入密码" required></p>

    <p>性别:
        <input type="radio" value="boy" name="sex" checked >男
        <input type="radio" value="girl" name="sex">女
    </p>

    <p>爱好:
        <input type="checkbox" value="1" name="hobby" checked>1
        <input type="checkbox" value="2" name="hobby">2
        <input type="checkbox" value="3" name="hobby">3
    </p>

    <p>
        按钮:
        <input type="button" name="bt1" value="按钮1"><br/>
        图片按钮:<br/>
        <input type="image" src="../resource/img/yuanchuang1.jpg" width="500px" height="350px">
        <br/>
        上传文件:
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>
    <!--下拉框、列表框
    select：列表框
    option：下拉的选项
        selected 默认选项
    -->
    <p>下拉框:
        <select name="列表">
            <option value="值1">1</option>
            <option value="值2">2</option>
            <option value="值3" selected>3</option>
            <option value="值4">4</option>
        </select>
    </p>
    <!--textarea 文本域
    cols 列
    rows 行
    -->
    <p>
        反馈:<br/>
        <textarea name="textarea" cols="50" rows="10">请输入文本内容</textarea>
    </p>

    <!--验证
    input type:
        email 邮箱验证
        url url验证
        number 数字验证
    -->
    <p>邮箱验证:
        <input type="email" name="email">
    </p>
    <p>url验证:
        <input type="url" name="url">
    </p>
    <p>数字验证:
        <input type="number" name="number">
    </p>

    <p>自定义邮箱:
        <input type="text" name="diyemail" pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">
    </p>

    <p>滑块:
        <input type="range" name="voice" min="0" max="100" step="5">
    </p>

    <p>搜索:
        <input type="search" name="search">
    </p>

<!--
"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
-->
    <label for="mark">点点我:</label>
    <input type="text" id="mark">

    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

小结

下一站css，前端基础简单过一遍。。。