20151008~20151101所学HTML内容回顾整理

HTML (标签、div+Css)+ JS（js语法，dom，jquery）

HTML: Hyper Text Mankup Language 超文本标记语言

学html,实际就是在学标签都有哪些，怎么用。如何通过标签来控制文本样式。

文件后缀：html， htm

一、标签：基本标签、文字标签、内容标签、布局标签

二、用ps把一张图做成HTML页面

三、div+Css

四、杂

基本标签：
<html>
<head><title>标题内容</title>
head 中标题栏文字，起控制作用，设置编码方式，背景音乐或关键词设置、描述等信息
</head><body>
<font color="#990000" size="大小">内容</font>     三原色：红 绿 蓝标签  属性                                           #  00 00 00 --黑FF FF FF --白--00~FF 从没有到满了网页的内容
</body>
</html>

  任何标签都是包含关系，不会交叉标签分为：基本标签<html><head><title></title></head><body></body></html>body属性：text文本的颜色bgcolor背景颜色bggroud=图片路径 背景图片  ../ 往上翻一个文件夹topmargin="100"上边距 网页内容开始的地方距离网页上边线100像素bottommargin="100"下边距leftmargin="100"左边距          rightmargin="100"右边距head中有一个标签bgsound 背景音乐<bgsound src="Images/456.mp3" loop="-1" />

文字标签<font></font>属性：color颜色 size大小 face字体 标签里的属性用空格隔开例子：<font color="颜色" size="大小" face="字体名称">汉企</font>                        <b>加粗</b><i>倾斜</i><u>下划线</u><center>居中</center><br> 换行<!--注释-->以&符开头，可以输入好多特殊字符&lt  小于号<&gt  大于号>&nbsp 空格&copy 版权符，就是一个圈里一个c

内容标签 标题标签：            <h1>标题一</h1><h2>标题二</h2>随着数字变大，字体字号变小<h6>标题六</h6>段落标签：asfyehdjkkdjriw<p>这是一段特殊的文字</p>    上面空一行空白行，下面空一行被P标签包含起来的会是单独一段dwfjiowfirueibdjiorjieisfdkhi<div></div>  层标签 默认占一行，换行<span></span> 层标签 有多大，占多大列表：<ol>有序列表<li>1</li>   ===>1. 1<li>2</li>       2. 2<li>3</li>       3. 3<li>9</li>       4. 9</ol><ul>无序列表<li>1</li>   ===>● 1<li>2</li>       ● 2<li>3</li>       ● 3<li>9</li>       ● 9</ul>ol、ul 属性：type 控制前面的序列方式超链接：<a href="网址">内容</a>
图片：<img src="路径" width="宽" height="高"/>
背景音乐：<bgsound src="Images/456.mp3" loop="-1" />  最好不要用中文音乐名，改成数字等

布局标签
表格
<table> 定义表格
<caption>    定义表格标题。
<th>    定义表格的表头。
<tr>    定义表格的行。
<td>    定义表格单元。
<thead>    定义表格的页眉。
<tbody>    定义表格的主体。
<tfoot>    定义表格的页脚。
<col>    定义用于表格列的属性。
<colgroup>    定义表格列的组。<table> 　　（　　width　宽度　　border　　边框　　cellpadding　　内容与单元格的边距　　cellspacing　　单元格之间的边距align　　对齐方式　　bgcolor　　背景色　　background　　背景图片　　）<tr>　　　　--第一行--　　（　　align 一行的内容水平对齐　　valign　　一行的内容垂直对齐　　height　　行高　　）<td>第一列</td><td>第二列</td>　　　　</tr><tr>　　　　--第二行--<td>第一列</td><td>第二列</td>　　　　</tr>
</table>合并单元格
colspan="n"　　合并同一行单元格
rowspan="n"　　合并同一列单元格

用ps把一张图做成HTML页面

用ps把一张图做成HTML页面table 表格div+css
切图、切片工具、切图、文件、存储为web所用格式、修改图片大小、GIF、存储、格式：HTML和图像、选择存储位置1.在ps中打开一个网页模板，利用切片工具进行剪裁2存储方式是：存储为web所用格式3设置存储像素1366.GIF格式4保存到文件夹中以html+图像 的格式5打开html，打开方式为DW方式打开6根据网页在进行对其修改设置超链接：加上超链接网址，然后设置boder="0"
<td rowspan="2"><a href="http://baidu.com"><img src="data:images/16sucai_201510091610-(1)_03.gif" width="114" height="33" alt="" boder="0"></a>
</td>　　　　　

