首页 > > 网页制作 > css >

html基础用法（上）

2018-06-24 02:28:25来源：未知阅读 ()

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中表示的是定义列表。

是换行符。

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

超链接 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>

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，属性值：替代文字，说明：图像的替代文字

标题：

 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>