0
点赞
收藏
分享

微信扫一扫

Web-HTML特征及基本语法

一枚路过的程序猿 2022-03-15 阅读 95

一.HTML介绍:

HTML(hyper text markup language)超文本标记语言。

其发展版本主要有HTML4.0,HTML5和XHTML.

现如今,HTML5较为普遍适用于架构web网站。

HTML5在HTML4.0的基础上,对webforms2.0和webapp1.0进行了拓展。

二.HTML5的特征:

1.HTML5是一个独立的新的超文本标记语言。

2.HTML5坚持web结构,表现,行为分离的原则。

3.对表现结构元素等有了更为细化的更新。

4.在本地内嵌了数据库系统。

5.与CSS,JAVAscript结合。

三.HTML基本元素:

1.文档类型及注释:

<!DOCTYPE html>
<html>
  <body>
    <!--这是一个演示注释的页面-->
    <p>要显示的页面内容</p>
  </body>
</html>

Output:

 代码分析:

<!DOCTYPE html>

这行代码是我们在架构web网页的时候,必不可少的一行代码。

它定义了我们后续代码架构的网站都基于HTML5下的网站

<html>
.....
</html>

<html> </html>让我们在其中去给网站编码,这个的作用更像是为我们的代码确定了一个范围。

当作编码要求吧,必须要有。

 注意前后对应。

<body>
...
</body>

作用:确定规范网站内容的代码范围

说明省略号内的代码是架构网站的内容本体部分。

也是为代码确定了一个范围。

注意前后对应。

<!--这是一个演示注释的页面-->

作用:标准的注释格式

<!--你的注释-->

<p>要显示的页面内容</p>

作用:标准输出

这行代码有明显的输出结果。

这也是<p>...</p>的作用。将省略号的内容输出到网页上

同时要重点注意:<p>所在的层次。

<p>在哪层,就在哪层输出内容。

如例,因为在<body>层次下,所以在网页内容部分进行输出。

2.文档的基本结构:

<!DOCTYPE html>
<html>
  <head>
    <!-- 文档头部信息 -->
    <p>这里是文档头部</p>
  </head>
  <body>
    <!-- 网站页面内容 -->
    <p>这里是页面内容</p>
  </body>
</html>

Output:

 

<head>
    <!-- 文档头部信息 -->
  </head>

作用:确定规范文档头部信息的代码范围

这个与上文的<body>是一个类型的。

只不过<head>的范围是文档的头部信息。

在输出网站上可能看不出头部信息与网站内容的差别。

但只要记住

头部信息是在简单感慨或介绍这个页面内容。

头部信息位置是在页面内容之上的。

就很好分清头部信息与页面内容的作用。

3.标题及字符集:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />      <!-- 页面编码字符集 -->
    <title>标题与字符集</title>	   <!-- 页面标题 -->
  </head>
  <body>
    <p>页面内容</p>
  </body>
</html>

Output:

 

<meta charset="UTF-8" />      <!-- 页面编码字符集 -->

作用:定义了页面编码字符集

这听起来似乎有点不太容易理解。

你只要理解为,这个元素定义了这个网站说哪国话就好了。

“UTF-8”这个字符集是支持中文的,这样才不会出现中文乱码。这也是我们较为常用的字符集。

同时,要注意:此元素必须定义在<head>层下。

<title>标题与字符集</title>	   <!-- 页面标题 -->

作用:定义网站标题。

 4.HTML元素嵌套:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML元素的嵌套</title> 
  </head>
  <body>
    <h1>标题1</h1>
    <h1>标题2</h1>
    <h1>标题2</h1> 
    <nav>
        <a href=”html.html”>HTML</a>
        <a href=”js.html”>简介</a>
        <a href=”css.html”>联系方式</a>     
    </nav>
  </body>
</html>

Output:

 

  <h1>...</h1>

作用:把内容以黑体一号字格式输出。

与之近似的还有

<h2>...</h2>--黑体二号字等。

<nav>
    <a href=”html.xxx”>xx2</a>
</nav>

作用:定义了一个名为xx2的导航,这个导航导向html.xxx。

注意 导航元素需定义在<nav>层下。

5.块级元素:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML元素的嵌套</title> 
  </head>
  <body>
    <header>
      <h1>欢迎光临</h1>
      <p>哈喽哈喽</p>
    </header>
    <nav>
       <a href=”html.html”>HTML</a>
       <a href=”js.html”>简介</a>
       <a href=”css.html”>联系方式</a>
    </nav>
    <section id=”html4”>
      <h2>HTML4.01<h2>
      <p>……</p>
    </section>
    <section id=”xhtml”>
    <h2>XHTML1.0<h2>
      <p>……</p>
    </section>
    <section id=”xhtml”>
    <h2>HTML5<h2>
      <p>……</p>
    </section>
    <footer>本文档创建于2022-3-15</footer>
  </body>
</html>

Output:

 

<section id=”html4”>
      <h2>HTML4.01<h2>
      <p>……</p>
    </section>

这几行代码其实是由两部分元素组成。

分别是

分块元素:

<section>
     ....
    </section>

作用:把网页内容分为若干个板块,使网页结构更加清楚。

可以在板块内规划其内容显示。

标签元素:

<id=”xxx”>

作用:给某一区块打上自定义的标签。方面编程者后续查看

标签对于用户是不可见的。

 <footer>本文档创建于2022-3-15</footer>

作用:输出一个脚标。

脚标一般多为编辑日期或编辑人等等。

6.字符引用:

<!DOCTYPE html>
<html>
  <head>
    <title>字符引用</title> 
  </head>
  <body>
    <h1>字符引用</h1>
    <h2>使用空格</h2>
    <p>使                        用                        空                        格</p>
    <p>使&nbsp;&nbsp;&nbsp;&nbsp;用&nbsp;&nbsp;&nbsp;&nbsp;空&nbsp;&nbsp;&nbsp;&nbsp;格</p>
    <h2>显示一个标签</h2>
    <p>&lt;h1&gt显示一个标签&lt;/h1&gt</p>     
    <h2>几个特殊字符</h2> 
    <p>注册商标:&reg;</p>
    <p>版权:&copy;</p>
    <p>欧元:&euro;</p>
  </body>
</html>

Output:

 

空格引用:

    <p>使                        用                        空                        格</p>
    <p>使&nbsp;&nbsp;&nbsp;&nbsp;用&nbsp;&nbsp;&nbsp;&nbsp;空&nbsp;&nbsp;&nbsp;&nbsp;格</p>

方法一:直接在内容里面加空格。(硬核加空格)

方法二:用&nbsp代替一个Tab。

<>引用:

    <h2>显示一个标签</h2>
    <p>&lt;h1&gt显示一个标签&lt;/h1&gt</p>

&lt 代表 <

&gt 代表 >

还有一些特殊字符,看图理解就好啦。

7.引用图像:

<!DOCTYPE HTML>
<html>
  <head>
     <title>HTML的长度示例</title>
  </head>
  <body>
    <p>用像素数设置图像宽度和高度:<br/>
       <img src="img/img_1.jpg" width="200" height="200" />
    </p>
    <hr/>
    <!--hr/输出一条直线。-->
    <p>用百分比设置图像宽度:<br/>
       <img src="img/img_1.jpg" width="80%" height="200" />
    </p>
  </body>
</html>

Output:

  在引用图像时,要注意的一点的是img src="这里要放图像的绝对路径"。

不然可能会不显示图像。

其他的很好理解。

举报

相关推荐

0 条评论