python基础-第十篇-10.1HTML基础
- htyper text markup language 即超文本标记语言
- 超文本:就是指页面内可以包含图片、链接,甚至音乐,程序等非文字元素
- 标记语言:标记(标签)构成的语言
- 网页==HTML文档,由浏览器解析,用来展示的
- 静态网页:静态资源,如:xxx.html
- 动态网页:html代码有某种开发语言根据用户请求动态生成的
标签规则
- 是由一对尖括号包裹的单词构成,例如:<html> 所有标签中的单词不可能以数字开头
- 标签不区分大小写,<html>和<HTML>,推荐使用小写
- 标签分为两部分:开始标签<a> 和 结束标签</a>,两个标签之间的部分,我们叫做标签体
- 有些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签,例如:<br/><hr/><input/><img/>
- 标签可以嵌套,但是不能交叉嵌套,<a><b></a></b>
标签属性
- 通常是以键值对形式出现的,例如:name = "nick"
- 属性只能出现在开始标签 或 自闭和标签中
- 属性名字全部小写,属性值必须使用双引号或单引号包裹
- 如果属性值和属性名完全一样,直接写属性名即可,例如 readonly
<head>标签
<title>
<title>你好明天</title>
<base/> 标签为页面上的所有链接规定默认地址或默认目标
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <base href="http://images.cnblogs.com/cnblogs_com/suoning/845162/"/> 7 <base target="_blank" /> 8 </head> 9 <body> 10 11 <img src="o_s.png" alt="图片加载失败。。。"/> 12 <a href="http://cnblogs.com/suoning/">nick blogs</a> 13 14 </body> 15 </html> 16 17 # 上面这段代码中,<img>标签的src属性是一个相对路径,因为<head>中通过base标签设置了链接的默认地址, 18 所以img的src实际的地址是“http://images.cnblogs.com/cnblogs_com/suoning/845162/o_s.png”。 19 同样的,<a>中只是指定了href,并未指定target属性,所以也会使用base中设置的target属性的值。
<link/> 引用外部文档,常见于引用外部样式。重要属性有三个:rel,href,type
- rel 规定文档与被链接文档之间的关系
- rel = “dns-prefetch” 预先解析缓存文档中使用的域名,目的是为了提高网页访问速度,使用场景:在一个网页频繁还是用其他域名资源时。
- rel = “shortout icon”或rel = “icon” 在收藏或标题栏上用于显示的图标。注意:IE浏览器只支持ico格式,为了兼容IE,图片文件采用ico格式
- rel = “stylesheet” 引用外部样式表
- rel = “nofollow” 用于指示搜索引擎不要追踪(爬虫抓取),减少垃圾链接。用于<a>标签,使用场景:网页不被信任或是不希望被搜索引擎录入的网站
- href 资源路径(相对路径/绝对路径)
- type 规定被连接文档的MIME类型,用于明确文件的打开方式,例如:ico文件 image/x-icon
<link rel="icon" href="http://www.jd.com/favicon.ico">
<meta/> 定义关于HTML文档的元数据。重要的属性有三个:http-equiv、name、content
- http-equiv 把content属性值关联到http头部
- Content-Type(浏览器接收的文档类型,一般是text/html)
- refresh(网页刷新,以秒为单位)
- expires(设置网页到期时间,一旦过期,必须到服务器上重传)
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/> <meta http-equiv="Refresh" content="2"> <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> <meta http-equiv="expires" content="6 Jun 2016"/>
- name 把content属性关联到一个名称
- keywords(搜索关键字,用于搜索引擎抓取信息的显示)
- description(搜索到网站后显示的网页内容简述)
- author(站点制作者信息)
- generator(用以说明生成工具)
<meta name="keywords" content="搜索关键字"> <meta name="description" content="简要描述"> <meta name="author" content="http://cnblogs.com/suoning"> <meta name="generator" content="用以说明生成工具">
- content 定义与http-equiv或那么属相相关信息,是必要的属性
<body>标签
标签分类:内联标签和块级标签
- 块级标签:<p> <h1> <table> <ol> <ul> <form> <div>
- 内联标签:<a> <input> <img> <sub> <sup> <textarea> <span>
block(块)元素的特点:
- 总是在新行上开始
- 高度、行高以及外边距和内边距都可控制
- 宽度缺省是它的容器的100%,除非设定一个宽度
- 可以容纳内联元素和其他块元素
inline(内联)元素的特点:
- 和其他元素都在一行上
- 高,行高及外边距和内边距不可改变
- 宽度就是它的文字或图片的宽度,不可改变
- 内联元素只能容纳文本或其他内联元素
对行内元素,需要注意如下:
- 设置宽度width无效
- 设置高度height无效,可以通过line-height来设置
- 设置margin 只有左右margin有效,上下无效
- 设置padding,只有左右padding有效,上下无效。注意元素范围是增大了,但是对元素周围的内容是没影响的
基本标签
- <h1>~<h6> 标题标签
- <p> 段落标签,包裹的内容被换行,并且也上下内容之间有一行空白,其中style = “text-indent:2em”可以设置样式为首行缩进两个字符,另外<blockquote></blockquote>可以用来设置整个段落的缩进。
- <b><strong> 加粗标签
- <strike> 为文字加上一条中线
- <u> 文字下方加下划线
- <em><i> 文字变成斜体
- <sup>he <sup> 上角标 和 下角标
- <br> 换行
- <hr> 水平线
- <div> 块级标签。块常用于布局,行常用于显示内容。div的显示通常使用id或class来标识。id为唯一的标签标识,class为标签的类标识,div的大小是由内容来决定的,默认情况下,高度由内容的高度决定,宽度适应屏幕,可以容纳其他元素,是一个容器
- <span>
<body> <h1>你好</h1> <h2>大家好</h2> 美女好<b>美女好</b> <p>哇!美女啊,<br>去校花网</p> 价格:<strike>998</strike> 18元 <hr> alex<b><em>alex</em></b><em>alex</em> H<sub>2</sub>o <div>坚持</div> </body>
特殊符号
> >
< <
空格
" 引号
© 版权符号
更多:http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
<a> 超链接标签(锚标签),重要属性有三个:href、target、name
- href 超链接地址:可以是web上任意资源,包括图片,网页,样式,脚本文件等。href=‘#’时,表示被链接页面就是当前页面
- target 文档打开时要显示的目标位置,属性值一般有:_blank(新窗口中打开)、_self(默认,在超链接所在的容器中打开)、_parent(在超链接的父容器中打开)、_top(整个容器中打开)、name(框架名称)
- name 锚记名称,作用:跳转到文档的某个地方。返回首页
<body> <a href="#123">跳到尾部</a><br> <a href="http://baidu.com" target="_blank">喜欢我就点我吧</a> <p><a href="http://baidu.com">点我吧</a></p> <p><a href="http://baidu.com" target="_parent">点我</a></p> <a href="http://baidu.com" target="_top">就点我吧</a> <div style="background:red;height:1500px">就是你</div> <div id="123">跳到这里</div> </body>
发送邮件:
<a href="mailto:xxx@xx.com">邮件联系</a>
发起qq临时会话
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=630571017&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:630571017:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> <p><a href="tencent://message/?uin=2183958037" target="_blank"><img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:13></a></p>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 # 更多图片地址如下: 2 # http://wpa.qq.com/pa?p=1:707321921:1 3 # http://wpa.qq.com/pa?p=1:707321921:2 4 # http://wpa.qq.com/pa?p=1:707321921:3 5 # http://wpa.qq.com/pa?p=1:707321921:4 6 # http://wpa.qq.com/pa?p=1:707321921:5 7 # http://wpa.qq.com/pa?p=1:707321921:6 8 # http://wpa.qq.com/pa?p=1:707321921:7 9 # http://wpa.qq.com/pa?p=1:707321921:8 10 # http://wpa.qq.com/pa?p=1:707321921:9 11 # http://wpa.qq.com/pa?p=1:707321921:10 12 # http://wpa.qq.com/pa?p=1:707321921:11 13 # http://wpa.qq.com/pa?p=1:707321921:12 14 # http://wpa.qq.com/pa?p=1:707321921:13
<img> 图形标签,行级标签,用来显示图片,重要属性有:src、title、alt、width、height、align
- src 图片地址
- title 鼠标悬浮在图片上的文字
- alt 图片找不到时要替换的文字
- align 图片周围文字的垂直对齐情况。常用的属性值有:top(顶部对齐)、middle(中部对齐)、bottom(默认,底部对齐)
- width 图片的宽
- height 图片的高(宽高两个属性只用一个,会自动等比缩放)
<body> <img src="1-160I00P938.jpg" title="美女中的美女哦" align="top">和美女在一起就是真爱 <img src="1-160I00P938.jpg" title="美女中的美女哦" align="middle">和美女在一起就是真爱 <p><img src="155.jpg" title="美女中的美女哦" alt="图片加载失败。。。"></p> </body>
列表标签
- <ul> 无序列表标签,<li>列表中的每一项
- <ol> 有序列表标签,<li>列表中的每一项
<li>主要的属性有:type、value两个
- type指明项目的类型,属性值有:A、a、l、i、1、disc(实心圆),square(实心正方形)、circle(空心圆)
- value表示序号值从几开始
- <dl> 定义列表
- <dt> 列表标题
- <dd> 列表项
<body> <ul> <li type="circle">a</li> <li type="1">b</li> <li>c</li> </ul> <ol> <li value="6">d</li> <li>e</li> </ol> <dl> <dt>标题</dt> <dd>第一项</dd> <dd>第二项</dd> </dl> </body>
<table> 表格标签
- <table>属性
- border(表格边框)
- align(水平对齐方式)
- bgcolor(背景颜色)
- cellpadding(内边距,单元格与内容之间的距离)
- cellspacing(外边距,单元格的间距,设置为0时,表格变为实现表格)
- width(表格的宽度)
- <caption> 表格的标题
- <tr> 表格的数据行,table row
- <th> 表格的表头名称,与<td>不同在于文字采用加粗居中的形式显示
- <td> 单元格,用来显示表格内容
- <thead> 表格头部,使结构更加分明
- <tbody> 表格主体部分
- rowspan 单元格竖跨多少行,作用在th或td上
- colspan 单元格横跨多少列(合并单元格),作用在th或td上
<body> <table border="1"> <caption>女神表</caption> <thead> <tr> <th>序号</th> <th>姓名</th> <th>女神</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>nick</td> <td>可可西</td> </tr> </tbody> </table> </body>
<form> 表单标签
表单属性
HTML表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与web服务器的交互。表单标签,要提交的所有内容都应该在该标签中。
属性:action、method、enctype
- action 表单要提交的地址,用于处理表单的内容
- method 提交的方法,默认是get方式提交
- get:提交的键值对,放在地址栏中url后面,安全性相对较差,提交内容长度有限
- post:提交的键值对不在地址栏,安全性相对较高,对提交的内容长度理论上无限制
- enctype 对表单数据进行编码,默认都是要编码的
<body> <form action="https://www.baidu.com/s"> <input type="text" name="wd"> <input type="submit" value="百度一下"> </form> <form action="https://www.sogou.com/web"> <input type="text" name="query"> <input type="submit" value="搜狗搜索"> </form> </body>
表单元素
<input> type属性
- text 文本框输入(默认类型)
- password 密码框
size(指定表单元素的初始宽度,当type为text或password时,表单元素的大小以字符为单位)
maxlength(type为text或password时,表示输入的最大字符数)
readonly 只读
placeolder 框内预置内容(灰色),写上内容时才消失
- radio 单选按钮
name(将name的值设置为相同值,才表示一组数据,才能实现单选功能)
value(必须要写,提交到服务器的key值,实际开发过程中value一般是编号)
checked(是否被选中的状态)
- checkbox 复选框
name(名字要一样才是一组数据)
value(提交到服务器的值)
checked
- file 文件域,上传文件(不同的浏览器表现形式不同),在form标签设置属性enctype=‘multiprt/form-data’
- submit 提交按钮,用于提交表单
- reset 重置按钮,清空表单的输入,恢复到表单默认的状态
- button 普通按钮,常用于绑定事件
- image 图片按钮,用于提交表单,与submit是一样的效果(src图片路径)
- hidden 隐藏字段(value隐藏的内容)
- color 颜色标签
<textarea> 文本域标签。默认表示形式是可以输入很多行文本的文本框
- name 表单提交项的key
- cols 设置文本域宽度
- rows 设置文本域高度,即行数
<select> 下拉框标签,使用时要结合<option>子标签一起使用
- name 表单提交项的key
- size 选项个数
- multiple 多选
- <optgroup>为每一项加上分组
<label>把元素与文本结合起来
友好设计:不只是选中复选框才能选中并打钩,要求点击对应的文字也能选中该复选框。这种情况下要用到<label>标签的for属性(for=“id”即可)
<body> <form> <p>姓名<input type="text"></p> <label for="name">姓名</label> <input id="name" type="text"> </form> </body>
<fieldset> 对表单中的相关元素进行分组
<body> <form> <fieldset> <legend>温馨提示</legend> <div align="middle">不要忘记点赞哦</div> </fieldset> </form> </body>
value:表单提交项的值
对于不同的输入类型,value属性的用法也不同
- type=“button”,“reset”,“submit”--定义按钮上显示的文本
- type=“text”,“password”,“hidden”--定义输入字段的初识值
- type=“checkbox”,“radio”,“image”--定义与输入相关的值
<body> <form action="" method="post" enctype="multipart/form-data"> <p>用户名<input type="text" name="query"></p> <p>密码<input type="password" size="100" maxlength="6"></p> <p><input type="radio" name="sex" value="1">男</p> <p><input type="radio" name="sex" value="2">女</p> <input type="checkbox" name="hobby" value="bb">篮球 <br> <input type="checkbox" name="hobby" value="fb">足球 <br> <input type="button" value="按钮"> <br> <input type="file" name="file_name"> <br> <select name="IT"> <optgroup label="IT"> <option value="c++">c++</option> <option value="Java">Java</option> <option value="python">python</option> </optgroup> </select> <br> <select name="pro"> <optgroup label="江西省"> <option value="1">宜春</option> <option value="2">萍乡</option> <option value="3">南昌</option> </optgroup> </select> <br> 备注 <textarea name="textarea"></textarea> <p> <label for="in">姓名</label> <input id="in" type="text"> </p> <p><input type="submit" value="提交"></p> <fieldset style="width:200px"> <legend>python</legend> <input type="text"> </fieldset> </form> </body>
详见http://www.cnblogs.com/suoning/p/5614372.html