一、基础语法
1. 什么HTML
HTML(Hypertext Markup Language) - 超文本标记语言
标记语言 - 在不同的文本中加不同的标记让文本的意义和功能不同, 例如:markdown、html
HTML大小不敏感: html == Html == HTML == hTMl (小写和大写功能一样)
2. 标签 - 就是标记,
标签是HTML的基本结构,不同的标签功能不一样
语法:
双标签(标准标签): <标签名 属性1=属性值1 属性2=属性值2 …>标签内容</标签名>
单标签: <标签名 属性1=属性值1 属性2=属性值2 …> 或者 <标签名 属性1=属性值1 属性2=属性值2 …/>
说明:
a.<>和/ - 固定写法
b.标签名 - 不是程序员自己命名,有哪些标签名是html规定好的。哪些标签是双标签哪些标签是单标签也是固定。
注意:标签名前后不能随意添加空格
c.属性 - 以 属性=属性值 的形式存在,多个属性之间用空格隔开; 不同的标签有哪些属性是确定的;
属性值不管是什么值都必须放在""中
d.标签内容 - 双标签开始标签和结束标签中间的部分就是标签内容;
标签内容很灵活可以是独立的文本,也可以是一个标签,还可以多个标签或者多个标签和文本的组合。
3.标签的分类
1)从可见性来分:
可见标签:p标签、a标签、 img标签
不可见标签:meta标签、tyle标签、script标签、link标签…
2)head中的标签和非head中的标签(body标签)
head中标签: meta、title、style、link、script、base
body标签:p、a、b、img、table、lable、 ul、ol、li等等、style、link、script、base
二、head中的标签
head中可以使用的标签: meta、title、link、style、script、base
meta标签 - 网页元数据,主要用来对网页进行基本设置,包括:设置文本编码方法、设置网页搜索关键字、网页简介、网页类型等
title标签 - 网页标题
link标签 - 导入外部文件(导入图片作为网页图标、导入外部样式表)
link标签的使用
rel属性 - 设置导入文件的作用。 stylesheet:外部样式表 icon:网页图标
type属性 - 指定导入文件的类型和后缀。 文件类型/文件后缀名
text/css: 导入一个后缀是.css的文本文件
image/png: 导入一个后缀是.png的图片文件
href属性 - 设置被导入的文件的路径
1.<!-- <link rel="icon" type="image/ico" href="img/baidu.ico"/> -->
2. <link rel="icon" type="image/ico" href="img/jd_logo.ico"/>
文件路径的写法:
1. 绝对路径: 文件在计算机中的全路径
例如:/Users/yuting/授课/Python2003/02-web前端/day1-HTML基础/img/baidu.ico
2. 相对路径:
1) 使用.表示当前目录(当前写代码的文件对应目录地址表示当前目录)
. - 表示当前目录
例如:当前html文件中,相对路径的.表示: /Users/yuting/授课/Python2003/02-web前端/day1-HTML基础
./img/baidu.ico
2.使用…表示当前目录的上层目录
3.使用…表示当前目录的上层目录的上层目录