首页 > 代码库 > HTML基础入门

HTML基础入门

2024-10-03 15:21:02   218人阅读

 

大家好,昨天我们简单的介绍了一下编辑器,今天我们就要用编辑器实际的操作了.

首先,我们要了解一下HTML.那么什么是HTML呢?

HTML:超文本标记语言(Hypertext Markup Language),写给浏览器的语言，目前网络上应用最广泛的语言。HTML也在不断的更新，最新版本已经出现了HTML5,HTML5新增了更多的标签和特性,也废除了不少的旧元素.

我们在编辑器中或记事本中写好的代码用浏览器中打开,最好用市面上一些主流的浏览器,比如:谷歌、火狐、苹果等等,不过最好还是不要用IE浏览器,因为IE低版本的兼容不是很好,到以后的学习或者工作的时候你会因为IE的兼容问题掉很多的头发的.

HTML元素是由开始标签和结束标签组成的,例:"<p></p>",虽然现在我们还不知道具体标签代表的意思，但标签一定是这样的格式：有一对开始<>和结束</>.

当然还有一些特殊的标签是单标签,就是只有开始<>,没有结束.但人家自带结束符,例:<hr/>   <img/> <br/>...

HTML的基本结构

<html>
    <head>
        <title>这是我的博客</title>
    </head>
    <body>
      这是我的身体.
    </body>
</html>
上面的例子是告诉浏览器<html>是一篇文章的开始,文档的最后一个标签是</html>,告诉浏览器结束了.<head></head>是头部文档信息,<title></title>是文档的标题,会显示在浏览器的窗口的标题栏,
文档的内容都是放在<body></body>之间的.
今天我们就先来了解一下HTML的一些常用元素(标签)和基本规范.


基本规范
1.在写<html>之前,要先写文档声明<!DOCTYPE HTML>,当然小写也可以,这是告诉浏览器该文档遵循html规范.
2.页面编码:编码的种类有多种,但常用的是utf-8.utf-8为多国语言编码(万国码),gb2312为中文简体编码.对于编码的详细问题,可以浏览博客.设置网页编码的语句为<meta charset= "utf-8" />,是在<head></head>标签内定义的.
刚开始我们了解这两点规范基本就够了,以后有需要规范的地方我们再细说.


常用元素

最常用的就是文本标签,例:
<body>
　　<p>
　　　　May-J-Wang的博客,求关注
　　</p>
</body>

在浏览器中打开就是这个效果

技术分享

就是定义一个段落,在写文章、新闻或有大量的文字时会用到.

换行符<br/>

换行对于文本编辑来说是最正常不过的了.当文字写满一行,需要换行.或者根据需要,在文本中换行,这都是可以的.

技术分享

标题

在一个网页中,文档会有大小不同的标题,用代码写分别为:

<h1>标题1</h1>             

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>
h后面的数越小标题越小.

技术分享

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

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

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

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

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

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

效果图如下：

技术分享

 超链接<a></a>

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

<a href="http://www.mamicode.com/#" target="_blank">百度一下</a> 

href的值可以是外部链接,也可以是内部文件,如***.html文件.

<a href=http://www.mamicode.com/“http://www.163.com”>外部链接

<a href=http://www.mamicode.com/“about.html”>内部链接 例:

技术分享

注:a标签上的文字样式是a标签自带的样式

 

图像<img/>

属性

属性值

说明

src

url

图片资源的地址

width

像素（px）百分比(%)

图片宽度

height

像素（px）百分比(%)

图片高度

alt

替代文字

图片的替代文字

 

<img src="http://www.mamicode.com/time1.jpg" width="100" height="100" alt="风景" />

技术分享

 列表

列表分为:<ul><li>无序列表</li></ul>,<ol><li>有序列表</li></ol>和<dl><dd>自定义列表<dd><dl>

<ul>
     <li>苹果</li>
     <li>香蕉</li>
     <li>雪梨</li>
 </ul>

技术分享

有序列表

有序列表使用数字或字母系统来组织列表里包含的信息.有序列表可以使用数字(默认)、大写字母、小写字母、大写罗马数字和小写罗马数字排列项目.

<ol>
      <li>樱桃</li>
      <li>西瓜</li>
      <li>菠萝</li>

</ol>

技术分享

 

<dl>

　　<dd>英雄联盟</dd>

　　<dd>守望先锋</dd>

　　<dd>魔兽世界</dd>

</dl>

技术分享

以上就是关于HTML的一些基础中的基础知识,HTML中还有很多常用的标签,明天我们接着说,再见了.

 

作者:May-J-Wang

 

HTML基础入门






























        

            
                
                  
                
                

                    联系

                    我们