html干货部分
1.标签
a.文本标签:p,span,a,b,i,u,em.文本标签里只能放文字,图片,表单元素. 上标,下标: 5<sup>2</sup>(上标) 8<sub>2</sub>(下标)
b.容器级标签:div,h系列,li,dt,dd,容器级标签里可以放任何东西.
1.块级标签div和span:
div的语义division"分割";span的语义"范围,跨度",都是重要的盒子.两者的区别是,div块会换行,span不换行的(span内不可放标签).
2. 标签a (超链接,以a标签为例)
1.超链接:<a href="new.html">点击进入新网页</a>
2.锚链接:<a name="top">顶部,设定锚链接</a>
<a href="#top">回到顶部,返回到设定锚链接</a>
3.邮件链接:<a href="mailto:leew2017@126.com">找m</a>
4.特殊链接:<a href="#">跳转到顶部</a>
与js相关:
<a href="javascript:alert(1)">内容</a>执行
<a href="javascript:;">内容</a>代表不执行
5.超链接的属性:
1.href:目标URL
2.title:悬停文本
3.name:主要用于设置一个锚点的名称.
4.target:打开浏览器的方式:
_self:在同一个网页显示(默认)
_blank:在新的窗口中打开
_parent:在父窗口显示
_top:在顶级窗口中显示 c.图片标签<img/>(属于单边标记)
img:代表一张图片,img是自封闭标签,也称为单标签.
src属性:指图片的路径(相对路径,绝对路径都可以)
例:
<img src="2.jpg">
<img src=".\2.jpg">(linux形式)
<img src="data:images/1.jpg">
<img src="file://C:\Users\Danny\明星\1.jpg" alt="" />
<img src="http://www.baidu.com/2016040102.jpg">
img其他属性:
width:宽度(宽高做好只设置一个)
height:高度
title:提示性文本.公有属性(鼠标悬停时出现的文本)
align:指图片的水平对齐方式,
属性值可以是:left,center,right(左中右)
alt:当照片显示不出来时,代替图片显示的内容. d. h1~h6标签 : 定义标题的大小(h1最大,h6最小),
具有align排版属性,属性值可以是:left,right,center (分别代表 靠左,靠右,居中) e.列表标签ul,ol,dl
1.无序列表<ul>,无序列表中每一项都是<li>
ul:unordered list(无序列表)
li:list item(列表项,必须跟随ul或ol)
ul属性值:<ul type="属性值"></ul>
disc(实心原点,默认)
square(实心方点)
circle(空心圆)
2.有序列表<ol>,里面的每一项是<li>
ol:ordered list(有序列表)
ol属性值:<ol type="属性值"></ol>
1(阿拉伯数字,默认)
a(有序小写字母)
A(有序大写字母)
i(另一种数字方式)
I(同i大写)
3.定义列表<dl> (dl与dd都只能属于对方,定义列表的作用很大)
dl:definition list,没有属性,dl的子元素只能是dt和dd.
dt:definition title,列表的标题,这标题是必须的
dd:definition description 列表项,如果不需要,可不加
2.表格标签<table>
(表格是由行组成的(行是由列组成的),而非行和列。)
表格<table>是由每行<tr>组成的,每行是由<td>组成的. a.table的属性:
border:边框,像素为单位
style="border-collapse:college;"
单元格的线和表格的边框线合并
width:宽度
height:高度
bordercolor:表格边框颜色
align:表格的水平对齐方式,属性值:left center right
cellpadding:单元格内容到边距离,像素单位,默认为0
cellspacing:单元格和单元格之间的距离(外边框),默认0
bgcolor="#99cc66":表格的背景颜色
background="路径src/...":背景照片
背景照片的优先级大于背景颜色
b.行<tr> (表格是由一行一行组成的)
属性:
dir:此行行内内容排列方式(公有属性)
ltr:从左到右(left to right,默认)
rtl:从右到左(right to left)
bgcolor:设置这一行的背景颜色(注:行内无法设置背景照片)
height:1行的高度
align="center":行内内容的水平居中显示(left,center,right)
valign="middle":行内内容垂直居中显示(top,middle,bottom)
c.单元格<td>
属性:
align:内容水平对齐方式.(left,center,right)
valign:内容垂直对齐方式(top,middle,bottom)
width:单元格的高度
bgcolor:设置单元格的背景颜色
background:设置这个单元格的背景图片
d.单元格的合并
将两个单元格合并,就需要删除一个单元格
单元格属性:
colspan:横向合并.例colspan=""
表示当前单元格水平方向上要占据两个位置.
rowspan:纵向合并.例rowspan=""
表示当前单元格垂直方向上要占据两个位置.
e.其他属性
<th>:加粗的单元格,相当于<td>+<d> 属性同<td>标签
<caption>:表格的标题,使用时和tr标签并用. f.表格的标签<thead>,<tbody>,<tfoot>
写了控制读取顺序 3.表单标签用<form>表示,用于与服务器的交互.表单就是收集用户信息的,就是让用户填写的,选择的.
属性:
name:表单的名称,用于JS来操作和控制表单时使用.
id:表单的名称,用于来操作或控制表单时使用.
action:指定表单数据的处理程序,
一般是php,如:action="login.php"
method:表单数据的提交方式,一般取值:get(默认),post
4.<input>输入标签(文本框) :用于接收用户输入.
例:<input type="text" />
属性:type="属性值"属性值可以是:
text(默认):文本类型
password:密码类型
radio:选单按钮,名字相同的按钮作为一组进行单选 (单选按钮,天生只能选一个,想多选必须名字一样)
checkbox:多选按钮,名字相同的按钮作为一组进行选择.
checked:将单选按钮或多选按钮默认处于选中状态.
当<input>标签的type="radio"时,可以用这个属性.可省略.
hidden:隐藏框,在表单中包含不希望用户看见的信息
buttom:普通按钮,结合js代码进行使用
submit:提交按钮,传送当前表单的数据给服务器或其他程序处理.
这个按钮不需要写value,自动就会有"提交"文字,这个按钮有提交功能.
点击后,表单就会被提交到form标签的action属性指定的页面中去.
reset:重置按钮,清空当前表单的内容,并设置为最初的默认值.
image:图片按钮,和提交按钮的功能完全一致,只不过图片按钮可以显示图片.
file:文件选择框
value="内容":文本框里的默认内容
size="":表示文本框内可以显示五十个字符,一个英文或中文都算一个字符.
readondy:文本框只读,不能编辑,因为它的属性值也是readonly,所以属性值可不写.
这个属性Google光标点不进去,IE可点进去,但不可以编辑
disabled:文本框只读,不能编辑,光标点不进去,属性值可以不写.
5.<select>:下拉列表标签
<select>标签里面每一项用<option>表示.select就是"选择",option就是"选项".
select标签和ul,ol,dl一样,都是组标签.
<select>标签的属性:
multiple:可以对下拉列表中的选项进行多选,没有属性值
size="":如果属性值大于1,则列表为滚动视图,默认属性值为1,即下拉视图.
<option>标签的属性:
selected:预选中.没有属性值.
<textarea>标签:多行文本输入框
属性:
value:提交给服务器的值
rows="":指定文本区域的行数
cols="":指定文本区域的列数
readonly:只读
6.表单语义化
比如,我们在注册一个网站信息时,部分必填,另部分选填,这时可以利用表单的语义化。
7.<label>标签
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女
上述,必须选单选框才可以选中,文字和input标签没有关系
<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>
input元素有一个id,然后label标签有for属性,和id相同,这个label和input就有绑定关系了。当然了,复选框也有label:(任何表单元素都有label) 8.颜色 red,green,blue,orange,gray等
rgb(255,0,0)
#FF0000 , #0000FF , #00FF00 等 9.特殊字符:
:空格(non-breaking spacing,不断打空格)
< :小于号(less than)
> :大于号(greater than)
& :符号&
" :双引号
' :单引号
© :版权标志
™:商标标志
html干货部分:1.标签a.文本标签:p,span,a,b,i,u,em.文本标签里只能放文字,图片,表单元素.上标,下标: 5<sup>2</sup>(上标) 8<sub>2</sub>(下标)b.容器级标签:div,h系列,li,dt,dd,容器级标签里可以放任何东西.1.块级标签div和span:div的语义division"分割";span的语义"范围,跨度",都是重要的盒子.两者的区别是,div块会换行,span不换行的(span内不可放标签).2. 标签a (超链接,以a标签为例)1.超链接:<a href="new.html">点击进入新网页</a> 2.锚链接:<a name="top">顶部,设定锚链接</a> <a href="#top">回到顶部,返回到设定锚链接</a>3.邮件链接:<a href="mailto:leew2017@126.com">找m</a>4.特殊链接:<a href="#">跳转到顶部</a>与js相关:<a href="javascript:alert(1)">内容</a>执行<a href="javascript:;">内容</a>代表不执行5.超链接的属性:1.href:目标URL2.title:悬停文本3.name:主要用于设置一个锚点的名称.4.target:打开浏览器的方式:_self:在同一个网页显示(默认)_blank:在新的窗口中打开_parent:在父窗口显示_top:在顶级窗口中显示
c.图片标签<img/>(属于单边标记)img:代表一张图片,img是自封闭标签,也称为单标签.src属性:指图片的路径(相对路径,绝对路径都可以)例:<img src="2.jpg"><img src=".\2.jpg">(linux形式)<img src="data:images/1.jpg"><img src="file://C:\Users\Danny\明星\1.jpg" alt="" /><img src="http://www.baidu.com/2016040102.jpg">img其他属性:width:宽度(宽高做好只设置一个)height:高度title:提示性文本.公有属性(鼠标悬停时出现的文本)align:指图片的水平对齐方式,属性值可以是:left,center,right(左中右)alt:当照片显示不出来时,代替图片显示的内容.
d. h1~h6标签 : 定义标题的大小(h1最大,h6最小),具有align排版属性,属性值可以是:left,right,center(分别代表 靠左,靠右,居中)e.列表标签ul,ol,dl1.无序列表<ul>,无序列表中每一项都是<li>ul:unordered list(无序列表)li:list item(列表项,必须跟随ul或ol)ul属性值:<ul type="属性值"></ul>disc(实心原点,默认)square(实心方点)circle(空心圆)2.有序列表<ol>,里面的每一项是<li>ol:ordered list(有序列表)ol属性值:<ol type="属性值"></ol>1(阿拉伯数字,默认)a(有序小写字母)A(有序大写字母)i(另一种数字方式) I(同i大写)3.定义列表<dl>(dl与dd都只能属于对方,定义列表的作用很大)dl:definition list,没有属性,dl的子元素只能是dt和dd.dt:definition title,列表的标题,这标题是必须的dd:definition description 列表项,如果不需要,可不加 2.表格标签<table> (表格是由行组成的(行是由列组成的),而非行和列。)表格<table>是由每行<tr>组成的,每行是由<td>组成的.
a.table的属性:border:边框,像素为单位style="border-collapse:college;"单元格的线和表格的边框线合并width:宽度height:高度bordercolor:表格边框颜色align:表格的水平对齐方式,属性值:left center rightcellpadding:单元格内容到边距离,像素单位,默认为0cellspacing:单元格和单元格之间的距离(外边框),默认0bgcolor="#99cc66":表格的背景颜色background="路径src/...":背景照片背景照片的优先级大于背景颜色b.行<tr> (表格是由一行一行组成的) 属性: dir:此行行内内容排列方式(公有属性) ltr:从左到右(left to right,默认) rtl:从右到左(right to left) bgcolor:设置这一行的背景颜色(注:行内无法设置背景照片) height:1行的高度 align="center":行内内容的水平居中显示(left,center,right) valign="middle":行内内容垂直居中显示(top,middle,bottom)c.单元格<td> 属性: align:内容水平对齐方式.(left,center,right) valign:内容垂直对齐方式(top,middle,bottom) width:单元格的高度 bgcolor:设置单元格的背景颜色 background:设置这个单元格的背景图片d.单元格的合并 将两个单元格合并,就需要删除一个单元格 单元格属性: colspan:横向合并.例colspan="2" 表示当前单元格水平方向上要占据两个位置. rowspan:纵向合并.例rowspan="2" 表示当前单元格垂直方向上要占据两个位置. e.其他属性 <th>:加粗的单元格,相当于<td>+<d> 属性同<td>标签 <caption>:表格的标题,使用时和tr标签并用.
f.表格的标签<thead>,<tbody>,<tfoot> 写了控制读取顺序
3.表单标签用<form>表示,用于与服务器的交互.表单就是收集用户信息的,就是让用户填写的,选择的. 属性: name:表单的名称,用于JS来操作和控制表单时使用. id:表单的名称,用于来操作或控制表单时使用. action:指定表单数据的处理程序, 一般是php,如:action="login.php" method:表单数据的提交方式,一般取值:get(默认),post4.<input>输入标签(文本框) :用于接收用户输入.例:<input type="text" />属性:type="属性值"属性值可以是:text(默认):文本类型password:密码类型radio:选单按钮,名字相同的按钮作为一组进行单选 (单选按钮,天生只能选一个,想多选必须名字一样)checkbox:多选按钮,名字相同的按钮作为一组进行选择.checked:将单选按钮或多选按钮默认处于选中状态.当<input>标签的type="radio"时,可以用这个属性.可省略.hidden:隐藏框,在表单中包含不希望用户看见的信息buttom:普通按钮,结合js代码进行使用submit:提交按钮,传送当前表单的数据给服务器或其他程序处理.这个按钮不需要写value,自动就会有"提交"文字,这个按钮有提交功能.点击后,表单就会被提交到form标签的action属性指定的页面中去.reset:重置按钮,清空当前表单的内容,并设置为最初的默认值.image:图片按钮,和提交按钮的功能完全一致,只不过图片按钮可以显示图片.file:文件选择框value="内容":文本框里的默认内容size="50":表示文本框内可以显示五十个字符,一个英文或中文都算一个字符.readondy:文本框只读,不能编辑,因为它的属性值也是readonly,所以属性值可不写.这个属性Google光标点不进去,IE可点进去,但不可以编辑disabled:文本框只读,不能编辑,光标点不进去,属性值可以不写.5.<select>:下拉列表标签<select>标签里面每一项用<option>表示.select就是"选择",option就是"选项".select标签和ul,ol,dl一样,都是组标签.<select>标签的属性:multiple:可以对下拉列表中的选项进行多选,没有属性值size="3":如果属性值大于1,则列表为滚动视图,默认属性值为1,即下拉视图.<option>标签的属性:selected:预选中.没有属性值.<textarea>标签:多行文本输入框属性:value:提交给服务器的值rows="4":指定文本区域的行数cols="20":指定文本区域的列数readonly:只读6.表单语义化比如,我们在注册一个网站信息时,部分必填,另部分选填,这时可以利用表单的语义化。7.<label>标签<input type="radio" name="sex" /> 男<input type="radio" name="sex" /> 女上述,必须选单选框才可以选中,文字和input标签没有关系<input type="radio" name="sex" id="nan" /> <label for="nan">男</label><input type="radio" name="sex" id="nv" /> <label for="nv">女</label>input元素有一个id,然后label标签有for属性,和id相同,这个label和input就有绑定关系了。当然了,复选框也有label:(任何表单元素都有label)
8.颜色 red,green,blue,orange,gray等 rgb(255,0,0) #FF0000 , #0000FF , #00FF00 等
9.特殊字符: :空格(non-breaking spacing,不断打空格)< :小于号(less than)> :大于号(greater than)& :符号&" :双引号' :单引号© :版权标志™:商标标志
html干货部分的更多相关文章
- 干货分享:让你分分钟学会 JS 闭包
闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...
- 干货分享:SQLSERVER使用裸设备
干货分享:SQLSERVER使用裸设备 这篇文章也适合ORACLE DBA和MYSQL DBA 阅读 裸设备适用于Linux和Windows 在ORACLE和MYSQL里也是支持裸设备的!! 介绍 大 ...
- Android学习路线总结,绝对干货
title: Android学习路线总结,绝对干货 tags: Android学习路线,Android学习资料,怎么学习android grammar_cjkRuby: true --- 一.前言 不 ...
- 记录我这一年的技术之路(nodejs纯干货)
2015年12月28日23:19:54 更新koa应用.学习型网站和开发者工具等 coding伊始 开始认认真真的学习技术还是2015.10.21日开始的,记得很清楚,那天,是我在龙湖正式学习的第一天 ...
- AFNetworking 3.0 源码解读 总结(干货)(下)
承接上一篇AFNetworking 3.0 源码解读 总结(干货)(上) 21.网络服务类型NSURLRequestNetworkServiceType 示例代码: typedef NS_ENUM(N ...
- 【NLP】干货!Python NLTK结合stanford NLP工具包进行文本处理
干货!详述Python NLTK下如何使用stanford NLP工具包 作者:白宁超 2016年11月6日19:28:43 摘要:NLTK是由宾夕法尼亚大学计算机和信息科学使用python语言实现的 ...
- 【初码干货】在Window Server 2016中使用Web Deploy方式发布.NET Web应用的重新梳理
在学习和工作的过程中,发现很多同事.朋友,在做.NET Web应用发布的时候,依然在走 生成-复制到服务器 这样的方式,稍微高级一点的,就是先发布到本地,再上传到服务器 这种方式不仅效率低下,而且不易 ...
- 【C#公共帮助类】WinRarHelper帮助类,实现文件或文件夹压缩和解压,实战干货
关于本文档的说明 本文档使用WinRAR方式来进行简单的压缩和解压动作,纯干货,实际项目这种压缩方式用的少一点,一般我会使用第三方的压缩dll来实现,就如同我上一个压缩类博客,压缩的是zip文件htt ...
- iOS - GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD - ②)
距上一篇博客"APP引导页的高度集成 - DHGuidePageHUD - ①"的发布有一段时间了, 后来又在SDK中补充了一些新的内容进去但是一直没来得及跟大家分享, 今天来跟大 ...
- iOS - GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD - ①)
好长时间没更新博客, 是时候来一波干货分享了;APP引导页话不多说每一个APP都会用到,分量不重但是不可缺少,不论是APP的首次安装还是版本的更新,首先展现给用户眼前的也就只有它了吧,当然这里讲的不是 ...
随机推荐
- cucumbe无法识别中文场景的问题
import org.junit.runner.RunWith; import cucumber.api.CucumberOptions; import cucumber.api.junit.Cucu ...
- Scrapy框架的执行流程解析
这里主要介绍七个大类Command->CrawlerProcess->Crawler->ExecutionEngine->sceduler另外还有两个类:Request和Htt ...
- Java中的XML
XML是一种可扩展的标记语言,可扩展就是<>内的东西可以自己定义,可以随便写.标记语言就是加了<>符号的 .HTML是超文本标记语言,不可以拓展,因为你写个<p> ...
- Project facet Java version 1.8 not supported
把其它的项目到自己的eclipse中后,进行运行项目之后,就会提示为“Project facet Java version 1.8 not supported”. 进行更改配置,进行右键项目就会弹 ...
- 如何计算UDP/TCP检验和checksum
如何计算UDP/TCP检验和checksum 一.下面的图是一个UDP的检验和所需要用到的所有信息,包括三个部分:1.UDP伪首部2.UDP首部3.UDP的数据部分(切记不要遗漏该部分,否则就~吐血了 ...
- windows server 禁用智能卡服务的步骤
许多用户对于系统中的很多功能都不太了解,其中智能卡服务更是少有人知.智能卡服务就是对插入的智能卡进行管理和访问控制,大多数用户都无需使用此项功能.那么在Win7系统中要怎么取消智能卡服务呢? 1.首先 ...
- C#利用Guid实现真随机数
C#中的随机数可以利用Random类很简单地生成随机数,代码如下: Random rdmNum=new Random();//生成随机数对象 int ans=rdmNum.Next(a,b);//生成 ...
- gcc 编译 汇编 链接
要想研究使用 gcc, gcc-multilib 这个包是一定要安装的, 它允许通过 -m32 和 -m64 选项来选择生成 32 位或者 64 的 ELF 文件. 我们知道程序的默认起点是 _sta ...
- talk命令帮助文档(ubuntu 18.04)
TALK() BSD General Commands Manual TALK() NAME talk — talk to another user SYNOPSIS talk person [tty ...
- applicationContext.xml配置Spring样板
<?xml version="1.0" encoding="UTF-8" ?><beans xmlns:xsi="http://ww ...