Html是Hyper Text Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容文件渲染成网页,显示的网页可以从一个网页链接跳转到另一个网页。
二、Html标签语法
1、成对标签html中标签分为 :成对标签和自闭合标签【空标签】
成对出现,有开始标签必须有结束标签,内容包裹在两个标签中,而且开始标签名和结束标签名一致,并且结束标签必须以斜杠/开头
语法:
<font>内容</font>
2、自闭合标签
只有一个标签,用斜杠结束,斜杠也可以省略
语法:
<br/>
注意事项:
- 成对标签中,结束标签必须以斜杠开头
- 成对标签与成对标签可以嵌套不能交叉
- 标签名不区分大小写,但是我们都必须小写
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>
1、!DOCTYPE
2、html!DOCTYPE html是文档声明,定义文档类型为html,并且告诉不同的浏览器用标准方式进行解析html语言,如果不写的话,会产生怪异模式,所谓怪异模式,就是浏览器会用自己的方式进行解析,不同的浏览器有各自的解析方式,从而会出现无效果、不兼容等问题。
注意,html中有两种声明类型,一种叫做xhtml,即html,另一种叫做html5,html5是xhtml的升级版,所以我们建议使用html5的声明方式
xhtml声明方式:
<htmlxmlns="http://www.w3.org/1999/xhtml">
html5声明方式:
<!DOCTYPE html>
3、headhtml是html文档的整体,也就是表示一个网页。
html中的lang="en"是定义该文件语言是英文
4、metahead是html的第一层子元素【子标签】,负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和JavaScript文件等。设置的内容不会显示在网页上,标题的内容会显示在标题栏中。即title标签。
meta是html语言head标签中的一个辅助性标签,该标签不包含任何内容,但是该标签的属性定义了与文档相关联的名称,比如:编码
<meta charset="utf-8"></meta>
5、body
四、Html文档规范body也是html的第一层子元素,我们页面中显示的所有内容全部都是编写在该标签体中。
五、Html注释html制定了文档的编写规范,必须遵守。
所有的标签必须小写
所有的属性必须用双引号括起来
六、html基本属性html文档代码中可以插入注释,注释是对代码的说明和解释,注释的内容不会显示在页面上。
注释的语法:
<!-- 注释的内容 -->
注:属性是标签的辅助作用。
属性 描述 bgcolor 设置网页的背景颜色 background 设置网页的背景图片
1.bgcolor设置网页的背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<title>html的属性</title>
</head>
<body bacolor="pink">
</body>
</html>
2.路径
我们在开发网页时,需要经常的插入图片、视频、文件等一些操作,但是我们需要指定文件所在的位置,这个位置就是所谓的路径
路径分为:
- 相对路径 指目标相对于当前文件的路径,网页结构设计中多采用这种方式来表示目标的路径。相对路径有多种表示方法,其表示的意义不尽相同。表示方法如下: ./ :代表文件所在的目录(可以省略不写)../ :代表文件所在的父级目录../../ :代表文件所在的父级目录的父级目录/ :代表文件所在的根目录【/ : 可以理解为目标文件的绝对路径】
- 绝对路径 指目标文件的完整路径,从盘符开始。
设置网页的背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<title>html的属性</title>
</head>
<body background="../images/10.jpg">
</body>
</html>
七、Html标签1.网页的组成注意事项:
bgcolor和background不能同时使用
background不能指定绝对路径
2、文本段落标签网页的组成:文字、图片、视频、超链接、列表、表格、表单等组成。
标签 描述 hn 设置文字标题【n:取值范围 1~6】 center 居中对齐 hr 水平线 属性(width:宽度 color:颜色 size:粗细) br 换行 p 段落
3、文本控制标签标签 描述 font 设置字体,需要借助属性设置
属性 描述 color 设置字体颜色 size 设置字体大小,不需要带单位,取值范围:1~7【浏览器默认值:3】 face 设置字体风格
<font size="2" color="red" face="黑体"></font>
4、文本格式化标签
标签 描述 b 定义粗体文本 em 定义着重文字 i 定义斜体文字 small 定义小号字 strong 定义加重语气 sub 定义下标字 sup 定义上标字 ins 定义插入字 del 定义删除字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html文本格式化标签</title>
</head>
<body>
<b>粗体文本</b>
<i>倾斜文本</i>
<em>着重文本</em>
<small>小号字</small>
<strong>加重语气</strong>
<sub>上标</sub>
<sup>下标</sup>
<ins>插入字</ins>
<del>删除字</del>
</body>
</html>
5、图片标签
在Html中,图像由
标签定义。
是空标签,意思是说,它只包含属性。
要在页面上显示图像,你需要使用源属性(src)。src指"source"。源属性的值是图像的URL地址。
标签 描述 img 图片标签
属性 描述 src 指定图片的地址 width 设置图片的宽度 height 设置图片的高度 alt 设置图片的预备文本
6、audio注意事项:不建议设置图片大小,容易失真
在Html中,声音由标签定义。
标签 描述 audio 声音标签
属性 描述 src 指定声音地址
<audio src="nice.mp3">对不起,您的浏览器不支持</audio>
7、video
在Html中,视频由video标签定义
标签 描述 video 视频标签
属性 描述 src 指定视频地址
<video src="美女.mp4">对不起,您的浏览器不支持</video>
8、超链接
a标签定义超链接,用于从一个页面链接到另一个页面。
a标签最重要的属性是href,它指定链接的目标。
在所有浏览器中,链接的默认外观如下:
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
语法:
<a href="链接目标">点击内容</a>
属性 描述 href 指定链接目标 name 指定锚的名称 download 指定下载链接 target 指定跳转方式 属性值 描述 _blank 新窗口打开【常用】 _parent 在父窗口中打开链接【了解】 _self 默认,在当前窗口打开【了解】 _top 在当前窗体打开链接,并替换当前的整个窗体【了解】 framename 到 iframe 在讲【常用】
超链接分类:
- 内部链接 链接目标:本地页面 <a href="demo.html">点击内容</a>
- 外部链接 链接目标:外部页面 <a href="http://www.baidu.com">点击内容</a>
- 多媒体链接 链接目标:图片、视频等 <a href="images/美女.jpg">点击内容</a>
- 电子邮件链接 链接目标:电子邮件【系统自带的电子邮件】 <a href="mailto:12345@qq.com">点击内容</a>
- 锚链接 链接目标:锚点 1.建立锚点
<a name="锚点名"></a>
2.跳转
<a href="#锚点名">点击内容</a>
1.有序列表列表的使用与word等软件的列表概念相似,只不过是应用在网页展示中。
有序列表是指有数字编号或字母的列表项,可以使用css定义更多样式。
<!-- 有序列表 -->
<ol type="a">
<li>新闻一</li>
<li>新闻二</li>
<li>新闻三</li>
</ol>
属性 描述 type 设置符号类型 值:1 a A I i 默认数字 start 从第几个开始【用于ol标签中】 value 从第几个开始【用于li标签中】
<!-- 有序列表 -->
<ol type="a" start="4">
<li>新闻一</li>
<li type="1" value="1">新闻二</li>
<li>新闻三</li>
</ol>
无序列表是指没有数字编号或字母的列表项,可以使用css定义更多样式。
<!-- 无序列表 -->
<ul>
<li>童装</li>
<li>男装</li>
<li>女装</li>
</ul>
属性 描述 type 用于设置符号类型,默认:实心圆 值:空心圆、正方形 【用于ul、li】
<!-- 无序列表 -->
<ul type="square">
<li>童装</li>
<li type="circle">男装</li>
<li>女装</li>
</ul>