欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

html基础用法（上）

程序员文章站 2023-12-29 17:12:10
html的定义： html超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片，链接，甚至音乐，程序等非文字语言。 超文本标记语言的结构包括“头”部分（head），和“主体”部分（body），期中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。 超文本标记语 ......

html的定义：

html超文本标记语言，标准通用标记语言下的一个应用。

“超文本”就是指页面内可以包含图片，链接，甚至音乐，程序等非文字语言。

超文本标记语言的结构包括“头”部分（head），和“主体”部分（body），期中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

超文本标记语言是标准通用语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

html的基本结构：

1 <html>
2          <head>
3                   <meta charset="utf-8">
4                   <title></title>
5          </head>
6          <body>
7          </body>
8 </html>

从上面可以看的，第一个<html>是告诉浏览器这是html文档的开始，然后最后一个</html>是告诉浏览器这是html的终止。标签<head>  之间的文本是头部信息，<title>

之间的文本是文档标题，会显示在浏览器窗口的标题栏。<meta charset="utf-8">是设置网页编码的语句，让浏览器读取到本编码属于utf-8。<body>之间的是文本的正文。

html的标签元素：

 1 <html>
 2          <head>
 3                   <meta charset="utf-8">
 4                   <title></title>
 5          </head>
 6          <body>
 7                    <ul type="disc">
 8                         <li>这是无需列表</li>
 9                         <li>这是无序列表</li>
10                         <li>这是无序列表</li>
11                    </ul>
12                    <ol type="a" start="1">
13                         <li>这是有序列表</li>
14                         <li>这是有序列表</li>
15                         <li>这是有序列表</li>
16                    </ol>
17                    <dl>
18                         <dt>标题一</dt>
19                              <dd>123</dd>
20                              <dd>321</dd>
21                         <dt>标题二</dt>
22                               <dd>344</dd>
23                               <dd>455</dd>
24                         <dt>标题三</dt>
25                               <dd>676</dd>
26                               <dd>665</dd>
27                    </dl>
28                    <p>好好学习天天向上！</p><p>好好学习天天向上！</p><p>好好学习天天向上</p>
29                    好好学习天天向上！<br />好好学习天天向上！<br />好好学习天天向上!<br/>
30           
31          </body>
32 
33 </html>

 <ul>在html中表示的是无序列表，其中属性type有属性值：disc（列表前的符号：实心圆点）circle（列表前的符号：符号为空心圆）square（列表前的符号：符号为方形）。

<ol>在html中表示的是有序列表，其中属性type有属性值：1，a，A，i，l（用来设置项目前面的标记），属性start属性值是：数值（排序的起点数值）。

<dl>在html中表示的是定义列表。

<br />是换行符。

<p>标签是用来定义一个段落，也可以用来换行。

超链接 1 <html> 2 1 <html>

 1 <html>              
           <head>        
                    <meta charset="utf-8" />
 4                  <title>超链接</title>
 5         </head>
 6         <body>
 7                  <a href="http://www.baidu,com" target="_blank">百度一下</a>
 8                  <a href="http://www.jd.com" target="_self">到京东</a>
 9                  <a href="#target">点我跳到指定的位置</a>
10                  <p>学习编程没有捷径</p>
11                  <p>学习编程没有捷径</p>
12                  <p>学习编程没有捷径</p>
13                  <p>学习编程没有捷径</p>
14                  <hr width="500" color="red" size="5" align="center">
                    <a name="target">跳到这里来！</a>

15                  <p>学习编程没有捷径</p>
16                  <p>学习编程没有捷径</p>
17                  <p>学习编程没有捷径</p>
18         </body>
19 </html>

定义超链接<a href="URL"></a>

a标签用来定义一条超链接，其中要有的是href属性，href的作用是指明超链接要链接到的网址。除了href属性，还有title属性表示连接的提示信息。target属性表示链接的打开方式，即当点击了链接，选择是在另一个页面打开还是在本页面打开。其属性值包括_blank（新的空白页），_self（当前页），_top（当前页）

<a href="#target" _blank>百度一下</a> href 的值可以是外部链接，也可以是内部文件，如***.html

锚点：有时候我们在浏览网页会发现，有些网页比较人性化，会有点击返回的按钮。这样的效果其实用锚点标签就能做到。锚点就是点击使用户跳到文档的某个部分。上面的：

<a href="#target">带你我跳到指定位置</a>

<a name="target" >调到这</a>

align.可以对段落进行设置。属性align的值包括left（左对齐），center（居中），right（右对齐）。

img标签：

 

1 1 <html> 
2 2          <head>
3 3                   <meta charset="utf-8" />
4 4                   <title>坂井泉水真美！</title>
5 5          </head>
6 6          <body>
7 7                    <img src="bjqs.jpg" width="500" height="500" title="女神啊！" alt="图片损坏" />
8 8          </body>
9 9 </html>

 

属性：src，属性值：url，说明：图像资源的地址

属性：width，属性值：像素（px），说明：图像宽度

属性：height，属性值：像素（px），说明：图像高度

属性：alt，属性值：替代文字，说明：图像的替代文字

html基础用法（上）

标题：

 1 <html>
 2          <head>
 3                    <meta charset="utf-8" />
 4                    <title>标题</title>
 5          </head>
 6          <body>
 7                    <h1>标题一</h1>
 8                    <h2>标题二</h2>
 9                    <h3>标题三</h3>
10                    <h4>标题四</h4>
11                    <h5>标题五</h5>
12                    <h6>标题六</h6>
13          </body>
14 </html>

html基础用法（上）

文本格式化，一些常用于设置文本字体的元素：

<b>定义粗文本</b><br />

<i>定义斜文本</i><br />

<del>定义删除文本</del><br />

<sup>定义上标字</sup><br />

<sub>定义下标字</sub><br />

上一篇：

下一篇：

推荐阅读