HTML小结

最新推荐文章于 2024-04-25 20:22:26 发布

Y_ZhiWen

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量557

点赞数 1

分类专栏：随记文章标签： html

本文链接：https://blog.csdn.net/y_zhiwen/article/details/51526736

版权

待显示同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

随记

2 篇文章 0 订阅

订阅专栏

HTML

head
- meta
- …
body
- …

HTML:http://www.w3school.com.cn/tags/tag_frameset.asp

head

meta提供页面信息

<meta name="keywords" content="某个关键字"/> 
// 某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
<meta name="author" content="yzw"/>
<meta name="generator" content="编辑工具"/>
<meta name="description" content="页面说明"/>

<meta http-equiv="content-type" content="text/html; charset=euc-jp" />
// 设置网页文字和语言：此处为日语

<meat http-equiv="refresh" content="[跳转时间]; rul=[跳转地址]" />

More: http://www.w3school.com.cn/tags/tag_meta.asp

body

    <body 
        bgcolor="背景颜色" 
        backgroud="图片地址" 
        text="文字颜色" 
        link="链接颜色" 
        alink="正在访问连接颜色" 
        vlink="访问后连接颜色" 
        topmargin=上边距 
        leftmargin=左边距(单位像素)/>

标题

<h1></h1> -> <h6></h6>
<h2 align="left / center / right"> 标题对齐</h2>

文本

<font face="宋体 / 华文彩玉" size="字号" color="颜色">文本</font>

<b>加粗</b>

<i>斜体</i>

<hr> 水平线
<hr width="300" size="3" noshade(去掉阴影) color="颜色" align="center/left/right">

<br> 换行

&nbsp;空格

图像

<img src="images/car.jpg" alt="无法显示或鼠标停服时提示文字">

// 为图像添加链接
<a href="#"><img src=""></a>

列表

// 有序列表
<ol>
<li>星期一</li>
<li>星期二</li>
</ol>

<ol type="1 / a / A / i / I (序列符号类型)" start="序号起始值">
</ol>


// 无序列表
<ul>
<li>星期一</li>
<li>星期二</li>
</ul>

<ul type="Disc / circle / square"> </ul>

表格

 table:表格
 tr:行标记
 td:单元格标记

 eg:
 <table border="1">
 <tr>
 <td>(1,1)</td>
 <td>(1,2)</td>
 </tr>
 <tr>
 <td>(2,1)</td>
 <td>(2,2)</td>
 </tr>
 </table>

 表格标题
 <table>
 <caption>标题</caption>
 <th>表头1</th>
 <th>表头2</th>
 <th>表头3</th>
 <th>表头4</th>
 </table>

 // 表格属性
 <table 
        width="" 
        height="" 
        align="left / center / right(整个表格在浏览器的对齐方式)" 
        border="边框宽度" 
        bordercolor="边框颜色" 
        cellspacing="内边框度值" 
        cellpadding="文字与边框距离" 
        bgcolor="" 
        background="">
</table>

// 表格行属性
<tr 
    height="" 
    bordercolor="" 
    bgcolor="" 
    background="" 
    align="" 
    valign="top / middle / bottom">
</tr>

// 单元格属性
<td
    width=""
    height=""
    colspan="水平跨度的列数"
    rowspan="垂直跨度的行数"
    align=""
    valign=""
    bgcolor=""
    bordercolor=""
    bordercolorlight="亮边框的颜色"
    bordercolordark="暗边框的颜色"
    background="">
</td>

// 表格结构  
<thead></thead> // 表首标记 包裹<caption>
<tbody></tbody> // 表主体标记 包裹<tr>
<tfoot></tfoot> // 表尾标记 包裹<td> <tr>

超链接
- 内部链接 – 与自身网站页面有关的链接
- 外部链接


// 内部链接
<a href="链接地址" target="">

// 锚点 用于跳转，也在本页面也可以在其他页面

<a name="锚点名称"></a> // 建立锚点
<a href="#锚点名称></a> // 链接锚点
<a href="index.html#锚点名称"></a> // 链接到index.html 锚点

