python前端HTML
超文本标记语言(Hypertext Markup Language, HTML)
是一种用于创建网页的标记语言,不是一种编程语言,没有逻辑的
HTML基础文档结构
<!DOCTYPE html> #声明为HTML5文档
<html lang="zh-CN"> #是文档的开始标记和结束的标记,lang设置浏览器语言
<head> #定义了HTML文档的开头部分.它们之间的内容不会在浏览器的文档窗口显示.包含了文档的元(meta)数据,配置信息等,是给浏览器看的,你看到的是在body标签里面写的
<meta charset="UTF-8"> #定义了网页标题,在浏览器标题栏显示,charset声明编码,否则会出现乱码
<title>网页标题</title> #定义了网页标题,在浏览器标题栏显示
</head>
<body> #文本是可见的网页主体内容
</body>
</html>
标签的语法
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息
标签分类
块级标签(行级标签):
h1-h6, p, div, table, ol, ul, form,
内联标签(行内标签):
a, img, span, strong, select, input
基本标签(块级标签和内联标签)
不加标签的纯文字也是可以在body中写的
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行-->
<br>
<!--水平线-->
<hr> #就是单独个一个水平线
Meta标签两个属性分别是http-equiv属性和name属性
http-equiv属性:
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> #如果把URL和后面的内容去掉，就是2秒钟刷新一次，这些内容了解一下就行
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微软的一个全新的浏览器,其实就是告诉IE浏览器
name属性:
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> #关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的
#SEO就是做这个的
<meta name="description" content="xxxxxpythonxxx学习"> #是对这个文档的描述
a标签(超链接标签)
超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序
href属性指定目标网页地址,该地址可以有几种类型
绝对URL - 指向另一个站点(href="http://www.jd.com)
相对URL - 指当前站点中确切的路径(href="index.htm")
锚URL - 指向页面中的锚(href="#top")
target:
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页
<a name="#top">顶点</a>
......
<a href="#top">回到顶部</a>
#跳转一个新标签页
<a href="http://www.baidu.com" target="_blank">管理系统</a>
#title 鼠标放上去之后显示出来的提示语(连接到图片)
<a href="test.png" title="这是一张图片">连接到指定文件</a>
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)"> src的路径又分为两种:网上的一个图片路径和本地的一个相对图片路径 #本地图片 <img src="test.png" alt="这是一号图片" width="500px" title="这是一张图片"> #网络图片 <img src="https://www.baidu.com/img/bd_logo1.png">
p段落标签：包裹的文字自成一个段落，此段落自带行间距
<body>
西湖垂柳丝柳锤西湖
<p>
黄山落叶松叶落山黄
</p>
<p>
上海自来水来自海上
</p>
山西运煤车煤运西山
</body>
div标签：除了换行什么都没有
<body>
<div>西湖垂柳丝柳锤西湖</div>
<div>黄山落叶松叶落山黄</div>
</body>
span标签：无任何效果,一行输出
<body>
<span>西湖垂柳丝柳锤西湖</span>
<span>黄山落叶松叶落山黄</span>
</body>
table标签：自带换行
tr: 定义table标签里的一行
td: 定义tr标签里的一个单元格
border="1" 给表格加边框
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列(即合并单元格)
caption: 表格的标题
<body>
<table border="1" style="border-collapse:collapse;" width="500px">
<tr>
<td>a</td>
<td rowspan="2">b</td>
<td>c</td>
<td>j</td>
</tr>
<caption>表格标题</caption>
<tr>
<td>d</td>
<td colspan="2">e</td>
<td>f</td>
<td>h</td>
<td>m</td>
</tr>
</body>
列表标签
ul无序列表
type属性:
disc (实心圆点,默认值)
circle(空心圆圈)
square(实心方块)
none(无样式)
ol有序列表
type属性: start是从数字几开始
1 数字列表,默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
dl标题列表(就像大纲一样,有一个层级效果)
通过dt定义一级元素
通过dd定义二级元素
<body>
<ul type="circle">
<li>a</li>
<li>b</li>
</ul>
<ol type="1" start="11">
<li>c</li>
<li>d</li>
</ol>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
</body>
form表单
功能：
表单用于向服务器传输数据,从而实现用户与Web服务器的交互
表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等
表单还可以包含textarea、select、fieldset和 label标签
表单属性
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self） |
input
<input> 元素会根据不同的type属性,变化为多种形态
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框（不显示明文） | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" name='x' /> |
| radio | 单选框 | <input type="radio" name='x' /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> #发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新 |
| reset | 重置按钮 | <input type="reset" value="重置" /> #页面不会刷新，将所有输入的内容清空 |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> （等学了form表单之后再学这个） |
属性说明:
name：表单提交时的'键',注意和id的区别
value：表单提交时对应项的值
type="button", "reset", "submit"时,为按钮上显示的文本年内容
type="text","password","hidden"时,为输入框的初始值
type="checkbox", "radio", "file",为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用
select标签
属性说明：
multiple：布尔属性，设置后为多选下拉框，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值
label标签
定义：<label> 标签为 input 元素定义标注(标记),如果不用这个label给input标签一个标记,input会变黄,不影响使用,只是提示你,别忘了给用户一些提示,也就是这个label标签
说明：
label 元素不会向用户呈现任何特殊效果.但是点击label标签里面的文本,那么和他关联的input标签就获得了光标,让你输入内容
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
extarea多行文本
属性说明：
name：名称
rows：行数 #相当于文本框高度设置
cols：列数 #相当于文本框长度设置
disabled：禁用
<body>
<form action="">
<!--label的for指定到input的id上,他俩是一一对应的-->
<label for="input1">用户名</label>
<input type="text" placeholder="请输入你的用户名" id="input1" width="">
<br>
<!--密码输入框,type=password是密文-->
密码<input type="password">
<br>
<input type="date">
<br>
<!--textarea多行文本-->
<textarea name="" cols="100" rows="10"></textarea>
<br>
<!--提交按钮-->
<input type="submit">
<!--选择文件按钮-->
<input type="file">
<!--重置按钮-->
<input type="reset">
<!--下拉选项框-->
<select name="" multiple size="3">
<option value="选项1" selected >选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
</select>
<!--勾选框-->
<input type="checkbox" checked="checked">
<!--单选-->
选项1 <input type="radio" name="选项">
选项2 <input type="radio" name="选项">
<!--多选-->
选项1 <input type="radio" name='选项'>
选项2 <input type="radio" name='选项'>
选项3 <input type="radio" name='选项'>
<!--隐藏次输入框-->
<input type="hidden" name="aaaaa">
<!--仅仅是一个按钮,不带任何作用,点缀用-->
<input type="button" value="点缀">
<!--点击图片提交按钮-->
<input type="image" src="test.png" width="20px">
</form>
</body>
浙公网安备 33010602011771号