HTML简单内容小结（1）

最新推荐文章于 2024-05-09 10:12:04 发布

梦染FaM(梨花芽叶）

最新推荐文章于 2024-05-09 10:12:04 发布

阅读量167

点赞数 2

分类专栏： html 文章标签： html 前端

本文链接：https://blog.csdn.net/MengRan1314521/article/details/126197882

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一1,一个简单的html文件

<html>
<head>
<title>这是第一个网页<\title>
<\head>
<body>
<p>这是第一个段落<\p>
</body>
</html>

2,简单的段落

<html>
<body>
 
<p>段落元素由p标签定义</p>

</body>
</html>

3，更多的段落

<html>

<body>
<p>
这是第一段；
</p>

<p>
这是第二段；
</p>

<p>
这是第三段；
</p>
</body>

</html>

4，“诗歌”的形式段落

<html>

<body>

<h1> 咏鹅  </h1>
 <p>
     鹅鹅鹅，
       曲项向天歌。
         白毛浮绿水，
           红掌拨清波。
</p>

</body>

</html>



<html>

<body>

<h2>咏鹅 </h2>

<p>
    鹅鹅鹅，
      曲项向天歌。
</p>

<p>
    白毛浮绿水，
      红掌拨清波。
</p>

</body>

</html>

5，拆行

<html>

<body>

<p>
asdfg<br />vbnm,<br />bjhuyo.
</p>

</body>

</html>

6，标题

<html>

<body>

<h1>这是标题一</h1>
<h2>这是标题二</h2>
<h3>这是标题三</h3>


</body>

</html>

7，居中排列的标题

<html>

<body>

<h1 align="center"> this is heading 1</h1>

</body>

</html>

8，水平线

<html>

<body>

<p>this is 1;</p>
<hr />
<p><hr />所呈现的效果就是水平线</p>
<hr />

</body>

</html>

9，隐藏的注释

<html>

<body>

<!--这是一段注释，注释不会在浏览器中显示。-->

<p>一个段落</p>

</body>

</html>

10，背景颜色

<html>


<body bgcolor="yellow">
<h1>这里是改变成黄色的背景</h1>
</body>

</html>

11,链接的生成,在href属性中指定连接的地址

<html>

<body>

<a
href="http://www.w3school.com.cn">
this is a link</a>

</body>

</html>

12图像的定义，凸显个名称和尺寸是以属性的形式提供的

<html>

<body>

<img src="一个图片的路径"
width="300" height="120" />

<p>这里的width height分别是自定义图片的宽度和比重</p>

</body>

</html>

13，文本格式化

<html>

<body>

<b>this text is bold</p>

<br />
<strong>this text is strong</strong>
<br />
<big>this text is big</big>
<br />
<em>this text is emphasized</em>
<br />
<i>this text is italic</i>
<br />
<small>this text is small</small>
<br />
this text contains
<sub>subscript</sub>
<br />
this text contains
<sup>superscript</sup>

</body>

</html>

14，预格式化文本

<html>

<body>

<pre>
#include<stdio.h>
int main()
{
   int a,b;
   scanf("%d %d",&a,&b);
   printf("%d",a+b);
   return 0;
}
</pre>
<p>pre标签很适合计算机代码，它的预格式文本保留了空格和换行。</p>
 </body>

</html>

15，“计算机输出标签”

<html>

<body>

<code>computer code</code>
<br />
<kbd>keyboard input</kbd>
<br />
<tt>teletype text</tt>
<br />
<samp>sample text</samp>
<br />
<var>computer variable</var>
<br />

<p>
<b>注释:</b>后面用于注释的内容。
</p>

</body>

</html>

16，地址

<html>

<body>

<address>
written by <a
href="链接的路径">
人物名字</a><br>
其他内容<br>
其他内容<br>
</address>

</body>

</html>

17，缩写和首字母缩写

<html>

<body>

<abbr title="etcetera">etc.</abbr><br />
<acronym title="world wide web">WWW.</acronym>
<p>在某些浏览器中，当你把鼠标移动到缩略词语上时，title可用于展示表达的完整版本</p>
<p>仅对于IE 5中的 acronym 元素有效</p>

</body>

</html>

18，文字方向

<html>

<body>

<p>
如果你的浏览器支持bi-directinaloverride(bdo),下一行会自动从右向左输出（rtl);
</p>

<bdo dir="rtl">
这里输入的内容最后呈现的结果是从右向左输出的结果
</bdo>

</body>

</html>

19，块引用

<html>

<body>

这是长的引用：
<blockquote>
这里写入的是长的引用内容。
</blockquote>

这里是短的引用：
<q>
引用的内容
</q>

<p>
使用blockquote元素的话，浏览器会插入换行和外边距，而q元素不会有任何特殊的呈现。
</p>

</body>

</html>

20，删除字效果和插入字效果

<html>

<body>

<p>自我<del>学习</del>让我感到很<ins>难受</ins>.</p>

<p>上面的文字输出的结果中，学习加上了删除线，难受加上了下划线。</p>

<p>大多数浏览器会改写为删除文本和下划线文本，一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

</body>

</html>

21，条件注释只有internet explorer 执行的html标签

<!--[if IE 8]>
......some HTML here.....
<![endif]-->

22，<table border="1">拥有关于表格边框的附加信息。

23,html <q>用于短的引用。

<html>

<body>

<p>浏览器通常会在 q 元素周围包围引号。</p>


<p>例如<q>人与自然和谐共处</q>下边的输出显示的是这样的结果</p>

<p>  "人与自然和谐共处“   </p>

</body>

</html>

24,用于长的引用html <blockquote>

<html>

<body>

<p>浏览器通常会对blockquote元素进行缩进处理。</p>
<blockquote
cite="这里添加文件的网址">
亲爱的阅读者。
如果您喜欢作者的文章可否赏个币？
</blockquote>

<p>输出的效果如下：
亲爱的阅读者。如果您喜欢作者的文章可否赏个币？</p>

</body>

</html>

25,颜色值。颜色名，大多数的浏览器支持颜色名集合，仅仅16种颜色名：maroon, navy, olive, purple, red, silver, teal, white, yellow, aqua, black, green, lime, gray, blue, fuchsia.

安全色：

26,具体想要查询颜色名列表可以搜索网址：w3school.com.cn/html/html_colornames.asp

27,如何使用样式

外部样式表：当阳市被用到很多页面时，外部样式表是好的选择。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表：当单个文件需要个别样式时，可以使用内部样式表。

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>

</head>

内联样式：当特殊的样式需要对应到个别的元素时，就可以使用内联样式。改变段落颜色和左边边距。

<p style="color: red; margin-left: 20px">
this is a paragraph
</p>

<style>   定义样式定义
<link>    定义资源定义
<div>     定义文档中的节或者区域（块级）
<span>    定义文档中的行内的小块或者区域
<font>    规定文本的字体，字体尺寸，字体颜色。
<basefont>   定义基准字体
<center>  对文本进行水平居中。