html_lesson1_html简介和常用标签

什么是html?
hyper text mark-up language 超文本标记语言 作用:开发静态页面
备注:
HTML不是编程语言,是用来描述网页的一种语言。
通过浏览器执行。


可以分为两大版本
HTML4.01
HTML5


超文本标记语言(HTML)的第五次重大修改
HTML5 仍处于完善之中,大部分现代浏览器已经具备了某些 HTML5 支持
不同浏览器执行可能会有差异
对移动webapp支持良好




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


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>预定义标签 保留原有的空白  有空格有回车 每个浏览器解析有所差异


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


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


标签分类:块级标签--输入完标签之后独占一行 h1-h6 p div
  行内标签--输入完标签之后不是自己独占一行 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 滚动的方向 默认从右向左


 


bgcolor 背景色 background 背景图片



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值