该文章主要写了如下几个方面:
1.前端包含的内容
2.常见的浏览器及其内核
3.html基本结构及标签
4.图片img标签的用法
5.在html中几种常见的相对路径
一、 前端简介
- 前端主要包括以下三种内容:
- html:在网页中真实存在的文本、图片、输入框、按钮、音视频等都属于html的范畴
- css:就是给HTML进行装饰的内容
- javaScript(简称js):网页中进行交互的内容一般都是js
- 常见浏览器及其内核:
- IE:trident内核
- Firefox:gecko内核
- safari:webkit内核
- Chrome:webkit的分支blink内核
- web标准
Web标准由万维网联盟(W3C)制定的用于规范web编写的标准集,主要包含以下内容:- 结构:html
- 表现:css
- 行为:javascript
二、 HTML
-
HTML简介
HTML(Hyper Text Markup Language):超文本标记语言,主要是通过HTML标记对网页中的文本、图片、按钮等内容进行描述。
学习HTML就是学习其中的各种标签/标记/元素。 -
html基本标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
-
HTML基本标签解释
- <!DOCTYPE html> :版本类型声明 ,告诉浏览器你用的哪个版本的语言书写的
- <html></html>:网页的根标签,包括头部<head></head>标签和主体<body></body>标签两大部分
- <head></head>:头部标签,关于网页的配置信息,该标签里的内容不能直接在网页中体现
- <meta>:用于配置一些头部信息,比如字符集charset等等,常见的charset如下:
- utf-8:目前最常见的、包含世界上所有国家的字符。
- gb2312:简单中文,包括6763个汉子
- BIG5:繁体中文,港澳台等地使用
- GBK:包含全部中文字符,是GB2312的扩展,支持繁体字,兼容gb2312
- <title></title>:标题标签,该标签中的内容显示在浏览器的选项卡中
- <body></body>:主体标签,所有直接在网页中显示的内容都要写在该标签下。
-
HTML常用标签
- <h1></h1>:标题标签,一共有6级
- <hr>:水平线标签
- <p></p>:段落标签
- <font></font>:文本标签
- <br>:换行标签
- <!–注释–>
- <img>:图片标签
-
标签的类型
- 双标签:有开始有结束的标签,列如:<body></body>标签、<p></p>标签、<h1></h1>标签
- 单标签(自结束标签):只有一个开始标签,例如:<hr>标签、<br>标签、<img>标签
-
标签间的关系
- 嵌套/包含/祖先与后代的关系,例如:<html><body></body></html>之间的关系
- 并列/同级/兄弟关系,例如:<head></head>标签和<body></body>标签之间的关系
-
图片标签及其属性
插入图用<img>标签标记,语法如下:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="图片的路径" width="设置图片的宽度,默认单位px,当单独分别设置宽度或者高度时,宽高会跟着等比例缩放" height="设置图片的高度,默认单位px,当单独分别设置宽度或者高度时,宽高会跟着等比例缩放" border="设置图片的边框" title="用于设置鼠标悬停时的提示文字" alt="当图片加载不出来时,出现的提醒文字"> </body> </html>
-
路径
- 路径:网页和其他文件的位置关系
- 路径是忽略大小写的
-
相对路径
- 同级相对路径
- 网页和其他文件在同一个文件夹目录下,有两种书写方式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--第一种 --> <img src="mm.jpg"> <!-- 第二种 ./表示当前文件所在目录--> <img src="./mm/jpg"> </body> </html>
- 下一级相对路径
- 当其他文件在另一个目录下时,需要准确的写出目录的名字,有几个写几个;
- 目录名/目录名/…/文件名称 相当于双击鼠标的动作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="wc/1/mm.jpg"> </body> </html>
- 上一级相对路径
- 网页在其他文件夹下时,需要返回上一级,有几级就返回几级
- …/…/…/文件名称,是鼠标点击返回的动作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="../../../mm.jpg"> </body> </html>
如有错误,欢迎斧正;如有疑问,欢迎留言讨论。