Html初学资料

最新推荐文章于 2020-12-14 17:50:33 发布

WWGS

最新推荐文章于 2020-12-14 17:50:33 发布

阅读量525

点赞数

分类专栏： Html学习笔记文章标签： html

本文链接：https://blog.csdn.net/u010504185/article/details/54620689

版权

Html学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Html页面结构

//元素
<html></html>
//头部元素
<head></head>
//主题元素
<body></body>
//标题元素
<title></title>

元信息标签

//元信息标签
<meta/>
元信息标签是一个辅助性标签,可以对整个页面进行综合性的设置.
meta标签的用处很多,通常用来为搜索引擎定义页面主题;还可以用于设置页面,使其使用根据定义的时间间隔刷新页面等.这些作用主要通过meta的两种属性来表示:name和http-equiv.
//name
name属性是用来描述网页,便于搜索引擎查找、分类。这其中最重要的是description(搜索引擎网站的简介)和keywords(分类关键字)，所以应该给每页加一个meta值。这样可以方便每个页面被准确、快速搜索出来。name属性是写在meta标签里面的，meta和name中间隔了一个英文的空格。如下:
<meta name="#" contect="内容"/>
//Generator
<meta name="keywords" contect="网页生成工具"/> 说明网页生成工具
//keywords
<meta name="keywords" contect="网页关键词"/> 向搜索引擎说明网页的关键词
//Description
<meta name="Description" contect="网页主要内容"/> 告诉搜索引擎网页的主要内容
//Author
<meta name="Author" contect="作者名字"/> 告诉搜索网页引擎网页制作的作者
//Robots
<meta name="Robots" contect="#"/> 定义网页的检索情况和网页上的连接查询情况


----------


contect="#"里面可以替换多个属性值来设定不同的检索和查询情况.下面为contect="#"里面的多个属性值的说明：
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;
index:文件将被检索;
follow:页面上的链接可以被查询;
noindex:文件将不被检索,但页面上的链接可以被查询;
nofollow:文件将不被检索,但页面上的链接可以被查询。
注意：contect="#"中,#里面只能为一个属性值,不能填写多个属性值。


----------
//http-equiv
http-equiv:它反馈给浏览器一些有用的信息,来帮助页面正确和精确的显示页面内容,是网页里必不可少的标签属性.
----------
//http-equiv="Refresh"
<meta http-equiv="Refresh" contect="n;url=http://www.baidu.com"/>
主要作用:让网页在规定时间内,跳转到指定的页面
n:表示跳转时间,以秒来计算
url:跳转的地址
----------
//http-equiv="Expires"
<meta http-equiv="Expires" contect="GMT时间格式"/>
主要作用:设定网页在缓存中的过期时间
详细:是用来指定网页在缓存中的过期时间,一旦过期则必须到服务器上重新调用。
----------
//http-equiv="Pragma"
<meta http-equiv="Pragma" contect="no-cache"/>
主要作用:设定禁止浏览器从本地机的缓存中调阅页面内容
----------
//http-equiv="set-cookie"
<meta http-equiv="set-cookie" contect="GMT时间格式"/>
主要作用:如果网页过期,存盘缓存(也成cookie)将被删除
----------
//http-equiv="Window-target"
<meta http-equiv="Window-target" contect="#"/>
主要作用:设置显示窗口的,强制页面在当前窗口以独立页面显示
#:设置出现位置;

//段落标签
<p></p>
//换行标签
<br/>
//插入水平分割线
<hr/>
设置粗细:<hr/ size="10px">
设置长度:<hr/ width="20px;">
设置显示位置:<hr/ align="#">
        #:left(左)conter(中)right(右)
设置颜色:<hr/ color="#">
        #颜色值十六进制
设置无阴影:<hr/ noshade>
//设置背景颜色
        <body bgcolor="颜色值">
//标题标签
<h1></h1>--<h6></h6>
//设置字体
    大小:<font size="20px;"></font>
    字体类型:<font face="宋体"></font>
----------

文本布局标签

//缩进标签
<blockquote></blockquote>
        里面内容自动居中缩聚
//保留格式标签
<pre></pre>
        里面内容空格之类都有效
//内联标签
<span title=""></span>
        通过css发挥更大效果

基于物理样式的文本标签

//加粗标签
<b></b>
//斜体标签
<i></i>
//下划线标签
<u></u>
<ins cite="www.baidu.com" datetime="2012-12-12"></ins>
        cite:原文档或信息的链接
        datetime:改动时间
//删除标签
<del></del>
<s></s>
//等宽字体效果
<tt></tt>
//标
设置上标:<sup></sup>
设置下标:<sub></sub>
//引用标签
<samp></samp>
<code></code>
//变量名定义标签
<var></var>

超链接

----href
A：<a href="name"></a>
B：<a name="name"></a>
单击A可跳转到本页B
----target
<a href="http://www.baidu.com" target="_blank"></a>
_blank:另打开一个选项卡
_parent:在当前选项卡打开
_self:在当前选项卡打开
_top:在当前选项卡打开
不适用框架下后三个效果一样

图像

图像一般包括gif、jpg、png、bmp,常用的市gif和jpg;
gif是一种压缩位图格式,支持透明背景图片,适用于多种操作系统,体型小,可以制作简单动画;
jpg格式的图片好处在于,清晰高,而且可以很好的压缩图片大小,改善加载速度;
png格式的图片是透明的、容量小的
bmp清晰度不高,容量较大,比较少使用
----------
//设置背景图像
<body background="#"> 每个图片要少于10K
//图像标签
<img src=""/>
<img src="" alt="无法加载">
        当图片未读取或者路径不对,alt属性在生效
//宽高
<img src="" width="" height=""/>
//align
<img src="" align="#"/>
        #:
        bottom:底部
        left:左边
        right:右边
        middle:中间
        top:上面
//边框
<img src="" border="npx"/>
//间距
<img src="" hspace="npx"/> 水平间距
<img src="" vspace="npx"/> 垂直间距

图像超链接

//本地图像链接地址
<a href="bd_logo1.png"><img src="bd_logo1.png"/></a>
//站外图像链接
<a href="http://www.baidu.com"><img src="bd_logo1.png"/></a>

创建图像矩形热点区域

//矩形热点区域
<img src="百度.png" usemap="#你好"/>
<map name="你好">
    <area shape="rect" coords="21,35,100,95 href="http://www.baidu.com">
</map>
在百度图片上,制定一个矩形热点区域,根据img上的你好连接到map的name
shape配置为矩形
coords="左,上,右,下"
单击该矩形连接到baidu.com

创建图像圆形热点区域

<img src="bd_logo1.png" usemap="#你好"/>
    <map name="你好">
        <area shape="circle" coords="50,50,50" href="http://www.baidu.com">
    </map>
shape配置为圆形
coords="前两个值是圆心的x,y轴,最后是圆的半径"

创建图像多边热点区域

<img src="bd_logo1.png" usemap="#ip"/>
    <map name="ip">
        <area shape="poly" coords="50,30,80,100,50,60" href="http://www.baidu.com">
    </map>
shape配置为多边形
coords多边形坐标

图像占位符

 <img name="html" src="" width="200px;" height="200px"/>

表格

<table>
    <caption>标题</caption>
    <tr>//行
        <th></th>//表头单元格

        <td>//列</td>
    </tr>
</table>
//边框
border:npx;
border="none"
        不显示边框
//间距/边距
cellpadding:边距
cellspacing:间距
//亮边框颜色
bordercolorlight="#CC0000"
        左边框和上边框的颜色
//暗边框颜色
bordercolordark="#CC0000"
        右边框和下边框的颜色
//不显示外边框
frame="void"
//显示上下外边框
frame="hsides"
//显示左右外边框
frame="vsides"
//显示上下左右
上:frame="above"
下:frame="below"
左:frame="lhs"
右:frame="rhs"
//行的合并
rowspan
//列的合并
colspan
////table的注释方法
//表头标签
<thead></thead>
//主题标签
<tbody></tbody>
//行尾标签
<tfoot></tfoot>

设置对齐方式

//align
align属性可以设置行的水平方式,就是使行里面的内容都水平对齐,其中默认为水平居左对齐。align属性共有三个值,分别是:居中对齐,居右对齐,居左对齐。
center:中
right:右
left:左
//垂直对齐方式valign
valign属性可以设置行的垂直对齐方式,就是使行里面的内容都是垂直对齐,默认值是居中对齐
中:valign="middle"
上:valign="top"
下:valign="bottom"

多媒体元素

//活动字幕
marquee缺点就是无论内容有多长前一次滚动完才进行第二次
<marquee>你好</marquee>
//滚动方式
<marquee behavior="scroll">你好</marquee>
        一次完了再重新滚动
<marquee behavior="slide">你好</marquee>
        滚动一次完后停止在页面处
<marquee behavior="alternate">你好</marquee>
        左右来回滚动
//滚动颜色
<marquee bgcolor="#FF0000">你好</marquee>
//滚动方向
<marquee direction="left">你好</marquee>
        右想左
<marquee direction="right">你好</marquee> 
        左向右
<marquee direction="up">你好</marquee>
        下向上
<marquee direction="down">你好</marquee>
        上向下
//滚动速度
<marquee scrollamount="5">你好</marquee>
//滚动时停顿时间
<marquee scrolldelay="1">你好</marquee>
//字幕水平空白区域
<marquee hspace="5">你好</marquee>
//字幕垂直空白区域
<marquee vspace="5">你好</marquee>
//滚动次数
<marquee loop="-1">你好</marquee>
//设置鼠标滑过
<marquee loop="1" onmouseout="this.start()" onmouseover="this.stop()">你好</marquee>
this.start():鼠标移除该区域时继续滚动
this.stop():鼠标移入该区域时停止滚动

插入多媒体元素

//插入音乐
<embed src="非主流 - Hao Du You Du.mp3"></embed>
//隐藏播放面板
<embed src="非主流 - Hao Du You Du.mp3" hidden="true"></embed>
        隐藏
<embed src="非主流 - Hao Du You Du.mp3" hidden="true"></embed>
        显示

插入背景音乐

//背景音乐
<bgsound src="非主流 - Hao Du You Du.mp3"/>
//播放次数
<bgsound src="非主流 - Hao Du You Du.mp3" loop="1"/>
infinite:无限循环

框架集

<frameset cols="25%,50%,25%" border="15">
        <frame src="1.html">
        <frame src="1.html">
        <frame src="1.html">
</frameset>
        被分割成竖列形式
<frameset rows="25%,50%,25%" border="15">
        <frame src="1.html">
        <frame src="1.html">
        <frame src="1.html">
</frameset>
        被分割成横行形式
<frameset rows="25%,50%,25%" frameborder="0" border="15" framespacing="10px">
        <frame src="1.html">
        <frame src="1.html">
        <frame src="1.html">
</frameset>
frameborder:0不显示边框,1显示边框,不显示边框时会引用src里面的三个框架进行显示
framespacing:设置框架间隔
不支持该框架时候可以:
<noframes><body>此浏览器不支持框架</body></noframes>

框架

//框架调节
<frameset  rows="40%,36%,25%" cols="*" frameborder="0" border="15">    
        <frame src="1.html" noresize="noresize">
        <frame src="1.html" noresize="noresize">
        <frame src="1.html" noresize="noresize">
</frameset><noframes></noframes>
noresize:设置框架不能调节
//框架嵌套
和嵌套<div></div>一样
//框架链接
<frameset  rows="40%,36%,25%">    
        <frame src="1.html" noresize="noresize" name="page1">
        <frame src="2.html" noresize="noresize" name="page2">
        <frame src="3.html" noresize="noresize">
</frameset>
1.html内容:<a href="http://www.baidu.com" name="page1">左边</a>
只有通过frame里面的name和1.html的name一样才能实现框架衔接

嵌入式框架

//滚动条
<frameset  rows="*,*,*%">    
        <iframe src="1.html" name="page1" scrolling="yes"></iframe>
        <iframe src="2.html" name="page1" scrolling="no"></iframe>   
        <iframe src="3.html" name="page3" scrolling="yes"></iframe>
</iframe> 
scrolling:yes根据需要显示滚动条
      no不显示滚动条
//框架窗口透明设置
<frameset  rows="*,*,*">    
        <iframe src="1.html" name="page1" scrolling="yes" allowtransparency="true"></iframe>
        <iframe src="2.html" name="page2" scrolling="no"></iframe>   
        <iframe src="3.html" name="page3" scrolling="yes"></iframe>
</frameset>
allowtransparency="true":设置透明框架

列表元素

//无序列表
<ul>
        <li>你好</li>
</ul>
//空心圆
<ul type="circle">
        <li>你好</li>
</ul>
//小方块
<ul type="square">
        <li>你好</li>
</ul>
//有序列表
<ol>
        <li>你好</li>
        <li>你好</li> 
</ol>
//大写字母标号样式
<ol type="A">
        <li>你好</li>
        <li>你好</li> 
</ol>
//小写字母标号样式
<ol type="a">
        <li>你好</li>
        <li>你好</li> 
</ol>
//大写罗马字母标号样式
<ol type="I">
        <li>你好</li>
        <li>你好</li> 
</ol>
//小写罗马字母标号样式
<ol type="i">
        <li>你好</li>
        <li>你好</li> 
</ol>

定义列表元素

//定义整体列表结构
<dl>
        <dt>2</dt><dd>3 </dd>
</dl>

这里写图片描述

表单元素

//form表单
<form action="路径" method="提交方式">
内容不过多解释
</form>
<input type="image" src="bd_logo1.png"/>
sec里面图片将显示在页面上

css样式基础知识

//引入外部表样式
<link href="文件名.css" rel="stylesheet" type="text/css"/>
//内部表样式
<style type="text/css">
    #ni{ width:500px;height:500px; background-color:#0F0};
</style>
//内嵌样式表
<标签 style=""/>
优先级别:内嵌样式表>内部表样式>外部表样式

选择器

//派生选择器
h1 p{};
意思就是h1下面的p标签
//id选择器
<style type="text/css">
    #id{};
</style>
<标签 id="id"/>
//class选择器
<style type="text/css">
    .id{};
</style>
<标签 class="id"/>
优先级别:id选择器>class选择器>派生选择器

css属性

//背景颜色
background-color:
//背景图片
background-image:url
        显示图片
background-repeat:no-repeat
        不重复图片
background-repeat:repeat
        水平垂直重复显示
background-repeat:repeat-x
        水平重复显示
background-repeat:repeat-y
        垂直重复显示
//固定页面背景
background-attachment:fixed;
        固定背景图片,背景图片不随页面滚动
//不固定页面背景
background-attachment:scroll;
        不固定背景图片,背景图片随页面滚动
//设置图片位置
background-position:x y;
x:left、conter、right
y:top、conter、bottom
        也可以用数字
background-position:50px 60px;

css文本属性

//字符间距
letter-spacing:10px"
//行间距
line-height:10px
//文本对齐方式
text-align:right
left:文本向左对齐
right:文本向右对齐
conter:文本居中对齐
justify:文本向两端对齐
//修饰文本
text-decoration:underline
underline:下划线
overline:上划线
line-through:删除线
//文本缩进
text-indent:20px;
//转换大小写
text-transform:capitalize
capitalize:每个英文首字母大写
uppercase:所有英文字母大写
lowercase:所有英文字母小写
//控制文本换行
white-space:normal
normal:按照浏览器默认的方式
pre:强制控制不换行
nowrap:强制控制不换行,直到遇到换行符号
//字体大小
font-size:npx;
//选择字体
font-family:

pre:
这里写图片描述
nowrap:

css边框属性

//边框样式
border-style:solid
solid:实线
double:双线
groove:根据border-color:#F00;画出3D凹槽的线条
ridge:根据border-color:#F00;画出菱形边框
inset:根据border-color:#F00;画出3D凹边的线条
outset:根据border-color:#F00;画出3D凸边的线条
//边框颜色
border-color:#F00;
//边框宽度
border-width:npx;
//设置上、下、左、右边框
border-top:样式,粗细,颜色;
top:上
right:右
left:左
bottom:下
//综合声明边框
border:样式,粗细,颜色;宽度,高度;

css外边距

//居中auto
margin:0 auto;
第一个0是上下边距为0,auto是左右根据窗口大小相对居中
//上、下、左、右外边距
margin-top:
margin-bottom:
margin-left:
margin-right:
//综合声明外边距
-----两个值
margin:x y;
x:上下
y:左右
-----三个值
margin:x y n;
x:上
y:左右
n:下
-----四个值
margin:x y n z;
x:上
y:右
n:下
z:左

css内边距

//上、下、左、右内边距
padding-top:
padding-bottom:
padding-left:
padding-right:
//综合声明内边距
-----两个值
padding:x y;
x:上下
y:左右
-----三个值
padding:x y n;
x:上
y:左右
n:下
-----四个值
padding:x y n z;
x:上
y:右
n:下
z:左

css列表属性

//不显示li的点
list-style:none;
//替换li前面默认图标
list-style-image
//定义列表排序位置
list-style-position:
outside:表示列表排序标记的位置不在文本内容里面,并且文本内容不与列表排序的标记对齐
inside:表示列表排序标记的位置在文本内容里面,并且文本内容与列表排序的标记对齐
//定义列表排序符号样式
list-style-type:
//综合声明列表属性list-style
list-style:url/样式 position属性;

css伪类和伪元素

//未访问的链接伪类:link
a.选择器:link{属性:属性值}
这里写图片描述

//已访问的链接伪类:visited
a.选择器:visited{属性:属性值}

//鼠标经过时的链接伪类:hover
a.选择器:hover{属性:属性值}
//鼠标按下时的链接伪类:active
a.选择器:active{属性:属性值}

伪元素

//首字母样式设置first-letter
a 选择器:first-letter{属性:属性值}
//使用伪元素只能用修饰文本的属性来对伪元素进行修饰,不能用修饰框架之类的属性来对伪元素进行修饰
//首行样式设置first-line
a 选择器:first-line{属性:属性值}
//还有:before、:after

脚本

基本写法就不用说了
//替换文本
<noscript>替换文本</noscript>
noscript 元素用来定义在脚本未被执行时的替代内容（文本）。
此标签可被用于可识别 <script> 标签但无法支持其中的脚本的浏览器。
//嵌入对象
<object codetype="application/java-archive" classid="Dao.java" codebase="Dao.java">
</object>

单击/双击事件

//单击事件onclick
<body>
   <span onclick="name();">你好</span>
</body>
<script type="text/javascript">
    function name(){
        alert(0);
    }
</script>
//双击事件ondblclick
<body>
   <span ondblclick="name();">你好</span>
</body>
<script type="text/javascript">
    function name(){
        alert(0);
    }
</script>

鼠标触发事件

//鼠标按下事件onmousedown
<body>
   <span onmousedown="name();">你好</span>
</body>
<script type="text/javascript">
    function name(){
        alert(0);
    }
</script>
//鼠标释放事件onmouseup
<body>
   <span onmouseup="name();">你好</span>
</body>
<script type="text/javascript">
    function name(){
        alert(0);
    }
</script>
//鼠标停留事件onmousemove
<body>
   <span onmousemove="name();">你好</span>
</body>
<script type="text/javascript">
    function name(){
        alert(0);
    }
</script>
//鼠标经过事件onmouseover
<body>
   <span  onmouseover="name();">你好</span>
</body>
<script type="text/javascript">
    function name(){
        alert(0);
    }
</script>
//鼠标离开事件onmouseout
<body>
   <span onmouseout="name();">你好</span>
</body>
<script type="text/javascript">
    function name(){
        alert(0);
    }
</script>

键盘触发事件

//按下键盘按键事件onkeydown
<input type="text" onkeydown="alert('键盘按下');"/>
//按下并任意释放一个键事件onkeypress
<input type="text" 
onkeypress="alert('按下键盘按键并释放按键');"/>
//释放键盘按键事件onkeyup
<input type="text" onkeyup="alert('按下键盘按键并释放按键');"/>

页面事件

//图片下载时被中断事件onabort
<img src="bd_logo1.png" onabort="alert(0);"/>
        只支持img标签
//当前页面的内容将要被改变时触发事件 如:关闭页面
<body onbeforeunload="alert(0);">
//页面出错事件
<img src="image.gif" onerror="alert(0);" />
支持<img>, <object>, <style>标签
支持javasrcipt对象:window, image
//页面加载完事件
<body onload="alert(0);">
支持<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>标签
支持javasrcipt对象:image, layer, window
//改变浏览器的窗口大小时触发事件
<body onresize="alert(0);">
支持标签.....等
支持javasrcipt对象:window
//拖动滚动条事件
<body onscroll="alert(0);">
//离开页面事件
<body onunload="alert(0);">
支持<body>, <frameset>标签
支持javasrcipt对象:window

表单事件

//选定元素失去焦点
<input type="text" onblur="alert(0);"/>
//选定元素发生改变事件
<input type="text"  onchange="alert(0);"  value="0"/>
//当元素获得焦点
<input type="text"  onfocus="alert(0);"/>
//表单重置事件
<form onreset="alert(0);">
    <input type="text"  />
    <input type="reset" />
</form>
//表单提交事件
<form onsubmit="alert(0);">
    <input type="text"/>
    <input type="submit"/>
</form>

滚动字幕事件

//字幕内容滚动至显示范围之外事件onbounce
<marquee behavior="scroll" onbounce="alert(0);" width="300px;">滚</marquee>
//完成需要显示的内容后事件
<marquee behavior="scroll"  onfinish="alert(0);" width="300px;">滚</marquee>
//开始显示内容事件
<marquee behavior="scroll"  onstart="alert(0);" width="300px;">滚</marquee>

编辑事件

//出现菜单事件
<body oncontextmenu="alert(0);">
//内容被复制后事件
<body oncopy="alert(0);">
//内容被剪切时事件
<body oncut="alert(0);">
//鼠标拖动事件
<body ondrag="alert(0);">
//失去鼠标移动所形成选择焦点事件
<body onlosecapture="alert(0);">
//内容不粘贴事件
<body onpaste="alert(0);">
//内容被选择时事件
<body onselect="alert(0);">
//内容选择将开始发生时事件
<body onselectstart="alert(0);">

数据绑定

//数据完成由数据源对象的传送事件
onAfterUpdate
//数据来源发生变化时事件
onCellChange
//数据接收完成时事件
onDataAvailable
//数据源发生变化时事件
onDatasetChanged
//全部有效数据读取完毕事件
onDatasetComplete
//取消数据传送事件
onBeforeUpdate
//取消数据传送时,代替onAfterUpdate事件onErrorUpdate
取消数据传送时,代替onAfterUpdate事件是指当使用onBeforeUpdate事件触发取消了数据传送,onError事件用来代替onAfterUpdate

外部事件

//文档被打印后事件
onAfterPrint
<body onAfterPrint="alert(0);">
//文档即将被打印时事件
onBeforePrint
<body onBeforePrint="alert(0);">
//滤镜效果发生变化时事件
onFilterChange
<开始标签 onFilterChange=""></闭合标签>
//按下F1或者帮助选择时事件
onHelp
<body onHelp="alert(0);">
//对象的属性之一发生变化时事件
<开始标签 onPropertyChange=""></闭合标签>

#

WWGS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html初学资料

Html页面结构//元素<html></html>//头部元素<head></head>//主题元素<body></body>//标题元素<title></title>元信息标签//元信息标签<meta/>元信息标签是一个辅助性标签,可以对整个页面进行综合性的设置.meta标签的用处很多,通常用来为搜索引擎定义页面主题;还可以用于设置页面,使其使用根据定义的时间间隔刷新页面等.这
复制链接

扫一扫