Duruofu's blog

Appearance

HTML基础学习 ​

1.HTML介绍： ​

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。

HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。 HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“<”和“>”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。

HTML文件的后缀为.html

2.编写第一个网页程序 ​

标签： ​

<标签> 开始标签.....中间就是内容..... </标签>结束标签

标题标签： ​
HTML
<h1>  </h1>
<h2>  </h2>
<h3>  </h3>

共有六级标题

段落标签 ​
html
<p> 这是一个段落 </p>
<p>这是另一个段落</p>
根标签,子标签（层级关系） ​
html
<html>
      <head>
                <title>   <title>
      </head>
      <body>
      </body>
</html>

根标签：

html
<html>    </html>

子标签（头部） 用户不可见，是给浏览器看的

html
<head>   </head>

子标签（身体） 用户可见部分

html
<body>    </body>

第一个网页示例： ​

HTML
<html>
      <head>
                <title> 第一个网页</title>
      </head>
      <body>
	<h1> 将进酒 </h1>
	<h2>  李白</h2>
	<h3>  </h3>
	<p>君不见黄河之水天上来，奔流到海不复回 </p>
	<p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
	<p>人生得意须尽欢，莫使金樽空对月。</p>
	<p>天生我材必有用，千金散尽还复来。</p>
      </body>
</html>

3.细化一个网页 ​

HTML注释 ​

html
<!-- 这是一个注释 -->

注释不可嵌套

标签的属性 ​

HTML 标签可以设置属性 属性可以在标签中添加附加信息 属性一般描述于开始标签，不用于结束标签 属性总是以名称/值对的形式出现，比如：name="value"。

html
 <h1>这是我的<font color="red">第二个</font>网页！</h1>

font 规定文本的字体、字体尺寸、字体颜色。

<font>   </font>

这里的color="red"就是属性，让中间字体变为红色。 属性和标签名或其他属性应该用空格隔开。 属性值应该始终被包括在引号内。 双引号是最常用的，不过使用单引号也没有问题。

HTML
<font color="red">第二个</font>

color就是属性名 red就是属性值 ，属性不能随便写，是有相应规定的。

添加了属性的网页代码： ​
html
<html>
    <head>
            <title>第二个网页</title>
    </head>
    <body>
        <h1>这是我的<font color="red">第二个</font>网页！</h1>
    </body>
</html>

4.网页的基本结构 ​

文档声明 ​

HTML5的版本声明 ​

文档声明用来告诉浏览器当前网页的版本，写在第一行

html
<!doctype html>
<!doctype HTML>

示例：

html
<!doctype html>
<htm>
    <head>
            <title></title>
    </head>
    <body>
        <h1>              </h1>
    </body>
</htm>
文档字符编码声明 ​

字符编码有很多方式，网页一般使用UTF-8字符集编码。 声明，置于head内部

html
 <head>
            <meta charset="utf-8">
</head>

完整基本结构： ​

html
<!doctype html>
<!--网页版本声明-->
<html>
<!--HTML的根标签-->
    <head>
        <!--子元素，头部（帮助浏览器解析网页）-->
        <meta charset="utf-8">
         <!--meat用来设置网页元数据--> 
        <title>标题</title>
         <!--网页的标题，搜索引擎搜索的就是这个-->
    </head>
    <body>
        <!--body是HTML的子元素，所有可见内容都应该写在body里-->
        <h1></h1>
        <!--网页的一级标题-->
    </body>
</html>