// 外部链接
<a href="http://www.baidu.com / mailto:邮件地址 / ftp://... "></a>

多媒体

滚动：

<marquee>文字、图片、表格...</marquee>

<marquee 
    direction="up / down / left(默认) / right" 滚动方向
    behavior="scroll(默认，循环滚动) \ slide(滚动一次) \ alternate(来回滚动)" 滚动方式
    scrollamount="3" 滚动速度
    scrolldelay="200" 滚动延迟
    loop="12" 滚动次数
    width=""
    height="" 滚动范围
    bgcolor="" 
    hspace=""
    vspace="" 空白空间
    >

</marquee>

多媒体文件:

<embed src="" width="" height=""></embed>

背景音乐:

<bgsound src="" loop="循环次数/true(无限循环)">

框架结构：将两个或两个以上的网页组合起来，在同一个窗口中打开的网页结构。

<frameset 
    rows="40%,60%" // 水平分割窗口  cols="123,312,41" // 垂直分割窗口
    frameborder="yes/1  no/0"  边框
    border="1" 
    bordercolor=""
    framespacing="1" 
    >

<frame src="top.html" name="mainFrame" id="mainFrame"/>
<frame src="foot.html" name="footFrame" id="footFrame"/>

</frameset>
<noframes>
浏览器不支持框架效果
</noframes>


// 嵌套分割
<frameset 
    rows="80,*" // 水平分割窗口  
    cols="*" // 垂直分割窗口
    frameborder="yes/1  no/0"  边框
    border="1" 
    bordercolor=""
    framespacing="1" 
    >

<frame src="top.html" name="mainFrame" id="mainFrame"/>

<frameset cols="80,*" >
<frame src="left.html" name="leftFrame" id="leftFrame"/>
<frame src="right.html" name="rightFrame" id="rightFrame"/>

</frameset>



// frame
<frame 
        src=""
        name=""
        noresize    // 禁止调整窗口尺寸
        marginwidth="边框与页面内容水平距离"
        marginheight="边框与页面内容垂直距离"
        scrolling="yes / no / auto" // 是否显示滚动条
        >

悬浮框架
框架链接

表单 – 收集客户端信息

// 表单
<form 
    action="表单处理程序">
    name="表单名称(不能含特殊符号和空格)"
    method="get / post (传送方法)"
    enctype="application/x-www-form-urlencoded(默认) / multipart/form-data (MIME编码方式)"
    target="目标窗口打开方式">

</form>


// 插入表单对象 以下都有id元素，用来表示页面的唯一元素
<form >
姓名:
<input name="控件名称" type="text" value="文本字段的默认值" size="控件长度" maxlength="24" />
密码:
<input name="" type="password" value="" .. />

单选按钮
<input name="" type="radio" value="" checked="checked"/>

复选框
<input name="" type="checkbox" value="" checked="checked" />

普通按钮
<input type="submit" name="" value="单击关闭窗口" onclick="window.close()" />

重置按钮
<input type="reset" name="" value="重置" />

图像按钮
<input type="image" src="" name="" />

隐藏按钮 -- 用于传输对用户不可知数据
<input type="hidden" name="" value="" />

文件域
<input type="file" />

// 菜单
<select name="下拉菜单名称">
<option value="选项值" selected="selected">选项1</option>
<option value="选项值">选项2</option>
</select>

// 列表
<select name="" size="" multiple="multiple">
<option value="选项值">选项1</option>
</select>

// 文本域
<textarea name="" cols="列数" rows="行数">
</textarea>

</form>

XHTML

作为HTML向XML的过渡

// XHTML的页面结构

//文档类型声明
<!DOCTYPE html>

//<html>元素和名称空间
<html lang="zh-cn">

完全嵌套
id属性代替name属性
标签必须小写
属性必须双引号

Y_ZhiWen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML小结

HTMLhead meta…body …HTML:http://www.w3school.com.cn/tags/tag_frameset.aspheadmeta提供页面信息<meta name="keywords" content="某个关键字"/> // 某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。<meta name="author" content="y
复制链接

扫一扫