前端内容介绍
Html—用来勾勒出网页的结构和内容--骨架
css—用来美化网页-皮肤
javaScript—让网页呈现出动态的数据和效果
jQuery—是js的框架,提高了javaScript开发效率
1.客户端(浏览器)发送http请求,请求到达服务器
2.服务端接收这个请求,解析并处理请求,返回响应数据
3.客户端接收响应数据,解析之后显示页面
http协议,超文本传输协议,超文本http
http天生就是为了发送html而设计的
注意:
1.html存储在哪?——服务器
2.html运在哪?——客户端浏览器
HTML超文本标记语言
XML可扩展的标记语言
xml标签名不固定,可扩展
xml属性名不固定,可扩展
把HTML看作标签名,属性名,嵌套关系相对固定的xml语言
HTML的最基本结构
<!DOCTYPE HTML>
<html>
<head></head>
<body></body>
</html>
HTML的常用标签
1.文本标签
1.1标题 h1 h2 h3 h4 h5 h6
在hn标签上可以使用align=“center”属性
效果是使标签居中
开发中使用css进行格式化(居中,颜色,大小)
2.列表
2.1无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
2.2有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
2.3列表嵌套
2.4项目中下拉菜单的列表
分区
1.div
div 看不到,不是为了有显示效果,为了逻辑分区存在。
<body>
<nav>
</nav>
<div></div>
<footer></footer>
</body>
div是块级分区,这个区域独占一行,效果跟前后带来回车一样
行内分区
<p>北京大钟寺<span style="color:red">中鼎</span>大厦7层</p>
总结:初学者对div和span分不清
若果不加样式,你看不出来
若果只是一行文字内部区域进行设置,使用行类分区
span行内分区后续不会行行,会和其他文字混合在题行
元素显示方式
div hn p li ul ol
行内元素,不会换行,可以和其他行内元素位于同一行
span
行内元素空格折叠现象
写代码时,不管写多少空格,都显示一个空格,
回车也显示一个空格
实体引用
 
<<
>>
&&
图片标签
绝对路径
在一个页面中显示其他网站中对图片,经常使用绝对路径
在行业中,称提供图片对网站为图床
好处是占用对子云是图床网站对资源
缺点是,图床网站更改路径,图片就显示不出来了
相对路径
在同一个网站内部,利用文件路径对相对关系
找到图片位置
在同一个网站中,很少使用绝对路径
<img alt="图片显示失败时显示文本" src="../img/02.png" title="图片表述文本"
width="256px" height="256px">
宽和高,一般写在css样式里,不通过属性直接去写。
防止失真
图片对宽和高一般只设置一个,另外一个将会自适应
img标签支持对图片格式
.png支持透明色
.jpg不支持透明色
.gif支持动图 256色
超链接
<a></a>
可以链接到网页,图片,文本,下载
<a href="http://doc.tedu.cn/w3/tags/index.html">跳转到百度</a>
<a href="../img/06.png">跳转到图片</a>
<a href="jianli.html">跳转到简历</a>
href中也分绝对路径和相对路径
引用其他网站资源使用绝对路径
引用自己网站资源使用相对路径
其他属性
target=“_blank”在新的空白窗口打开
target=“_self”在本窗口打开
超链接锚点的用法
两张页面只见的跳转是超链接
一个页面内部的位置跳转是锚点
锚点语法:
1.h5
<标签 id="id">
<a href="#id"></a>
2.h4写法
<a name="name"></a>
<a href="#name"></a>
网页中的表格标签
1.边框 border="2"
2.宽 width="300px"
3.高 height="100px"
4.表格居中 align="center"
5.边框与内容之间的内容 cellpadding="20px"
6.边框之间的距离 cellspacing="20px"