css+div

超链接：
<a hert = " " target(超链接的打开方式) = "self（自身）"或"new（新开窗体）">
</a>
锚点：超链接的特殊应用
<a href="#1"...> </a>
<a name ="1"> </a>表格：容器,可以把这一个页面划分区域表格不能随便移动
div： 层标签 （默认占一行）
通过坐标设定位置，可以随意挪动 table 的单元格可以任意拖拽更利于网站优化
<div> </div>css:style：样式表 控制标签的样式body以及body里面所有的标签都可以加stylestyle：样式表内联样式表：style 样式表写在body属性位置的时候
内嵌样式表：写在head范围之内的,来控制当前页面着写标签的样式<head>
<style>
body{ /* 设置body标签的 颜色 */background-color:#309
}
</style>
</head>
外部样式表：通过 link 标签链接 css 文件起一个宏观调控的作用，后期维护方便<head>选择器：如何用外部样式表控制HTML的标签<link type="text/css"
href="css/style.css" rel="stylesheet" />
</head>id选择器：标签的身份编号，一个网页里面 body范围之内所有的标签都可以写id 而且 id不能重复唯一识别先在css文件里设置：
#p1
{
color:#0F9;}
然后：作用在原文件
</head><body>
<p id="p1">rer</p>
<p id="p2">sdf</p>
<p id="p3">sdf</p>
</body>
</html>标签选择器：
body{ /* 设置body标签的 颜色 */background-color:#309}优先遵循id选择器
在css注释：/* */
在HTML注释<!-- -->
class选择器：
先在css文件里面建立.yangshi1
{color:#C0F;
}然后在文件里面link css文件 然后通过
class=样式的名字
<body>
<p id="p1">rer</p>
<p id="p2" class="yangshi1">sdf</p>
<p id="p3">sdf</p>
</body>画一个div，让这个div占满整个屏幕：
#apDiv1 {position: absolute;width: 100%;▲height: 100%;▲background-color:#FF0;z-index: 1;
}position是位置：默认是absolut，相对于body而言固定fixed 锁定位置，如网页上方的导航栏当两个div叠加到一起时，z-index: 从1开始，后面数字越大，层数越靠上，覆盖
当两个div中z-index:都为1 时，body中<div id="apDiv1"></div><div id="apDiv2"></div> 后写的那个在上面做一个导航菜单，div的居中position: absolute;
margin:auto;
div中，margin设置为auto是，是自适应，上下左右间距自由，取决于position：
absolute时，是在起点位置，
relative时，是居中overflow:scroll;--如果超出的话给div加滚轴hidden --隐藏<div class="yincang" onmouseover="this.className='xianshi'" onmouseout="this.className='yincang'">

杂： 鼠标放到图片上弹出层文字效果

鼠标放到图片上弹出层文字效果<style>
img{border:0}/* css 注释说明：设置图片边框为0 */ .xiaotu{ position:relative;width:365px; height:250px;margin:0 auto}
.xiaotu a,.xiaotu span{display:none; text-decoration:none}
.xiaotu:hover{cursor:pointer}
.xiaotu:hover a.now{cursor:pointer; position:absolute; top:0; width:100%; height:100%;z-index:100; left:0; display:block;}
.xiaotu:hover span{ display:block;position:absolute; bottom:0; left:0;color:#FFF;width:554px;
z-index:10;height:36px; line-height:36px; background:#000;filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}
/* 设置显示文字定位位置，背景半透明 */ </style> <div class="divcss5" style="background:url(http://www.bcty365.com/uploadfile/2014/0621/20140621103346573/img/1a.jpg)"><span>文字内容</span><a href="#" class="now">?</a>
</div>

显示、隐藏<div id="xuanxiang" class="yincang" onMouseOver="this.className='xianshi'" onMouseOut="this.className='yincang'">
<h1>主页</h1>
<div id="neirong">内容1<br>内容2<br></div>
</div>

转载于:https://www.cnblogs.com/mn-b/p/6689820.html

HTML基础知识回顾整理相关推荐

  1. numeric比较大小 数据库_数据库基础知识个人整理版-强烈推荐

    <数据库基础知识个人整理版-强烈推荐>由会员分享,可在线阅读,更多相关<数据库基础知识个人整理版-强烈推荐(20页珍藏版)>请在人人文库网上搜索. 1.数据库知识要点总结第一章 ...

  2. Java基础知识回顾之七 ----- 总结篇

    前言 在之前Java基础知识回顾中,我们回顾了基础数据类型.修饰符和String.三大特性.集合.多线程和IO.本篇文章则对之前学过的知识进行总结.除了简单的复习之外,还会增加一些相应的理解. 基础数 ...

  3. php基础知识总结大全,php基础知识回顾 —— 常量

    您现在的位置是:网站首页>>PHP>>php php基础知识回顾 -- 常量 发布时间:2019-01-23 17:23:08作者:wangjian浏览量:489点赞量:0 在 ...

  4. java知识点博客园_JAVA基础知识回顾

    JAVA基础知识回顾 一.背景介绍 JavaSE(J2SE)(Java2 Platform Standard Edition,java平台标准版) JavaEE(J2EE)(Java 2 Platfo ...

  5. 【基础知识思考整理 】Zero-copy原理理解（用户角度）

    基础知识思考整理 http://blog.csdn.net/aganlengzi/article/details/53332877 关于Zero-Copy的原理.主要参照的是一篇03年的文章[1](L ...

  6. C语言基础知识回顾 2-三种基本机构

    C语言基础知识回顾 %超适用于计算机二级% 第二章 三种基本结构 本章回顾最基本的顺序.条件.循环语句的语法结构,对于非初学者来说,这一部分内容想必早就信手拈来. 因此,回顾的侧重点都是一些需要注意的 ...

  7. 计算机图形学最基本知识,计算机图形学基础知识重点整理.doc

    计算机图形学基础知识重点整理 计算机图形学复习资料 第一章 1 图形学定义 ISO的定义:计算机图形学是研究怎样利用计算机表示.生成.处理和显示图形的原理.算法.方法和技术的一门学科. 通俗定义:计算 ...

  8. 【Java基础知识回顾篇】之打怪升级Day001

    Java基础知识回顾篇之打怪升级Day001 目录 Java基础知识回顾篇之打怪升级Day001 简介 一.为什么现在主流的是Java8和Java11? 二.简单尝试编写java程序 1.编写一个He ...

  9. Java基础知识回顾之一 ----- 基本数据类型

    前言 在开始工作至今,学习各种各样的技术之中发现自己的很多Java的基础知识都忘了⊙﹏⊙b汗... 而且越是学习越是发现Java基础的重要性,所以准备单独抽一下时间进行Java基础的重新学习.在重新学 ...

  10. 前端开发入门：html和css基础知识回顾2

    HTML+CSS基础知识 1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被 ...

最新文章

  1. Android 系统启动过程
  2. 使用LINUX SENDMAIL发送邮件
  3. 北大核刊最新版2020目录_最新版CSSCI来源期刊目录及增减变化！
  4. 通过pycharm启动django
  5. android tablerow 间隔,android-如何使TableRow从右到左
  6. 理解并从头搭建redis集群
  7. 创业公司是如何进行研发管理和绩效考核的？
  8. c语言delay_单片机模拟流星雨，电路图和程序，一起来感受下，其实C语言不难...
  9. php中浮点数四舍五入,php浮点数四舍五入函数
  10. Python re 模块深入探索
  11. 去哪儿 Api 自动化测试实践
  12. 新宝线上股票大箱体终于向上突破站稳了
  13. 白帽黑客教主 TK 告诉你，黑客的游戏 CTF 究竟是什么 | 硬创公开课总结文+视频...
  14. aria2自动更新BT Tracker服务器列表脚本
  15. vue生成app二维码，并扫码下载app
  16. Ubuntu上实现蓝牙串口通讯（SPP）
  17. 2023年国家留学基金委（CSC）有关国别申请、派出注意事项
  18. java时间戳与LocalDateTime常用转换方式
  19. operator的解释
  20. 黑马程序员Bootstrap P192-199

热门文章

  1. python中print的本质_Python之路---函数进阶??
  2. matlab多种图像边缘检测方法,[转载]Matlab多种图像边缘检测方法
  3. python计算出nan_学习笔记0522：Tensorflow训练模型出现loss是nan的问题排查
  4. 阿里云服务器端口请求失败（在控制台把端口添加到服务器的安全组）
  5. 近期面试了三个人之感想
  6. 给机械硬盘加个缓存：PrimoCache
  7. 大庆油田真正解决了吃饭问题
  8. 地铁关门提示音，可使用倒计时
  9. 正态分布里的西格玛_七大数据陷阱之油腻的统计学：正态分布来了
  10. java关键字与解释_5.Java基础知识-注释和关键字