HTML
学习前端完全是为了后面python全栈做准备,一切前端知识都以python内web开发使用的模板语法靠拢
HTML基本范式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
主要构成
head
- 描述信息
meta
-
标签可以设置页面是否支持触屏缩放功能，其中各元素的含义如下:
-
width=device-width，表示宽度按照设备屏幕的宽度。 -
initial-scale=1.0，初始显示缩放比例。 -
minimum-scale=0.5，最小缩放比例。 -
maximum-scale=1.0，最大缩放比例。 -
user-scalable=yes，是否支持可缩放比例（触屏缩放） -
示例:
<!--支持触屏缩放--> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> <!--不支触屏持缩放--> <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
-
-
meta meta标签可以设置关键字，用于搜索引擎收录和关键字搜索
-
示例:
image-20200909095923620
-
示例:
link
- link标签可以设置网页标题上的图标
<link rel="shortcut icon" href="图标文件路径">
body
- 浏览器内呈现内容
- 块级 标签自己独占整行 div
- 行内 标签内容有多少就占多少空间 span
常用的标签
<h1>前端学习</h1>
<div style="color: #1b6d85">定义块的风格,选择颜色</div>
<p style="color:orangered">使用p定义段落,这里也可以定义风格选择颜色</p>
<a href="http://www.baidu.com">添加a标签实现跳转</a>
<ul>
<li>无序列表</li>
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>
<dl>
<dt>表头/dt>
<dd>内容描述</dd>
</dl>
<table border="1">
<tbody>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<thead>
<tr>
<th>第一行</th>
<th>第二行</th>
<th>第三行</th>
</tr>
</thead>
</table>
<img src="图片地址" alt="图片描述">
<h3>文本框</h3>
<input type="text">
<h3>密码框</h3>
<input type="password">
<h3>单选框</h3>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h3>复选框</h3>
<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">打游戏
<h3>上传文件</h3>
<input type="file">
<h3>下拉框单选</h3>
<select name="单选" id="">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
</select>
<h3>下拉框多选</h3>
<select multiple name="多选" id="">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
</select>
<form action="http://www.luffycity.com" method="get" enctype="multipart/form-data">
<input type="file" name="xxxxx">
<input type="submit" value="提交">
</form>
<form action="http//www.x.com" method="get">
<p>用户名: <input type="text" name="user"></p>
<p>密 码: <input type="password" name="pwd"></p>
<p>性别: <input type="radio" name="gender">男
<input type="radio" name="gender">女
</p>
<p>爱好:
<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">打豆豆
</p>
<p>
城市: <select name="城市" id="">
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="黑龙江">黑龙江</option>
</select>
</p>
<p>
备注:
<textarea name="备注" id="" cols="30" rows="10"></textarea>
</p>
<p>
<input type="submit" name="提交">
<input type="reset" name="重置">
</p>
</form>
table
-
<td> 是table data cell 的缩写，单元格
-
<tr> 是table row 的缩写，表格中的一行
-
<th> 是table header cell 的缩写，表头单元格
input
- ext，文本框。
- password，密码框。
- radio，单选框（必须设置name属性相同，否则无法实现）。
- checkbox，复选框。
- file，文件上传。
select
- select标签用于在浏览器上展示下拉框。
textarea
- textarea用于在浏览器上展示多行文本输入框。
form(表单比较常用)
-
表单 在网站开发的过程中，用户可以使用上述【用户交互】相关的标签让用户输入内容，但如果想要再浏览器上把输入的内容提交到后台，则需要
表单和提交按钮。 -
action="/xx/"，表示表单要提交的地址。 -
method="get"，表示表单的提交方式（get 或 post，以后框架部分细讲）。 -
enctype="multipart/form-data"，如果form内部有文件上传，必须加上此设置。 -
<input type="submit" value="提交">用于提交当前所在的表单。 -
<input type="reset" value="重置">用于重置当前标签中的选项。
网友评论