码迷,mamicode.com
首页 > Web开发 > 详细

HTML最基本知识

时间:2017-08-06 23:01:28      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:速度   idt   根目录   服务器   accept   控制   ado   check   多选   

1)有序列表ol,由多个li标签组成。

<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
显示结果中自带序号:

2)无序列表ul
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
显示结果中无序号:

两层无序列表嵌套的话第二层的黑点变为空心:

3)定义列表dl

<dl>
<dt>定义列表的标题</dt>
<dd>定义列表的描述项</dd>
<dd>定义列表的描述项</dd>
<dd>定义列表的描述项</dd>
</dl>
显示结果中,标题自动顶格显示,一个列表一般只有一个标题,但可
以有多个描述项。
4)figure组合标签
包含img一张图片,figcaption图片的标题,在图片正下方显示

<figure>
<img src="img/icon.png" />
<figcaption>
图标
</figcaption>
</figure>
5)div分区标签
用于配合css使用,将网页划分为区块,可以包裹各种标签。

<div style="background-color: blue; >
div里面的文字
</div>
6)span标签
span标签用于包裹行内的文字,常配合css使用修改文字样式。

学习<span style="color: red; font-size: 50px;">前端</span>

7)em、i、strong、b标签
em和i都表示倾斜,strong和b都表示加粗。
em和strong有强调含义,强调给搜索引擎看。strong的强调成都比em
更高。
强调的作用:可以让搜索引擎快速抓取网页的重点内容,实现代码的
语义化。

<em>em标签,字体倾斜+强调</em><br />
<strong>strong标签,字体加粗+强调</strong><br />
<i>仅仅是倾斜</i><br />
<b>仅仅是加粗</b><br />

8)<u>下划线标签</u>

9) 引用标签:blockquote、q、cite。
blockquote:显示效果为整段缩进,用于引用一整段标签,是块级标
签。
q:自动加引号,用于引用一句话,是行级标签。
cite:字体倾斜常用语引用作品名,书画名。
<blockquote cite="">引用标签</blockquote>
<q cite="www.baidu.com">引用,自动加双引号,短引用</q>
<cite>引用,字体倾斜。常用语作品名字的引用</cite>


10)img图片标签(行级标签)
src:图片所在路径。
路径的表示方式:①网络图片地址不建议使用;
②可以使用图片的绝对路径,因为绝
对路径使用file://协议,网页使用http://协 议打开无法访问
file协议的文件。绝对路径写法file:///C:/tupian.jpg
③相对路径,推荐使用的唯一方式。
a.图片在当前文件的下一层"文件夹名
/图片名";
b.图片与当前文件在同一层,直接写
图片名;
c.在上一层,"../图片名",注意图片
必须包含在项目里面不能退出项目根目录。
width/height:宽度高度属性

title:鼠标放在图片上时显示的文字。
alt:图片由于各种原因无法加载出来时显示的文字。
省略alt将默认显示title的名称。
align:图片周围的文字相对于图片的排列方式。top、center、
bottom。
<img src="img/icon.png" width="50px" height="50px" title="鼠
标放在图
片上时显示的文字" alt="图片未加载" align="center" />

11)超链接标签a
href:跳转的地址,可以是网络连接,也可以是本地html文件的相对路
径。
target:超链接新页面打开的位置。_self在当前页面打开(默认),
_blank在新页面打开。
title:鼠标指在超链接上显示的文字。
功能性超链接:
mailto:给指定邮箱发送邮件
tencent:与指定QQ聊天。
锚链接:点击超链接可以跳转到页面的指定的位置(锚点)。
a.在页面指定位置定义一个锚点<a name="top"></a>
b.将超链接的href属性改为 #锚点名称。<a href="#top">
跳转到某位置</a>
c.跳转到其他页面指定锚点的方式。<a href="其他页面的地
址.html#top">其他页面的某位置</a>
12)表格table及相关属性
tr:行;td:列;th:首行表头中每个单元格用th表示,默认文字加粗
居中。
border:给表格的每个td和整个tabl加边框。如果boder的值>1,则只
有最外层边框加粗,td边框不变。
cellspacing:单元格与单元格之间的间距。值为0时,相邻的边框不
会合并,而是两条边框的宽度。
表格边框合并:
style="border-collapse: collapse;"
设置边框合并以后,cellspacing属性将会失效。
cellpadding:单元格内边距,单元格中文字与边框之间的距离。
width/height:表格的宽高。
align:表格的位置。
bodercolor/bgcolor/background:后俩同时存在是背景图生效。
表格的行列属性
作用于tr或者td上的属性:
1、宽高
2、bgcolor。当表格的属性与行列的属性发生冲突时,优先级采用“
近者优先”的原则:table<td<tr
3、align/valign:设置单元格中文字水平对齐方式/垂直对齐方式。
表格的跨行与跨列:
1、跨列:colspan
2、跨行:rowspan
3  H5智能表单

