HTML

2018-06-24 00:35:55来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

标记

<hr width=”80%” size="10px" noshade>//水平线长80% 线粗10px 实体线

字符控制标记

<b>…</b> 粗  <i>…</i> 斜 <s>…</s> 删除 <sub>…</sub> 下标
<strong>…</strong> 加强语气(加粗)   <em>...</em> 加强语气(倾斜) <del>…</del> 删除 <sup>…</sup> 上标 
<big>…</big> 大字  <tt>…</tt> 电报 <address>…</address> 地址  
<samll>…</small> 小字 <u>…</u> 下划  <ins>...</ins> 修改  

                            
                 

 

 

格式化
<pre>…</pre>让书写的文字格式化!

引用文本
<blockquote   cite="url">...</blockquote>

<table> 标签下的属性

属性名称 属性值  说明
border   像素 设置表格的边线
cellspacing 像素/百分比 存储格框线宽度
cellpadding 像素/百分比 数据与框线的距离
width 像素/百分比 表格宽度
height 像素/百分比 表格厚度
align

left

center

right

表格往左靠(默认)

 表格往中靠

表格网右靠

bgcolor 英文/十六 表格的背景颜色
background URL  表格的背景图片
summary 字符串 用来描述表格数据说明(相当于注释,页面上看不到效果)
bordercolor 英文/十六  边框的颜色(不兼容)
bordercolorlight 同上  边框的亮色(不兼容)
bordercolordark 同上 边框的暗色(不兼容)

 

 

 

 

 

 

 

 

                                  


                                                  
                                  

 

 

 

 

<table> 标签下的边框设置(该属性必须在 border的属性值不为0 的状态下!)                                                                         

属性名称 属性值  说明
frame

void

above

 below

hsides

vsides

lhs

rhs

border/box

不要显现表格的边线

只要显现出表格的上边线

只显现出表格的下边线

只显示表格的上下边线

只显现表格的左右边线

只显现表格的左边线

只显现表格的右边线

会显现出表格的所有边线

rules

rows

cols

all

groups

none

只显示出横行的格框线

只显示出直行的格框线

显示全部格框线

表示列组合水平部分

不显示任何格框线

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

