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

html简介和常用标签说明

程序员文章站 2022-06-10 15:41:51
什么是html? hyper text mark-up language 超文本标记语言 作用:开发静态页面 备注: html不是语言,是用来描述网页的一种语言。 通过执行...

什么是html?

hyper text mark-up language 超文本标记语言 作用:开发静态页面

备注:

html不是语言,是用来描述网页的一种语言。

通过执行。

可以分为两大版本

html4.01

html5

超文本标记语言(html)的第五次重大修改

html5 仍处于完善之中,大部分现代浏览器已经具备了某些 html5 支持

不同浏览器执行可能会有差异

对移动webapp支持良好

标签分类:单标签</br> 双标签<p></p>

html骨架结构:

<!doctype html>:指示web浏览器页面使用哪个html版本进行编写的指令

<html>

<head>

<meta charset="utf-8"> 设置字符码

<title>网站的标题</title>

</head>

<body></body>

</html>

html 文件的扩展名是 xxx.html

html结构说明:

<html>含义:告诉浏览器,网页的代码用什么格式解析。

<head>含义:告诉浏览器网页的文字用什么字符集,如果使用的字符集不正确,就会出现乱码。

字符集:   gb2312(ansi)--简体中文(汉子操作默认使用)    gbk--国标码   utf-8:多国语言 

<title>含义:便于搜索引擎

<body>含义:网站的内容,99%的内容都放入body标签中,只有放在该标签才能在窗口中显示。

html的书写规范:

html不区分大小写,但是w3c推荐使用小写

html标签嵌套,但是不能交叉嵌套 例如<html><body></html></body>

单标签一定要闭合 <br/>

属性:每一个标签有没有属性,如果有,有多少 都是由w3c规定。

属性值: 要用双引号引起来

html文本标签(格式化标签):

<font>:设置文本的颜色,文本的字体,文本的大小 双标签

<font ></font>

属性:

color 设置文本的颜色 例如 color="red" 或者 color="ff0000"

size 设置文本的大小 例如 size="5" 是以号为单位

face 设置文本的字体 例如 face="隶书"

属性之间没有先后顺序。 

练习:输入一段文本 设置该段的前五个字,文本为蓝色,blue #0000ff,文本大小为6号,文本字体为楷体。

html:注释  <--! 内容 -->

<b></b>加粗 <strong></strong>加粗 加强语气 <i></i>倾斜 <em></em>倾斜  加强语气

<u></u>下划线 <ins></ins>下划线 强调插入文本

<sup></sup>上标 <sub></sub>下标  例如: x<sup>2</sup> x的平方  h<sub>2</sub>o h2o 水

练习:输入一段文本,要求前6个字 文本颜色为蓝色 加粗 倾斜 加下划线  注意顺序嵌套 不能交叉

<p>标签:段落标签

<h1>--<h6>标题标签

属性:

align="center"设置居中 left right

练习:输入两段文字,在第一段的前面加一个标题二,标题二的内容居中

<pre></pre>预定义标签 保留原有的空白  有空格有回车 每个浏览器解析有所差异

<p></p>:是网站上使用的最多的标签之一,实际上没有很多的意义,独占一行,结合css一起使用 构成相应的效果 块级标签

<span></span>:本身没有任何含义,但是也是网站使用最多标签之一,结合css使用构成功能 行内标签

标签分类:块级标签--输入完标签之后独占一行 h1-h6 p p

  行内标签--输入完标签之后不是自己独占一行 em span u i b strong

</br>换行标签

<img src="图片地址" alt="" align="" width="" height=""/>图片标签 alt属性鼠标移至图片显示提示性的文字 align="middle" top bottom

链接地址分为:相对路径和绝对路径

1.绝对路径:从盘符开始的路径,例如:

c:\windows\system32\cmd.exe

2.相对路径:从当前路径开始的路径

../:当前目录的上一级目录

./:当前目录

/:服务器的根目录

a.文件在当前目录

page2.html访问page2image.jpg

<img src="page2image.jpg"/>

<img src="./page2image.jpg"/>

b.文件在上一层目录

page1.html访问image.jpg

<img src="../image/imgae.jpg"/>

page2.html访问image.jpg

<img src="../../image/image.jpg"/>

c.文件在下一层目录

page1.html访问site2下面的page2image.jpg

<img src="./site2/page2image.jpg"/>

<img src="site2/page2image.jpg"/>

d.根目录表示法

任何页面访问image下的image.jpg

<img src="/image/image.jpg"/>

<hr size="" color="" width="">

<a href="链接地址" target=""></a>  target="_blank" 浏览器总在一个新打开、未命名的窗口中载入目标文档

   _parent 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在*框架中,那么它与目标 _self 等效。

   _self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题[ <base> 标签中的 target 属性一起使用。]

   _top 这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

锚标记跳转到页面的顶部和底部

<a href="#helpme"></a>

<a name="helpme"></a>

<a href="mailto:邮箱地址">

<marquee scrolldelay="1000" direction="up">滚动文字或图像</marquee> 

 scrolldelay滚动延迟时间 默认90 direction 滚动的方向 默认从右向左