在看文章之前可以先关注一下我的公众号哦,微微摘录。分享有趣的事情,可以不辞辛苦的看一下,也许里面的内容会让你感冒。
标签零碎整理
- 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>
运行结果