首页 > 代码库 > HTML基础知识回顾整理

HTML基础知识回顾整理

2024-09-14 00:28:53   214人阅读

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" onm ouseover="this.className=‘xianshi‘" onm ouseout="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" onm ouseOver="this.className=‘xianshi‘" onm ouseOut="this.className=‘yincang‘">
<h1>主页</h1>
<div id="neirong">内容1<br>内容2<br></div>
</div>

 

HTML基础知识回顾整理


联系
我们