html 基础

---恢复内容开始---

HMLT

一,什么是HTML

       HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。

日常常用的HTML 版本是xhtml 1.0和html5

二,HTML基本结构

HTML XHTML 1.0 

生成快捷键为 html:xt + tab

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title> xhtml 1.0 文档类型 </title>
</head>
<body>

</body>
</html>

 

HTML HTML 5

生成快捷键为 !

<!DOCTYPE html>
<html lang = "en"> 

<head>
	<meta charset="utf-8">
	<title>个人主页</title>
</head>

<body>
	我的第一个主页
</body>

</html>

<html>标签中的‘lang=“en”’定义网页的语言为英文,定义成中文是'lang="zh-CN"',不定义也没什么影响,它一般作为分析统计用。

<head>  </head> 标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏。

<body> </body> 标签里面放显示在网页上的内容。

三,标题标签

<!DOCTYPE html>
<html lang = "en"> 

<head>
    <meta charset="utf-8">
    <title>标题标签</title>
</head>

<body>
    <h1> ...... </h1>
    <h2> ...... </h2>
        .....
    <h6>.......</h6>   
</body>

</html>    

<h1>...</h1>  一级标题

<h2>...</h3>  二级标题

...........

<h6>...</h6>  六级标题

 四,P标签

<!DOCTYPE html>
<html> 

<head>
    <meta charset="utf-8">
    <title>个人主页</title>
</head>

<body>
    <p> HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言。
    </p>>
</body> </html>

<p>  </p>标签定义一个文本段落,一个段落含有默认的上下间距,段落之间会用这种默认间距隔开

<p>  </p>标签只能放文本

五,空格、大于和小于、换行符、注释符

<!DOCTYPE html>
<html> 

<head>
    <meta charset="utf-8">
    <title>个人主页</title>
</head>

<body>
    <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,<br />标记指的是标签,是一种用来制作网页的语言。</p>
    <p> HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本
    <br />标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言。</p>
    <!--大于和小于-->
    10&gt;3
    3&lt;8
</body>

</html>

空格:&nbsp; (适用于小部分的空格)

大于 : &gt;

小于 : &lt;

换行符 : <br  />

注释符 : <! -- 注释的内容-->

六,html块标签、含样式的标签

 

<!DOCTYPE html>
<html> 

<head>
    <meta charset="utf-8">
    <title>个人主页</title>
</head>

<body>
    <div>
    <h1>快标签</h1>>
    <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,<br />标记指的是标签,是一种用来制作网页的语言。</p>
    <p> HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本
    <br />标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言。</p>
     </div>>
</body>

</html>

<div> 标签 块元素,表示一块内容,没有具体的语义。(里面可以其他标签)
<span> 标签 行内元素,表示一行中的一小段内容,没有具体的语义。

含样式和语义的标签

1、<em> 标签 行内元素,表示语气中的强调词
2、<i> 标签 行内元素,表示专业词汇
3、<b> 标签 行内元素,表示文档中的关键字或者产品名
4、<strong> 标签 行内元素,表示非常重要的内容

七,图片标签

<!DOCTYPE html>
<html> 

<head>
    <meta charset="utf-8">
    <title>个人主页</title>
</head>
    <img src="图片路径" atl="图片名称"/>
<body>

</body>

</html>

<img>标签可以在网页上插入一张图片,它是独立使用的标签,它的常用属性有:

  • src属性 定义图片的引用地址
  • alt属性 定义图片加载失败时显示的文字,搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片,所以此属性非常重要。

注意:scrz的路径尽量为相对路径

补充:绝对路径和相对路径

像网页上插入图片这种外部文件,需要定义文件的引用地址,引用外部文件还包括引用外部样式表,javascript等等,引用地址分为绝对地址和相对地址。

  • 绝对地址:相对于磁盘的位置去定位文件的地址
  • 相对地址:相对于引用文件本身去定位被引用的文件地址

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件,相对路径就没有这个问题。相对路径的定义技巧:

  • “ ./ ” 表示当前文件所在目录下,比如:“./pic.jpg” 表示当前目录下的pic.jpg的图片,这个使用时可以省略。

  • “ ../ ” 表示当前文件所在目录下的上一级目录,比如:“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

---恢复内容结束---

原文地址:https://www.cnblogs.com/xingyuyu/p/11657897.html