1)H5给我们提供了将form外的input与表单关联的方式。只需要给form表单起一个id,然后给表单外面的input添加form属性,指向这个id,就可以实现表单与input的绑定。
2)H5给我们新增了许多input的新的type类型。
3)H5新增的input属性:
①form:关联制定表单的id。
②placeholder:输入框的提示内容
③required:必填。
④autofocus:指定输入框,自动获取焦点。
⑤autocomplete:记住输入情况。自动提示。可以给form标签设置

 

1 表格完整化结构
caption:表格标题,无论<caption>标签放在表格第几行,表格标题
永远在表格正上方居中。
thead:表头,永远在紧挨表格最上部。
tbody:身体部分,在thead之下,在tfoot之上。
tfoot:尾部,永远在表格最下部。
2 表单

1)action:表单提交给哪个服务器地址;
method:表单提交数据的方式。
get和post区别:
①get使用url传递数据,所有内容在地址栏可见,不安全。
post的数据无法在地址栏看到,较安全。
②get传递的数据量有限,而且只能传递纯文本。而host可传
递大量数据,且可传递图片、视频等文件。
③get传输速度比post快。
get传递数据的url格式:http://原来的地址.html?
name1=value1&name2=value2;
所以,input使用时,name属性必不可少,若缺少name,
将导致该输入框的数据不向后台传递。
2)input常用属性(属性名与值相同的,值都可以省略)
①type:表示当前输入框时哪种类型的;
②name:给输入框起别名,向后台传递时,使用name=value的形式传
递;
③value:当前input的默认值
④placeholder:输入框的提示内容,当输入框有value时,提示内容
消除。
⑤hidden:隐藏当前输入框,可以写为hidden="hidden",也可以省略
属性值,只写<input type="text" hidden />隐藏的输入框内容,依
然可以向后台传递数据。
⑥disabled:禁用当前输入框,显示但不能使用。被禁用的输入框内
容,将不能向后台传递数据。
3)input的type类型:
①text
②password
③radio:单选。value值不能省略。凭借name是否相同,区
分按钮是否为同一组。同一组按钮只能选中一个,name必须相同。
checked="checked" 设置单选按钮,默认被选中 。
④checkbox:多选按钮,其他与单选按钮相同。
⑤file:文件上传框。
accept属性,可以限制上传哪种类型的文件。"*"表示可以上
传所有类型文件,"image/*"可以上传图片类型的所有。
multiple:设置可以上传多个文件。
⑥submit:表单提交按钮。
⑦reset:表单重置按钮。
⑧image:图形提交按钮,作用同submit。
⑨button:无任何作用,只显示按钮形状。
⑩hidden:隐藏的输入框。与text输入框使用hidden时效果一样。
4)select下拉选择区块
①此标签里每一项用<option></option>。
②name属性,学要卸载select标签中。
③option标签中value值若有则传递value值,若没有则传递标签中间
的文字。
④option添加属性selected="selected",设置默认选中项。
⑤selected属性multiple,设置当前下拉控件可以多选。(了解)
⑥option添加属性title,鼠标指向时显示的文字。
⑦select可以使用<optgroup></optgroup>,标签对选项进行分组,用
lable属性显示分组名。
5)textarea文本域
①文本域大小用css控制。
②设置文本域大小不能在网页中显示时拖动改变。
style="resize:none;"
③属性readonly只读。文本域中的文字在网页中显示时不能更改。
④文字超出区域处理overflow样式,可以设置文字超出区域的显示方
式。style="overflow:"
a.overflow:hidden;超出区域的字隐藏。
b.overflow:scroll;无论文字多少都会显示水平&垂直滚动条

c.overflow:auto;默认效果。文字多出现滚动条,文字少不
出现。
d.overflow-x/-y单独修改某个方向的滚动条。

3  H5智能表单
1)H5给我们提供了将form外的input与表单关联的方式。只需要给
form表单起一个id,然后给表单外面的input添加form属性,指向这个
id,就可以实现表单与input的绑定。
2)H5给我们新增了许多input的新的type类型。
3)H5新增的input属性:
①form:关联制定表单的id。
②placeholder:输入框的提示内容
③required:必填。
④autofocus:指定输入框,自动获取焦点。
⑤autocomplete:记住输入情况。自动提示。可以给form标
签设置。

HTML最基本知识

标签:速度   idt   根目录   服务器   accept   控制   ado   check   多选   

原文地址:http://www.cnblogs.com/kaolah5/p/7296113.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!