码迷,mamicode.com
首页 > Web开发 > 详细

HTML基础知识回顾整理

时间:2017-04-11 09:24:43      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:合并单元格   存储位置   字符   head   数字   pad   row   tom   size   

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标签包含起来的会是单独一段
         dwfjiowfirueib
         djiorjieisfdkhi

         <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="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里面所有的标签都可以加style

style:样式表

内联样式表: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>

 

HTML基础知识回顾整理

标签:合并单元格   存储位置   字符   head   数字   pad   row   tom   size   

原文地址:http://www.cnblogs.com/mn-b/p/6689820.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!