html的一些基础入门资料或者笔记？
5 个回答
自己整理了好多天 希望能给大家的学习带来帮助
编写工具：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.163.com"> 网页不可更改大小
</frameset>
<noframes>对不起您的网页不支持框架</frames>
<frameset>在<html>标记对内，不能够与<body>并列
可以用来制作导航框架
内联框架：存在于<body></body>之中，也叫做浮动框架 用<iframe></iframe>或者<iframe />来表示
网页中的多媒体：可以播放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从入门到精通》
【重构前端知识体系之HTML】带你重忆HTML那些记忆模糊的标签
引言
上节，说了HTML是标记语言，那么最重要的就是标记，也就是标签。
那标签那么多？要在这里全部写出来？
当然否。这里会讲解常用的标签。（常用达到70%）
希望在各种前端框架频出的年代，HTML依然牢记于心。
回顾
在刚开始介绍的时候，讲了一个简单的demo，这里贴出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是一个标题</title>
</head>
<body>
<h1>我是一个页面内容的标题</h1>
<div>我是一个美男子，你信吗？</div>
</body>
</html>HTML元素
什么是HTML元素？
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
具体什么意思呢
<div>我是一个美男子，你信吗？</div>像上述代码就是一个div元素，它包含了div开始标签，div元素内容，div结束标签，它们一起组合成为了一个div元素。
<body>
<h1>我是一个页面内容的标题</h1>
<div>我是一个美男子，你信吗？</div>
</body>同样的以上的代码描述了一个body元素。
空HTML元素
在之后的标签学习中，有那么一个标签<br>， 这个标签定义换行。像这种HTML 元素被称为空元素，它是在开始标签中关闭的。
但！为了以后版本迭代和规划，在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
未来的 HTML 版本不允许省略结束标签！
HTML标签
这里按照功能分类讲解
基础标签
列表
1、<!DOCTYPE>
定义文档类型。
2、<html>
定义 HTML 文档。
3、<head>
定义关于文档的信息。
4、<title>
定义文档的标题。
5、<body>
定义文档的主体。
6、<br>
定义换行。
7、<h1> - <h6>
定义 HTML 标题。
8、<p>
定义段落。
9、<!-- -->
定义注释。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是一个标题</title>
</head>
<body>
<h1>我是一个页面内容的标题h1</h1>
<p>我是一个一个段落<br>我是一个一个段落<br>我是一个一个段落<br>我是一个一个段落<br>我是一个一个段落</p>
<!-- <p>我是一段隐藏的段落</p> -->
</body>
</html>效果
看起来，学会了这些基础标签，就可以在网上发一篇小作文啦。实现文字自由？
单独的文本未免太过于单调，来点修饰
修饰文本（格式化）
列表
1、<abbr>
定义文档类型。最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。
<abbr title="ni shi zui hao de">nszhd</abbr>
2、<i>
显示斜体文本效果。
3、<b>
呈现粗体文本效果。
4、<em>
定义强调文本。
5、<strong>
把文本定义为语气更强的强调的内容
6、<u>
定义下划线文本。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是一个标题</title>
</head>
<body>
<p><i>我是一个i段落</i></p>
<p><u>我是一个u段落</u></p>
<p><em>我是一个em段落</em></p>
<p><strong>我是一个strong段落</strong></p>
<p><b>我是一个b段落</b></p>
</body>
</html>效果
表单
列表
1、<form>
定义供用户输入的 HTML 表单。
2、<input>
定义输入控件。
3、<textarea>
定义多行的文本输入控件。
4、<button>
定义按钮。
5、<select>
定义选择列表（下拉列表）。
6、<option>
定义选择列表中的选项。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是一个标题</title>
</head>
<body>
<form action="form_action.asp" method="get">
<p>name: <input type="text" name="name" /></p>
<p>password: <input type="password" name="password" /></p>
<p><textarea>请填写简介</textarea></p>
<p>select：
<select>
<option value="wo">我</option>
<option value="zui">最</option>
<option value="shuai">帅</option>
</select>
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>效果
图像、音频与视频
列表
1、<img>
定义图像。
2、<canvas>
定义图形。
3、<svg>
定义 SVG 图形的容器。
4、<audio>
定义声音内容。
5、<video>
定义视频。
6、<source>
定义媒介源。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是一个标题</title>
</head>
<body>
<p>
img: <img src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/baidu.9627e61f.png" />
</p>
<p>
canvas: <canvas id="myCanvas"></canvas>
</p>
<p>
svg: <svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</p>
<p>audio:
<audio src="http://96.ierge.cn/15/235/471737.mp3" controls="controls"></audio>
</p>
<p> video:
<video src="https://vd3.bdstatic.com/mda-kiq250jsxvmh23gu/hd/cae_h264_nowatermark/mda-kiq250jsxvmh23gu.mp4"></video>
</p>
</body>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 80, 100);
</script>
</html>效果
链接
列表
1、<a>
定义锚。
<a href="https://www.baidu.com">我是百度</a>2、<link>
定义文档与外部资源的关系。
<link rel="stylesheet" type="text/css" href="demo.css" />列表类型
列表
1、<ul>
定义无序列表。
2、<ol>
定义有序列表。
3、<li>
定义列表的项目。
4、<dl>
定义定义列表。
5、<dd>
定义定义列表中项目的描述。
6、<dl>
定义定义列表中的项目。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是一个标题</title>
</head>
<body>
<ul>
<li>我是第一</li>
<li>我是第二</li>
<li>我是第三</li>
</ul>
<ol>
<li>我是第一</li>
<li>我是第二</li>
<li>我是第三</li>
</ol>
<dl>
<dt>我</dt>
<dd>很帅</dd>
<dt>你</dt>
<dd>帅吗</dd>
</dl>
</body>
</html>效果
表格
列表
1、<table>
定义表格
2、<caption>
定义表格标题。
3、<th>
定义表格中的表头单元格。
4、<tr>
定义表格中的行。
5、<td>
定义表格中的单元。
6、<thead>
定义表格中的表头内容。
7、<tbody>
定义表格中的主体内容。
8、<tfoot>
定义表格中的表注内容（脚注）。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是一个标题</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
</th>
<th>分数</th>
</tr>
</thead>
<tfoot>
<tr>
<td>小明</td>
<td>100</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>小红</td>
<td>70</td>
</tr>
<tr>
<td>小东</td>
<td>80</td>
</tr>
</tbody>
</table>
</body>
</html>效果
其他
列表
1、<script>
定义客户端脚本。
<script type="text/javascript">
document.write("Hello World!")
</script>2、<object>
定义嵌入的对象。
3、<embed>
为外部应用程序（非 HTML）定义容器。
<embed src="test.png" />4、<head>
定义关于文档的信息。
5、<meta>
定义关于 HTML 文档的元信息。
6、<base>
定义页面中所有链接的默认地址或默认目标。
总结
HTML的标签很多，相信大多数的xdm都了解。但并非都能记得。
告诉你们一件事，我在做HTML的面试题集，准确率竟然只有60%多。这也是我写本篇文章的目的。查漏补缺。
重构前端知识体系，你要一起吗？
博客说明与致谢
文章所涉及的部分资料来自互联网整理，其中包含自己个人的总结和看法，分享的目的在于共建社区和巩固自己。
引用的资料如有侵权，请联系本人删除！
感谢万能的网络，W3C，菜鸟教程等！
感谢勤劳的自己，个人博客，GitHub学习，GitHub
公众号【归子莫】，小程序【子莫说】
如果你感觉对你有帮助的话，不妨给我点赞鼓励一下，好文记得收藏哟！关注我一起成长！
所属专栏：重构前端知识体系（HTML）
幸好我在，感谢你来！