html
html:5
+ Tab键
ctrl + / 注释某一/多行 <!-- -->
注释不支持嵌套;注释不能写在HTML标签中
/* */
用在css'样式' js'动态效果' 代码中注释. //
js代码注释.
html5 中 不强制小写; 没有闭合标签也不会报错; 标签属性的值不加引号不会报错
前端写的代码都给浏览器进行解释,后端python代码是给python解释器进行解释...
小技巧, 那些需要闭合的标签<双标签>,eg a标签 p标签, 开始标签和结束标签之间会包含内容显示到页面上.
自闭合标签<单标签>就不用.. eg: img标签, link标签, 它们用标签属性就完成了要展示达到的效果.
html搭框架,css初始样式,js根据用户的交互操作修改标签样式..
学习前端原则: 不过分纠结为什么,能出效果就行!前端所见即所得..记不住没关系,查阅资料即可...
# 标签的分类
# 容器级标签
可以嵌套其它所有标签.
h系列
ul>li
ol>li
dl>dt+dd
div
2
3
4
5
# 文本级标签
只能嵌套文字/图片/超链接的标签.
p
span
strong
em
ins
del
2
3
4
5
6
# head内常用标签
放一堆配置信息
<!-- 指定字符集 注意:要与写入文件的编码保持一致! -->
<meta charset="gbk">
<!-- 3秒后刷新跳转到指定网站 -->
<meta http-equiv="refresh" content="3,http://www.baidu.com">
<meta name="Keywords" content="关键字1,关键字2...">
<meta name="Description" content="描述网站...">
<title>百度一下,你就知道</title>
<!-- 'ico在线生成' 网站图标在本地可以用相对路径-->
<link rel='icon' href="favicon.ico">
<!-- 定义内部样式 不推荐.. -->
<style></style>
<!-- 引入外部样式文件 -->
<link rel="stylesheet" href="mystyle.css">
<!-- 定义JavaScript代码或引入JavaScript文件 -->
<script src="hello.js"></script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Ps: 网站加载的图片 eg 图标 css js 文件 通常会放到一台专门的文件服务器(对内存硬盘等要求很高,为了应付大量的加载到网页中的请求)
# body内常用标签
放显示在页面中的内容..
# 标签语义化
要知道 HTML标签应该是专门用来表达语义的...
但有些标签还附带了样式的功能..这应该是css干的事情.
而有些标签却只能修改样式,没有语义!!我们应该支持html标签语义化!!
<br> 换行
<hr> 分割线
<font color="red" size="10px">修改文字大小,颜色</font>
<div>用来标记一块内容,没有具体的语义</div>
<span>用来标记一行中的一小段内容,没有具体的语义。</span>
<b> 加粗 </b> <strong>语义:定义重要性强调的文字</strong>
<u> 下划线 </u> <ins>语义:定义插入的文字</ins>
<i> 倾斜 </i> <em>语义:定义强调的文字</em>
<s> 删除线 </s> <del>语义:定义被删除的文字 </del>
<!-- 上方右侧新的标签是有语义的, 上方左侧老的标签只是单纯的添加样式 -->
2
3
4
5
6
7
8
9
10
# 字符实体
在HTML中对空格/回车/tab不敏感, 会把多个空格/回车/tab当作成一个空格来处理.
<body>
Hello World. my name is python.
<p><print></p>
<p>¥1000000</p>
</body>
2
3
4
5
内容 | 代码 |
---|---|
空格 | |
> | > |
< | < |
& | & |
¥ | ¥ |
版权© | © |
注册® | ® |
HTML特殊符号对照表: http://tool.chinaz.com/Tools/HtmlChar.aspx
# h系列标签
语义: 标记内容为一个标题, 全称headline
虽然h1-h6标签的显示样式是从大到小. 但再次强调: 记忆HTML标签的显示样式是没有意义的.
Ps: 通常一个网站的h1标签只有一个. 跟搜索引擎的收录有点关系.
# p标签
语义: 标记内容为一个段落,全称paragraph
显示的样式有 换行 的效果.. Hhhh...
# img标签
语义: 标记一个图片,全称image. 是自闭合的标签..
<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />
<!--
1> src指定的图片地址可以是网络地址,也可以是一个本地地址,本地地址可以用绝对或相对路径
2> 图片的格式可以是png、jpg和gif
3> 如果没有指定图片的width和height则按照图片默认的宽高显示.
若指定图片的width和height则可能让图片变形. 单位px.
可以只指定了高或宽其中一个值,系统会根据该值计算另外一个值,并且都是等比拉伸的,图片将不会变形 自适应..
屏幕是由一个个像素点'发光元件'组成的.每个发光元件都有RGB颜色.
-->
2
3
4
5
6
7
8
9
10
11
# a标签
语义: 标记一个内容为超链接, 全称anchor
超链接标签是超文本文件的精髓,可以控制页面与页面之间的跳转
<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">文本|图片</a>
<!--
1> a标签不仅可以标记文字,也可以标记图片
<a href="https://www.baidu.com" style="text-decoration: none"><img src="mv.png" /></a>
2> a标签必须有href属性,可以为空值,若指定的话 href的值必须是http://或https://开头
url地址 = 协议 http:// + 域名 www.baidu.com + 端口 :80 + 虚拟路径 /aaa/bbb/c.html
3> a标签还可以跳转到自己的页面
4> 标签属性 target="_blank"代表在新页面中打开
如果页面中大量的a标签都需要设置target="_blank",
那么我们可以在head标签内新增一个base标签进行统一设置 <base target="_blank">
如果a标签自己设置了target,那么就以自己的为准,否则就会参照base的设置
-->
2
3
4
5
6
7
8
9
10
11
12
13
假链接: 点击之后不会跳转的链接
<a href="">刷新页面 回到网页的顶部</a>
<a href="#">页面不会刷新 回到网页的顶部</a>
<!-- 通常回到顶部 都会添加css过渡动画效果 不至于一下子就回到顶部-->
<!-- 意思是点击a标签执行一段js代码,但这里js里面啥也没有,就什么也不执行! -->
<a href="javascript:">没有任何反应.</a>
2
3
4
5
6
页面内锚点: 两种实现方式,推荐使用第二种!!因为id很宝贵..通常会在跟js配合的时候才会使用id..
<body>
<a href="#p1" style="text-decoration: none">自动跳转到id为p1的标签处</a>
<a href="#p2" style="text-decoration: none">自动跳转到name为p2的标签处</a>
<p>111</p>
<p>111</p>
<p id="p1" style="color: red">跳转到这..</p>
<p>111</p>
<p>111</p>
<p>111</p>
<a href="" name="p2"></a> <!-- 不会占位置 -->
<a style="color: blue">跳转到这..</a>
<p>111</p>
<p>111</p>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
# 列表标签
语义: 标记一堆数据是一个整体/列表
html中列表标签分为三种: 无序列表(使用最多) 有序列表(极少使用) 自定义列表(也会经常使用)
ul>li*3 + Tab键
dl>(dt+dd*2)*2 + Tab键
Ps: 去除前面的点 css样式 list-style: none;
<body>
<!-- 可以列表嵌套 -->
<!--
无序列表
disc:实心圆(默认值);circle:空心圆;square:实心矩形;none:不显示标识
-->
<ul type="square">
<li>
<h2>蔬菜</h2>
<ul>
<li>茄子</li>
<li>萝卜</li>
</ul>
</li>
<li>
<h2>水果</h2>
<ul>
<li>香蕉</li>
<li>梨子</li>
</ul>
</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>秒杀</li>
<li>优惠卷</li>
<li>PLUS会员</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>自定义标题1<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dt>自定义标题2<dt>
<dd>描述2<dd>
<dd>描述3<dd>
</dl>
</body>
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
# table标签
语义: 标记一段数据为表格
快速创建四行三列的表格标签table>tr*4>td*3 + Tab键
<body>
<!--
表格属性
宽度width 高度height -- table、td、th标签
注意:给td加,只要不超过table的宽高,表的整体大小就不会变,只在内部进行调整
水平对齐align 垂直对齐valign
外边距cellspacing(表的单元格与边框的距离)
内边距cellpadding(单元格中的内容与表格单元格之间的距离)
三种方式实现细线边框
表格和单元格都有边框,border属性值=0边框消失;
若值>0,仅会改变围绕表格的边框的宽度,单元格的边框宽度保持为1..
<table border="1px" style="border-collapse: collapse;border: 1px solid red">
单元格的合并 作用在td标签上.
<td rowspan="2">一个单元格占两行,删除下面那一个单元格</td>
<td colspan="2">一个单元格占两列,删除右面那一个单元格</td>
注意: 由于把某一个单元格当作了多个单元格来看待,所以就会多出一些单元格,需要删掉一些对应方向的td.
一定要记住,单元格合并永远是向后或者向下合并,而不能向前或向上合并
可以定义表格的结构
表格的标题:caption 表格的表头信息:thead 表格的主体信息:tbody(必须要有) 表尾信息:tfoot
<caption>员工信息表</caption>
<thead>
<th>性别</th>
<th>年龄</th>
<th>性别</th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot></tfoot>
-->
<table border="1px" style="border-collapse: collapse;border: 1px solid red">
<tr> <!-- 第一行 -->
<td>性别</td> <!-- 第一行第一个单元格 -->
<td>年龄</td>
<td>性别</td>
</tr>
<tr> <!-- 第二行 -->
<td>egon</td>
<td>18</td>
<td>male</td>
</tr>
<tr> <!-- 第三行 -->
<td>小川</td>
<td>20</td>
<td>male</td>
</tr>
</table>
</body>
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
# form标签!!!
form标签的属性: action method enctype
form标签里的控件: input label textarea select
input的属性 type name value placeholder disabled
type属性的值: text password radio checkbox file submit button reset
参考思维导图: https://www.processon.com/view/link/5aeea789e4b084d6e4bf6911#map
PS:a标签可以用get方法向后台提交数据
2
3
4
5
6
7
8
9
# form标签的属性
action method enctype
<form action="https://www.baidu.com/a/b/c" method="post" enctype="multipart/form-data">
# action
- 作用: 指定向何处发送表单数据
- 取值:
- 绝对URL eg:
https://www.baidu.com/a/b/c.html
- 相对URL eg:
/a/b/c.html
浏览器会自动补全当前所在的url地址(协议+域名+端口)
- 绝对URL eg:
# method
- 作用: 定义表单提交数据的方式 Ps form表单提交数据都是k-v的形式
- 取值:
- get 默认值,明文提交,提交的数据直接显示在url地址中,安全性低
提交数据有大小限制,最大为2KB
eg:https://127.0.0.1:8080/?username=egon&password=admin123
- post 提交的数据不会显示到url地址中,安全性高
提交数据无大小限制
会将数据放到 请求体 里面username=egon&password=admin123
- get 默认值,明文提交,提交的数据直接显示在url地址中,安全性低
提交数据有大小限制,最大为2KB
# enctype
作用: 规定在发送到服务器之前应该如何对表单数据进行编码
即提交前以什么样子组织数据取值:
application/x-www-form-urlencoded
在发送前编码所有字符,不允许提交文件(默认)urlencoded格式 会用 & 符号作为分隔符组织多组k-v数据
multipart/form-data
专门用于前端往后台 上传文件 的格式
即不对字符编码,在使用包含文件上传控件的表单时,必须使用该值
text/plain
只对普通字符进行编码 (了解)提交后的展现形式为
username=egon password=admin123
没有具体的分隔符
# form内表单控件
input label textarea select
如何提交数据? 用户往表单中输入信息,点击提交.
submit提交按钮 会先将所有的输入内容 (eg:输入的账号密码、单选多选等) 都组织成k-v的形式,
然后按照urlencoded要求的格式,将这多组k-v数据(name-value)以&符号作为分隔符组织到一起提交到后端.后端再以&符号为分隔符做解析处理!!(框架会帮我们做解析工作)
# input
◎ input控件: 用于接收用户输入
type属性
指定控件类型, 属性值如下
text 输入时显示明文 用户名:
<input type="text" name="user">
password输入时不显示明文 密码:
<input type="password" name="pwd">
radio 单选框
<!-- 注意: 要想完成单选,多个input框的name属性值必须相同 设定单选框的默认值,必须给input标签添加checked属性:checked="checked" checked="checked"可以简写为checked (在HTML中如果属性的名称与属性的取值一样,可以简写) 敲黑板(^_-) ’男 女 保密‘这些提示信息文本内容是不会提交到后台的哦!! 真正提交到后台的数据是input里面value值的内容.. --> 性别: <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女 <input type="radio" name="gender" value="none" checked="checked">保密
1
2
3
4
5
6
7
8
9
10
11
12checkbox 复选框
<!-- 注意: 要想完成多选,多个input框的name属性值必须相同 --> 爱好: <input type="checkbox" name="hobbies" value="basketball">篮球 <input type="checkbox" name="hobbies" value="football">足球 <input type="checkbox" name="hobbies" value="volleyball" checked="checked">排球 <input type="checkbox" name="hobbies" value="footbath" checked="checked">足浴
1
2
3
4
5
6
7
8file 上传文件
<!-- 注意: form表单的method必须为POST, enctype必须为multipart/form-data --> <form action="/aaa" method="post" enctype="multipart/form-data"> <input type="file" name="uploadfile"> </form>
1
2
3
4
5
6
7submit 提交按钮, 可以自动提交 其默认的value值为'提交'
注意: 应该放到form表单的最后,一点击它,它就会将上方那些标签的k-v数据全部采集到,往后端发..
<input type="submit" value="登录">
button 普通按钮: 需要绑定onclick事件才能使用
<input type="button" value="我是按钮" onclick="alert(123)">
<input type="image" src="egon.png" onclick="alert(123)">
reset 重置按钮: 把表单中填写好的数据清除
<input type="reset" value="我是重置按钮">
name属性
指定提交数据的 key
value属性
指定提交数据的 value, 可设置输入框的默认值
用户名: <input type="text" name="user" value="egon"> 密码: <input type="password" name="pwd" value="admin123">
1
2placeholder属性
提示信息 提示用户应该输入什么样的数据
用户名:<input type="text" name="user" placeholder="请输入用户名"> 密码:<input type="password" name="pwd" placeholder="请输入密码">
1
2disabled属性
禁用该控件,不会提交任何关于该控件的数据. 即不允许用户操作这个input控件..
# label
◎ label控件: 关联文本与表单元素,实现点击文本时,如同点击表单元素一样
<!--
for属性的值等于被关联的表单元素的ID值 就实现了绑定
绑定效果 ==> 鼠标点击提示的文本信息-'用户名'.. 鼠标光标就会在对应的文本框里闪烁..
-->
<label for="uname">用户名:</label>
<input type="text" name="username" id="uname">
性别:
<input type="radio" name="gender" value="male" id="gender1">
<label for="gender1">男</label>
<input type="radio" name="gender" value="female" id="gender2">
<label for="gender2">女</label>
2
3
4
5
6
7
8
9
10
11
12
# textarea
◎ textarea控件: 多行输入框
<!--
1. 默认情况下,可以无限换行
2. 可以通过cols和row来指定宽度和高度
cols来指定行数,rows来指定列数. 虽然指定了列数和行数,但仍可以无限往下输入
3. 默认情况下输入框是可以手动拉伸的,如果不想手动拉伸,需要定制css -- style="resize: none"
-->
<form>
<textarea name="comment" id="" cols="50" rows="3" style="resize: none">
春眠不觉晓,处处闻啼鸟,夜来风雨声,花落知多少.(这些文本会显示在多行输入框里面)
</textarea>
</form>
2
3
4
5
6
7
8
9
10
11
# select
◎ select控件: 下拉列表
<!--
select标签
默认只能选择一个.
选择多个(选择后按住ctrl键选择另一个),select标签设置multiple属性.
size为框中默认显示的个数 若size属性取值大于1,为滚动列表,否则就是下拉列表
option标签
默认选中 option标签设置selected属性
optgroup标签
只是一个提示归类分组的效果 相当于一个标题 可以不要..
-->
<form action="">
<select name="addr" size="3" multiple>
<optgroup label="超一线城市">
<option value="深圳">0_深圳</option>
<option value="北京">1_北京</option>
<option value="上海">2_上海</option>
<option value="广州" selected>3_广州</option>
</optgroup>
<optgroup label="一线城市">
<option value="成都">0_深圳</option>
<option value="杭州">1_北京</option>
</optgroup>
</select>
</form>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24