前端学习三大内容:结构(html实现),样式(css实现),行为(.js实现)
HTML
开发工具:sublime、dreamweaver等
html骨架:
<!DOCTYPE html>--版本号HTML5
<!DOCTYPE html>--版本号HTML5
<html lang="en">
<head>
<meta charset="UTF-8">--字符集
<title> </title>
</head>
<body>
<head>
<meta charset="UTF-8">--字符集
<title> </title>
</head>
<body>
</body>
</html>
解释
字符集:
gb2312:包含6763个简体汉字
BIG5:包含繁体汉字
GBK:包含所有汉字
UTF-8:包含全世界所有的字符
字符集:
gb2312:包含6763个简体汉字
BIG5:包含繁体汉字
GBK:包含所有汉字
UTF-8:包含全世界所有的字符
标题标签:分为6个等级
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
(其中h1为最主要,标题由大到小)
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
(其中h1为最主要,标题由大到小)
标签:
有两种,分为:双标签和单标签
双标签格式:例如<html> </html>、<p> </p>、<title> </title>等
单标签格式:例如<hr />、<br />、<img />、<base />等(单标签比较少)
单标签作用:
<hr />——生成一条分割线
<br />——换行
<img />——显示图片
<base />——(放在head里,与head嵌套)target="_blank"--新窗口打开;target="_self"--当前窗口打开。
<hr />——生成一条分割线
<br />——换行
<img />——显示图片
<base />——(放在head里,与head嵌套)target="_blank"--新窗口打开;target="_self"--当前窗口打开。
一些常见的标签
段落标签:<p> </p>
链接标签:<a href="跳转目标" target="目标窗口弹出方式"> </a>
(跳转目标=链接(例:http://www.baidu.com);target="_blank"--新窗口打开;target="_self"--当前窗口打开)
注释标签:<!--要注释的内容-->
base标签:<base /> (有时候target作用可以用base标签来代替,更方便)
图像标签:<img src="路径" />
段落标签:<p> </p>
链接标签:<a href="跳转目标" target="目标窗口弹出方式"> </a>
(跳转目标=链接(例:http://www.baidu.com);target="_blank"--新窗口打开;target="_self"--当前窗口打开)
注释标签:<!--要注释的内容-->
base标签:<base /> (有时候target作用可以用base标签来代替,更方便)
图像标签:<img src="路径" />
文本格式化标签:
<b></b>或<strong></strong>--文本加粗
<i></i>或<em></em>--文本倾斜
<s></s>或<del></del>--文本加删除线
<u></u>或<ins></ins>--文本加下划线
(b、i、s、u只有使用没有强调的意思;strong、em、del、ins语义更强烈;XHTML推荐使用后者)
标签的属性:(控制宽度、高度、颜色等属性)可以拥有多个属性,属性必须写在开始标签中,且在标签名之后
<标签名 属性1="属性值1" 属性2="属性值2" ....></标签名>
路径分为:相对路径、绝对路径
相对路径:同一级、下一级、上一级
绝对路径:http://www.itcast.cn/2018czgw/images/icon_fuli6.jpg 这种类型的
锚点定位:(实现跳转)
<a href="#id名"> </a>
.
.
.
<h3 id="id名"> </h3>
(不一定在h3中加id,可以在你想在的地方加id,实现跳转)
(不一定在h3中加id,可以在你想在的地方加id,实现跳转)
div span标签:没有语义,网页布局主要的2个盒子
div组合网页
格式:
<div> </div>
<span> </span>
一些常见的列表骨架:
无序列表:
<ul>
<li> </li>
<li> </li>
.
.
</ul>
(注意:ul标签里面一般只嵌套li标签,li标签里面可以嵌套其他标签)
有序列表:
<ol>
<li> </li>
<li> </li>
.
.
</ol>
自定义列表:
<dl>
<dt> </dt>
<dd> </dd>
<dd> </dd>
.
.
.
<dt> </dt>
<dd> </dd>
<dd> </dd>
.
.
</dl>
特殊字符:网页上要显示一些特殊的符号,用代码替代
常用的字符代替码:(注意;不能省略)
空格符:
小于号:<
大于号:>
&符号:&
(其他特殊符号代码可以通过网络查找)
常用的字符代替码:(注意;不能省略)
空格符:
小于号:<
大于号:>
&符号:&
(其他特殊符号代码可以通过网络查找)