html入门

Posted 2021-07-19 临风而眠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html入门相关的知识，希望对你有一定的参考价值。

html入门(1)

一.Hello world

my first html

新建一个文件index.html,输入：

Hello World

在浏览器中打开，就可以看到如下效果😋

二.tags

在Google浏览器中随便进入一个网页，右键检查，会发现好多< >里面的东西，这些就是 tags，它们会告诉我们的browser 怎样显示layout

4399😛

主要框架

<!DOCTYPE html>
<html>
    <head>
       
    </head>

    <body>
       
    </body>
</html>

1.<!DOCTYPE html>

这是一个single tag，声明为 HTML5 文档

2.html

这是container tag ，有starting tag <html>和ending tag </html>组成，中间既可以包含其他的tags 也可以包含各种内容
注意到ending tag 就比 starting tag多一个斜杠
<html>是最高级别的tag，其他的内容都需要介于<html>和 </html>之间

3.head

相当于html文件的settings，起到一个description的作用，包含了文档的metadata（元数据）

4.body

顾名思义，是主体，body 部分show up可见的页面内容

<body>Hello World!</body>

网页中就会显示Hello World!

basic tags

1.title

文档名称

2.meta tag

charset

<meta charset="UTF-8">

"utf-8”是一种字符编码。charset=”utf-8”是告知浏览器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作

各种属性

<meta name="discription"  content="This  is my first website">

content属性

是必选属性，值为some_text,作用是定义与 http-equiv 或 name 属性相关的元信息

下面均为可选属性：

name属性

提供了名称/值对中的名称，name="",""中是值，可以为author,description,keywords,generator,revised,others等，作用是把

content属性关联到一个名称

其中，“keywords” 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类

3.h1 - h6

<h1> - <h6> 是heading tag

<h1> 定义最大的标题。<h6> 定义最小的标题。

<body>
        <h1>标题大小一目了然</h1>
        <h2>标题大小一目了然</h2>
        <h3>标题大小一目了然</h3>
        <h4>标题大小一目了然</h4>
        <h5>标题大小一目了然</h5>
        <h6>标题大小一目了然</h6>
</body>

效果如下：

4.p

用于标记一个段落

 	<body>
        <h1>This is my header</h1>
        <p>This is my paragraph</p>
    </body>

效果如下：

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间

    <body>
        <h1>This is my header</h1>
        <p>This is paragraph one</p>
        <p>This is paragraph two</p>
    </body>

效果如下：

b

标签规定粗体文本 (英文单词bold的意思是粗体)

<p><b>粗体</b>与非粗体</p>

i

标签显示斜体文本效果(英文单词italicized的意思是斜体)

<P><i>斜体</i>与非斜体</p>

 <P><i><b>粗斜体</b></i></p>
 <P><b><i>粗斜体</i></b></p>

5.br

我们在代码中有空行，实际在网页中显示出来并没有空行，于是要用到

可插入一个简单的换行符。

标签是空标签（它没有closing tag，因此这是错误的： ）

在 XHTML 中，把结束标签放在开始标签中，也就是

在 HTML 中， 标签没有结束标签。

在 XHTML 中， 标签必须被正确地关闭，比如这样： 。

        <P>相隔</p>
        <br><br><br><br><br><br><br><br>
        
        <P>甚远</p>

		<P>相隔</p>
        <br/><br/><br/><br/><br/><br/><br/><br/>

        <P>甚远</p>

效果如下：

6.hr

标签在 HTML 页面中创建一条水平线。

（horizontal rule tag)

在 HTML 中，<hr> 标签没有结束标签。

在 XHTML 中，<hr> 必须被正确地关闭，比如 <hr />

        <P>隔江</p>
        <hr /><hr />

        <P>相望</p>

效果如下：

7.big small

<big> 标签呈现大号字体效果。

使用 <big> 标签可以很容易地放大字体。这简直不能再简单了：浏览器显示包含在标签和其相应的标签之间的文字时，其字体比周围的文字要大一号。但是，如果文字已经是最大号字体，这个 <big> 标签将不起任何作用。

还可以嵌套<big> 标签来放大文本。每一个 <big> 标签都可以使字体大一号，直到上限 7 号文本，正如字体模型所定义的那样

标签呈现小号字体效果。

标签和它所对应的<big> 标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 标签将不起任何作用。

与 <big> 标签类似， 标签也可以嵌套，从而连续地把文字缩小,每个 标签都把文本的字体变小一号，直到达到下限的一号字

<P><big>大大大</big>中<small>小小小</small></p>

效果如下：

8.sub sup

标签可定义下标文本。

包含在 <\\sub> 标签和其结束标签 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的

标签可定义上标文本。

包含在 标签和其结束标签 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的

        <P>x<sup>2</sup></p>
        <p>Fe<sub>2</sub>O<sub>3</sub></p>

效果如下：

三.comments（注释）

<!–这里是注释–>

四.CSS（极简）

style 、 colors

<p style="color:blue">蓝蓝的大海</p>
<p style="color:red">红红的苹果</p>

效果：

<p style="color:blue">蓝蓝的大海</p>
<p style="color:white;background-color:black">🤭<br />黑<br />纸<br/>白<br />字</p>

效果：

<h1 style="color:orangered">标题</h1>
<p style="color:yellow;background-color:black">段落</p>

效果：

<body style="background-color: lightblue">
        
     <h1 style="color:whitesmoke">☁&emsp;&emsp;&emsp;&emsp;&emsp;☁☁☁☁ </h1>
     <p>蓝天白云</p>
</body>