网页的组成部分
-
结构(网页上有哪些东西)
HTML用于描述页面的结构
-
表现(这些东西长什么样)
CSS用于控制页面中元素的样式
-
行为(网页界面和用户交互)
JavaScript用于响应用户操作
HTML简介
- HyperTest Markup Language(超文本标记语言)
- 标记语言,也叫标签语言
- Html通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)
基本语法
https://www.runoob.com/html/html-tutorial.html
转义字符
字符 |
转义字符 |
空格 |
|
< |
< |
> |
> |
" |
" |
& |
& |
标签介绍
img
属性src,路径有两种写法
iframe
内联框架:相当于在页面上又开了一个小浏览器窗口
1
2
|
<!--src:代表这个资源的地址,在iframe里打开-->
<iframe src="avatar.png" width="800" height="500"></iframe>
|
超链接
target属性,还可以配合iframe使用
1
2
3
|
<iframe name="frame" width="800" height="500"></iframe>
<a href="avatar.png" target="frame">我是超链接frame</a>
|
效果

点击超链接

div
division,分层,图层,给页面划分区域,div+css完成页面布局
表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!--table定义表格,tr定义表格一行,td定义表格一列,th定义表头-->
<table border="1" style="border-collapse: collapse;">
<tr>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
<tr>
<td>张三</td>
<td>女</td>
<td>篮球</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>乒乓球</td>
</tr>
</table>
|
效果

合并单元格,colspan属性,跨列,值表示跨几列,rowspan属性跨行
1
2
3
4
|
<tr>
<td colspan="2">张三</td>
<td>女</td>
</tr>
|
效果:

表单
网页中的表单是用来向服务器提交信息的,我们最常用的表单就是baidu的搜索框,填入关键字后点击搜索按钮,关键字就会提交到百度的服务器,服务器根据用户输入的关键字进行检索,返回相应信息。
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
|
<!--
表单:把数据提交给服务器,数据一般都是用户填写的
form定义一个表单,action代表要提交到的地方(资源路径),指定要提交到的资源位置
表单里面要定义表单项
表单是将用户输入的内容以键值对的方式提交
name:定义表单项的键名
value:定义表单项的键值
表单提交多个表单项,键值对会以&连接
文本框,type="text"
提交按钮,type="submit"
密码框,type="password"
单选按钮,type="radio",需要将name属性设置为相同的,才可以实现单选
多选框,type="checkbox",name属性一致,还需要为value赋值
下拉列表,type="select"
用户不输入值的表单项,需要自己定义一个值,eg单选按钮
method属性
get,会将数据以键值对的方式提交,追加到地址栏
post,也是将数据以键值对的方式提交,不会追加到地址栏,而是放到一个专门的请求体里
-->
<form action="target.html" method="get">
用户名:<input type="text" name="username" value=""/><br/>
密码:<input type="password" name="pwd" value=""/><br/>
性别: 女<input type="radio" name="gender"/> 男<input type="radio" name="gender"/><br/>
爱好:香蕉<input type="checkbox" name="favor" value="xj"/>
辣条<input type="checkbox" name="favor" value="lt"/>
茶叶蛋<input type="checkbox" name="favor" value="cyd"/>
<br/>
课程:
<select name="course">
<option value="yw">语文</option>
<option value="sx">数学</option>
<option value="yy">英语</option>
</select>
<br/>
<input type="submit"/>
</form>
|
效果:
