html的一些基础入门资料或者笔记？
时间：2024-02-09 16:30:01 | 来源：网站运营
时间：2024-02-09 16:30:01 来源：网站运营
html的一些基础入门资料或者笔记？：自己整理了好多天 希望能给大家的学习带来帮助
编写工具：aptana/dreamweaver/
常用的标记与格式：
<html>
<head>
<title>标题标记</title> <!--网页标记对-->
</head>
* <body>
<!--以下是标题对-->
<h1>标题1</h1> <!--有六种字号 号越小字越大-->
<p>这里表示段落</p> <!--内容多了之后会自动换行-->
<p>空 格</p>
<p><font size="+3">空格 123</p> <!--空格-->
<p>在本条代<br>码中出现<br>了多条强制换行符</p> <!--回车--> 标准写法为<br />
<hr />横线
<!--
这里放第一行注释
这里放第二行注释 但是你能看到么？！
-->
物理字体：
<b>这个是粗体</b>
<u>这个是下划线</u>
<i>这个是斜体</i>
<s>这个是删除线</s> <strike>
这个是<sup>上标</sup>
这个是<sub>下标</sub>
逻辑字体：
<em>这个是强调</em>
<strong>这个是加重</strong>
<small>这个是小字</small>
<big>这个是大的</big>
字体标记：
<font size="+3"> html </font> <!--字体大小的调整1~7 也可以是减号-->
<font color="red"> html lalallalala </font> <!--可以是颜色的单词 也可以是RGB的颜色值例如#000000 W#W标准-->
<font color=#cccccc> html lalallalala </font>
face="黑体" 字体设置
* <pre> 格式文本化 在网页设计的过程中可能会向用户展示一部分计算机代码，而展示计算机代码较长时或许会用到这一个指令
其中<xmp>…</xmp>相似 但是这条语句会进行html代码的解释
<code>…</code> 代码式的小型固定宽度字体显示的文本
<kbd>…</kbd> 代码样式固定宽度字体渲染
<tt>…</tt> 代码样式固定宽度字体渲染文本
<var>…</var> 代码样式斜体渲染
<smp>…</smp> 字体相对要细一点
文字布局：
文字一<p>文字二 <p>两行文字之间空出一行的作用 <p />是<p></p>的简写但是由于<p></p>里面没有内容所以说会出现空格
<br>如果存在多个 会出现多个空行
<nobr> 不换行控制
fjakdjfkjalkdfj
dsfadfdsagafdsg
</nobr>
文字对齐：
<p align="right">HTMl啦啦啦</p> left right center 左对齐 右对齐 居中 align可放在<p>与<div>里面
列表：
<ul> 无序列表 有序为<ol type="#">…<ol> 其中#可以用a A i I 1等来表示
<li>表项1</li>
<li>表项2</li>
<li>表项3</li>
</ul>
文字滚动事例：<marquee direction="right">做人要厚道</marquee> right left down up 可以在txt编辑随便找一个浏览器运行
scrollamount="500"表示速度
behavior可以用来设置滚动属性 alternate表示来回循环滚动 slide表示内容滚动一次就停止 loop="3"表示循环三次
scrolldelay="10" 设置滚动的时间间隔 走一走停一停
bgcolor="red" 滚动的背景颜色
width="250" height="55"
图片移动： <marquee width="600px" height="200px" bgcolor="#666666">
<img scr="html.jpg">图片的大小在marquee中移动
</marquee>
图像：
<img scr="cn.jpg"> scr表示的是路径 width="200px" height 表示宽度和高度
alt="hello world"表示鼠标指针在图片上的时候显示交互的文字
align 表示对其方式 top right bottom left middle 顶 右 底（默认） 左 中间 表示图像和文本的关系
border="10px" 边框大小 也可以选择去除边框
target="_blank"目标为空 或者可以设置为_self等
http://www.baidu.com"><a href="mailto:lalall@163.com"> </a> <作者的邮箱>
锚点
<a href="#htmlbook">点击到锚点处</a>
<a name="htmlbool">在这里设置一个锚点。在网页第一页做锚点</a> 在同一网页可以加多个锚点 链接可以设置在本网页外 在URL地址后加“#”后再加锚点名称
有时候单击图像的不同位置会出现不同的链接，矩形，圆形，多边形，这些分别用rect circle poly实现。 在<img>里放的是usermap，后面接的是地图的名字。
在声明地图的时候，用<map></map>包围。map里面放的是name的名称，以便在其他地方调用。在<map></map>里有区域，由<area>属性指定用什么形状，后面紧跟Shape
Shape后面接rect circle poly之中的一个，coords里面是像素 href里面是连接的地址。
相对路径： C:/Users/dezha/Desktop/html.jpg 绝对路径
页面不存在_百度搜索
<map name="Face">
<area shape="rect" href="page.html" coords="140,20,280,60">
<area shape="poly" href="image.html" coords="100,100,180,80,200,140">
<area shape="circle" href="new.html" coords="80,100,60">
</map>
表单：
<form>…</form>
<form action="show.aspx" method="get"> action表示表单提交后发送的地址 发送方式method有GET和POST两种 基本区别是POST传输的值比较大 值可以传给数据库可以是URL后台
<input type="text"> *text password checkbox多选 radio单选 hidden submit reset
<br>
<input type="password">
<br>
多选单选框
<input type="checkbox" name=book>html知识
<input type="checkbox" name=book checked>css知识 checked表示选中状态
<input type="checkbox" name=book>html+css知识
<br>
下拉列表
<select>
<option>选项一</option>
<option selected>选项二</option5>
…………
</select>
<input type="button" value="提交 ">
图片域
<input type="image" src="图片路径"/> 用来代替提交按钮
文件域
<input type="file" /> 点击浏览可以浏览本地文件
隐藏域： 在页面内看不见 但是可以用来装载需传输的数据
<input type="hidden" name="name" value="我是隐藏域里的值" />
表格： 其中每个格子被称为单元格
<table> </table> <tr></tr>表示对一行做标记 <td>表示对表元标记 <th>表示表头，可以省略
<th rowspan=3></th>表格中的跨多行
<td rowspan=3></td>表格中的td跨多行
<th colspan=3></th> 或者下面表示跨多列
<td colspan=3></td>
<table border="1" width="300"> border表示边框宽度值 height width表示高度和宽度
<th align="#"></th>表示表格中的对齐方式 center left right
<table align="#"><table>表示表格在网页中的对齐 cellspacing 表示的单元格之间的间距 cellpadding 表示单元格的边距
</form>
文本域
<textarea name=book rows=6 cols=60> 名称 行 高 在需要输入多行文字或者是需要填写大量文字时用到 没有用到<input>标签
……
</textarea>
框架： 可用于向浏览器窗口中装载多个html网页文件，每个frame（帧 每个html文件占据一个）里的网页都是相互独立的。当网站的每个网页部分是不变的时候比较适合
通常在一个帧里面导航链接，将需要变化的文件放到另一个帧里面
框架型网页：如果一个网页的导航菜单是固定的，在页面中的信息可以上下移动，这就可以认为该页面是一个框架型的网页。其基本语法为<frameset></frameset>放在<head>标记对后面
与之并列。其中又有frame标签<frame></frame>来表示在框架内放入什么文件
<frameset cols="25%,50%,*"> rows为水平分割 *b表示剩下的 frameborder="no"表示隐藏边框
http://www.biadu.com" scrolling="no"> scrolling表示滚动条 有auto yes和no三种属性
http://www.hao123.com">
http://www.163.com"> 网页不可更改大小
</frameset>
<noframes>对不起您的网页不支持框架</frames>
<frameset>在<html>标记对内，不能够与<body>并列
可以用来制作导航框架
内联框架：存在于<body></body>之中，也叫做浮动框架 用<iframe></iframe>或者<iframe />来表示
http://www.sina.com.cn" />
网页中的多媒体：可以播放flash mid waw mp3等格式的多媒体文件
<embed src=url > url表示多媒体的路径，可以是绝对路径也可以是相对路径 src可以插入midi wav aiff au mp3格式 自动播放格式 autostart=true|false
循环播放格式 loop=true|false|一个数字 hidden=true|false 设置面板的隐藏 height width设置面板的大小单位为px
对齐方式align=top bottom center baseline left right texttop控制面板的顶部与当前行中最高的文字顶部对齐 middle中间与当前行的基准线对齐 absmiddle absbottom与当前文本对齐
</body>
</html>
DIV层 用来进行网页的布局 可以与<table>做替换 可以有多层 最外层的别成为容器
代码举例：
<html>
<head>
<title>DIV布局</title>
<style type="text/css">
/*设置层的样式*/
#header
{
background:blue;
height;100px;
}
#content{}
#right
{
width:33%;
height:250px;
float:right;
background:green;
}
#left
{
width:33%;
height:250px;
float:left;
background:orangr;
}
#middle
{
width:33%;
height:250;
float:left;
background:yellow;
}
#bottom
{
height:80px;
background:grey;
clear:both;
}
</style>
</head>
<body>
<div id="header">头部</div>
<div id="content">
<div id=“right”>网页体右边</div>
<div id=”left“>网页体左边</div>
<div id="middle">网页中间</div>
</div>
<div id="bottom">网页底部</div>
</body>
</html>
其中地址部分scr有可能写错。参考资料来源于《HTML+CSS从入门到精通》
在线咨询
