一、HTML初识
用< >来表示的都叫标签
(一)标签分类
html标签(根标签):是所有html中标签的一个根节点
head标签(头标签):用于存放title、meta、base、style、script,link
body标签(主体标签):主体部分
(二)标签关系
(我们用代码来表达网站中的文字、图片、链接等元素)
html标签分类:双标签:<....> </....>
; 单标签:<.... />
“/”为关闭结束符号,例:<br />
为换行
head和body是并列关系、上下关系
例:<head></head>
; <body></body>
head和title是嵌套关系(父子关系)
例:<head></head>
; <title></title>
注:标签之间要么是嵌套关系,要么就是并列关系,不会有穿插之类的关系。
例:
<head></head><body></body>
正确
<strong><div></div></strong>
正确
<head><title></head></title>
错误
<body><div></div></body>
正确
如果两个标签之间的关系是嵌套关系,那么在写代码时,子元素最好缩进一个tab键的身位;如果是并列关系,最好是上下对齐(左对齐)。
二、开发工具
(一)开发工具
Dreamweaver、sublime、webstorm、H Builder、Visual Studio Code
目前使用的是 sublime软件
使用方法:打开软件后,ctrl+s保存到桌面或文件夹命名为“文件名.html”
快速生成html骨架的方法:输入html:5 —— 按teb键
输入! ——按teb键
标准语法格式图
(二)文档类型:
其中<!DOCTYPE html>
表示我们使用的是html5
“UTF-8”字符集,是目前最常用的字符集编码方式
常用的字符集:
gb2312 简体中文
BIG5 繁体中文
GBK 包含全部中文的字符,简体+繁体
UTF-8 包含全世界所有国家需要的字符
(三)html标签的语义化
标签语义化指的是标签的含义
html和css是两种完全不同的语言
三、HTML标签
(一)、排版标签:
排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签。
1、标题标签:是单词head的缩写单词 <h></h>
有<h1><h2><h3><h4><h5><h6>
6种(这6种的重要性是从<h1>-<h6>
依次递减的)
<h1>
一般都是留给LOGO使用的
2、段落标签:是paragraph单词的缩写 <p></p>
3、水平线标签:是单词horizontar的缩写单词 <hr />
是一个单标签,可以加一条水平分割线。
4、换行标签:<br />
单标签
5、div span 标签:(它们呢是没有语义的,相当于两个盒子)
(二)文本格式化标签
文本格式化标签图
<b></b><strong></strong>
粗体,(xhtml推荐使用strong)
<i></i><em></em>
斜体,(xhtml推荐使用em)
<s></s><del></del>
加删除线,(xhtml推荐使用del)
<u></u><ins></ins>
加下划线,(xhtml不能用u)**
其中<b><i><s><u>
只有使用,没有强调的意思
<strong><em><del><ins>
语义更强烈
(三)标签属性
语法格式:<标签名 属性1="属性值1"> 属性2="属性值2"...>
内容</标签名>
例:“水平线的长度为500”,颜色为红色
<hr width="500" color="red"/>
注:
1、标签可以拥有多个属性,必须卸载开始标签中,位于标签名的后面;
2、属性之间不分先后顺序,标签名与属性、属性与属性之间必须以“空格”分开;
3、任何标签的属性都有默认值,省略该属性则自动取默认值。
采取键值正确的格式:Key=”Value”的格式 (key指属性,value指属性值)
标签属性实例图
(四)图像标签
是单词image的缩写
语法格式:<img src="图像URL">
src指的是路径属性
<img />
标记属性图
图像标签实例代码图
图像标签实例效果图
**问题
图像标签中插入图片时代码语法无误但是图片显示不出来。
解决方案:
1.将图片移入文件的同根目录文件夹
2.在图像文件名前加入../来追踪路径,有几层文件夹,就用多
少个../
3.直接复制图像的路径+文件名