html基础用法(上)

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

新老客户大回馈,云服务器低至5折

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

标题:

 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>

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

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

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

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

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

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

实体字符:

&gt;    大于号(>)

&lt;     小于号(<)

&quot;   引号(")

&reg;      注册商标

&copy;    版权

&amp;     &copy;

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:html div内第二行文字显示不下的时候才用省略号代替 css实现

下一篇:课时92.CSS元素显示模式转换(掌握)