<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：在新窗口打开

web前段2017.6.8的更多相关文章

  1. Android 工程师如何快速学会web前段

    Android 工程师如何快速学会web前段 今天主要聊一下本人最近在学习web前段的感受,最近html5是越来越火了,前段时间公司做了一个项目然后让我们“android”的程序猿过去帮忙把客户 端框 ...

  2. JQuery WEB前段开发

    JQuery WEB前段开发 Jquery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, S ...

  3. 最近一直是web前段，没什么意思，所以就不发资料了

    最近一直是web前段,没什么意思,所以就不发资料了 版权声明:本文为博主原创文章,未经博主允许不得转载.

  4. web前段学习2017.6.15

    CSS---表现层,修饰和表现html文档,为了解决结构层和表现层分离的问题. 通过CSS极大的提高了工作效率,方便工作人员维护和管理CSS:层叠样式表,目前用的最广泛的css版本为css2,最新版本 ...

  5. web前段学习2017.6.13

    CSS---表现层,修饰和表现html文档,为了解决结构层和表现层分离的问题. 通过CSS极大的提高了工作效率,方便工作人员维护和管理CSS:层叠样式表,目前用的最广泛的css版本为css2,最新版本 ...

  6. sharepoint多个NLB的web前段如何进行文件同步？

    大家都知道,sharepoint2010服务器场可能有2个或2个以上的web服务器做NLB,有个时候牵涉到上传文件到文件夹(说到这里,有人会说全部以二进制文件保存到文档库啊,但是有些情况不允许的,比如 ...

  7. Web前段优化，提高加载速度 css

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  8. [WEB地图] 2017高德地图API WEB开发（key申请，地图搭建）简约教程

      前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情   高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去“高德地 ...

  9. Hack The Box Web Pentest 2017

    [20 Points] Lernaean [by [Arrexel] 问题描述: Your target is not very good with computers. Try and guess ...

随机推荐

  1. Hibernate笔记一：HIbernate配置-HelloWorld

    hibernate介绍: Hibernate是一个开源的对象关系映射框架,它对JDBC进行了轻量级的对象封装,使Java程序员可以随心所欲的使用对象编程思维来操纵数据库. 它不仅提供了从java类到数 ...

  2. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  3. SMD晶振发展和智能手机的普及总是惊人的相似!

    其实触屏手机在2002年前后就已经出现了,但那个时候的触屏手机不算是现在的这种智能手机,有人说最早发行触屏手机的是诺基亚,也有人说是苹果还有人认为摩托罗拉.总之众说纷纭,小编那里还太小也并不是很了解, ...

  4. CentOS6.7 防火墙规则（Iptables)

    查看防火墙的状态 /etc/init.d/iptables status 开启防火墙 /etc/init.d/iptables start 关闭防火墙 /etc/init.d/iptables sto ...

  5. Pandas日期数据处理：如何按日期筛选、显示及统计数据

    前言 pandas有着强大的日期数据处理功能,本期我们来了解下pandas处理日期数据的一些基本功能,主要包括以下三个方面: 按日期筛选数据 按日期显示数据 按日期统计数据 运行环境为 windows ...

  6. 关于微信小程序的的总结

    微信小程序学完了,给大家分享一些自己学小程序的心得,希望能帮到大家. 首先,我谈谈小程序数据绑定的那一块,所有从本地或者远程服务器的API传过来,都必须绑定到data: {}, 绑定格式是一个一个的键 ...

  7. Lock（二）解决Lock问题

    本文介绍通过Toad.EM及SQL语句来处理数据库产生的锁.在这之前需要对v$lock和v$session这两个数据字典有一定的了解. (一)使用Toad处理锁 (1)使用Toad的session b ...

  8. Spring学习笔记——01 控制反转

    想一下之前学的Java,如果某个类需要引用某个对象,则需要手动new一个出来.这样带来的一个问题就是,若被引用的类发生改动或被删除,则引用它的所有类都会报错.因为两个类耦合在一起了.解决的办法就是不由 ...

  9. javascript痛点之一变量作用域

    1.用var声明的变量是有作用域的,比如我们在函数中用var声明一个变量 1 'use strict'; 2 function num(){ 3 //用var声明一个变量num1 4 var num1 ...

  10. C#码农的大数据之路 - 使用C#编写MR作业

    系列目录 写在前面 从Hadoop出现至今,大数据几乎就是Java平台专属一般.虽然Hadoop或Spark也提供了接口可以与其他语言一起使用,但作为基于JVM运行的框架,Java系语言有着天生优势. ...