网页的组成部分
-
结构（网页上有哪些东西）
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>
|
效果：
