HTML知识点

发表于 | 更新于: | 分类于 | 热度: ℃
字数统计: 1,208 | 阅读时长 ≈ 5

HTML

HTML文档结构

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
－－<!DOCTYPE> 标签没有结束标签！
<html lang="en">
<head>（头部部分）
    <meta charset="UTF-8">
    <title>显示在浏览器标题栏中的标题</title>
</head>
<body>（主体部分） 
（页面内容）
</body>
</html>

bgcolor = 背景颜色　background = 背景图片路经

标题标签

1
<H1>一级标题</H1>     <H2> 二级标题</H2>    <H3>三级标题</H3>  <H4>四级标题</H4>     <H5>五级标题</H5>     <H6>六级标题</H6>

font标签

1
<font size="字体大小"  color="字体颜色" face="字体类型">要设置的文字</font>

行控制标签

1
<p align="left"/"right"/"center"></p>      换行<br />

图片标签

1
2
<img src = "图片地址" width = "图片宽度" height = "图片高度" 
alt = "图片的提示文字" align="top/bottom/middle/left/right" border="图片的边框宽度">

文字布局

1
2
3
4
5
6
7
8
9
10
11
１）<hr  size="厚度"  width="宽度"  color="颜色">　　水平线
２）<ol  type=序号类型>（序号类型有：1、a、A、ⅰ、I）
 　　　　　<li>填写信息</li>（必须用<li></li>将内容包括起来）   
 　　　　 ......
   </ol>　　　　　　　  有序列表
   
３）<ul  type = "">(序号类型有：disc(默认值,实心圆点)、circle、square)
          <li>所写内容<li>
         .......
   </ul>             无序列表

页面链接语法

1
2
<a href="链接地址">连接标志</a>
<a href="mailto: 邮件地址">站长邮箱</a>

滚动标签

1
2
3
4
5
6
7
<marquee  
　　　　　　scrolldelay=滚动延迟时间  
　　　　　　direction=up/down/left/right(滚动方向) 
　　　　　　onmouseover=“this.stop()”(当鼠标指在上面时停止滚动)  　　
　　　　　　onmouseout=“this.start()”(当鼠标离开时继续滚动) > 
　　　　　　滚动的文字和图像 
</marquee>

表格基本框架

1
2
3
4
5
6
7
8
9
10
11
12
13
<table  
      border=表格的边框的宽度(一般不超过5) 
      width=表格的宽度  height=表格的高度  
      bordercolor=表格边框线的颜色  bgcolor=整个表格的背景颜色
      background=表格的背景图片地址(背景图片) align=表格对齐方式> 
      <tr  bgcolor=行的背景颜色>(行)  
           <td  
              colspan=跨的列数  rowspan=跨的行数  bgcolor=本单元格的背景颜色      
              background=本单元格的背景图片地址(背景图片)  
              align=单元格中的内容对齐方式(right/left/center/)>
           </td>(单元格)  
      </tr> 
</table>

表单的基本结构

1
<form  action="URL" name=表单名字  method=提交数据的方式（post/get）> 具体的内容 </form>

表单中元素

1
2
3
4
5
6
7
8
9
<input>元素  
　　　 <input  name=“” type=text  size=文本框的大小  maxlenght=限制输入的最大字符>(单行文本框)  
　　　 <input  name=“” type=password  size=文本框的大小  maxlenght=限制输入的最大字符>(单行文本框——设置密码)  
　　　 <input  name=“name” type=radio  value=“男”  checked(默认选定)>(单选按钮——男)(设置单选按钮的时候名字一定要一样)  
　　　 <input  name=“name” type=radio  value=“女”>(单选按钮——女) 
　　　 <input  name=“” type=submit  value=提交>(按钮——提交) 
　　　 <input  name=“” type=reset  value=重置>(按钮——重置)  
　　　 <input  name=“” type=checkbox  value=play(必须有)  checked>玩游戏(复选框)
1
2
3
4
5
6
7
8
<select></select>下拉列表元素 语法：
　　　<select  name=“”>  
　　　　　　<option  value=“”(必须有)>内容</option> 
　　　　　　<option  value=“”(必须有)>内容</option> 
　　　　　　<option  value=“”(必须有)>内容</option> 
　　　　　　<option  value=“”(必须有)>内容</option> 
　　　　　　…… 
　　　</select>
1
2
<textarea></textarea>多行文本框元素  语法：
　　　<textarea  name=“” cols=“宽度” rows=“高度”(不要和合并单元格的rowspan和colspan相混淆)>  具体的内容  </textarea>

样式类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1）标签选择器  语法：  
   标签{    
        属性:属性值; 
       }  
       <style type=”text/css”>  P{font-size:20px;color:blue} </style>  不需要调用，直接创建标签就能使用   
2）class选择器  语法：  
   .类名{   
        属性:属性值;  
        }  
       <style type=”text/css”>  .my{font-size:20px;color:blue} </style>  调用：在需要使用的地方做为属性来调用（class=类名）
3）ID选择器 语法： 
   #名称{  
        属性:属性值; }  
       <style type=”text/css”>  #my{font-size:20px;color:blue} </style>  调用：在需要使用的地方做为属性来调用（ID=名称）

常用的样式属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1)文本属性  
　　　font-size:字体大小 
　　　font-family:字体类型  
　　　font-style:字体样式（斜体） 
　　　color:字体颜色  
　　　text-algin:文本的对齐方式（left/right/center） 
2)背景属性  
　　　background-color:背景颜色  
　　　background-image:url(“图片地址”)背景图片  
　　　background-repeat:（repeat/no-repeat/repeat-x/repeat-y）背景图片如何被重复显示 
3)方框属性 
　　　(1)边界属性 
　　　 margin-left:设置对象的左边距 
　　 　margin-right: 设置对象的右边距 
　　 　margin-top: 设置对象的上边距 
　　 　margin-bottom: 设置对象的下边距 
　　 (2)填充属性  
　　　 padding-left:设置内容与左边框之间的距离 
　　 　padding-right: 设置内容与右边框之间的距离 
　　 　padding-top: 设置内容与上边框之间的距离 
　　 　padding-bottom: 设置内容与下边框之间的距离 
　　 (3)边框属性 
　　  　border-style:(soild细边框/dashed/虚边框)边框样式 
　　 　 border-width:边框宽度 
　　 　 border-color:边框颜色 
4)超链接样式 
　　　 A:link{}未被访问的链接样式 
　　　 A:visited{}被访问过的链接样式  
　　　 A:hover{}鼠标悬浮在链接上时的样式  
　　　 A:active{}鼠标下在按下时链接文字的样式
-------------本文结束感谢您的阅读-------------
分享到： QQ好友 微信 新浪微博 有道云笔记 豆瓣 收藏夹 复制网址 一键分享 更多
0%