Python的平凡之路(14)
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head> <body>
文档的内容......
</body>
</html>
<title>
:指定整个网页的标题,在浏览器最上方显示。<base>
:为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。<meta>
:提供有关页面的基本信息<body>
:我们所写的代码必须放在此标签內。<link>
:定义文档与外部资源的关系。- 例子:<meta http-equiv=“refresh" content="3;http://www.baidu.com”> 3秒之后,自动跳转到百度页面。
<p>
标签和<br>
标签的区别在于:<p>
标签会在段落的前后自动插入一个空行,而<br>
标签没有空行;而且<br>
标签没有属性。注意<br>
没有结束标签,把<br>
标签写为 <br/>
是经得起未来考验的做法<span>
和<div>
唯一的区别在于:<span>
是不换行的,而<div>
是换行的<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
input type='password' - name属性,value="赵凡"
input type='submit' - value='提交' 提交按钮,表单
input type='button' - value='登录' 按钮
input type='radio' - 单选框 value,checked="checked",name属性(name相同则互斥)
input type='checkbox' - 复选框 value, checked="checked",name属性(批量获取数据)
input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data"
input type='rest' - 重置
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<a> 标签定义超链接,用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性,它指示链接的目标。
在所有浏览器中,链接的默认外观是:
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
<img src="/i/eg_tulip.jpg"
alt="上海鲜花港 - 郁金香" title="这是帅哥"/>
无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
浏览器显示如下:
- Coffee
- Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
浏览器显示如下:
- Coffee
- Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
浏览器显示如下:
- Coffee
- Black hot drink
- Milk
- White cold drink
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<label> 标签为 input 元素定义标注(标记)。label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
fieldset 元素可将表单内的相关元素分组。<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。<fieldset> 标签没有必需的或唯一的属性。<legend> 标签为 fieldset 元素定义标题。
<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>
<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。rm 元素是块级元素,其前后会产生折行
<form>
</form>
…
#i1{
height: 48px;
}
- class选择器 ******
.名称{
...
}
<标签 class='名称'> </标签>
- 标签选择器
div{
...
}
所有div设置上此样式
- 层级选择器(空格) ******
.c1 .c2 div{
}
- 组合选择器(逗号) ******
#c1,.c2,div{
}
- 属性选择器 ******
对选择到的标签再通过属性再进行一次筛选
.c1[n='alex']{ width:100px; height:200px; }
PS:
- 优先级,标签上style优先,编写顺序,就近原则
width, 宽度 像素,百分比
text-align:ceter, 水平方向居中
line-height,垂直方向根据标签高度
color、 字体颜色
font-size、 字体大小
font-weight 字体加粗
display: inline;块级标签转行内
display: block;行内标签转块级标签
display: inline-block;具有inline,默认自己有多少占多少,具有block,可以设置无法设置高度,宽度,padding margin
******
行内标签:无法设置高度,宽度,padding margin
块级标签:设置高度,宽度,padding margin
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 网站编码 -->
<meta charset="UTF-8">
<!-- 网站关键词收录 -->
<meta name="keywords" content="JJ YY PP XX">
<!-- 网站描述 -->
<meta name="description" content="This is a test page!">
<!-- 自动刷新、跳转 -->
<meta http-equiv="Refresh" content="3;Url=http://www.baidu.com">
<!-- link icon 自己练-->
<title>第一个页面</title>
</head>
<body>
<a href="http://www.we.com">WE 理财</a>
</body>
</html>
t2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--  代表空格 -->
<a href="http://www.oldboyedu.com">老 <> 男 <> 孩 <> </a>
<!-- h标签加大加粗,p段落之间有间距 -->
<p><h1>www</h1><br/><h2>oldboy</h2><br/><h3>.com</h3><br/></p>
<!-- span就是一个白板 -->
<span>line1</span>
<span>line2</span>
<span>line3</span><br/><br/>
<div>line6</div><br/>
<div>line7</div><br/>
<div>line8</div><br/>
<div id="Tesla">
HELLO,TESLA
</div>
</body>
</html>
t3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML练习</title>
</head>
<body>
<form action="http://localhost:8888/index" method="POST">
<input type="text" name="user"/>
<input type="text" name="email"/>
<input type="password" name="pwd" />
<input type="button" value="登录1" />
<input type="submit" value="登录2" />
</form>
<br/>
<form action="http://localhost:8888/index" method="GET">
<input type="text" name="user"/>
<input type="text" name="email"/>
<input type="password" name="pwd" />
<input type="button" value="登录1" />
<input type="submit" value="登录2" />
</form>
<br/> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML练习</title>
</head>
<body>
<!-- 搜索框跳转 -->
<form action="https://www.sogou.com/web">
<input type="text" name="query"/>
<input type="submit" value="搜索" />
</form>
<br/> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML练习</title>
</head>
<body>
<form>
<div>
<!-- size参数代表允许的数量multiplec参数提供多选功能 -->
<select name="city" >
<option value="1">北京</option>
<option value="2">上海</option>
<!-- selected是默认值的参数 -->
<option value="3" selected="selected">广东</option>
<option value="4">南京</option>
<option value="5">广州</option>
</select>
<input type="text" name="user" />
<p>--请选择性别--</p>
男: <input type="radio" name="gender" value="1" />
女: <input type="radio" name="gender" value="2" />
alex: <input type="radio" name="gender" value="3" />
<p>--爱好--</p>
篮球:<input type="checkbox" name="favor" value="1" />
足球:<input type="checkbox" name="favor" value="2" />
<p>--技能--</p>
<!-- checked="checked"默认选项 -->
撩妹: <input type="checkbox" name="skill" checked="checked" />
写代码:<input type="checkbox" name="skill" value="2"/>
<p>--上传文件--</p>
<input type="file" name="fname" />
</div>
<textarea name="memo">ASDF</textarea>
<input type="submit" value="提交"/>
<input type="reset" value="重置" />
</form> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a> <div id="i1" style="height:800px;">第一章的内容</div>
<div id="i2" style="height:800px;">第二章的内容</div>
<div id="i3" style="height:800px;">第三章的内容</div>
<div id="i4" style="height:800px;">第四章的内容</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="2">
<thead>
<th>主机名</th>
<th>端口</th>
<th>操作</th>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>
<a href="t2.html">查看详细</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>第二行,第3列</td>
</tr>
</tbody>
</table>
<table border="2">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="3">1</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- font-size字体大小, font-weight字体加粗 -->
<div style="height: 50px;width: 80%; border:2px solid red;text-align: center;line-height:50px;font-weight: bold">www</div>
</body>
</html>
Python的平凡之路(14)的更多相关文章
- Python的平凡之路(8)
(本文是对平凡之路(7)的补充等) 一.动态导入模块 import importlib __import__('import_lib.metaclass') #这是解释器自己内部用的 #importl ...
- Python的平凡之路(16)
一.HTML+CSS补充 0.常用页面布局 <!DOCTYPE html> <html lang="en"><head> <meta ch ...
- Python的平凡之路(13)
一.Python的paramiko模块介绍 Python 的paramiko模块,该模块和SSH用于连接远程服务器并执行相关操作 SSH client 用于连接远程服务器并执行基本命令 基于用户名和密 ...
- Python的平凡之路(12)
一.数据库介绍 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据.我们也可以将数据存储在文件中,但 ...
- Python的平凡之路(11)
一. rabbitmq 1 进程Queue: 父进程与子进程进行交互,或者同属于同一父进程下多个子进程进行交互 2 队列通信: send1.py #!/usr/bin/env python#Au ...
- Python的平凡之路(9)
一.Paramiko模块练习 1. Paramiko模块介绍 Paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接 2 .SSHclie ...
- Python的平凡之路(5)
一.模块介绍 定义: 模块--用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质就是.py结尾的python文件(文件名test.py,模块名test) 包—用来从逻辑上组织 ...
- Python的平凡之路(20)
(提问复习为主) 一.Django请求的生命周期 武彦涛: 路由系统 -> 视图函数(获取模板+数据=>渲染) -> 字符串返回给用户 二.路由 ...
- Python的平凡之路(19)
一.Django请求生命周期 对于所有的web框架来说本质就是一个socket服务端,浏览器是socket客户端 ...
随机推荐
- Spring 配置解析之Properties
http://www.cnblogs.com/dragonfei/archive/2016/10/09/5906474.html *********************************** ...
- JS实现页面打印
[原文链接] 1.js实现(可实现局部打印) <input id="btnPrint" type="button" value="打印" ...
- java覆盖重写规则
重写规则之一:重写方法不能比被重写方法限制有更严格的访问级别.(但是可以更广泛,比如父类方法是包访问权限,子类的重写方法是public访问权限.) 比如:Object类有个toString()方法,开 ...
- Docker实践,来自沪江、滴滴、蘑菇街架构师的交流分享
架构师小组交流会:每期选一个时下最热门的技术话题进行实践经验分享. 第一期主题:容器实践.Docker 作为当前最具颠覆性的开源技术之一,其轻量虚拟化.可移植性是CI/CD,DevOps,微服务的重要 ...
- OneProxy安全策略
set gaccess <groupname> <level> 注意事项– 级别0:没有限制– 级别1:禁止DDL– 级别2:必须要有where条件– 级别4:禁止Delete ...
- AR/VR技术交流
本人建了一个QQ群(群号:331922761),欢迎对AR,VR技术感兴趣的同学加入一起学习讨论.
- UnsupportedClassVersionError 错误解决办法
偶然遇到关于版本问题的错误,为了以后查找方便记录下来.有更好的办法欢迎大家更正. 错误内容: Exception in thread "main" java.lang.Unsupp ...
- Tomcat(免安装版)的安装与配置
一.下载Tomcat Tomcat可以从http://tomcat.apache.org/网站下载,选择任意版本,在 Binary Distributions 下的zip包既是. 二.配置Tomcat ...
- RHEL 6.0服务器安装Oracle 11G R2 最终版
RHEL6安装Oracle 11g R2最终版 结合网上教程 服务器实战所得 1.使用DVD做yum源新建dvd挂载目录[root@fxq-dp ~]# mkdir /media/iso进入到DVD挂 ...
- 20169212《Linux内核原理与分析》课程总结
20169212<Linux内核原理与分析>课程总结 每周作业链接汇总 第一周作业:完成linux基础入门实验,了解一些基础的命令操作. 第二周作业:学习MOOC课程--计算机是如何工作的 ...