web前段2017.6.8

<body></body>
background='图片路径'---表示背景图片
图片:.jpg .png(透明图片) .gif(动态图)。。。

路径---
绝对路径:相对于磁盘的路径,物理路径
相对路径:文件相对于网页源文件的位置
同级关系:直接引用文件名
上一级关系:../图片名
下一级关系:文件夹名/图片名
-------------------------------
一 文本格式标签
换行标签
<br/>
特殊字符标签
&lt; < (left)
&gt; > (right)
&nbsp; 空格
&quot; "
&copy; 版权号

计算机的单位
基本单位:字节(B) 一个字符占一个字节,一个汉字占两个字节
最小单位:位(bit)
1B=8bit
1kb(千字节)=1024B
1MB(兆字节)=1024kb

标题标签
<hn></hn>,n:1---6,逐级变小
<h1></h1>
特点:字体加粗,自动换行

段落标签
<p></p>
特点:自动换行
属性:
align="left/right/center",水平对齐方式

预编译标签
<pre></pre>
特点:原样输出,自动换行

水平分割线标签
<hr/>
属性:
color="颜色"
size="5px/5%",设置水平分割线的粗细
width="50px/50%",设置水平分割线的宽度
align="left(居左)/right(居右)/center(居中)",水平对齐方式
特点:自动换行

二 字符格式标签---不换行
<b></b>----文本加粗
<i></i>----文本倾斜
<u></u>----下划线
<s></s>----删除线
<small></small>---字体变小

<font></font>---字体标签
属性:
size=n,n:1----7,逐级变大,改变字体大小
color="颜色",改变字体颜色
face="黑体",设置字体类型,默认为宋体

图片标签
<img/>
属性:
src="路径",设置图片路径
width="100px",设置图片的宽度
height="100px",设置图片的高度
title="相关提示信息",设置鼠标悬停时显示的文字描述
alt="相关提示信息"

三 HTML的注释
<!-- 注释内容 -->
作用:
屏蔽不想在网页上看见内容
注释代码,方便日后维护查找

四 表格标签
<table>
<tr>
<td></td>
</tr>
</table>
tr:行标签
td:列标签

table的属性:
border="2px",设置表格的表框为2px
width="100%/500px",设置表格的宽度
height="20%/300px",设置表格的高度
bordercolor="颜色",设置表格的边框颜色
bgcolor="颜色",设置表格的背景颜色
bgcolor==>backgroundcolor
background="背景图的路径"
align="left(居左)/right(居右)/center(居中)",设置表格水平对齐方式
cellspacing="px/%",设置单元格与单元格之间的距离
cellpadding="px/%",设置单元格边框与内容之间的距离

如果要放置内容或者其他标签的话,必须要放在td标签里面

tr的属性:
bgcolor="颜色",设置某一行的背景颜色
align="left(居左)/right(居右)/center(居中)",设置某一行的水平对齐方式
valign="top(顶部)/middle(垂直居中)/bottom(底部)",设置某一行的垂直方向的对齐方式

td的属性:
align="left(居左)/right(居右)/center(居中)",设置某一个单元格的水平对齐方式
bgcolor="颜色",设置某一个单元格的背景色
width="100%/500px",设置单元格的宽度
height="20%/300px",设置单元格的高度
valign="top(顶部)/middle(垂直居中)/bottom(底部)",设置某一个单元格的垂直方向的对齐方式
rowspan="2",合并行
colspan="2",合并列

<table>
<thead>
<tr>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>表内容</td>
</tr>
</tbody>
</table>

th:字体加粗,自动居中的效果
rowspan="2",合并行
colspan="2",合并列

浏览器:
app:
桌面应用:
前端能做什么:将设计图转换成代码的形式,呈现在浏览器上
前端是属于网站开发中的一部分

一、浏览器:
火狐(FireFox)---Gecho
IE(Internet Explorer)---Trident
谷歌(chrome) ---Webkit
苹果(safari) ---Webkit
欧朋(opera)---Presto/Blink
内核功能:
渲染HTML页面---渲染引擎(HTML、css)
解析JavaScript---解析引擎

二、如何编辑HTML
记事本编辑》》》修改后缀名》》》用浏览器运行

HTML的文档结构:
<html>---html标签的起始标签
<head>
<title>标题</title>
</head>
<body>
这是我们的主战场
</body>
</html>---html标签的结束标签

三、标签(标记)的语法:
HTML标签的分类:双标签、单标签
双标签:<tag 属性1='属性值1' 属性2='属性值2'></tag>
单标签:<tag 属性1='属性值1' 属性2='属性值2'/>
tag泛指所有标签的名称

编辑html标签的注意事项:
1 必须要符合基本语法
2 必须要定义文档类型
<!DOCTYPE html>:告诉浏览器这是一个html文档,方便浏览器渲染html
document:文档
type:类型
3 必须要定义文档的字符编码
gb123:中文简体编码
gbk:中文编码
utf-8:国际编码

<meta http-equiv='content-type' content='text/html;charset=utf-8'/>
把content关联到http头部,告诉浏览器准备接受一个html文档,并以utf-8的字符编码来进行解析
<meta name='description' content='描述信息'/>
<meta name='keywords' content='关键字'/>
方便浏览器的搜索引擎搜索相关网站
meta标签要放在head标签里面

4 文档类型编码必须和网页字符编码一致,如果用记事本,另存为设置编码

5 必须要符合代码风格---层层缩进

