html 标签
<hn></hn> 共有6类,从h1到h6,用作设置文本标题
<p></p>段落标签,用于设置文本的段落
<span></span>没有语义,只是为了设置单独文本的样式。
//////////////////////////////////////////////////////////////
<strong></strong>强调字体,加粗
<q></q>短文本引用,如:引用了别人的名言等。默认添加双引号
<blockquote></blockquote>长文本引用,引用较长的话。默认添加双引号
html中不识别回车和空格,所以要实现回车和空格,用标签
<br/>分行显示,即回车
空格
<hr/>添加水平横线,分割用,默认灰色,有点粗
<address></address>地址标签,为网页添加地址信息,默认斜体
<code></code>在文本中插入一行代码
<pre></pre>用于在文本中插入多段代码
///////////////////////////////////////////////////////////
<ul>
<li>精彩少年</li>
<li>美丽突然出现</li>
<li>触动心灵的旋律</li>
</ul> 用于显示信息列表,默认li标签前面会带个小点。
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>JavaScript全攻略</li>
</ol> 用于有顺序的显示信息列表,默认li标签前面会带个数字顺序,默认从1开始。
<div></div>把逻辑独立的区域划分出来
id=""为div命名,唯一的
////////////////////////////////////////////////////////////////
创建表格的四个元素:
table、tbody、tr、th、td
1、<table>…</table>:整个表格以<table>
标记开始、</table>
标记结束。
2、<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。
3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>
,说明一行中就有几列。
5、<th>…</th>:表格的头部的一个单元格,表格表头。
6、表格中列的个数,取决于一行中数据单元格的个数。
7、复杂表格
(1)rowspan 属性规定单元格可横跨的行数;
(2)colspan 属性规定单元格可横跨的列数
默认:
1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的
2、表头,也就是th标签中的文本默认为粗体并且居中显示
<table summary="表格简介文本" > <caption>2012年到2013年库存记录</caption> 为表格添加摘要和标题,不会显示在页面中,主要用于搜索引擎抓取
/////////////////////////////////////////////////////////////////////////
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> title 用于语义化,便于搜索引擎抓取
<a href="目标网址" target="_blank">click here!</a>
链接默认在当前窗口打开,设置target,在新的窗口打开
mailto 属性发送电子邮件:
如果mailto后面同时有多个参数的话,第一个参数必须以“?
”开头,后面的参数每一个都以“&
”分隔。
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> 为网页插入图片
<form method="传送方式" action="服务器文件"></form>
例如:
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form> 所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在<form></form>标签之间(否则用户输入的信息提交不到服务器上)。
文本输入框、密码输入框
1
、type:
当type="text"时,输入框为文本
输入框;
当type="password"时,
输入框为密码输入框。
当type="submit"时,
为提交按键。
当type="reset"时,
为重置按键。
2
、name:
为文本框命名,以备后台程序ASP 、PHP使用。
3
、value:
为文本输入框设置默认值。(一般起到提示作用)
举例
:
<form> 姓名: <input type="text" name="myName"> <br/> 密码: <input type="password" name="pass"> </form>
<textarea rows="行数" cols="列数">文本</textarea> 当用户需要在表单中输入大段文字时,需要用到文本输入域
form表单中的label标签
小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,这一小节就来揭晓它的作用。
label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该 label标签相关连的表单控件上)。
语法:
<label for="控件id名称">
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
例子:
<form>
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
css总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>
//////////////////////////////////////////////////////////////////////////
文字排版
letter-spacing 字母间距
word-spacing 字间距
text-align:center; 居中(图片、字)
line-height:1.5em; 1.5倍的行高
text-indent:2em; 首行缩进2个字符
text-decoration:line-through; 文字删除线。用于把原价划掉
text-decoration:underline 下划线
font-style:italic; 斜体
font-weight:bold; 粗体
///////////////////////////////////////////////////////////////////////////////////
层模型有三种形式:
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)