(表格单边框:border=1;border-collapse:collapse

<tr><th><td>标签下的常用属性

属性名称  属性值 说明
width  像素/百分比
height  像素/百分比
bgcolor 英文/十六 数据栏的颜色
align(水平方向)

 left

center

right

数据靠左

数据靠中

数据靠右

valign(垂直方向)

top

middle

bottom

数据靠上

数据靠中

数据靠下

nowrap 在单元格中换行

 

 

                                     

 

                                   

                                  
                                    
                                  
                                                   
                                                     
       

                         
                          

 

拆分与合并单元格

属性名称 属性值 说明
colspan 数字 向两边扩展栏位
rowspan 数字 向下扩展栏位


                                        
                                            
                                         

直列化格式:<colgroup>….</colgroup>

属性名称 属性值 说明
align

left 

center

right 

靠左

靠中

靠右

valign 

top

middle

bottom

数据靠上

数据靠中

数据靠下

span  数字 直列数目
width  像素/百分比 宽度
bgcolor 英文/十六 数据栏的颜色

 

 

 

 

 

 

 

 

 

 

  

个别直列设置

格式:<col>功能完全和<colgroup>一样.

表格的标题:

<table>
  <caption>….</caption>
</table>
<caption>下的属性值有:

 属性名称   属性值    说明
 align 

 top 

bottom

 标题在表格上方

标题在表格下方


                                      
                                                
         

                                         

为网站添加图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

超链接的基本格式
格式:
scheme://host[:post]/path/filename
scheme指的是 http,ftp,file,mailto,news,gopher,telnet 七种
host 指的是 IP 地址或计算机名称
post 指的是服务器端口
path 指的是文件路径
filename 指的是文件名
<a href=scheme://host[:post]/path/filename >…</a>

超链接的种类
1. http   声明 <a href=http://www.163.com/images/logo.htm>网易 logo</a>
2. file    声明 <a href=file:///e/images/img.jpg>图片</a>
3. ftp    声明 <a href=ftp://192.168.1.44/>进入</a>
4. mailto  声明<a href=mailto:sctnl@163.com>E-MAIL</a>

书签的链接

瞄点<a name=”ind”>…</a>或<a id=”ind”>…</a>   

链接点<a href=”#ind”>…</a>   别的网页的书签项目链接点<a href=”index.htm#ind”>…</a>

为链接创建键盘快捷键
accesskey="w" (Alt+w) (Ctrl+w)
为链接设置制表符次序
tabindex="n"

表单的功能结构
主标记结构:<from>…</from>

属性  说明
name  字符串 给这个表单起个名字
method  get/post 表单的传输方式
action url 传输目标

 

 

     

                                  

文本栏、密码栏、隐藏栏
文本栏:<input type=”text” name=”栏位名称” value=”栏位内定值” size=”栏位显示宽度” maxlength=”栏位数据输入最大长度” readonly>
密码栏:<input type=”password” name=”栏位名称” value=”栏位内定值” size=”栏位显示宽度” maxlength=”栏位数据输入最大长度” readonly>
隐藏性栏位:<input type=”hidden” name=”栏位名称” value=”栏位值”>

复选栏、单选栏
多重勾选栏位 :<input type=”checkbox” name=” 栏位 称 ” value=” 内定值” checked disabled>
单选栏位 :<input type=”radio” name=” 栏位名称 ” value=”内定值 ” checked disabled>

窗体栏位、区块栏位
窗体选项栏位设置:

<select name=”栏位名称” size=”数字” >
  <option value=”选项值” selected>…
  <option value=”选项值”>…
  <option value=”选项值”>…
</select>
//分组<optgroup label="分组名称"></optgroup>
//多选 multiple

文字区块的设置:

<textarea cols=”设置长度” rows=”设置宽度” placeholder="内定值"  autofocus disabled form>………</textarea>  

//禁止拖动:resize:none;   //autofocus:页面加载自动获取焦点   //form:文本所属表单

按钮、图像按钮
按钮设置: <input type=”submit” value=”按钮中显示的文字”>
             <input type=”reset” value=”按钮中显示的文字”>
按钮图像:<button name=”栏位名称” type=”图象形态”>
                 <img src=”URL”>
             </button>
图像按钮:<input type="image" src="url" alt="文本">

允许上传文件
上传栏位:<input type="file" name="file">
表单加上外框和标题
外边框:<fieldset>...</fieldset>
标题:<legend>...</legend>

自动展示网页内容:
格式:<meta http-equiv=”refresh” content=”time;URL”>
1. meta 文件头声明
2. http-equiv=”refresh” 表示网页要重新下载显示
3. content=”time;URL” time 表示秒数,URL 网页显示内容
例:<meta http-equiv=”refresh” content=”3;url=index.html”>

如何让别人找到你的网页:
<meta>下的属性:

属性名称 属性值 说明
name 

author

description 

keywords

generator

others

content

revised

描述作者资料

描述网页的内容

关键字,多个可用逗号隔开

描述网页是通过那种软件产生

可设置其他网页信息

字符串 配合 name,http-equive 设置

描述网页的版本

 


                                        
                                          
                                            
                                               
                                               
                                                   
                                                    
           

 

                                      
例:<meta name=”author” content=”sctnl”>
<meta name=”description” content=”这是我的个人网站”>
<meta name=”keywords” content=”音乐,动漫,博客”>
<meta name=”generator” content=”sublime_text”>
<meta name=”revised” content=”html4.01”>
<meta name=”others” content=”这个我第一个网站,网站的主要内容有动漫,音乐,文章,博客等等,欢迎大家光临!”>

活动文字: <marquee> … </marquee>


属性名称
属性值   说明
behavior 

scroll

slide

alternate 

从右到左移动

从右到左停止

两边移动

direction 

left

right

up

down 

向左移动

向右移动

向上移动

向下移动

bgcolor 英文/十六 背景颜色
height 像素/百分比 高度
width  像素/百分比  宽度
scrollamount 数字 播放的速度
vspace  像素 上下两侧间距
hspace  像素 左右两侧间距

 

 

 

 

 

 

                                         
                                          
                                                        
                                                

                                             
                                                        
                                                           
                                                      
   

 

 

                                    

demo:https://github.com/sctnl/html.git

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:深入理解和应用Float属性

下一篇:Flex 弹性布局