<!DOCTYPE html> 版本声明
所有标签成对出现
h1~h6 标题
<p> 段落
注意:浏览器会自动在段落的前后添加空行(</p>是块级元素)
<br> 换行 空的html元素 通常使用一对标签,虽然现在所有浏览器识别单标签 具有空内容,通常直接写
<br/>
<hr>水平线
注意:无法在html代码中添加额外的空格和换行来改变输出结果,浏览器会溢出源代码中多余的空格和空行。所有联系的空格或空行都会被算作一个空格。HTML代码中的所有连续的空行也被显示为一个空格。
HTML链接
<a> 链接 空链接用href=“###"
默认样式:
一个未访问过的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色并带有下划线
点击连接时,链接显示为红色并带有下划线
Note:
注释:请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.w3cschool.cc/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3cschool.cc/html/"。
图片链接:<a href="http://www.w3cschool.cc/html/html-tutorial.html"><img src="smiley.gif" alt="HTML 教程" width="32" height="32"></a> <a>标签内嵌套<img>
当前页面链接到指定位置: href=“#id名"
创建邮件链接:
情景一:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
Send Mail</a>如下图:
情景二:
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">Send mail!</a> 如下图:
常用属性设置:
href:URL 规定链接目标URL
target: _blank/_parent/_self/_top/framename 规定在何处打开URL,仅在href存在时起作用
提示:
在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'
属性:
accesskey: 设置访问元素的键盘快捷键
class 规定元素的类名
contenteditable (h5)规定是否可编辑元素的内容
contextmenu (h5)指定一个元素的上下文菜单,当用户右击该元素,出现上下文菜单。
dir 指定某个元素中内容的文本方向
draggable (h5)指定某个元素是否可以拖动
dropzone (h5)指定是否将数据赋值,移动,或链接,或删除
hidden (h5) 规定对元素进行隐藏
id 规定元素的唯一id
lang 设置元素中内容的语言代码
spellcheck(h5)检测元素是否拼写错误
style 规定元素的行内样式
tabindex 设置元素的Tab键控制次序
title 规定元素的额外信息(可在工具提示中显示)
translate(h5)指定是否一个元素的值在页面载入时是否需要翻译
<hr>标签在HTML页面中创建水平线 (用于分割内容)
HTML格式化标签
<b>粗体
<i>斜体
通常使用<strong>替换<b> <em>替换<i>
<sub>定义下标 <sup>上标,如下图:
<del>删除字 <ins>插入字(即加入下划线)
<em>斜体; <strong>加粗; <dfn>定义一个定义项目; <code>计算机代码; <samp>定义计算机代码样本; <kbd>定义键盘码; <var>定义变量; 依次如下图:
<abbr>定义缩写
<address>定义地址
<bdo>定义文字方向 eg:<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p> 如下图:
HTML头部<head>
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
<title>元素:定义了浏览器工具栏的标题;当王爷添加到收藏夹时,显示在收藏夹中的标题;显示在搜索隐形结果页面的标题
<base>标签描述了基本的链接地址/链接目标,该标签作为HTML所有链接标签的默认链接
<link>标签定义了文档与外部资源之间的关系,通常用于链接到样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
<meta>标签
<style>标签定义html文档的样式信息
eg:
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
定位:position, float, margin, padding
HTML样式-CSS
background-color背景颜色
字体样式
font-family(字体) e.g.: font-family:“微软雅黑"
color(颜色)
font-size(字体大小)
<style>内部样式表
<link>外部样式表
HTML图像
<img>空标签 src=“资源地址(可以是本地地址,或者是URL)”
alt=“图像未显示出来时候,出现的替换文本"
创建图像映射:
eg:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
如图:
设置图像链接:<a><img标签></a>
图像浮动:float
HTML表格
<table>标签 表格
<tr>标签定义行,
<td>若干单元格(table data),即数据单元格的内容,数据单元格可以包含文本,图片,列表,段落,表单,水平线,表格等。
表格默认不显示边框,border = ‘1’ 边框宽度
表头一般用<th>标签,显示为粗体,居中.
<caption>表格标题
<td
colspan=“2”> 列合并
rowspan行合并
单元格边距cellspadding 单元格间距cellspacing
HTML列表
有序列表,无序列表
无序列表是一个项目列表,此项目使用粗体圆点(典型的小黑圆点)使用<ul>
如图:
注意:每一列使用<li>
有序列表,列表项目使用数字进行标记 使用<ol>
如图:
自定义列表,以<dl>标签开始,每个列表项以<dt>开始
HTML块元素
<div>
块元素:在浏览器显示时,通常会以新行(换行)来开始(和结束)
<span>
内联元素:可用作文本的容器。
例如:
<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
特别注意:
虽然我们可以使用HTML table标签来设计出漂亮的布局,但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。 |
HTML表单
<form>表单允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表,单元框(radio-buttons)、复选框(checkboxes)等等
<input type=“text” name=“firstname”> 标签设定,用户要输入字母,数字等内容
/*
text:文本域 输入字母,数字等
password:密码框 输入密码
radio:单选按钮 name代表后台交互的字段,value为该字段对应的值
checkbox:复选框 同上
submit 提交按钮
button:按钮
*/
<textarea>输入域
<select>定义下拉选项列表 selected默认选中
<option>下拉列表的选项
下拉列表:
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
HTML框架
Iframe内联框架 可是设置宽高,srch设置内联打开的网页
属性frameborder = “0”取消默认边框
颜色,保护色
HTML字符实体
转译字符:小于号 < / < 大于号:> /62
不间断空格: 如果需要多个空格时,浏览器去自动去除多余的,需要使用 .
实体名称对大小写敏感
html5的上一个版本的标签(全兼容)
<!DOCTYPE html> ->版本声明,这个必须要,如果不写在ie6会进入诡异模式
盒模型(margin + border + padding + content)
1.怪异模式:margin + content
2.在css3里面有个属性可以强制进入怪异模式
4.标签:(1)双标签和单标签 双标签特征:需要嵌套(内容); 单标签:不需要嵌套
标签的类型:1.块标签:独占一行,默认宽度100%可以设置宽高/margin
(p, div, h1-h6, ul , ol , li, hr, br, form)
2.行标签:在一行显示,内容撑开宽高不可以设置宽高(除了input,img)、不能设置纵向margin (a, img, input, strogn, em, var
…
.)
3.特殊 table, tr , td
组合标签:ul>li ol>li table>tr>td, form>input
标签的嵌套:
1,组合标签必须按照嵌套规则来
2,块标签可以嵌套快标签和行标签(除了p)
3,行标签只能嵌套行标签(除了a)
seo:搜索引型优化, sem:搜索隐形营销 pr值:网页的等级
黑帽(利用
搜索引擎
的漏洞排高排名),灰帽(研究
搜索引擎
的漏洞回避
搜索引擎
的处罚规则),白帽(利用关键字的优化,结构优化....)
关键字的优化,主要是就是对标签的选择:
title(head标签里面)
metal
description(描述)
h1~h2
strong
img(alt(替换文本) title(鼠标移入的提示内容))
a:外链,内链
外链:友情链接,通过别的网站来提高自己的等级,从而达到排名的提升
<a href =
“###”
rel=
“nofollow
">
这里的nofollow知识当前页对目标也的一种态度,我不信任这个网页,这个网页的内容与我本网站无关
表格:
cellspacing:合并单元格边距
colspan:合并列
rowspan:合并行
form表单:
action:提交地址
method:提交的方式(get/post)
input:text:文本框
password:密码框
checkbox:复选框
radio:单选框
submit:提交按钮
file:文件
button:按钮(需要配合value, 不写会出问题)
reset:重置(基本不用了)
textarea:文本域
select:菜单
option
label:跟form控件联系起来(写样式)
css:
引入方式:
1.外部-》整站
2.头部-》访问量(点击)高
3.标签内-》js和后台
4.@import url(); -》在css中引入另外一个css
选择器:
1.标签名 2.类 3.id 4.后代 5.组合 6.群组 7.伪类
范围大小,优先级越高
id->100
类->10
标签名->1
a#div1 .c->111
css基础设置:
font-family:字体设置
font-size:字体大小
font-style:字体样式
font-weight:字体粗细(bold)
color:字体颜色
字间距
word-spacing ->字间距
line-height->行高
background url
color
position
repeat
盒模型:
margin(外边距), padding(内边距), border(边框), width/ height (max-width, min-width)
display:none(隐藏) block(块) inline-block:(转换行标签,可以设置宽高) table:转换为table, table-cell主要用于垂直居中(和vertical-align:middle配合使用)
overflow:hidden;scroll
postion:
relative:相对定位(主要作用是作为参考对象)
absolute:在需要层叠的时候,然后需要移动的对象就用它(也可以作为参考对象)
float:
使用场景:左右布局
不占内容宽高,需要注意清浮动
1.clear:both
2.overflow:hidden
(扩展ie6的兼容)
css hack:针对不同的浏览器写不同的代码
haslayout