6 所有标签都必须为英文小写,属性与属性之间用一个空格分开,属性与属性值用等号连接,属性值用英文的单/双引号包住
---------------------------------------------------------------
四、HTML标签
1 <body></body>标签
body标签的常用属性:
text='颜色'
颜色的表示方法:
a 英文单词:(三原色---rgb)r:red g:green b:blue
yellow pink white black....
b 十六进制:
red:#ff0000
green:#00ff00
blue:#0000ff

bgcolor='颜色'---表示body标签的背景色

background='图片路径'---表示背景图片
图片:.jpg .png(透明图片) .gif(动态图)。。。

路径---
绝对路径:相对于磁盘的路径,物理路径
相对路径:在同一文件夹下面html文档找图片的位置
同级关系:直接引用文件名
上一级关系:../图片名
下一级关系:文件夹名/图片名
---------------------------------------------------------------
2 文本格式标签
<br/>:换行标签
特殊字符标签:
&nbsp;---空格
&lt;---<
&gt;--->
&quot;---"
&copy;---版权号

电脑的单位:
基本单位:字节(b)
一个字符占一个字节,一个汉字占两个字节
最小单位:位(bit)
1b=8bit;
lkb(千字节)=1024b
1M(兆)=1024kb

标题标签:<hn></hn>---n:1---6
特点:
a 双标签
b 字体加粗
c 自动换行
d 1-6逐级减小

段落标签:<p></p>
p标签的属性:
align="center/left/right":水平对齐方式

预编译标签:<pre></pre>
特点:原样输出,自动换行

水平分割线:<hr/>
属性:
color="颜色"
size="粗细"
width="宽度"
align="center/left/right"

文本居中:<center></center>
---------------------------------------------------------------
3 字符格式标签
<b></b>:字体加粗
<i></i>:文本倾斜
<u></u>:下划线
<s></s>:删除线
<sub></sub>:下标
<sup></sup>:上标
<small></small>:字体变小
<font></font>:字体标签
属性:
size="12px"
color="颜色"
face="字体"

所有的字符格式标签都不换行,并且都是双标签
所有的字符格式标签最好都放在文本格式标签里面

<img/>:图片标签
属性:
src='路径'
width="50px/50%"
height="50px/50%"
border="2px"
title="提示信息"---当鼠标放上去的时候,就显示title所对应的属性值
alt="提示信息"---当图片在浏览器上显示不出来的时候,就会显示alt所对应的属性值

HTML注释:<!--注释的内容-->
a 屏蔽掉HTML代码(不在浏览器中显示)
b 标注注释
---------------------------------------------------------------
4 表格标签:
<table>
<tr>
<td>内容</td>
</tr>
</table>

tr:代表的是表格的行标签
td:代表的是表格的列标签

table的属性:
border="2px":边框粗细
bordercolor="颜色":表框颜色
width="500px":表格的宽度
height="500px":表格的高度
bgcolor="颜色":表格的背景颜色
background="路径":表格的背景图
align="left/right/center":表格水平对齐方式
cellspacing="5px":单元格与单元格之间的间距
cellpadding="5px":内容与单元格边框的距离

tr的属性:
height:行的高度
bgcolor="颜色":行的背景颜色
background="路径":行的背景图
align="left/right/center":当前行的水平对齐方式
valign="top/middle/bottom":垂直方向对齐方式

td的属性:
width:单元格的宽度
height:单元格的高度
bgcolor="颜色":单元格的背景颜色
align="left/right/center":单元格的水平对齐方式
valign="top/middle/bottom":单元格的垂直方向对齐方式
rowspan="5":合并行
colspan="5":合并列

<table>
<thead><tr><th></th></tr></thead>
<tbody><tr><td></td></tr><tbody>
</table>
thead:表格表头
th:文字自动加粗,文字自动居中
如果没有表头的话:
<table>
<tr><td>内容</td></tr>
</table>

---------------------------------------------------------------

5 列表标签
(1) 有序列表
<ol><li></li></ol>
ol标签的属性:
type="1/a/A/i/I",默认为数字排序
start="10",表示从第十项开始,并且只能是数字
(2)无序列表
<ul><li></li></ul>
ul标签的属性:
type="square(方块)/disc(实心圆)/circle(空心圆)",默认为实心圆
(3)语义列表
<dl>
<dt>标题部分</dt>
<dd>内容</dd>
</dl>

---------------------------------------------------------------

6 超链接标签(a标签)
<a href="http://www.baidu.com">百度一下</a>
a标签的属性:
href="路径"

http:超文本传输协议,是客户端和服务端请求和应答的标准
http/https---https加密的
www:world wide web(万维网、环球网),简称web
w3c:万维网联盟
w3school:万维网联盟的中国社区
万维网联盟的创始人:蒂姆.伯纳斯.李(互联网之父)

a、外部链接:
<a href="http://www.baidu.com">百度一下</a>
b、内部链接:
<a href="项目的相对路径">百度一下</a>
//跳转到本地项目的某个页面

c、建立锚点:通过锚点可以找到相对标签的位置
<a href="#pig">找猪头</a>
<p id="pig">猪头</p>
//pig叫锚点值(hash值),锚点值必须要与你要找的标签的id名要一致
<a href="相对路径#pig" target="_blank">找猪头2</a>
//可以找到本地项目的某个页面的标签

d、通过href可以做功能性链接:邮箱、qq链接
<a href="mailto:hehedaWebMail@nbsp.com">站长邮箱</a>

target="_self/_blank"
_self:在自身窗口打开
_blank:在新窗口打开

上一篇:ansj分词


下一篇:Java基础知识陷阱(十)