在看文章之前可以先关注一下我的公众号哦，微微摘录。分享有趣的事情，可以不辞辛苦的看一下，也许里面的内容会让你感冒。
标签零碎整理
- hr是水平线标签，br是换行标签；
- html中的注释是<!----->
<p></p>标签是段落标签，浏览器会自动在p标签前后加上换行，注意！！！p标签是块级元素
html属性
属性一般是指在标签里，以名字和值的形式存在。比如 <a href="www.baidu.com"></a>，这个里面的href就是标签a的属性
html样式
style也是HTML的一种属性，只是它的作用是可以用来写样式的
设置背景颜色
使用background-color，详细使用如下
<html>
<body>
<h1 style="background-color:green">基础整理</h1>
</body>
</html>
运行结果：
设置字体样式、大小、颜色
分别使用font-family、color 、font-size来设定，详细使用如下
<html>
<body>
<p>我本来长这样</p>
<p style="font-famliy:NSimSun">设置了一个样式之后</p>
<p style="font-famliy:NSimSun;color:red">再加一个颜色</p>
<p style="font-famliy:NSimSun;color:red;font-size:50px">再把这个字变大</p>
</body>
</html>
运行结果：
设置页面文字居中对齐（由于只是整理html的style，所以不会那么详细深奥。具体会在之后的css中体现到）
这里是引用
使用text-align可实现，详细用法如下
<html>
<body>
<p>诶，我本来在这</p>
<p style="text-align:center">有了text-align之后的我</p>
</body>
</html>
运行结果：
更深一步text-align的学习，可参考这篇博客
对于html中style使用的总结：style属性中的样式包括background-color、font-family、font-size、color、text-align。style属性中可写多个样式，用分号隔开。注意格式！！！style=“属性名字：属性值”
html格式化标签
part1 文本格式化
br只是为了换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>文本标签演示开始了</h1>
<p>我是正常文本，是为了突出下面的集美的</p>
<b>我是b标签，你看我变粗了</b>
<br/>
<big>我是big标签，除了h1，我比他们都高</big>
<br/>
<small>我是small标签，我是最矮的，半价进出游乐场</small>
<br/>
<strong>我是strong标签，我是用来表示强调的，我会变粗</strong>
<br/>
<em>我是em标签，我也是用来强调的，但是我强烈的程度更强烈一点，也会告诉浏览器，我是重要的内容哦！然后我就变成斜体了</em>
<br/>
<i>我是i标签，我也是斜体，但我真的就只是个斜体而已。可能觉得em长得好看叭，我模仿一下，嘿嘿</i>
<br/>
<p>不瞒你说，我有一个名字叫<sub>微微摘录</sub>的公众号，你可以搜索关注一下哦~~~</p>
<p>上面那个兄弟是sub下标标签，这个是上标<sup>微微摘录</sup></p>
</body>
</html>
运行结果：
part2 预格式文本
pre标签
<html>
<body>
<p>预格式也就是你怎么输的他就怎么表现出来</p>
<pre> 我是 一条酸菜鱼 又酸又菜又多余 嘿嘿 </pre>
</body>
</html>
运行结果：
其他的标签可以参考w3手册
html的引用（缩进、下划线）
blockquote 可以首行缩进，具体用法如下
<!DOCTYPE html>
<html>
<body>
<blockquote>我是blockquote标签，我会自动缩进</blockquote>
</body>
</html>
运行结果：
abbr省略下划线
具体用法：
<!DOCTYPE html>
<html>
<body>
<abbr title="nice">省略号下划线，（来源于自创，啊哈）</abbr>
<p>对缩写进行title标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。而且，不标记，也就是不写title的话，不会出现省略号下划线的效果。</p>
</body>
</html>
运行结果：
HTML注释
使用<!----->
html中写css样式
在html中用style写样式
<html>
<head>
<style type="text/css">
p {color:red}
</style>
</head>
<body>
<p id="nice">这是一个加了样式的标签</p>
</body>
</html>
运行结果：
a标签怎么做到没有下划线
具体用法
<html>
<head>
</head>
<body>
<a href="www.baidu.com">
正常的超链接
</a>
<br>
<a href="www.baidu.com" style="text-decoration:none">去掉下划线的超链接</a>
</body>
</html>
运行结果
点击超链接重新打开页面
使用target="_blank"就可以重新打开另一个页面
<html>
<body>
<a href="https://www.baidu.com/" target="_blank" style="text-decoration:none">点击我</a>
</body>
</html>
运行结果：
点击即可跳转到百度页面
在同一个页面中定位内容
使用name标记，href定位
也可以在不同页面定位，因为要使用定位需要的内容多，所以直接截屏了。
注意写法，name是标记，href="#name的标记名字"是定位
html图像
使用background设置背景图片
<html>
<body background="/i/eg_background.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>注意，如果图片太小，那么作为背景图片，他是会重复的</p>
</body>
</html>
运行结果：
设置图片在一段话中的上中下位置
align可设置图片位置
<html>
<body>
<h2>未设置对齐方式的图像：（默认的其实就是bottom方式）</h2>
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像：</h2>
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
</body>
</html>
可理解为 top是上对齐，bottom是下对齐
设置图片在页面的左右位置
还是用align设置左右
<html>
<body>
<p>
<img src ="/i/eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
<img src ="/i/eg_cute.gif" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>
</body>
</html>
运行结果：
其他
用width height 可调整图片的尺寸；加载不到图片时，如果使用了alt属性，会告诉用户，这是一张什么图片；area标签可以点击图片的任意部分，图片地址用href来跳转。
html表格
表格由table开始，tr表示行，td表示列，th是表头（加粗显示）。
border可以调整表格边框的粗细。
用法：
<html>
<body>
<table border=10px>
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
</body>
</html>
运行结果：
如何展示一个空的单元格
<html>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<tr>
<tr>
<td>小红</td>
<td>女</td>
<tr>
<tr>
<td>小象</td>
<td></td>
<tr>
</table>
</body>
</html>
运行结果：
横跨两列的单元格
<th colspan="3">电话</th>
横排框可以有3个数据，像
<th rowspan="2">电话</th>
竖着可以有两个值，像这样
一般的表格里面，第一层表格是标题（横着的话）。像上面这种竖着的，第一层的第一个是标题，后面接着的是值。
表格里面可以内嵌表格、无序列表、有序列表、标签
cellpadding可以调整单元格边距，cellspacing可以调整单元框和单元框之间的距离。
可以用background color给整个表格或者单个表格添加背景。在想加的标签里面加就可以。
表格块里面的字体位置，可通过align=left、center、right来调整文字在框中的左中右的位置。
表格栅栏（自创）
<table frame="vsides">
这个表示左右的表格栅栏，像这种的
<table frame="hsides">
这个是上下的
above、below单上、单下的
html列表
ul标签是无序列表，里面的每一项用li包裹。
有序列表使用ol，里面的每一项用li包裹。
自定义列表的顺序 dl dt dd
无序列表的表现形式
<ul type="disc">
展示结果是实心小黑点
<ul type="circle">
展示结果是空心小白圈
<ul type="square">
小黑方块
有序列表的表现型
默认是数字
<ol type="A">
以abcd排序
<ol type="a">
以abcd排序
<ol type="I">
以I II III 排序
自定义列表使用
<html>
<body>
<h2>一个定义列表：</h2>
<dl>
<dt>
姓名
<dd>小红</dd>
</dt>
</dl>
</body>
</html>
运行结果
列表嵌套使用
<html>
<body>
<ul>
<li>男孩
<ul>
<li>高</li>
<li>矮</li>
</ul>
</li>
<li>女孩</li>
</ul>
</body>
</html>
运行结果
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
