目录

html_quickstart

网页的组成部分

  • 结构(网页上有哪些东西)

    HTML用于描述页面的结构

  • 表现(这些东西长什么样)

    CSS用于控制页面中元素的样式

  • 行为(网页界面和用户交互)

    JavaScript用于响应用户操作

HTML简介

  • HyperTest Markup Language(超文本标记语言)
  • 标记语言,也叫标签语言
  • Html通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)

基本语法

https://www.runoob.com/html/html-tutorial.html

转义字符

字符 转义字符
空格  
< &lt
> &gt;
" &quot;
& &amp;

标签介绍

img

属性src,路径有两种写法

  • 相对路径

    不以/开始的路径都是相对路径,引入的资源相对于当前资源的位置

  • 绝对路径

    /开始的路径都是绝对路径,上传到服务器后,/表示WebContent

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>

效果

20210101162553

点击超链接

20210101162620

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>

效果

20210101163716

合并单元格,colspan属性,跨列,值表示跨几列,rowspan属性跨行

1
2
3
4
<tr>
    <td colspan="2">张三</td>
    <td></td>
</tr>

效果:

20210101164102

表单

网页中的表单是用来向服务器提交信息的,我们最常用的表单就是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>

效果:

20210101171520