Python:Day40 html
URL包括三个部分:协议、域名、路径
htyper text markup language (html) 即超文本标记语言
前端一共包括三个内容:html、css、js
html做为基础,让CSS进行渲染,js进行动画
<h1> </h1> 这个整体就是h1标签,标签的名字就是h1,h就是head的缩写,是标题的意思,是闭合标签
<head>标签里面的内容都是网页上看不到的内容,但是都和浏览器解析有关的一些内容
标签不区分大小写,推荐使用小写
标签的属性写在标签中,如:<h1 id='123'>,属性是由一组组的键值对来表示的,只能出现在开始标签或自闭合标签中。
如果属性名和属性值完全一样,直接写属性名即可,这是缩写的一种表现
有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />自闭合标签中的/可以加也可以不加,可以放前面也可以放后面,通常放后面,这样只是为了方便看。
<mate>标签
meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
<meta charset="UTF-8">
<meta http-equiv="refresh" content="2,url=http://www.jd.com">
前面的为秒数,后面的为地址,地址必须要有http://,前面的url=可以不加,不区分大小写,不加后面URL的话,就是刷新本页面
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7">
name属性一共有两个值:keywords/description
<title>标签
<title>博客园</title>
title标签中的内容就是显示在打开网页的最上面的。
<link>标签
rel:relationship的英文缩写,rel属性用于定义链接的文件和HTML文档之间的关系。
注意:HTML中只有在使用了 href 属性的情况下才能使用 rel 属性。
rel属性是必需的。定义当前文档与被链接文档之间的关系。
href是Hypertext Reference的缩写。意思是指定超链接目标的URL。
<link rel="icon" href="http://www.jd.com/favicon.ico">
以下为body标签:
<h1>标签
h标签只有6个,就是h1-h6,是块级标签
<p>标签
段落标签,不仅换行,而且中间还隔行,是块级标签
<p>床前明月光</p>
<p>疑是地上霜</p>
<br/>换行标签
br是break的简写。由于html对于多个空格或换行,只认为是一个空格,所以需要此标签
床前明月光<br/>
疑是地上霜
<hr/>水平线标签
<div>标签
div标签的功能是什么能功能都没有,是一个块级标签
hello before<div>hello world</div>
显示结果:
hello before
hello world
<span>标签
span标签和div标签一样,都是什么功能都没有,是内联标签。
<img>标签
img是给网页加图片的标签,是内联标签
<img src="1.jpg" width="200px" height="200px" alt="图片加载不成功时提示的" title="鼠标放在图片是显示的文字">
<a>标签
a标签是内联标签
a标签两个功能:1、链接 2、锚(href后面引用的id前面一定要加#号)
<a href="http://www.baidu.com" target="_blank" title="鼠标放在文字上显示的内容">百度</a> traget的作用是在当前页打开还是从新开一页,blank是新开一页 <a href="#div1">第一章</a>
<div id="div1">第一章内容</div>
列表标签
ul是unordered list 无序列表
ol是ordered list 有序列表
dl是defind list 定义列表,目录那种格式
dt是defind title 定义标题
dd是defind data 定义数据
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul> <ol>
<li>2222</li>
<li>2222</li>
<li>2222</li>
</ol> <dl>
<dt>第一章</dt>
<dt>第二章</dt>
<dt>第三章</dt>
</dl>
<table>表格标签
border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. <tr>: table row <th>: table head cell <td>: table data cell rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列(即合并单元格) <th>: table header <tbody>(不常用): 为表格进行分区.
示例:
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>邮箱</th>
</tr> <tr>
<th rowspan="2">姓名</th>
<th>性别</th>
<th>邮箱</th>
</tr> <tr>
<th colspan="2">性别</th>
</tr> </table>
<form>标签
所有的表单内容都要放在form标签中,不然这些数据都不知道要发到哪。
form表单中有input、select、textarea、label标签
input标签中又有很多的类型。
select标签中要插入<option>或<optgroup>标签
label标签通过id和其它标签进行关联
<form action="/xiaohu" method="post" enctype="multipart/form-data">
<p>用户名:<input type="text" name="username"></p>
<p>密码:<input type="password" name="pwd"></p>
<p>性别:男<input type="radio" name="sex" value="0"> </p>
<p>女<input type="radio" name="sex" value="1"></p>
<p>爱好:篮球<input type="checkbox" name="hobby" value="basketball"></p>
<p>足球<input type="checkbox" name="hobby" value="football"></p>
<p><input type="file" name="doc"></p> 出生地:<select name="city" multiple size="2">
<option value="beijing">北京</option>
<option value="tianjing">天津</option>
<option value="shanghai">上海</option>
<option value="jiangsu">江苏</option>
</select> 城市:<select name="province" >
<optgroup label="江苏省">
<option value="nanjing">南京</option>
<option value="suzhou">苏州</option>
<option value="yangzhou">扬州</option>
</optgroup>
<optgroup label="北京省">
<option value="chaoyang">朝阳</option>
<option value="haidian">海淀</option>
<option value="yizhuang">亦庄</option>
</optgroup>
</select> <textarea rows="20" cols="20">自我简介</textarea> <label for="idhao">姓名</label>
<input id="idhao" type="text"> <p><input type="submit" value="提交"></p>
</form>
form标签里面如果不填action和method时,会有一个默认值,默认当前URL和GET方法
input标签是自闭合,内联标签
<QueryDict: {'pwd': ['77932423'], 'sex': ['0'], 'hobby': ['basketball', 'football'], 'username': ['bili']}>
file: <MultiValueDict: {'doc': [<InMemoryUploadedFile: 20180326121913.png (image/png)>]}>
表单是以一个字典的形式发过去的,键就是input中的name属性,值是一个列表,对于文本框,值就是输入的内容,对于选择框,值要在input中设置value。
<select>中mutiple属性的效果是可以选择多个,size的效果是能同时看到几个选择项
其它标签:
注意:这些标签都是内联标签
<b>给字体加粗</b>
<em>变成斜体</em>
<strike>去除</strike>
<del>delete</del>
2<sup>3</sup>
2<sub>3</sub>
显示结果: 给字体加粗 变成斜体 去除 delete 23 23
特殊符号:
代表一个空格
© 代表版权符号
< 代表小于号
> 代表大于号
注意:所有的标签统分为块级和内联
内联(in-line)标签就是自己占一块,占多少取决于中间内容大小。块级(block)标签。
Python:Day40 html的更多相关文章
- Python:使用threading模块实现多线程编程
转:http://blog.csdn.net/bravezhe/article/details/8585437 Python:使用threading模块实现多线程编程一[综述] Python这门解释性 ...
- Python:渗透测试开源项目
Python:渗透测试开源项目[源码值得精读] sql注入工具:sqlmap DNS安全监测:DNSRecon 暴力破解测试工具:patator XSS漏洞利用工具:XSSer Web服务器压力测试工 ...
- Python:开发Sublime插件,方便PHP开发
Python:开发Sublime插件,方便PHP开发 背景 最近在学习PHP,开发环境选择了Sublime2,开发过程发现执行PHP程序非常不方便,需要自己在浏览器中输入路径以进行调试,这点不如Dre ...
- Python:高级主题之(属性取值和赋值过程、属性描述符、装饰器)
Python:高级主题之(属性取值和赋值过程.属性描述符.装饰器) 背景 学习了Javascript才知道原来属性的取值和赋值操作访问的“位置”可能不同.还有词法作用域这个东西,这也是我学习任何一门语 ...
- Python:Python学习总结
Python:Python学习总结 背景 PHP的$和->让人输入的手疼(PHP确实非常简洁和强大,适合WEB编程),Ruby的#.@.@@也好不到哪里(OO人员最该学习的一门语言). Pyth ...
- 产品经理学Python:参数传递方式
这是关于Python的第5篇文章,主要介绍下参数传递方式和如何设计自己的函数. (一) 本篇主要介绍2种参数传递方式. 位置参数 调用函数时,根据函数定义的参数位置来传递参数. def right_t ...
- Python:Anaconda安装虚拟环境到指定路径
1 曾经的困扰 有段时间,想使用基于不同python版本的anaconda,就直接从官网下载了两个不同的anaconda版本进行安装.刚开始的时候,还觉得也没啥问题.用了一小段时间,在安装其他的第三方 ...
- Python:list 和 array的对比以及转换时的注意事项
Python:list 和 array的对比以及转换时的注意事项 zoerywzhou@163.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2017-6-4 ...
- Python:游戏:五子棋之人机对战
本文代码基于 python3.6 和 pygame1.9.4. 五子棋比起我之前写的几款游戏来说,难度提高了不少.如果是人与人对战,那么,电脑只需要判断是否赢了就可以.如果是人机对战,那你还得让电脑知 ...
随机推荐
- 10个常见的JavaScript BUG
译者按: 安全起见,在开发中我基本不用==. 原文: 10 COMMON JAVASCRIPT BUGS AND HOW TO AVOID THEM 译者: Fundebug 为了保证可读性,本文采用 ...
- js之单例模式
单例模式是指一个类,只有一个实例.实现的思路是,创建实例时候加判断,如果有实例则返回,如果没有就new一个,并返回. 第一步: 创建类. function Waiter(id, name, salar ...
- hive 导出如数为csv格式
hive导出csv格式的数据 命令如下: hive -e "select concat_ws(',',appKey,clickJson) adt.jsontest as st from &q ...
- laravel表单验证
效果展示: 代码 实现: 后台: use Validator; public function login() { if($input = Input::all()){ //验证提交的 ...
- 3:Python条件语句
1.if基本语句 if 条件: 内部代码块 内部代码块 else …… print('……') 2.if支持嵌套 if 1==1: if 2==2 print(n1) print(n2) else: ...
- C#导入Excel、Excel导入、导入.xls 、导入.xlsx、Excel2003版本、Excel2007版本
C#导入Excel: 1.选择Excel 03版文件 2.选择需要读取数据的Excel工作表 3.选择工作表中需要读取的列 源码地址在图片下面,不要点击图片,点击下载地址跳转下载.
- MySql: Year, Quarter, Month, Day, Hour statistics
-- 统计 select count(*) as '当天记录数' from web_product where date(p_createtime) = curdate(); select count ...
- CSS3属性animation-play-state控制动画运行或暂停的技巧
animation-play-state介绍 animation-play-state 属性规定动画正在运行还是暂停. div{ animation-play-state:paused; -webki ...
- SAP FI配置步骤
http://blog.sina.com.cn/s/blog_8eda1a620100uwzj.html No. 配置对象 事务代码 配置内容 路径 备注 1 定义公司 OX15 企业结构>定义 ...
- 在php中使用对称加密DES3,开发银行卡绑定,实名验证……
对称加密:对称加密是一种数据加密算法,对一组数据的加密和解密都使用一样的密钥(key),可以有效保护金融数据,常见的对称加密有DES,3DES,AES.RC2.RC4.RC5. DES3: 对DES算 ...